/* Era landing page — motion layer (2026 CSS-first, JS only for the live reading and the video facade)
   Every rule here is progressive: browsers without scroll-driven animations get the IntersectionObserver
   fallback in js/motion.js; prefers-reduced-motion turns all of it off at the bottom of this file. */

/* 1. Chapter reveal — Era Design System: 40px rise + fade, 700ms, staggered */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 100ms; }
.reveal[data-delay="2"] { transition-delay: 200ms; }
.reveal[data-delay="3"] { transition-delay: 300ms; }

/* Scroll-driven version — no JS in the scroll path where supported */
@supports (animation-timeline: view()) {
  .reveal { animation: reveal-in var(--t-reveal) var(--ease) both; animation-timeline: view(); animation-range: entry 0% entry 35%; transition: none; opacity: 1; transform: none; }
  @keyframes reveal-in { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
}

/* 2. Opening — photograph slow push, once; headline words staggered on load */
.hero-photo { transform: scale(1); animation: hero-push var(--t-hero) var(--ease-out) forwards; }
@keyframes hero-push { to { transform: scale(1.06); } }
.hero .w { display: inline-block; opacity: 0; transform: translateY(8px); animation: word-in 500ms var(--ease-out) forwards; }
.hero .w:nth-child(1) { animation-delay: 120ms } .hero .w:nth-child(2) { animation-delay: 180ms }
.hero .w:nth-child(3) { animation-delay: 240ms } .hero .w:nth-child(4) { animation-delay: 300ms }
.hero .lead  { opacity: 0; animation: word-in 600ms var(--ease-out) 520ms forwards; }
.hero .cta   { opacity: 0; animation: word-in 600ms var(--ease-out) 700ms forwards; }
.hero .stance{ opacity: 0; animation: word-in 800ms var(--ease-out) 1000ms forwards; }  /* the stance arrives last, on purpose */
@keyframes word-in { to { opacity: 1; transform: none; } }

/* 3. Nav — thins to a hairline after 80px (class toggled by js/motion.js) */
.nav { position: sticky; top: 0; z-index: 10; background: var(--era-paper); border-bottom: 1px solid transparent; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.nav.is-thin { background: color-mix(in srgb, var(--era-paper) 85%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom-color: var(--era-rule); }

/* 4. Instrument panel — hard edge in, live reading types on (js/motion.js), timestamp last */
.instrument { background: var(--era-navy); }        /* no gradient at the paper→navy edge */
.reading-label, .reading-time { opacity: 0; transition: opacity 500ms var(--ease); }
.instrument.is-in .reading-label { opacity: 1; }
.instrument.is-in .reading-time  { opacity: 1; transition-delay: 900ms; }
.reading-value::after { content: ""; display: inline-block; width: 0.06em; height: 0.9em; margin-left: 0.08em; background: var(--era-orange); vertical-align: -0.1em; animation: caret 1s steps(1) infinite; }
.reading-value.is-done::after { display: none; }
@keyframes caret { 50% { opacity: 0; } }

/* 5. Portraits — each photograph drifts 4% while its card crosses the viewport (scroll-linked, CSS only) */
@supports (animation-timeline: view()) {
  .portrait img { animation: drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  @keyframes drift { from { transform: translateY(2%) scale(1.06); } to { transform: translateY(-2%) scale(1.06); } }
}
.portrait .cap { transition-delay: 120ms; }

/* 6. Curiosity — five questions, 4s crossfade loop; first one is rendered in HTML so it reads without JS */
.q-rotate { position: relative; height: 1.4em; }
.q-rotate span { position: absolute; inset: 0; opacity: 0; animation: q-cycle 20s var(--ease) infinite; }
.q-rotate span:nth-child(1) { animation-delay: 0s }   .q-rotate span:nth-child(2) { animation-delay: 4s }
.q-rotate span:nth-child(3) { animation-delay: 8s }   .q-rotate span:nth-child(4) { animation-delay: 12s }
.q-rotate span:nth-child(5) { animation-delay: 16s }
@keyframes q-cycle { 0%,3% { opacity: 0; transform: translateY(6px) } 8%,17% { opacity: 1; transform: none } 20%,100% { opacity: 0; transform: translateY(-6px) } }

/* 7. Video facade → iframe swap uses the View Transitions API when available (js/motion.js) */
::view-transition-old(host-card), ::view-transition-new(host-card) { animation-duration: 400ms; }
.host-card { view-transition-name: host-card; }

/* 8. Entrance for anything toggled from display:none (Mr Era card later) */
@supports (transition-behavior: allow-discrete) {
  .host-card[hidden] { display: none; }
  .host-card { transition: opacity 400ms var(--ease), display 400ms allow-discrete; }
  @starting-style { .host-card { opacity: 0; } }
}

/* 9. Performance hints */
section { content-visibility: auto; contain-intrinsic-size: 1px 800px; }
.hero, .instrument { content-visibility: visible; }

/* 10. Reduced motion — everything above becomes static, all content visible immediately */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .hero .w, .hero .lead, .hero .cta, .hero .stance, .reading-label, .reading-time { opacity: 1 !important; transform: none !important; }
  .q-rotate span { position: static; opacity: 1; display: none; } .q-rotate span:first-child { display: block; }
  .reading-value::after { display: none; }
  video[autoplay] { display: none; } .video-poster { display: block; }
}