/**
 * Body Background Image Styles
 * Static diagonal tire track background behind car cards
 * Author: Car Market System
 * Version: 2.0
 */

/* =============================================================================
   TIRE TRACK BACKGROUND CONTAINER
   ============================================================================= */

.tire-track-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
    opacity: 0.15;
    transition: opacity 0.3s ease;
}

/* =============================================================================
   DIAGONAL TIRE TRACKS
   ============================================================================= */

.tire-track {
    position: absolute;
    width: 800px; /* Fixed width set by JavaScript */
    height: auto; /* Height set dynamically by JavaScript */
    background-repeat: repeat-y; /* Only repeat vertically to stretch */
    background-size: 800px auto; /* Stretch to fill full height */
    background-position: center top; /* Align to top */
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

/* Diagonal tire tracks with consistent sizing - no overlap */
.tire-track-diagonal-1 {
    opacity: 0.8;
}

.tire-track-diagonal-2 {
    opacity: 0.7;
}

.tire-track-diagonal-3 {
    opacity: 0.9;
}

.tire-track-diagonal-4 {
    opacity: 0.6;
}

/* All tracks use same width (800px) set by JavaScript for consistency */

/* =============================================================================
   STATIC POSITIONING - NO ANIMATIONS
   ============================================================================= */

/* Clear, static tire tracks - no blur, no animations */
.tire-track {
    filter: none;
    transform-origin: center center;
}

/* =============================================================================
   HOVER EFFECTS (MINIMAL)
   ============================================================================= */

.tire-track-container:hover .tire-track {
    opacity: 0.9;
}

.tire-track:hover {
    opacity: 1;
}

/* =============================================================================
   RESPONSIVE DESIGN
   ============================================================================= */

/* Large screens and below */
@media (max-width: 1200px) {
    .tire-track {
        width: 700px; /* Slightly smaller but still stretched */
        background-size: 700px auto;
    }
}

/* Medium screens and below */
@media (max-width: 992px) {
    .tire-track-container {
        opacity: 0.12; /* Reduced by 10% (was 0.22, now 0.12) */
    }

    .tire-track {
        width: 600px; /* Tablet-optimized width */
        background-size: 600px auto;
    }
}

/* Small screens and below */
@media (max-width: 768px) {
    .tire-track-container {
        opacity: 0.10; /* Reduced by 10% (was 0.20, now 0.10) */
    }

    .tire-track {
        width: 500px; /* Mobile-optimized width */
        background-size: 500px auto;
    }
}

/* Extra small screens */
@media (max-width: 576px) {
    .tire-track-container {
        opacity: 0.08; /* Reduced by 10% (was 0.18, now 0.08) */
    }

    .tire-track {
        width: 400px; /* Small phone-optimized width */
        background-size: 400px auto;
    }
}

/* =============================================================================
   ACCESSIBILITY & PERFORMANCE
   ============================================================================= */

/* Reduce motion for users who prefer it - no animations anyway */
@media (prefers-reduced-motion: reduce) {
    .tire-track-container {
        opacity: 0.08; /* Reduced by 10% (was 0.18, now 0.08) */
    }
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
    .tire-track-container {
        opacity: 0.05; /* Reduced by 10% (was 0.15, now 0.05) */
    }
}

/* =============================================================================
   UTILITY CLASSES
   ============================================================================= */

/* Hide background completely */
.tire-track-container.hidden {
    display: none !important;
}

/* Fade out background */
.tire-track-container.faded {
    opacity: 0.05 !important; /* Reduced by 10% (was 0.15, now 0.05) */
}

/* Enhance background */
.tire-track-container.enhanced {
    opacity: 0.25 !important; /* Reduced by 10% (was 0.35, now 0.25) */
}

/* =============================================================================
   DARK MODE ADJUSTMENTS
   ============================================================================= */

@media (prefers-color-scheme: dark) {
    .tire-track-container {
        opacity: 0.06; /* Reduced by 10% (was 0.16, now 0.06) */
    }

    .tire-track {
        filter: brightness(1.2) contrast(0.8);
    }
}

/* =============================================================================
   PRINT STYLES
   ============================================================================= */

@media print {
    .tire-track-container {
        display: none !important;
    }
}