/* =====================================================================
   Best Buy Auto Recycling — Design system CSS
   Faithful reproduction of the original HTML design (index.html):
   typography, fluid headings, fade-up animation, scroll reveal,
   Material Symbols tuning, scrollbar, and form base fixes.
   Tailwind utility classes are supplied by the compiled static stylesheet
   (assets/css/tailwind.min.css) — no Play CDN runtime in the browser.
   ===================================================================== */

/* --- Base typography / surface (mirrors the HTML <style> block) --- */
body {
    font-family: 'Sora', sans-serif;
    background-color: #1a1a1a; /* surface */
    color: #f5f5f5;            /* on-surface */
    -webkit-font-smoothing: antialiased;
}

html {
    background-color: #141414; /* deep-navy — prevents flash behind fixed header */
    -webkit-text-size-adjust: 100%;
}

/* --- Material Symbols icon tuning (exact from HTML) --- */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

/* --- Fluid hero heading (exact from HTML) --- */
.fluid-heading {
    font-size: clamp(3rem, 8vw, 6rem);
    line-height: 1.1;
    font-weight: 800;
}

/* --- Fade-up entrance animation ---
   Compositor-only (transform + opacity). The original design animated
   `filter: blur()`, which forces a full repaint every frame and was a major
   cause of scroll jank; it has been removed. The look is preserved via a
   short, smooth translate + fade. */
@keyframes fade-up {
    from {
        opacity: 0;
        transform: translate3d(0, 14px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animate-fade-up {
    animation: fade-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Staggered entrance delays for hero content (tightened so the page never
   feels "delayed" — total hero stagger is now 0.2s instead of 0.4s). */
.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.10s; }
.stagger-3 { animation-delay: 0.15s; }
.stagger-4 { animation-delay: 0.20s; }

/* --- Scroll-triggered reveal (JS adds .visible via IntersectionObserver) ---
   Elements start hidden and reveal once, then the observer unobserves them
   (see main.js) so nothing runs on subsequent scrolls. */
.reveal-on-scroll {
    opacity: 0;
}
.reveal-on-scroll.visible {
    animation: fade-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .animate-fade-up,
    .reveal-on-scroll,
    .reveal-on-scroll.visible {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* --- Hero background fallback ---
   Always-visible premium gradient behind the (lazy-loaded, desktop-only)
   Spline scene, so the hero looks finished before/without the 3D runtime. */
.bbar-hero-fallback {
    background-color: #141414;
    background-image:
        radial-gradient(60% 60% at 75% 30%, rgba(23, 242, 23, 0.16), transparent 60%),
        radial-gradient(70% 70% at 15% 85%, rgba(23, 242, 23, 0.08), transparent 55%),
        linear-gradient(180deg, #141414 0%, #101010 100%);
}

/* The Spline layer is decorative: never let it capture wheel/touch so it can
   never block native page scrolling. */
#bbar-hero-spline,
#bbar-hero-spline spline-viewer {
    pointer-events: none;
}

/* --- Mobile viewport-stable hero height --- */
.mobile-hero-height {
    height: 100vh;
    height: 100svh;
}

/* --- Custom scrollbar --- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #141414; }
::-webkit-scrollbar-thumb { background: #2e2e2e; border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: #17F217; }

/* --- Native form control base (prevents iOS auto-zoom) --- */
input, select, textarea {
    font-size: 16px; /* >=16px stops mobile Safari zoom-on-focus */
}

/* Contact Form 7 helpers (harmless if CF7 is not installed) */
.wpcf7-form-control-wrap { display: block; width: 100%; }
.wpcf7-response-output {
    margin: 16px 0 0 0 !important;
    padding: 12px 16px !important;
    border: 1px solid #17F217 !important;
    background: #141414 !important;
    color: #f5f5f5 !important;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
}