/* VIRGA — home: one sortie, one scroll. The canvas is fixed; chapters are tall and empty;
   every caption is a fixed "scene" switched on by story time. */
.home { background: var(--paper); }
.ch { position: relative; height: calc(var(--h) * 1vh); }

.scene { position: fixed; inset: 0; z-index: 10; pointer-events: none; visibility: hidden; transition: visibility 0s 0.45s; color: var(--ink); }
.scene.is-live { visibility: visible; transition-delay: 0s; }
.scene [data-rise] { opacity: 0; transform: translateY(14px); transition: opacity 0.35s var(--ease-in), transform 0.4s var(--ease-in); }
.scene.is-live [data-rise] { opacity: 1; transform: none; transition: opacity 0.9s var(--ease) var(--d, 0ms), transform 1.1s var(--ease) var(--d, 0ms); }
.scene .wi { transition: transform 0.4s var(--ease-in); transition-delay: 0ms; }
.scene.is-live .wi { transition: transform 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 55ms + 60ms); }
.scene a, .scene button, .scene input { pointer-events: auto; }

.cap { position: absolute; left: var(--gutter); bottom: clamp(64px, 11vh, 120px); width: min(31rem, 42vw); display: grid; gap: 18px; }
.cap h2 { font-size: clamp(34px, 4.1vw, 66px); }
.cap .label { display: flex; gap: 12px; align-items: baseline; }
.cap__row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.scene--end .cap { left: 50%; bottom: clamp(70px, 13vh, 140px); transform: translateX(-50%); width: min(44rem, 86vw); text-align: center; justify-items: center; }
.scene--end .cap h2 { font-size: clamp(36px, 4.6vw, 76px); }
.scene--end .cap__row { justify-content: center; }

/* cover */
.cover__issue { position: absolute; left: var(--gutter); top: calc(var(--nav-h) + 14px); display: flex; gap: 10px; }
.cover__say { position: absolute; left: var(--gutter); bottom: clamp(56px, 9vh, 100px); width: min(30rem, 40vw); display: grid; gap: 20px; }
.cover__say h1 { font-size: clamp(38px, 4.5vw, 76px); }
.cover__cue { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.cover__cue i { position: relative; width: 1px; height: 34px; background: var(--faint); overflow: hidden; }
.cover__cue i::after { content: ''; position: absolute; inset: 0; background: var(--ink); animation: cue 2.2s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateY(-100%); } 55% { transform: none; } 100% { transform: translateY(100%); } }

/* instruments */
.rail { position: fixed; left: var(--gutter); top: 50%; z-index: 20; transform: translateY(-50%); display: grid; gap: 2px; color: var(--ink); opacity: 0; transition: opacity 0.8s 0.4s; }
.is-ready .rail, .is-ready .alt, .is-ready .place { opacity: 1; }
.rail button { display: flex; align-items: center; gap: 10px; height: 22px; font: 400 9px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.42; transition: opacity 0.3s; cursor: pointer; }
.rail button::before { content: ''; width: 14px; height: 1px; background: currentColor; transition: width 0.4s var(--ease), background 0.3s; }
.rail button span { opacity: 0; transform: translateX(-6px); transition: opacity 0.3s, transform 0.4s var(--ease); white-space: nowrap; }
.rail button:hover, .rail button.is-on { opacity: 1; }
.rail button:hover span, .rail button.is-on span, .rail button:focus-visible span { opacity: 1; transform: none; }
.rail button.is-on::before { width: 26px; background: var(--signal); }

.alt { position: fixed; right: var(--gutter); top: 50%; z-index: 20; transform: translateY(-50%); display: flex; align-items: center; gap: 16px; color: var(--ink); opacity: 0; transition: opacity 0.8s 0.5s; }
.alt__tape { position: relative; width: 16px; height: 190px; overflow: hidden; -webkit-mask: linear-gradient(transparent, #000 22%, #000 78%, transparent); mask: linear-gradient(transparent, #000 22%, #000 78%, transparent); }
.alt__tape i { position: absolute; inset: -200px 0; background: repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 8px) right / 6px 100% no-repeat, repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 40px) right / 14px 100% no-repeat; opacity: 0.6; will-change: transform; }
.alt__tape b { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--signal); }
.alt__read { display: grid; gap: 12px; }
.alt__read div { display: grid; gap: 3px; }
.alt__read dt { font: 400 8.5px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); }
.alt__read dd { font-size: 12px; line-height: 1; letter-spacing: 0.04em; min-width: 7ch; }
.alt__read small { font-size: 8.5px; margin-left: 4px; color: var(--mute); letter-spacing: 0.12em; text-transform: uppercase; }
.place { position: fixed; left: var(--gutter); bottom: 20px; z-index: 20; display: flex; gap: 12px; color: var(--ink); opacity: 0; transition: opacity 0.8s 0.6s; }
.is-foot .rail, .is-foot .alt, .is-foot .place { opacity: 0; transition-delay: 0s; pointer-events: none; }

/* skin: eight pans */
.shades { position: absolute; left: 50%; bottom: clamp(56px, 9vh, 100px); display: flex; gap: 14px; translate: -50% 0; }
.shade { position: relative; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; pointer-events: auto; }
.shade i { position: absolute; inset: 4px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #fff9 0, #fff0 34%), radial-gradient(circle at 60% 70%, var(--b), var(--a) 78%); box-shadow: inset 0 0 0 1px #0002, 0 1px 2px #0003; transition: transform 0.5s var(--ease); }
.shade::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--ink); opacity: 0; transform: scale(0.8); transition: opacity 0.3s, transform 0.5s var(--ease); }
.shade:hover i { transform: scale(0.9); }
.shade[aria-checked='true']::before { opacity: 1; transform: none; }
.shade span { position: absolute; left: 50%; bottom: calc(100% + 12px); translate: -50% 4px; white-space: nowrap; font: 400 9px/1.5 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; text-align: center; opacity: 0; transition: opacity 0.3s, translate 0.4s var(--ease); pointer-events: none; }
.shade span small { display: block; font-size: 8px; color: var(--mute); letter-spacing: 0.1em; }
.shade:hover span, .shade:focus-visible span, .shade[aria-checked='true'] span { opacity: 1; translate: -50% 0; }
.shades:hover .shade[aria-checked='true']:not(:hover) span { opacity: 0; }

/* fire: throttle */
.gauge { position: absolute; right: calc(var(--gutter) + 140px); bottom: clamp(64px, 11vh, 120px); display: flex; gap: 26px; align-items: flex-end; }
.gauge__bar { position: relative; width: 2px; height: 150px; background: var(--faint); }
.gauge__bar i { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: var(--signal); transform-origin: bottom; transform: scaleY(0.1); }
.gauge__bar span { position: absolute; left: 12px; bottom: calc(var(--y) * 100%); translate: 0 50%; font: 400 8.5px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); }
.gauge dl { display: grid; gap: 14px; margin-left: 34px; }
.gauge dd { font-size: 26px; line-height: 1; letter-spacing: -0.02em; margin-top: 6px; font-weight: 300; }
.gauge dd small { font-size: 9px; margin-left: 6px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); font-weight: 400; }

/* lines and tags pinned to points on the aircraft */
.lines { position: fixed; inset: 0; z-index: 9; width: 100%; height: 100%; pointer-events: none; color: var(--ink); overflow: visible; }
.lines line, .lines path { stroke: currentColor; stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.lines circle { fill: var(--signal); }
.lines text { fill: currentColor; font: 400 10px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.tags { position: fixed; inset: 0; z-index: 11; pointer-events: none; color: var(--ink); }
.tag { position: absolute; left: 0; top: 0; display: grid; gap: 4px; white-space: nowrap; opacity: 0; will-change: transform, opacity; }
.tag b { font: 400 9px/1 var(--mono); letter-spacing: 0.16em; color: var(--signal); }
.tag strong { font: 400 clamp(17px, 1.5vw, 23px)/1.05 var(--serif); font-style: italic; letter-spacing: -0.005em; }
.tag small { font: 400 9px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
.tag--r { text-align: right; justify-items: end; }
a.tag { pointer-events: auto; cursor: pointer; padding: 8px 10px; margin: -8px -10px; }
a.tag strong { transition: color 0.3s; }
a.tag:hover strong { color: var(--signal); }
.tag--dim { text-align: center; justify-items: center; }
.tag--dim strong { font: 300 clamp(15px, 1.3vw, 19px)/1 var(--mono); font-style: normal; letter-spacing: 0.02em; }

/* loader */
.loader { position: fixed; inset: 0; z-index: 140; background: var(--paper); color: #15161a; display: grid; place-items: center; transition: clip-path 1.1s var(--ease), visibility 0s 1.1s; clip-path: inset(0); }
.loader.is-done { clip-path: inset(0 0 100% 0); visibility: hidden; }
.loader__mark { width: clamp(70px, 9vw, 130px); height: auto; overflow: visible; }
.loader__mark path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0)); }
.loader__row { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 44px; display: flex; justify-content: space-between; }
.loader__bar { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 30px; height: 1px; background: #15161a22; }
.loader__bar i { display: block; height: 100%; background: #15161a; transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 0.4s var(--ease); }

@media (max-width: 860px) {
  .rail, .alt { display: none; }
  .cap, .cover__say { width: auto; right: var(--gutter); }
  .gauge { display: none; }
  .shades { gap: 8px; }
  .shade { width: 36px; height: 36px; }
}

/* first visit: the room dims and the sound switch is left in the light */
.coach { position: fixed; inset: 0; z-index: 100; cursor: pointer; opacity: 0; transition: opacity 0.9s var(--ease); }
.coach.is-on { opacity: 1; }
.coach.is-yes { transition-duration: 0.8s; transition-delay: 0.15s; }
.coach__hole { position: absolute; border-radius: 999px; box-shadow: 0 0 0 200vmax rgb(8 9 13 / 0.56); }
.coach__ring { position: absolute; border-radius: 999px; border: 1px solid rgb(255 255 255 / 0.5); pointer-events: none; }
.coach__ring::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid rgb(255 255 255 / 0.55); animation: coach-breathe 2.8s var(--ease) infinite; }
.coach.is-yes .coach__ring { border-color: var(--signal); transition: border-color 0.3s; }
@keyframes coach-breathe { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.22, 1.7); opacity: 0; } }
.coach__say { position: absolute; display: grid; gap: 8px; justify-items: end; text-align: right; color: #f3efe8; opacity: 0; transform: translateY(8px); transition: opacity 0.8s var(--ease) 0.35s, transform 0.9s var(--ease) 0.35s; pointer-events: none; }
.coach.is-on .coach__say { opacity: 1; transform: none; }
.coach__say em { font: italic 400 clamp(22px, 2vw, 30px)/1 var(--serif); letter-spacing: -0.005em; }
.coach__say span { font: 400 9px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: rgb(243 239 232 / 0.62); }
.coach__hand { position: absolute; left: -3px; top: -2px; overflow: visible; opacity: 0; transform-origin: 3px 3px; filter: drop-shadow(0 3px 5px rgb(0 0 0 / 0.35)); pointer-events: none; will-change: transform, opacity; }
.coach__tap { position: absolute; width: 0; height: 0; pointer-events: none; }
.coach__tap::after { content: ''; position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #fff; opacity: 0; }
.coach__tap.is-go::after { animation: coach-tap 0.9s var(--ease) forwards; }
@keyframes coach-tap { 0% { transform: scale(0.15); opacity: 0.9; } 100% { transform: scale(1); opacity: 0; } }
@media (hover: none), (pointer: coarse) { .coach__hand { left: -12px; top: -12px; transform-origin: 12px 12px; } }