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

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    html {
        scroll-behavior: auto;
    }
    
    .scroll-progress {
        display: none;
    }
    
    .word {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}

/* Focus Styles */
button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 2px solid var(--accent-red);
    outline-offset: 3px;
}

/* Skip Link */
.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 1rem 2rem;
    background: var(--text-white);
    color: var(--bg-dark);
    font-weight: 500;
    border-radius: 0 0 8px 8px;
    z-index: 1000;
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: 0;
}

/* Screen Reader Only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    :root {
        --text-muted: rgba(255, 255, 255, 0.9);
        --border-light: rgba(255, 255, 255, 0.8);
        --border-subtle: rgba(255, 255, 255, 0.5);
    }
    
    .card-gradient,
    .model-gradient,
    .brand-card-overlay {
        opacity: 0.9 !important;
    }
}

/* Print Styles */
@media print {
    .navigation,
    .menu-overlay,
    .scroll-indicator,
    .scroll-progress,
    .grain-overlay {
        display: none !important;
    }
    
    .hero {
        height: auto;
        min-height: auto;
    }
    
    .hero-bg img {
        position: relative;
    }
    
    body {
        background: white;
        color: black;
    }
    
    a {
        text-decoration: underline;
    }
}

/* ============================================
   SCROLL ANIMATION SAFETY NET
   Elements animated by GSAP start invisible via JS.
   If JS is slow or user reloads mid-page, this ensures
   they never stay permanently hidden.
   ============================================ */

/* After 1.5s with no animation, force-show anything still hidden */
@keyframes forceShow {
    to {
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
    }
}

.featured-card,
.model-card,
.discover-card,
.stat-item,
.pillar,
.manifesto-text,
.manifesto-image,
#modelsIntro {
    animation: forceShow 0s 1.5s forwards;
    animation-fill-mode: forwards;
}

/* Performance Optimizations */
@media (hover: hover) {
    .featured-card:hover img,
    .model-card:hover img,
    .discover-card:hover img,
    .brand-card:hover .brand-card-image img {
        will-change: transform;
    }
}

/* GPU Acceleration */
.gpu-accelerated {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Content Visibility for Performance */
.section {
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
}

/* Image Loading */
img {
    content-visibility: auto;
}

img[loading="lazy"] {
    background: var(--bg-card);
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {

    
    .magnetic-btn {
        transform: none !important;
    }
    
    /* Larger touch targets */
    .menu-item,
    .menu-item-simple,
    .footer-links a {
        padding: 0.75rem;
    }
    
    .social-link {
        width: 3rem;
        height: 3rem;
    }
}

/* Dark Mode Support (already dark by default) */
@media (prefers-color-scheme: light) {
    /* Keep dark theme as it's the brand identity */
}