/* stage.css (fishtank.cam, 2026-10-30; stage.js). The scroll story on one sticky stage: the cameras, the one tank (a canvas),
   the cycle ring and the day's line. Everything that moves is moved by transform or opacity from stage.js. */
html.stage { --stg-veil: rgb(10 12 11 / 80%); }
:root[data-theme="light"].stage { --stg-veil: rgb(246 245 240 / 82%); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]).stage { --stg-veil: rgb(246 245 240 / 82%); } }

/* ---- the old opening is the stage's now */
html.stage .intro-stage, html.stage #intro-msgs, html.stage .tank3d-wrap, html.stage .intro-cam { display: none !important; }
html.stage.v4.lay-b .intro, html.scrub.stage.v4.lay-b:not(.intro-static) .intro { height: 610vh; height: 610svh; scroll-snap-align: none; }
html.stage #c-live > .ch-head, html.stage #sidecam > .tale, html.stage .wherefish-x { display: none !important; }
html.stage #c-live, html.stage #sidecam { min-height: 0 !important; padding: 0 !important; margin: 0 !important; }

/* ---- the stage */
.stg { position: fixed; left: 0; top: 0; z-index: 1; display: block; width: 100%; height: 100vh; height: 100svh; margin: 0; padding: 0; overflow: hidden; pointer-events: none; contain: layout style size; }
html.stage #pages { position: relative; z-index: 2; }
html.stage :is(.chapter, .band, .ch-gap) { background: transparent !important; }
.stg > * { position: absolute; left: 0; top: 0; margin: 0; }
.stg-rig { transform-origin: 0 0; will-change: transform; opacity: 0; visibility: hidden; }
.stg-cv { position: absolute; inset: 0; display: block; width: 100%; height: 100%; visibility: hidden; }
.stg-ov { position: absolute; }
.stg-ov > * { position: absolute; }
.stg-spot { position: absolute; inset: 0; visibility: hidden; opacity: 0; }
/* the night over the glass and the light's beam (the picture's pixels: glass 31..737, the bar's underside at 140, the bottom 926) */
.stg-night { left: 4.04%; width: 91.93%; top: 8.34%; height: 46.81%; background: linear-gradient(rgb(1 6 12 / 92%), rgb(1 6 12 / 96%)); border-radius: 2px; visibility: hidden; opacity: 0; }
.stg-fish { inset: 0; }
.stg-fcv { display: block; pointer-events: none; }   /* the fish and the CO2 bubbles: one canvas, drawn on its own clock (stage.js) */
/* the light, lit on the walk's Light stop: the bar's underside (112..658 x 120..140) */
.stg-glow { left: 14.58%; width: 71.09%; top: 7.15%; height: 1.2%; border-radius: 99px; background: rgb(255 251 238 / 85%); box-shadow: 0 0 18px 6px rgb(255 245 214 / 70%), 0 0 60px 20px rgb(255 245 214 / 28%); opacity: 0; }

/* ---- the gear: the stand's doors and what is inside (mock.js, without its own picture) */
.stg-gear { inset: 0; margin: 0; visibility: hidden; }
.stg-gear .mk-stage { width: 100% !important; height: 100%; max-width: none !important; margin: 0 !important; }
.stg-gear .mk-base { visibility: hidden; }
.stg-gear .mk-in { opacity: var(--open, 0) !important; transition: none !important; }
.stg-gear .mk-door { transition: none !important; pointer-events: none; }
.stg-gear .mk-p { pointer-events: none; transition: none !important; transform-origin: 50% 60%; }
.stg-gear .mk-p::after { display: none !important; }
.stg-gear .mk-p img { transition: none !important; }
.stg-gear :is(.mk-flow, .mk-gasflow, .mk-bub, .mk-bcb) { animation-play-state: paused !important; animation-delay: calc(var(--fl, 0) * -1s) !important; }
html.stg-gear-on .stg-gear .mk-p { will-change: transform, opacity; }

/* ---- the cameras */
.stg-cam { pointer-events: none; will-change: opacity; }
html.stage .stg-cam .tankside { position: relative !important; width: 100% !important; height: 100%; max-width: none !important; margin: 0 !important; padding: 0 !important; display: block !important; }
html.stage .stg-cam .tankside .viewslot { width: 100% !important; max-width: none !important; margin: 0 !important; }
html.stage .stg-cam :is(.livenow, .modenow, .tale) { display: none !important; }
.stg-side { visibility: hidden; opacity: 0; }
html.stage .stg-side .viewslot-side { width: 100% !important; height: 100%; max-width: none !important; margin: 0 !important; aspect-ratio: 16 / 9; }
.stg-line { width: 100%; text-align: center; font-family: var(--display, var(--sans)); font-size: clamp(1.375rem, 2.6vw, 2.125rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; color: var(--strong); visibility: hidden; opacity: 0; padding: 0 1rem; }

/* ---- the opening's words: beside the camera on a computer, under it on a phone */
html.stage .stg #intro-words { position: absolute; top: 0; left: 5vw; width: calc(var(--cam-x, 40vw) - 9vw); height: 100%; display: flex; flex-direction: column; justify-content: center; text-align: left; transform: none; }
html.stage .stg #intro-words .intro-logo { display: none; }
html.stage .stg .intro-title { margin: 0; max-width: none; font-size: clamp(2.5rem, 4.6vw, 5rem); text-align: left; }
html.stage .stg .intro-sub { margin: 1rem 0 0; max-width: 26rem; text-align: left; }
html.stage .stg #intro-cue { position: absolute !important; top: auto !important; bottom: calc(16px + env(safe-area-inset-bottom)) !important; left: 0 !important; width: 100% !important; transform: none !important; translate: none !important; margin: 0 !important; }
html.stg-phone .stg #intro-words { top: calc(var(--cam-b, 70vh) + 14px); left: 0; width: 100%; height: auto; padding: 0 20px; display: block; text-align: center; }
html.stg-phone .stg .intro-title { font-size: clamp(2rem, 9vw, 2.75rem); text-align: center; }
html.stg-phone .stg .intro-sub { margin: .5rem auto 0; text-align: center; font-size: 1.0625rem; }

/* ---- the cycle ring and the day's line beside / under the tank */
.stg-ring { visibility: hidden; opacity: 0; }
.stg-ring .md-cycart { width: 100%; height: 100%; margin: 0; }
.stg-ring .md-cyc { width: 100%; height: 100%; max-height: none; }
.stg-ring .md-cap { display: none !important; }
.stg-tl { visibility: hidden; opacity: 0; }
.stg-tl .md-daytl { width: 100%; height: 100%; overflow: visible; }

/* ---- the held steps: the stage holds the pictures, the steps are the words */
html.stage .md-pic, html.stage .md-sb, html.stage .md-big { display: none !important; }
html.stage .md-hold { display: block !important; width: auto !important; margin: clamp(1rem, 3vh, 2rem) 0 0 !important; }
html.stage .md-steps { padding: 26vh 0 30vh !important; }
html.stage .md-steps > li, html.scrub.stage .md-hold.md-flip .md-steps > li { min-height: 56vh !important; transition: none !important; align-items: flex-start !important; text-align: left !important; }
html.stage .md-t, html.scrub.stage .md-hold.md-flip .md-t { margin-left: 0 !important; margin-right: 0 !important; }
html.stage .md-cut { margin: 0 0 .75rem !important; }

/* ---- a computer: the words take the half the tank is not on */
html.stg-wide .chapter[data-tank], html.stg-wide .chapter[data-tank] > .band, html.stg-wide .sitefoot { width: auto !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
html.stg-wide .chapter[data-tank] :is(.band > .wrap, .ch-gap) { box-sizing: border-box; width: min(34rem, 40vw) !important; max-width: none !important; }
html.stg-wide .chapter[data-tank="L"] :is(.band > .wrap, .ch-gap) { margin-left: calc(55vw - var(--stg-x0, 0px)) !important; margin-right: 0 !important; }
html.stg-wide .chapter[data-tank="R"] :is(.band > .wrap, .ch-gap) { margin-left: calc(max(4vw, 46vw - min(34rem, 40vw)) - var(--stg-x0, 0px)) !important; margin-right: 0 !important; }
html.stg-wide .chapter[data-tank] :is(.lede, .head, .tale, .tale p, .routine, .ch-next) { text-align: left !important; margin-left: 0 !important; }
html.stg-wide .chapter[data-tank] .band .wrap .lede { max-width: none; }
html.stg-wide .sitefoot .wrap { width: min(34rem, 40vw); margin-left: calc(max(4vw, 46vw - min(34rem, 40vw)) - var(--stg-x0, 0px)); text-align: left; }

/* the photo montage and the photo grid: the tank steps aside (stage.js "away"), so they take the middle of the screen */
html.stg-wide .chapter[data-tank] > :is(#growth, #days) > .wrap { width: min(58rem, 84vw) !important; margin-left: calc(50vw - min(29rem, 42vw) - var(--stg-x0, 0px)) !important; }
html.stg-wide .chapter[data-tank] > :is(#growth, #days) :is(.lede, .head, .tale, .tale p) { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
/* the tank changes sides in a stretch with no words, so it never slides under a line being read */
html.stg-wide .chapter[data-tank] { padding-top: 55vh !important; }
/* ---- a phone: the stage over the words, its upper part solid so the words pass under the tank */
html.stg-phone .stg { z-index: 3; }
.stg-bg, .stg-in { width: 100%; height: 100%; }
.stg-in > * { position: absolute; left: 0; top: 0; margin: 0; }
html.stg-phone .stg-bg { overflow: hidden; background: var(--bg); pointer-events: auto; will-change: transform;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent); mask-image: linear-gradient(#000 calc(100% - 28px), transparent); }
html.stg-phone .stg-in { will-change: transform; }
html.stg-phone .md-steps { padding: 30svh 0 20svh !important; }
html.stg-phone .md-steps > li, html.stg-phone.scrub .md-hold.md-flip .md-steps > li { min-height: 40svh !important; justify-content: center !important; }

/* 10/31: the ring moves with the (eased) scroll: no timed transitions, each stop lights and dims by --on (mid.js) */
html.stage :is(.md-arc, .md-nc, .md-node) { transition: none !important; }
html.stage .md-node .md-nc, html.stage .md-node.on .md-nc { fill: color-mix(in srgb, var(--c) calc(var(--on, 0) * 28%), var(--bg)); transform: scale(calc(1 + var(--on, 0) * .12)); }

/* the cycle's own words show here (pass11.css hid them on phones behind a caption under the ring) */
html.stage .md-hold-cyc .md-steps > li { opacity: .2; }
@media (prefers-reduced-motion: reduce) {
  html.stage .md-steps > li { opacity: 1 !important; }
  .stg-f { will-change: auto; }
}