/* Explain: CSS for site-wide animations and transitions. */
/* ============================================================
   Site-wide motion — smooth, subtle, and never in the way.
   Reveal-on-scroll plus a few small hover flourishes are gated
   behind html.mo-ready (set by js/app.js), so when JavaScript is
   unavailable every page renders fully, just without movement.
   Reduced-motion visitors get a completely still site.
   ============================================================ */

@keyframes moFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes moDrift {
    from {
        transform: scale(1) translate3d(0, 0, 0);
    }
    to {
        transform: scale(1.07) translate3d(0, -1.5%, 0);
    }
}

@keyframes moGlow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(163, 152, 95, 0);
    }
    50% {
        box-shadow: 0 0 0 5px rgba(163, 152, 95, 0.16);
    }
}

@keyframes moNavIn {
    from {
        opacity: 0;
        transform: translate3d(0, -8px, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    /* Page and header settle in gently on load */
    html.mo-ready body {
        animation: moFadeIn 0.55s ease both;
    }

    html.mo-ready .site-header {
        animation: moFadeIn 0.7s ease both;
    }

    /* Scroll reveal — .mo-reveal and .is-in are added, then removed,
       by js/app.js so hover transitions behave normally afterwards. */
    html.mo-ready .mo-reveal {
        opacity: 0;
        transform: translate3d(0, 22px, 0);
        transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
        will-change: opacity, transform;
    }

    html.mo-ready .mo-reveal.is-in {
        opacity: 1;
        transform: none;
    }

    /* The hero film drifts slowly, like a held breath */
    html.mo-ready .mo-drift {
        animation: moDrift 26s ease-in-out infinite alternate;
        transform-origin: 50% 40%;
    }

    /* A soft light sweep across solid buttons on hover */
    html.mo-ready .btn-solid,
    html.mo-ready .btn-gold {
        position: relative;
        overflow: hidden;
    }

    html.mo-ready .btn-solid::after,
    html.mo-ready .btn-gold::after {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.28) 50%, transparent 68%);
        transform: translateX(-130%);
        transition: transform 0.7s ease;
    }

    html.mo-ready .btn-solid:hover::after,
    html.mo-ready .btn-gold:hover::after,
    html.mo-ready .btn-solid:focus-visible::after,
    html.mo-ready .btn-gold:focus-visible::after {
        transform: translateX(130%);
    }

    /* Gentle breathing highlight on "new" badges */
    html.mo-ready .pill-new {
        animation: moGlow 3s ease-in-out infinite;
    }

    /* Header — the bar settles in, then reacts as you scroll */
    html.mo-ready .site-header .shell {
        transition: padding-block 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    }

    html.mo-ready .site-header.is-stuck .shell {
        padding-block: 0.55rem;
    }

    html.mo-ready .site-header::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 100%;
        height: 2px;
        pointer-events: none;
        background: linear-gradient(90deg, transparent, var(--accent-color), var(--primary-color), var(--accent-color), transparent);
        opacity: 0;
        transform: scaleX(0.35);
        transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

    html.mo-ready .site-header.is-stuck::after {
        opacity: 1;
        transform: scaleX(1);
    }

    /* Brand and menu button drift in on load */
    html.mo-ready .site-header a img {
        animation: moNavIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    html.mo-ready #mobileNavToggle {
        animation: moNavIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
    }

    html.mo-ready #mobileNavToggle:hover {
        transform: rotate(90deg) scale(1.06);
    }

    /* Nav links rise into place one after another, then underline on hover */
    html.mo-ready .site-header .nav-link {
        animation: moNavIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    html.mo-ready .site-header .nav-link:nth-child(1) { animation-delay: 0.06s; }
    html.mo-ready .site-header .nav-link:nth-child(2) { animation-delay: 0.12s; }
    html.mo-ready .site-header .nav-link:nth-child(3) { animation-delay: 0.18s; }
    html.mo-ready .site-header .nav-link:nth-child(4) { animation-delay: 0.24s; }
    html.mo-ready .site-header .nav-link:nth-child(5) { animation-delay: 0.3s; }

    html.mo-ready .site-header .nav-link::after {
        content: '';
        position: absolute;
        left: 0.9rem;
        right: 0.9rem;
        bottom: 0.3rem;
        height: 2px;
        border-radius: 999px;
        background: var(--accent-color);
        transform: scaleX(0);
        transform-origin: center;
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    }

    html.mo-ready .site-header .nav-link:hover::after,
    html.mo-ready .site-header .nav-link:focus-visible::after,
    html.mo-ready .site-header .nav-link[aria-current="page"]::after {
        transform: scaleX(1);
    }
}