/* ─── ClawBot marketing motion layer ─────────────────────────────────
   One place for timing tokens and every page-level motion rule on the
   public site. Pairs with js/motion.js, which only adds classes and custom
   properties. With JS off, nothing here hides content.
   Spec (frontend-motion skill, four layers):
   - hero   · page load  · line reveal, then staggered fade-up · --dur-xl · RM: static
   - blocks · in view    · fade-up 12px, once, 50ms stagger     · --dur-xl · RM: static
   - stats  · in view    · animated counter, lands on exact text · 900ms  · RM: static
   - CTAs   · press      · scale .97                             · --dur-xs
   - hero   · pointer    · soft spotlight follows cursor (desktop only)   · RM: off
   - FAQ    · toggle     · answer fades in, chevron rotates      · --dur-md
   - page   · scroll-linked · top progress bar (CSS scroll timeline; none in Firefox) */

:root {
    --dur-xs: 100ms;
    --dur-sm: 160ms;
    --dur-md: 220ms;
    --dur-lg: 320ms;
    --dur-xl: 600ms;
    --stagger: 60ms;
    --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

/* Press feedback on every primary action */
.hero-cta, .hero-cta-secondary, .hero-cta-level, .download-card, .cta-button,
.loop-cta, .manifesto-cta-btn, .nav-link, .crew-card {
    -webkit-tap-highlight-color: transparent;
}
.hero-cta:active, .hero-cta-secondary:active, .hero-cta-level:active,
.cta-button:active, .loop-cta:active, .manifesto-cta-btn:active {
    transform: scale(0.97);
    transition-duration: var(--dur-xs);
}
.cta-button { transition: transform var(--dur-sm) var(--ease-out-strong), background-color var(--dur-sm) ease, box-shadow var(--dur-sm) ease; }

:is(a, button, summary):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.landing-hero :is(a, button):focus-visible { outline-color: #FFE082; }

/* ─── Reveal on scroll (only once motion.js marks the page ready) ──── */
.mo-ready .mo-reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--dur-xl) var(--ease-out-strong), transform var(--dur-xl) var(--ease-out-strong);
    transition-delay: calc(var(--mo-i, 0) * var(--stagger));
}
.mo-ready .mo-reveal.mo-in { opacity: 1; transform: none; }

/* ─── Hero: line reveal + staggered entrance ───────────────────────── */
.mo-ready .landing-hero > .hero-content:not(.mo-hero-in) { visibility: hidden; }
.mo-line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.mo-line > .mo-line-inner { display: inline-block; }
.mo-ready .mo-line > .mo-line-inner {
    transform: translateY(105%);
    /* motion-audit: allow slow-ui — one-time marketing hero reveal */
    transition: transform 700ms var(--ease-out-strong);
    transition-delay: calc(120ms + var(--mo-i, 0) * 110ms);
}
.mo-ready .mo-hero-in .mo-line > .mo-line-inner { transform: none; }
.mo-ready .mo-hero-step {
    opacity: 0; transform: translateY(10px);
    transition: opacity var(--dur-xl) var(--ease-out-strong), transform var(--dur-xl) var(--ease-out-strong);
    transition-delay: calc(360ms + var(--mo-i, 0) * 90ms);
}
.mo-ready .mo-hero-in .mo-hero-step { opacity: 1; transform: none; }

/* Hero spotlight: the glow position lives on the hero itself (--mx/--my) */
.landing-hero::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 40%), rgba(255, 255, 255, 0.14), transparent 60%);
    opacity: 0; transition: opacity var(--dur-lg) ease;
}
.landing-hero.mo-lit::after { opacity: 1; }

/* Magnetic primary CTA: motion.js writes --tx/--ty on the element */
.mo-magnetic { translate: var(--tx, 0) var(--ty, 0); }

/* ─── Stats: counters never change width while running ─────────────── */
.stat-number { font-variant-numeric: tabular-nums; }

/* ─── FAQ accordion (native <details>) ─────────────────────────────── */
.home-faq details.home-faq-item { padding: 0; }
.home-faq summary {
    list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative;
}
.home-faq summary::-webkit-details-marker { display: none; }
.home-faq summary h3 { margin: 0 !important; }
.home-faq summary::after {
    content: ''; position: absolute; right: 8px; top: 50%; width: 9px; height: 9px;
    border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
    transform: translateY(-70%) rotate(45deg);
    transition: transform var(--dur-md) var(--ease-out-strong);
}
.home-faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.home-faq .faq-a { padding: 0 40px 22px 0; }
.home-faq details[open] .faq-a { animation: moFaqIn var(--dur-md) var(--ease-out-strong); }
@keyframes moFaqIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (hover: hover) and (pointer: fine) {
    .home-faq summary:hover h3 { color: var(--accent); }
}

/* ─── Reading progress (scroll-linked, progressive enhancement) ───── */
.mo-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1002;
    background: var(--cta); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
}
@supports (animation-timeline: scroll()) {
    .mo-progress { animation: moGrow linear both; animation-timeline: scroll(root); }
}
@keyframes moGrow { to { transform: scaleX(1); } }

.mobile-nav-overlay.show { animation: moFade var(--dur-md) ease-out; }
@keyframes moFade { from { opacity: 0; } to { opacity: 1; } }

/* ─── Reduced motion: keep state changes, drop travel and loops ───── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }
    .hero-floaters { display: none; }
    .mo-ready .mo-reveal, .mo-ready .mo-hero-step, .mo-ready .mo-line > .mo-line-inner { opacity: 1; transform: none; }
    .landing-hero::after, .mo-progress { display: none; }
}