.mechanical-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.4; /* Slightly reduced opacity for better readability */
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.05) 0px,
        rgba(255, 255, 255, 0.05) 20px,
        transparent 20px,
        transparent 40px
    );
}

/* Base style for all text elements in the pattern */
.mechanic-name {
    position: absolute;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 16px; /* Slightly smaller font size */
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(212, 175, 55, 0.15); /* Updated to gold yellow color */
    transform: rotate(45deg);
    white-space: nowrap;
    user-select: none;
    z-index: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .mechanic-name {
        font-size: 14px;
    }
    
    /* Reduce density on mobile by hiding every other element */
    .mechanic-name:nth-child(even) {
        display: none;
    }
}

/* Hide even more elements on very small screens */
@media (max-width: 480px) {
    .mechanic-name:nth-child(3n) {
        display: none;
    }
    
    .mechanic-name {
        font-size: 12px;
    }
}

/* Subtle hover effect for text elements */
@media (hover: hover) {
    .mechanic-name:hover {
        color: rgba(139, 0, 0, 0.3);
        transition: color 0.5s ease;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .mechanic-name {
        opacity: 0.1;
    }
}

/* Update background animation colors */
/* Update animation colors to match new logo */
.spark {
    background-color: var(--accent-color);
}

.gear {
    border: 4px solid var(--secondary-color);
}

.moving-car {
    background-color: var(--primary-color);
}