/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Loading animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideInFromLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes scaleIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Apply animations to elements */
.hero-content {
    animation: fadeIn 1s ease;
}

.vehicle-card {
    animation: scaleIn 0.5s ease;
    animation-fill-mode: both;
}

.vehicle-card:nth-child(1) { animation-delay: 0.1s; }
.vehicle-card:nth-child(2) { animation-delay: 0.15s; }
.vehicle-card:nth-child(3) { animation-delay: 0.2s; }
.vehicle-card:nth-child(4) { animation-delay: 0.25s; }
.vehicle-card:nth-child(5) { animation-delay: 0.3s; }
.vehicle-card:nth-child(6) { animation-delay: 0.35s; }
.vehicle-card:nth-child(7) { animation-delay: 0.4s; }
.vehicle-card:nth-child(8) { animation-delay: 0.45s; }

.product-card {
    animation: fadeIn 0.6s ease;
    animation-fill-mode: both;
}

/* Stagger product cards */
.products-grid .product-card:nth-child(odd) {
    animation-delay: 0.1s;
}

.products-grid .product-card:nth-child(even) {
    animation-delay: 0.2s;
}

/* Parallax effect for hero */
@supports (background-attachment: fixed) {
    .hero-section::before {
        background-attachment: fixed;
    }
}

/* Smooth transitions for all interactive elements */
a, button, input, select, textarea {
    transition: all 0.3s ease;
}

/* Focus states for accessibility */
a:focus, button:focus, input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--brand-orange);
    outline-offset: 2px;
}

/* Skip to content link for accessibility */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--brand-orange);
    color: white;
    padding: 8px;
    text-decoration: none;
    z-index: 100;
}

.skip-to-content:focus {
    top: 0;
}

/* Print styles */
@media print {
    .header, .footer, .hero-section {
        display: none;
    }
    
    body {
        font-size: 12pt;
        color: black;
        background: white;
    }
    
    a {
        text-decoration: underline;
        color: black;
    }
}