/* ═══════════════════════════════════════════════════════════════════════
   Their Own Story — Landing-page runway CSS
   Extracted from web/public/index.html inline <style> via T11.1 (#551)
   so the runway block is a cacheable resource across visits.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Hero pinned-runway (2026-04-30 port from Animated Landing.html
   prototype): the hero scrolls into place, pins, the centre Maeve book
   grows ~3× and its cover swings open into a two-page interior spread,
   then the runway releases to the rest of the page. The middle book of
   the triptych becomes a 3D unfolding demo — the closed cover keeps
   its watercolour, the back of the cover (visible after rotation) is
   painted with the same forest illustration so it reads as the LEFT
   page of the open spread, and the right page is the teal-forest
   interior with body text + drop cap. Driven by a single rAF scroll
   handler appended at the bottom of the file. */
.hero-runway { position: relative; height: 240vh; --u: 0; }
/* z-index: 200 sits above the sticky nav (z-index 100) so the
   runway covers the header strip while the book is animating —
   user wants the runway to read as a fullscreen "magic book"
   moment, not chrome + book. Stage releases when the runway
   ends and nav comes back for the rest of the page. */
.hero-stage  { position: sticky; top: 0; height: 100vh; overflow: hidden; z-index: 200; }
.hero-stage > .hero { height: 100%; padding: 0; display: flex; align-items: center; }
.hero-stage .hero-layout { width: 100%; }

/* As --u (0..1) climbs, fade hero copy + the side books */
.hero-stage .hero-copy { opacity: calc(1 - var(--u) * 2); transition: none; }
.hero-stage .tri-book.one,
.hero-stage .tri-book.three { opacity: calc(1 - var(--u) * 2.5); }

/* The Maeve book — promote out of triptych and animate to fullscreen.
   Architecture (post 2026-04-30 research): the LEFT page of the open
   spread is a SIBLING element (.left-page) positioned in negative-x
   territory of the article via right:100%. The cover sits on top at
   inset:0 (right page slot) and swings away on rotateY(-160°), at
   which point backface-visibility:hidden hides it (no preserve-3d
   chain needed). The .interior is the right-page text surface,
   fading in via opacity. No preserve-3d, no cover-back, no overflow
   overrides — the parent .tri-book has filter:drop-shadow which the
   CSS spec lists as a 3D-flattening trigger anyway, so the prior
   cover-back-as-left-page approach was structurally doomed. */
#hero-maeve {
  transform-origin: center center;
  will-change: transform;
  z-index: 60;
  transition: none;
  perspective: 2000px;
  --tx: calc(0px + (var(--cx, 0px)) * var(--u));
  --ty: calc(0px + (var(--cy, 0px)) * var(--u));
  --sc: calc(1 + (var(--targetScale, 3)) * var(--u));
  transform: translate(var(--tx), var(--ty)) rotate(0deg) scale(var(--sc)) !important;
}

/* Left page — full-bleed watercolour on cream fallback. Inset shadow
   on the spine edge suggests the binding; the outer dark "leather"
   border (4px solid #3a2a1d with subtle highlight + drop) is what
   makes the open spread read as a bound book rather than two free
   panels. The rounded corner profile mirrors the cover's casewrap. */
#hero-maeve .left-page {
  position: absolute; right: 100%; top: 0;
  width: 100%; height: 100%;
  border-radius: 8px 2px 2px 8px;
  background: var(--paper, #FBF7EE);
  background-image: url("hero-images/forest-girl-v1.png");
  background-size: cover;
  background-position: center;
  border: 4px solid #4a3020;
  border-right: none;
  box-shadow:
    inset 0 0 0 1px rgba(255,236,196,.10),
    0 6px 18px rgba(0,0,0,.18),
    inset -14px 0 22px -14px rgba(0,0,0,.32);
  overflow: hidden;
  opacity: var(--p2, 0);
  z-index: 1;
}
#hero-maeve .left-page .pn {
  position: absolute; left: 8%; bottom: 5%;
  font-family: 'Inter', sans-serif;
  font-size: 5px;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,250,240,.85);
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
  opacity: var(--p3, 0);
}
/* Cover sits above the left-page (z-index 2) and the interior (default
   z-index, last child wins). On rotation past 90° its backface hides
   it cleanly — no preserve-3d gymnastics needed. box-shadow gives the
   floor-cast shadow that Maeve loses by being excluded from the
   .tri-book filter:drop-shadow rule (audit T6) — composites on GPU. */
#hero-maeve .cover {
  transform-origin: left center;
  transform: rotateY(calc(-160deg * var(--p2, 0)));
  backface-visibility: hidden;
  z-index: 2;
  box-shadow:
    0 22px 18px -4px rgba(44,40,37,.22),
    0 4px 6px -1px rgba(44,40,37,.15),
    0 0 0 1px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.06);
}

/* Interior right page — cream paper, dark serif body text, coral
   drop-cap. Mirrors the leather border on the left page (4px dark
   leather, no left border because that's the spine). Gutter shadow
   on the spine edge ties the two pages together as one volume. */
#hero-maeve .interior {
  position: absolute; inset: 0;
  border-radius: 2px 8px 8px 2px;
  overflow: hidden;
  opacity: var(--p2, 0);
  background: var(--paper, #FBF7EE);
  border: 4px solid #4a3020;
  border-left: none;
  box-shadow:
    inset 0 0 0 1px rgba(255,236,196,.10),
    0 6px 18px rgba(0,0,0,.18),
    inset 14px 0 22px -14px rgba(0,0,0,.32);
}
#hero-maeve .int-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 30% 0%, rgba(232,221,201,.35), transparent 70%),
    linear-gradient(180deg, #fcf8ec 0%, #f6efde 100%);
}
#hero-maeve .int-bg::after {
  content:''; position:absolute; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity: .08;
}
/* Body text on the right page. Fixed CSS font-size — the parent's
   runway scale (typically 2-3×) is what makes the text read large at
   full open. Compounding font-size × parent-scale was the source of
   the prior "weird scaling" — text would balloon to ~125px visual. */
#hero-maeve .int-text {
  position: absolute;
  inset: 11% 12% 11% 14%;
  font-family: 'Lora', Georgia, serif; color: var(--ink, #2C2825);
  font-size: 13px; line-height: 1.55;
  opacity: var(--p3, 0);
}
#hero-maeve .int-text p { color: var(--ink, #2C2825); max-width: none; margin-bottom: .65em; }
#hero-maeve .int-text p:first-of-type::first-letter {
  font-family: 'Lora', Georgia, serif; font-weight: 600;
  font-size: 3.2em; line-height: .85;
  float: left;
  color: var(--coral, #E8705F);
  padding: .08em .14em 0 0;
  font-style: normal;
}
#hero-maeve .int-text p:first-of-type { font-style: italic; }
/* Chapter-style kicker at the top of the right page — "A Story for
   Maeve" in tracked Inter caps, with a thin coral rule beneath. Echoes
   the kicker on the cover so the spread feels of-a-piece. */
#hero-maeve .int-head {
  margin-bottom: 1.2em;
  padding-bottom: .55em;
  border-bottom: 1px solid rgba(232,112,95,.28);
}
#hero-maeve .int-kicker {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: .68em;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--coral, #E8705F);
}
/* End-of-text ornament — three middle dots, classic typographic
   device for closing a passage of body copy. */
#hero-maeve .int-ornament {
  margin-top: 1.2em;
  text-align: center;
  letter-spacing: .55em;
  font-size: 1.05em;
  color: rgba(122,112,104,.55);
  line-height: 1;
}
#hero-maeve .int-pn {
  position: absolute; right: 8%; bottom: 5%;
  font-family: 'Inter', sans-serif;
  font-size: 5px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted, #7a7068);
  opacity: var(--p3, 0);
  z-index: 4;
}

/* Stage backdrop — warm neutral wash that lets the cream spread
   read like a book on a tabletop. Not as dramatic as the prior
   night-time teal, but consistent with the "real book" aesthetic. */
.hero-stage::before {
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, #2c2825 0%, #1f1c1a 100%);
  opacity: calc(var(--u) * .82);
  pointer-events: none;
  z-index: 50;
}
.hero-stage > .hero { position: relative; z-index: 55; }

/* Caption that fades in once book is open */
.hero-stage .open-caption {
  position: absolute; bottom: 6%; left: 50%; transform: translateX(-50%);
  text-align: center; max-width: 600px; padding: 0 24px;
  color: #fcf3de;
  opacity: var(--p3, 0);
  pointer-events: none;
  z-index: 70;
}
.hero-stage .open-caption .label {
  font-size: 13px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(252,243,222,.7); font-weight: 600;
}
.hero-stage .open-caption h2 {
  color: #fcf3de; font-style: italic; font-weight: 400;
  font-family: 'Lora', serif; font-size: clamp(22px, 3vw, 30px);
  margin: 8px 0 0;
}
.hero-stage .open-caption p {
  color: rgba(252,243,222,.75); margin: 10px auto 0;
  font-size: 15px; line-height: 1.5;
}

/* Reduced-motion fallback: no runway, no scale, hero renders normally */
@media (prefers-reduced-motion: reduce) {
  .hero-runway { height: auto; }
  .hero-stage  { position: relative; height: auto; }
  #hero-maeve  { transform: none !important; }
}
/* Mobile fallback: the runway is a desktop-grade demo. On phones a
   240vh sticky stage means 1900+px of scroll just to clear the hero,
   and most users land + bounce before realising it's scroll-driven.
   Below 768px we collapse to a static triptych — same closed-book
   triptych, normal page flow, header stays visible. The JS scroll
   handler still runs but raw -> 0 because the runway is now ~viewport
   height, so nothing animates. The runway returns to scroll-driven
   behaviour on viewports >= 768px (tablets in landscape + desktop). */
@media (max-width: 767px) {
  .hero-runway { height: auto; }
  .hero-stage  { position: relative; height: auto; overflow: visible; z-index: auto; }
  .hero-stage::before { display: none; }
  .hero-stage .open-caption { display: none; }
  #hero-maeve  { transform: none !important; }
}