/* River — the home page, in the app's Midnight theme (Theme.midnight), on
   top of common.css (the tokens, the bar, the footer, the overlay).
   The river is drawn as the app draws it in any theme (RiverPalette(theme:)):
   the highlight, additive, over black — a room with the lights down, so the
   lines always glow. The page is dark only, for the same reason. The iPad is
   space black; it's a device, not a surface.

   One scrolling page: the bar pinned at the top, the iPad, the capsule tabs
   under it (they scroll up and then hold under the bar), a section a
   feature, the footer. The river and the master fader are fixed to the
   window and don't scroll. */

:root {
  --river-line: 63, 184, 166;     /* --midnight-highlight as r,g,b for the canvas */
  --river-blend: lighter;
  --capsule: rgba(22, 27, 38, 0.72);

  --bezel: #101315;
  --bezel-edge: #3b4247;

  --tabs-h: 62px;                 /* the sticky tabs' height; anchors clear both */
  /* Play's fade: the audio's two seconds (audio/engine.js EASE_IN), so what
     fades on screen fades with the sound. */
  --play-ease-time: 2s;
  --play-ease: ease-in;
  --master-w: 60px;               /* the floating fader and its margin, for content to clear */
}
html { scroll-padding-top: calc(var(--bar-h) + var(--tabs-h)); }

/* ---------- the river: fixed, behind everything ----------
   --river-soften: a slight blur over the whole field, done by the compositor
   on the GPU rather than per stroke. It takes the stair-step off the strokes'
   edges and lets crossings bloom a little into each other, the way the app's
   additive coverage ramp does. 0 turns it off. */
#river {
  --river-soften: 0.7px;
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  display: block;
  z-index: -1;
  filter: blur(var(--river-soften));
}

/* ---------- hero: the iPad, one screen less the bar and the tabs ---------- */
.hero {
  min-height: calc(100svh - var(--bar-h) - var(--tabs-h));
  display: grid; place-items: center;
  padding: clamp(8px, 2vh, 24px) max(16px, env(safe-area-inset-right)) clamp(12px, 2vh, 24px) max(16px, env(safe-area-inset-left));
}

/* ---------- the iPad ----------
   Landscape, at the capture's proportion. The bezel is padding as a share of
   width, so it scales with the device; the outer radius is the screen's plus
   the bezel, as on the hardware. Sized from both axes so the tabs show under
   it on the first screen, and kept clear of the master fader. */
.ipad {
  --w: min(1040px, calc(100vw - 2 * var(--master-w) - 32px), calc((100svh - var(--bar-h) - var(--tabs-h) - 72px) * 1.42));
  --bz: calc(var(--w) * 0.026);
  --r-screen: calc(var(--w) * 0.024);
  position: relative;
  margin: 0;
  width: var(--w);
  padding: var(--bz);
  border-radius: calc(var(--r-screen) + var(--bz));
  background: var(--bezel);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 0 1.5px var(--bezel-edge),
    0 0 0 3px #15191c,
    0 30px 80px -20px rgba(0, 0, 0, 0.6),
    0 12px 30px -10px rgba(0, 0, 0, 0.45);
}
.camera {
  position: absolute; top: calc(var(--bz) * 0.5); left: 50%;
  width: calc(var(--bz) * 0.32); aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 35%, #2a3a48 0 25%, #0a0d10 60%);
}
.screen {
  position: relative;
  aspect-ratio: 2420 / 1668;   /* the capture's own */
  border-radius: var(--r-screen);
  overflow: hidden;
  background: #161B26;
  container-type: inline-size;
}

/* ---------- the tabs: under the iPad, then held under the bar ----------
   The nav is only a positioning strip; what shows is the capsule inside it. */
.tabs {
  position: sticky; top: var(--bar-h); z-index: 20;
  min-height: 62px;
  display: flex; align-items: center; justify-content: center;
  padding: 8px 16px;
  pointer-events: none;          /* the strip either side of the capsule isn't a control */
}
.tabs-pill {
  pointer-events: auto;
  /* Wraps onto more lines where the window is too narrow for one; the
     corners then round less, so two rows read as one capsule. Its real
     height goes to --tabs-h (mock/app.js), for anchors to clear. */
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 100%;
  padding: 4px; border-radius: 24px;
  background: rgba(22, 27, 38, 0.78); border: 1px solid var(--rule);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.7);
}
.tabs a {
  flex: none;
  font-size: 18px; font-weight: 600; text-decoration: none; color: var(--fg-dim); white-space: nowrap;
  padding: 7px 16px; border-radius: 999px;
  transition: color 0.2s, background 0.2s;
}
.tabs a:hover { color: var(--fg); }
.tabs a[aria-current="true"] { color: var(--accent-ink); background: var(--accent); }

/* ---------- sections: each a card in the inverted theme ----------
   A light card on the dark page, toned down from white and warmed halfway
   towards the app's Paper theme (Theme.paper: #F2EDE3 ground, #DCD4C6 second,
   #3A332C ink, #2F8C83 teal), so it doesn't glare against the black. 24px
   corners. The river and the black page stay around them. */
main { padding: 0 calc(var(--master-w) + 16px); }
main section {
  --inv-ground: #DFDBD4;          /* Paper's warmth, half of it: a stone white */
  --inv-ink: #2C2A27;
  --inv-dim: #59534D;
  --inv-rule: rgba(44, 42, 39, 0.14);
  --inv-accent: #23756D;          /* Paper's teal, darkened to hold on the card */
  --inv-well: #CFCBC3;            /* the clip slot, a step down */
  max-width: 820px; margin: clamp(40px, 8vh, 80px) auto 0;
  padding: clamp(24px, 4vw, 44px);
  border-radius: 24px;
  background: var(--inv-ground); color: var(--inv-ink);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.8);
}
main section:first-child { margin-top: clamp(24px, 5vh, 48px); }
main h2 { margin: 0 0 12px; font-weight: 600; font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -0.01em; }
main p { margin: 0 0 24px; color: var(--inv-dim); font-size: clamp(16px, 1.5vw, 18px); line-height: 1.55; max-width: 40em; }
main section > :last-child { margin-bottom: 0; }
main a { color: var(--inv-accent); }
/* Get the Beta again at the foot of a section: the bar's button on its own,
   without the bar's capsule around it, centred in the card. */
main .beta-row { max-width: none; text-align: center; }
main .beta-row .beta {
  display: inline-block; padding: 7px 16px; border-radius: 999px;
  background: var(--midnight-tertiary); color: var(--midnight-ground);
  font-size: 18px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: filter 0.2s;
}
main .beta-row .beta:hover { filter: brightness(1.08); }
/* A section's subheadings: Technology's topics, a rule between each. */
main .topic { padding: 20px 0; border-top: 1px solid var(--inv-rule); }
main h2 + .topic, main h2 + p + .topic { margin-top: 12px; }
main .topic:last-child { padding-bottom: 0; }
main h3 { margin: 0 0 8px; font-weight: 600; font-size: clamp(19px, 1.9vw, 22px); color: var(--inv-ink); }
main .topic p { margin: 0; }
main .topic p + .clip { margin-top: 20px; }
/* Where a section's clip goes. A <video> inside fills it. */
.clip {
  position: relative; aspect-ratio: 2420 / 1668; border-radius: 14px; overflow: hidden;
  background: var(--inv-well); border: 1px solid var(--inv-rule);
  display: grid; place-items: center;
}
.clip > span { font-family: var(--mono); font-size: 13px; color: var(--inv-dim); }
.clip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* ---------- the master fader, floating ----------
   Just the capsule, drawn as the app's master is: seven columns of dots with
   the middle three lighting, the white line under the cap fading out, a tick
   at unity. Fixed to the window's right edge. */
.master {
  position: fixed; z-index: 20;
  right: max(14px, env(safe-area-inset-right)); top: 50%; transform: translateY(-50%);
  /* Out of sight until the music is first heard; then it fades in and stays. */
  opacity: 0; visibility: hidden;
  transition: opacity var(--play-ease-time) var(--play-ease), visibility var(--play-ease-time);
}
.has-played .master { opacity: 1; visibility: visible; }
.master-fader {
  --dot: 6px;                      /* the grid: 7 columns across 46px, centred */
  --mf-h: clamp(220px, 50vh, 480px);
  position: relative; width: 46px; height: var(--mf-h);
  border-radius: 23px; cursor: ns-resize; touch-action: none;
  background: radial-gradient(circle, #323948 1.9px, transparent 2.4px) 2px 2px / var(--dot) var(--dot), #3a4151;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(230, 236, 245, 0.08);
}
.mf-lit {
  position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle, #3d968e 1.9px, transparent 2.4px) 2px 2px / var(--dot) var(--dot);
  clip-path: inset(calc(100% - var(--lvl, 0%)) 14px 0 14px);   /* the middle three columns */
}
.mf-tick { position: absolute; left: -9px; width: 6px; height: 2px; border-radius: 1px; background: #a7aebd; top: var(--unity, 25%); }
.mf-line {
  position: absolute; left: 50%; width: 6px; transform: translateX(-50%);
  top: calc(var(--cap, 50%) + 13px); bottom: 4px; border-radius: 3px;
  background: linear-gradient(rgba(230, 236, 245, 0.78), rgba(230, 236, 245, 0.06));
}
.mf-cap {
  position: absolute; left: 50%; top: var(--cap, 50%);
  width: 30px; height: 30px; transform: translate(-50%, -50%); border-radius: 50%;
  border: 3.5px solid #c9ced8;
}
.master-fader.dragging .mf-cap { border-color: #fff; }

@media (max-width: 760px) {
  :root { --master-w: 52px; }
  .master { right: 8px; }
  .master-fader { --mf-h: clamp(170px, 38vh, 320px); }
  /* The iPad takes the width the fader leaves, and sits left of it. */
  .ipad { --w: min(calc(100vw - var(--master-w) - 28px), calc((100svh - var(--bar-h) - var(--tabs-h) - 56px) * 1.42)); justify-self: start; }
}

/* Phones (the bar's two-line width, common.css): no section tabs, and the
   master fader lies down under the iPad, in the page rather than fixed —
   turned a quarter clockwise, so its top (louder) is to the right. It's laid
   out as the upright pill and rotated, so the drawing (mock/app.js) is
   unchanged; only the pointer reads along x. The iPad gets the width back. */
@media (max-width: 640px) {
  /* --tabs-h to 0 too: hidden, the tabs never report a height (mock/app.js). */
  :root { --master-w: 0px; --tabs-h: 0px; }
  .tabs { display: none; }
  .hero { align-content: center; gap: 18px; }
  .ipad { --w: calc(100vw - 32px); justify-self: center; }
  .master {
    position: relative; right: auto; top: auto; transform: none;
    justify-self: center;
    width: var(--mf-h); height: 46px;
  }
  .master, .master-fader { --mf-h: calc(100vw - 72px); }
  .master-fader {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    cursor: ew-resize;
  }
}

/* ---------- arrival ----------
   On load the iPad fades in as it zooms up from a little smaller, from its
   centre; the tabs follow it in. Not for anyone who's asked for less motion. */
@keyframes ipad-in {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: none; }
}
@keyframes tabs-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .ipad { transform-origin: 50% 50%; animation: ipad-in 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s both; }
  .tabs-pill { animation: tabs-in 0.7s ease-out 1.1s both; }
}