/* Concept D, Causeway: the flight over the live first screen, and the light skin's corrections to
   the handful of dark-ground literals in site.css. Every colour is a token (A9). */

/* the live stylesheet's dark literals now read tokens in site.css itself (2026-10-28); the rest below is hero-only */
.hero__right .sub, .hero h1 { text-shadow: none; }
.hero__card, .hero__card.glass, .hero__right.glass { background: var(--glass); }
@media (max-width: 860px) { .hero h1 { text-shadow: none; } }

/* the stage: the hero poster at rest, the whole viewport while held */
.hero { background: var(--ground); }
.hero__poster { background-image: none; background: var(--ground); overflow: hidden; }
.hero__poster canvas, .hero__poster .stage__poster { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero__poster .stage__poster { object-fit: cover; object-position: 62% 50%; }
html.is-holding .hero__poster { position: fixed; inset: 0; z-index: 35; height: auto; min-height: 0; -webkit-mask-image: none; mask-image: none; }

/* the chrome: gone in 0.4 s on press, back in 0.65 s on release */
.top, .chapter-pill, .hero h1, .hero__card, .hero__right, .cue, .hold-toggle { transition: opacity var(--dur-chrome-in) var(--ease-ui), transform var(--dur-chrome-in) var(--ease-ui); }
html.is-holding .top, html.is-holding .chapter-pill, html.is-holding .hero h1, html.is-holding .hero__card, html.is-holding .hero__right, html.is-holding .cue, html.is-holding .hold-toggle { opacity: 0; pointer-events: none; transition-duration: var(--dur-chrome-out); }
html.is-holding .hero h1, html.is-holding .hero__card, html.is-holding .hero__right { transform: translateY(8px); }

/* the words: the only text in the scene while held */
.flight-words { position: fixed; left: var(--margin); top: 12vh; z-index: 36; margin: 0; max-width: 60vw; pointer-events: none; font: 500 var(--t-words) / 1 var(--display); letter-spacing: -0.04em; color: var(--ink); }
.flight-words .w { font-weight: inherit; display: inline-block; white-space: pre; }
.flight-words span { display: inline-block; opacity: 0; animation: letter-in .12s linear both; }
.flight-words.is-out span { animation: letter-out .12s linear var(--out, 0ms) both; }
@keyframes letter-in { 0% { opacity: 0; } 35% { opacity: .12; } 60% { opacity: 1; } 75% { opacity: .12; } 100% { opacity: 1; } }
@keyframes letter-out { 0% { opacity: 1; } 40% { opacity: .12; } 100% { opacity: 0; } }

/* the release line */
.flight-chip { position: fixed; left: 50%; bottom: 12vh; z-index: 36; transform: translateX(-50%) translateY(6px); margin: 0; padding: 12px 20px; border-radius: 999px; background: var(--glass-catch); border: 1px solid var(--line); color: var(--ink); font: 500 var(--t-17) / 1.2 var(--text); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .35s var(--ease-out), transform .35s var(--ease-out); }
.flight-chip.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* the cursor: a ring that fills over one lap, and its label */
.flight-cursor { position: fixed; left: 0; top: 0; z-index: 37; pointer-events: none; opacity: 0; transition: opacity .25s; will-change: transform; }
.flight-cursor.is-on { opacity: 1; }
.flight-cursor.is-hidden { opacity: 0; }
.flight-cursor svg { position: absolute; left: -32px; top: -32px; width: 64px; height: 64px; transform: rotate(-90deg); }
.flight-cursor .track { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.flight-cursor .ring { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 138.23; stroke-dashoffset: 138.23; }
.flight-cursor .dot { fill: var(--ink); }
.flight-cursor .lbl { position: absolute; left: 50%; top: 40px; transform: translateX(-50%); font: 500 var(--t-11) / 1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); white-space: nowrap; transition: opacity .25s; }
html.is-holding .flight-cursor .lbl { opacity: 0; }
@media (hover: hover) and (pointer: fine) { .hero { cursor: none; } .hero a, .hero button, .hero input, .hero label { cursor: pointer; } }
@media (hover: none), (pointer: coarse) { .flight-cursor { display: none; } }

/* touch: the button over the poster, the close bar while flying */
.hold-toggle { display: none; position: absolute; z-index: 6; left: var(--margin); top: calc(56vh - 76px); padding: 14px 20px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass-catch); color: var(--ink); font: 500 var(--t-13) / 1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.hold-close { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: 60px; align-items: center; justify-content: center; border: 0; background: var(--ghost); color: var(--ghost-ink); font: 500 var(--t-13) / 1 var(--mono); letter-spacing: .12em; text-transform: uppercase; padding-bottom: env(safe-area-inset-bottom); }
@media (hover: none), (pointer: coarse) {
  .hold-toggle { display: inline-block; }
  html.is-holding .hold-close { display: flex; }
  .flight-words { top: 10vh; max-width: calc(100vw - 2 * var(--margin)); }
  .flight-chip { bottom: calc(60px + 10vh); font-size: var(--t-15); }
}
@media (min-width: 861px) { .hold-toggle { top: auto; bottom: 160px; left: auto; right: var(--margin); } }

/* reduced motion: nothing flies; the words stand whole */
@media (prefers-reduced-motion: reduce) {
  .flight-words span { animation: none; opacity: 1; }
  .flight-words.is-out span { opacity: 0; }
  .hero__poster .stage__poster { transition: none; }
}
.flight-words.is-all { max-width: 72vw; font-size: var(--t-44); line-height: 1.15; }
/* the verifier's textarea on the light ground, and the touch button at the HIG floor */
.instrument textarea { background: var(--sheet); color: var(--ink-s); }
.hold-toggle { min-height: 44px; }
@media (max-width: 860px) { .hold-toggle { top: calc(56vh - 190px); left: auto; right: var(--margin); } }