/* ── THE CODES, COMING AT YOU ────────────────────────────────────────────────
   src/views/code-flood.js + public/js/code-flood.js. The front page's first
   screen, as Arian drew it on 2026-09-26 over the picture he handed over for
   its ground: the name in metal big across the top with the tagline under
   it, the pillars in the top left corner and the four words in the top
   right, the statement and START HERE in the bottom right, and the Codes'
   cards flying out of the dark between them.

   Every card is in front of the name — Arian: "they never need to be behind,
   they need to always be in front of, but low opacity, and never exceed 90%
   opacity at their peak". The words are in front of everything.

   The cards fly in one 3D space. The stage holds the perspective and looks
   at the point they come from (--flood-vy, under the name); a card is
   --flood-w wide on the glass, 4:5 like every other.

   THE SCROLL PLAYS IT. Arian, 2026-09-26: "A few scrolls will bring the 3d
   cards in towards the camera and nothing plays on its own", and "there
   needs to be no cards at first". With the script, the section is a runway
   two stops long (--flood-step each) and the screen (.flood__pin) stands
   still in it; the script flies the cards by how far the page has come. For
   anyone who asked for less motion, or without the script, it is one screen
   with a few cards standing still where the view put them (REST: --rx vw,
   --ry vh, --rz perspectives, turned --rt about --ax/--ay, at opacity --ro).

   The perspective grows with the screen, so the flight looks the same on a
   phone and on a wall. No shadows, no glow: pictures on the picture. */
.flood {
  --flood-p: max(760px, 90vmax);
  --flood-vy: 60%;
  --flood-w: clamp(160px, 20vw, 380px);
  /* The name across the top: its width, its height (the traced letters'
     own box is 8300 × 1336) and how far down it stands. */
  --flood-markw: min(68vw, 1180px);
  --flood-markh: calc(var(--flood-markw) * 1336 / 8300);
  --flood-markt: calc(var(--nav-h) + clamp(1.4rem, 8svh, 5.5rem));
  --flood-foot: calc(max(1.4rem, 5svh) + var(--toolbar)); /* the bottom row off the bottom, clear of a phone's toolbar */
  --flood-small: clamp(.62rem, .8vw, .8rem);
  --flood-step: 45svh;                   /* the page's way from one stop to the next */
  --flood-screen: max(calc(100svh + var(--toolbar)), 32rem);
  position: relative; isolation: isolate;
  height: var(--flood-screen);            /* the whole glass, under a phone's toolbar too (tokens.css) */
  background: var(--black); color: #f2f4f7;
  user-select: none; -webkit-user-select: none;
}
/* A screen shorter than the stage's floor (a phone on its side) keeps the
   stage to what shows, so nothing is under the fold. */
@media (max-height: 520px) { .flood { --flood-screen: calc(100svh + var(--toolbar)); } }
/* On a phone the bar is solid (components.css): the name stands under it,
   and the cards come from the middle of what is left. */
/* Arian, 2026-09-26: "on the phone view the YOU.0 should be more in the
   center of the page" — its middle a little above the screen's, the cards
   coming out from just under it. */
@media (max-width: 760px) {
  .flood { --flood-w: 44vw; --flood-vy: 58%; --flood-markw: calc(100vw - 2 * var(--gutter)); --flood-markt: calc(45% - var(--flood-markh) / 2); --flood-small: .6rem; }
}
.flood__pin { position: relative; height: var(--flood-screen); overflow: clip; }

/* ── The ground: Arian's picture, the whole screen ─────────────────────── */
.flood__bg { position: absolute; inset: 0; z-index: 0; transform-origin: 50% 45%; }
.flood__bg picture, .flood__bg img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 62% 40%; }
/* On a phone the rocks' brightest light falls under the statement: the
   picture darkens toward the bottom there, painted, so the words read. */
@media (max-width: 760px) {
  /* The planet's rainbow rim sweeping down the right side and behind the
     name's .0 (Arian chose this one of three, 2026-09-26: "I like the 80"). */
  .flood__bg img { object-position: 80% 50%; }
  .flood__bg::after { content: ''; position: absolute; inset: auto 0 0; height: 48%; background: linear-gradient(to top, rgba(4, 5, 7, .78), rgba(4, 5, 7, .45) 45%, rgba(4, 5, 7, 0)); }
}

.flood__stage {
  position: absolute; inset: 0; z-index: 1;
  perspective: var(--flood-p);
  perspective-origin: 50% var(--flood-vy);
}
/* The space itself, a point under the name. The script moves it toward the
   viewer as the page scrolls away from the first screen. */
.flood__world {
  position: absolute; left: 50%; top: var(--flood-vy); width: 0; height: 0;
  transform-style: preserve-3d;
}

/* ── The name, across the top ──────────────────────────────────────────── */
.flood__mark {
  position: absolute; left: 50%; top: var(--flood-markt); display: block;
  width: var(--flood-markw); margin-left: calc(var(--flood-markw) / -2);
  transform-origin: 50% 50%;
}
.flood__svg { display: block; width: 100%; height: auto; max-width: none; overflow: hidden; fill: currentColor; }
.flood__mark--img img { display: block; width: 100%; height: auto; max-width: none; filter: invert(1); }
/* The traced letters, in metal or plain: each rises from behind its own
   baseline, left to right. */
.flood__glyph {
  transform-box: fill-box;
  animation: flood-rise 1.15s cubic-bezier(.19, 1, .22, 1) calc(.2s + var(--g, 0) * 90ms) both;
}
@keyframes flood-rise { from { transform: translateY(104%); } to { transform: none; } }
.flood__mark--img { animation: flood-fade 1.2s ease-out .2s both; }

/* ── The cards ──────────────────────────────────────────────────────────── */
/* Every card one shape — "The codes need to be the 4x5 versions and they all
   need to match" — and "a little bit more roundness". */
.flood__card {
  position: absolute; left: 0; top: 0; display: block; overflow: hidden;
  width: var(--flood-w); aspect-ratio: 4 / 5;
  margin-left: calc(var(--flood-w) / -2);
  margin-top: calc(var(--flood-w) * -.625);
  border-radius: calc(var(--flood-w) * .075);
  opacity: var(--ro, .9);
  background: #0b0c10;
  backface-visibility: hidden;
  transform: translate3d(calc(var(--rx, 0) * 1vw), calc(var(--ry, 0) * 1vh), calc(var(--rz, -3) * var(--flood-p)))
    rotate3d(var(--ax, 0), var(--ay, 1), 0, var(--rt, 0deg));
}
.flood__card picture, .flood__img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; }
/* Standing still, only the first few show. */
.flood__card--later { display: none; }
/* Standing still, they come out of the dark once the name is up. */
.flood:not(.is-live) .flood__card { animation: flood-fade 1.6s ease-out .9s both; }
/* With the script, no card is seen until the page is scrolled (Arian: "there
   needs to be no cards at first"); then a card shows only while it flies. */
@media (prefers-reduced-motion: no-preference) {
  .js .flood .flood__card { visibility: hidden; animation: none; }
  .js .flood.is-live .flood__card { display: block; }
  .js .flood.is-live .flood__card.is-flying { visibility: visible; }
}
/* A Code not open on this site, grey as it is everywhere (routes/home.js),
   and dim: most of the cards are grey, and a light one passing behind the
   words washed them out. */
.flood__card--grey .flood__img, .flood__card--grey img { filter: grayscale(1) brightness(.32); }

/* ── The words ────────────────────────────────────────────────────────────
   Above the space, so a card passing never hides a word; the script fades
   them as the page scrolls away. The small type in the site's small-caps
   tracking, white at three quarters. */
.flood__hud {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  font-family: var(--font-ui); font-size: var(--flood-small); line-height: 2;
  letter-spacing: .2em; text-transform: uppercase; color: rgba(242, 244, 247, .78);
  animation: flood-fade 1.2s ease-out .5s both;
}
.flood__hud p, .flood__hud ul { margin: 0; }
/* rhythm.css sizes every p and li for reading (and loads last); these are
   the stage's small type, so they keep the block's own size. */
.flood__hud :is(p, li) { font-size: inherit; line-height: inherit; }
.flood__hud ul { list-style: none; padding: 0; }

/* The tagline, centred under the name. Its tracking is wide, so the line is
   nudged by one letter's worth to stand in the middle. */
.flood__hud .flood__line {
  position: absolute; left: var(--gutter); right: var(--gutter);
  top: calc(var(--flood-markt) + var(--flood-markh) + clamp(1rem, 3.4svh, 2.2rem));
  padding-left: .55em; text-align: center; white-space: nowrap;
  font-size: clamp(.7rem, 1.15vw, 1.1rem); letter-spacing: .55em; line-height: 1; color: rgba(242, 244, 247, .9);
}
/* The pillars in the top left corner, the four words in the top right, each
   with a short rule under it. */
.flood__list { position: absolute; top: calc(var(--flood-markt) + .3rem); display: grid; justify-items: start; }
.flood__list--1 { left: var(--gutter); }
.flood__list--2 { right: var(--gutter); }
.flood__list::after { content: ''; width: 1.5rem; height: 1px; margin-top: .9rem; background: rgba(242, 244, 247, .38); }

/* The statement, the idea under it and the way in: the bottom right. */
.flood__say {
  position: absolute; right: var(--gutter); bottom: var(--flood-foot);
  width: min(27rem, calc(100% - 2 * var(--gutter)));
  text-transform: none; letter-spacing: 0;
}
.flood__hud .flood__core { font-size: clamp(1rem, 1.55vw, 1.5rem); line-height: 1.3; color: #f2f4f7; }
.flood__hud .flood__sub { margin-top: .45rem; font-size: clamp(.8rem, 1.02vw, 1rem); line-height: 1.5; letter-spacing: .02em; color: rgba(242, 244, 247, .78); }
/* The way in: a control, so it is glass. START HERE is the first step of
   signing up (routes/home.js; Arian, 2026-09-26: "And be a bigger button"):
   taller, and its words larger, than any other button on the page. */
.flood__cta {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 1rem;
  min-height: 72px; padding: 0 2.75rem; margin-top: 1.6rem;
  font-size: clamp(.9rem, 1.05vw, 1.05rem); text-transform: uppercase;
  border: 1px solid var(--btn-line); border-radius: 999px;
  background: var(--btn-skin); color: #f2f4f7;
  backdrop-filter: var(--blur-glass); -webkit-backdrop-filter: var(--blur-glass);
  font-weight: 600; letter-spacing: .16em; line-height: 1;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.flood__cta:hover { background: var(--btn-skin-hi); border-color: var(--btn-line-hi); }
.flood__cta:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.flood__cta .i-arrow { width: 20px; height: 12px; }
/* Stop and go (code-flood.js): a control, so glass — two bars, or a triangle
   once stopped — in the bottom right corner, level with START HERE, which
   stands clear of it. Shown once the cards begin to move. */
.flood__pause {
  position: absolute; right: var(--gutter); bottom: calc(var(--flood-foot) + 14px);
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--btn-line); border-radius: 50%;
  background: var(--btn-skin); color: #f2f4f7; pointer-events: auto;
  backdrop-filter: var(--blur-glass); -webkit-backdrop-filter: var(--blur-glass);
  opacity: .8; transition: opacity var(--t-fast), background var(--t-fast);
}
.flood__pause[hidden] { display: none; }
.flood__pause:hover, .flood__pause:focus-visible { opacity: 1; background: var(--btn-skin-hi); }
.flood__pause:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.flood__pause i { width: 9px; height: 10px; border-inline: 2.5px solid currentColor; }
.flood__pause[aria-pressed="true"] i { width: 0; height: 0; margin-left: 3px; border-inline: 0; border-block: 5.5px solid transparent; border-left: 9px solid currentColor; }
@media (min-width: 761px) { .flood__say { right: calc(var(--gutter) + 44px + 1.5rem); } }

/* A narrower screen has no room beside the name for the four words; a phone
   keeps the name, the tagline and the way in, and no lists at all. */
@media (max-width: 1080px) {
  .flood__list--2 { display: none; }
}
@media (max-width: 760px) {
  .flood__list { display: none; }
  .flood__hud .flood__line { font-size: .62rem; letter-spacing: .34em; padding-left: .34em; }
  .flood__say { left: var(--gutter); right: var(--gutter); width: auto; }
}
@keyframes flood-fade { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .flood__glyph, .flood__mark--img, .flood__hud, .flood:not(.is-live) .flood__card { animation: none; }
}

/* ── The runway ────────────────────────────────────────────────────────────
   Two stops past the top, each a scroll that brings a cluster of cards; the
   screen stands still until the last, then leaves as the page goes on. The
   stops are marks the page rests on (home.css on a phone, smooth-scroll.js
   with a wheel), each a bar's height lower, since the page rests a mark
   just under the bar. */
.flood__stop { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .flood { height: calc(var(--flood-screen) + 2 * var(--flood-step)); }
  .js .flood__pin { position: sticky; top: 0; }
  .js .flood__stop {
    display: block; position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none;
    top: calc(var(--nav-h) + var(--s, 1) * var(--flood-step));
  }
}

/* The floor under the first screen (code-flood.js): fixed to the bottom edge
   while the flood still reaches it, so Safari paints the strip behind its
   toolbar the flood's black. Measured in the iOS 26.4 simulator: it must be
   on top and wholly on the glass — behind the page, 1px tall, or pushed half
   off the edge, Safari passes it over. 8px of black over the flood's black. */
.flood-floor { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; height: 8px; background: var(--black); pointer-events: none; }
.flood-floor[hidden], .no-js .flood-floor { display: none; }
/* On a picture it would be a black line along the bottom of it. Standing
   still on its runway, the first screen has the runway's own black under it
   anyway, not the worlds. */
.flood:has(.flood__bg) + .flood-floor { display: none; }