/* =====================================================
   INTERACTIONS — Microinteractions & Motion Safety
   Linked AFTER css/styles.css so it can override.
   Dark "Alpine" aesthetic. Uses existing tokens only.
   ===================================================== */

/* -----------------------------------------------------
   (e) PAGE SCROLL-PROGRESS BAR
   JS owns transform: scaleX(); CSS owns the base only.
   ----------------------------------------------------- */
.mi-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    transform-origin: left;
    transform: scaleX(0);
    background: var(--accent);
    z-index: 200;
    pointer-events: none;
    will-change: transform;
}

/* -----------------------------------------------------
   (f) HERO CURSOR SPOTLIGHT
   JS owns the radial-gradient background + position.
   Sits above the hero bg but below the hero text.
   ----------------------------------------------------- */
.mi-hero-spotlight {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: screen;
    opacity: 0.6;
    transition: opacity 0.4s var(--ease-out);
}

/* -----------------------------------------------------
   (a) STAGGERED ENTRANCE REVEALS — PURE CSS
   Triggered by '.fade-on-scroll.is-visible' (added by
   js/script.js). Visible end state MUST be transform:none
   so the existing 3D tilt / hover-scale still work.
   ----------------------------------------------------- */

/* Partner logos */
.partners .partner-logo {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.6s var(--ease-out),
        transform 0.6s var(--ease-out),
        /* keep the styles.css filter/opacity/scale hover transition alive */
        filter 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.partners.is-visible .partner-logo {
    opacity: 0.7;
    transform: none;
}

.partners.is-visible .partner-logo:nth-child(1) {
    transition-delay: 0ms;
}

.partners.is-visible .partner-logo:nth-child(2) {
    transition-delay: 70ms;
}

.partners.is-visible .partner-logo:nth-child(3) {
    transition-delay: 140ms;
}

.partners.is-visible .partner-logo:nth-child(4) {
    transition-delay: 210ms;
}

.partners.is-visible .partner-logo:nth-child(5) {
    transition-delay: 280ms;
}

.partners.is-visible .partner-logo:nth-child(6) {
    transition-delay: 350ms;
}

/* Goal boxes */
.goals .goal-box {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.6s var(--ease-out),
        transform 0.6s var(--ease-out),
        /* preserve styles.css .box border/background hover transition */
        border-color 0.3s var(--ease-out),
        background-color 0.3s var(--ease-out);
}

.goals.is-visible .goal-box {
    opacity: 1;
    transform: none;
}

.goals.is-visible .goal-box:nth-child(1) {
    transition-delay: 0ms;
}

.goals.is-visible .goal-box:nth-child(2) {
    transition-delay: 70ms;
}

.goals.is-visible .goal-box:nth-child(3) {
    transition-delay: 140ms;
}

.goals.is-visible .goal-box:nth-child(4) {
    transition-delay: 210ms;
}

/* -----------------------------------------------------
   (b) SECTION-TITLE REVEAL — PURE CSS
   Hidden only INSIDE .fade-on-scroll sections (so titles
   outside still show normally). Subtle clip + lift.
   ----------------------------------------------------- */
.fade-on-scroll .section-title,
.fade-on-scroll .partner-section-title {
    opacity: 0;
    transform: translateY(28px);
    clip-path: inset(0 0 100% 0);
    transition:
        opacity 0.8s var(--ease-out),
        transform 0.8s var(--ease-out),
        clip-path 0.8s var(--ease-out);
    transition-delay: 0.08s;
}

.fade-on-scroll.is-visible .section-title,
.fade-on-scroll.is-visible .partner-section-title {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
}

/* -----------------------------------------------------
   (c) .btn-outline:hover REFINEMENT
   NO transform here — JS owns the magnetic transform.
   Background fill + border + soft shadow only.
   ----------------------------------------------------- */
/* Override styles.css `transition: all 0.3s` so the JS magnetic transform
   follows the cursor snappily (0.12s) instead of easing over 300ms (rubbery lag). */
.btn-outline {
    transition:
        background-color 0.3s var(--ease-out),
        border-color 0.3s var(--ease-out),
        box-shadow 0.3s var(--ease-out),
        transform 0.12s var(--ease-out);
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--text-main);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

/* -----------------------------------------------------
   (d) .sponsor-tier HOVER
   Subtle background shift + accent-tinted left border +
   small padding-left shift, eased with --ease-out.
   ----------------------------------------------------- */
.sponsor-tier {
    border-left: 2px solid transparent;
    transition:
        background-color 0.4s var(--ease-out),
        border-left-color 0.4s var(--ease-out),
        padding-left 0.4s var(--ease-out);
}

.sponsor-tier:hover {
    background: rgba(255, 255, 255, 0.025);
    border-left-color: var(--accent);
    padding-left: 1.25rem;
}

/* -----------------------------------------------------
   (g) MENU — text label toggles MENU <-> CLOSE.
   The mono brackets stay and nudge apart on open.
   ----------------------------------------------------- */
.hamburger .ham-label {
    margin: 0 4px;
    letter-spacing: 0.04em;
}

.hamburger .ham-label::before {
    content: 'MENU';
}

.navbar.menu-open .hamburger .ham-label::before {
    content: 'CLOSE';
}

.hamburger .ski-brk {
    color: var(--text-main);
    transition: transform 0.4s var(--ease-out);
}

.navbar.menu-open .hamburger .ski-brk.l { transform: translateX(-3px); }
.navbar.menu-open .hamburger .ski-brk.r { transform: translateX(3px); }

/* -----------------------------------------------------
   (h) MENU — staggered link reveal + accent underline
   Driven by .nav-links.active (toggled in script.js).
   Slide-in stays as-is; links now wipe in one by one and
   gain an accent underline sweep on hover.
   ----------------------------------------------------- */
.nav-links a {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 0.5s var(--ease-out),
        transform 0.5s var(--ease-out),
        color 0.3s var(--ease-out);
}

.nav-links.active a {
    opacity: 1;
    transform: translateY(0);
}

.nav-links.active a:nth-of-type(1) { transition-delay: 0.15s; }
.nav-links.active a:nth-of-type(2) { transition-delay: 0.22s; }
.nav-links.active a:nth-of-type(3) { transition-delay: 0.29s; }
.nav-links.active a:nth-of-type(4) { transition-delay: 0.36s; }
.nav-links.active a:nth-of-type(5) { transition-delay: 0.43s; }

.nav-links a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -0.4rem;
    width: 100%;
    height: 2px;
    background: var(--text-main);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.35s var(--ease-out);
}

.nav-links a:hover::after { transform: scaleX(1); }

/* =====================================================
   (1) REDUCED MOTION — THE FOUNDATION
   Stops decorative/infinite motion, neutralizes the
   season magnification & media parallax, and makes every
   NEW microinteraction above instant/opacity-only.
   The scroll-sequence and horizontal media scroll
   themselves stay functional — only their motion stops.
   ===================================================== */
@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto !important;
    }

    /* --- Stop decorative / infinite CSS animations --- */
    .typing-cursor::after {
        animation: none;
    }

    .scroll-line::after {
        animation: none;
    }

    .racemap-list-toggle {
        animation: none;
    }

    /* Belt-and-suspenders: kill any remaining keyframe loops */
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
    }

    /* --- Neutralize the season magnification --- */
    .season-item {
        filter: none !important;
        transform: none !important;
        opacity: 1 !important;
    }

    .season-item .year,
    .season-item .copy {
        transform: none !important;
    }

    /* --- Disable media parallax + hover zoom --- */
    .media-slide img {
        --parallax-x: 0px !important;
        transition: none !important;
        transform: scale(1) !important;
    }

    .media-slide:hover img {
        transform: scale(1) !important;
    }

    /* --- New microinteractions become instant / opacity-only --- */

    /* Hero spotlight fully off */
    .mi-hero-spotlight {
        display: none !important;
    }

    /* Scroll-progress bar: keep it, but no smooth motion */
    .mi-scroll-progress {
        transition: none !important;
        will-change: auto;
    }

    /* Reveals: opacity-only, no translate / clip / delay */
    .partners .partner-logo,
    .goals .goal-box {
        transform: none !important;
        transition-property: opacity !important;
        transition-duration: 0.2s !important;
        transition-delay: 0ms !important;
    }

    .partners.is-visible .partner-logo,
    .goals.is-visible .goal-box {
        transform: none !important;
        transition-delay: 0ms !important;
    }

    .fade-on-scroll .section-title,
    .fade-on-scroll .partner-section-title {
        transform: none !important;
        clip-path: none !important;
        transition-property: opacity !important;
        transition-duration: 0.2s !important;
        transition-delay: 0ms !important;
    }

    .fade-on-scroll.is-visible .section-title,
    .fade-on-scroll.is-visible .partner-section-title {
        transform: none !important;
        clip-path: none !important;
    }

    /* Hover refinements: drop motion-y transitions, keep color/fill */
    .btn-outline:hover {
        box-shadow: none;
    }

    .sponsor-tier,
    .sponsor-tier:hover {
        transition: none !important;
        padding-left: 0 !important;
    }

    /* Menu: instant ski morph, links just fade in (no slide / stagger) */
    .hamburger .ski-brk,
    .hamburger .ski,
    .nav-links a::after {
        transition: none !important;
    }

    .nav-links a,
    .nav-links.active a {
        transform: none !important;
        transition: opacity 0.2s !important;
    }

    /* Panel flight: snap instantly (the JS spring is skipped under reduced motion). */
    .nav-links {
        transition: none !important;
    }

    #page-wrap {
        transition: none !important;
        transform: none !important;
        filter: none !important;
    }
}