/* The waitlist page. The cards, card backs, the opening's light and the reveal moments come from the IRIS app's own
   stylesheets (site-base.css, cards-mtg.css, card-idle.css, reveal3d.css, copied unchanged); this file lays them out. */
:root {
  --ink: #08070b;
  --cream: #fff4ec;
  --cream-dim: rgba(255, 244, 236, .66);
  --cyan: #9fe6ff;
  --rainbow: linear-gradient(115deg, #ff5fa2, #ffb347 16%, #fff36b 30%, #6dffb0 46%, #5fd2ff 62%, #9b7bff 78%, #ff5fa2);
  --card-back: url("assets/art/new/cards/binary-v1/web/card-back.webp");
  --card-back-2x: url("assets/art/new/cards/binary-v1/web/card-back-2x.webp");
  --cb-foil: .3;
  --display: "Bodoni Moda", "Didot", serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--serif);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ---------- Background ---------- */
#bg { position: fixed; inset: 0; overflow: hidden; }
#bg .bg-img, #bg-glyphs {
  position: absolute; left: -3%; top: -3%;
  width: 106%; height: 106%;
  max-width: none; /* the artifact viewer caps images at 100%, which left a bare strip down the right edge */
  object-fit: cover; object-position: 68% 50%;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(var(--bgs, 1));
  transition: transform 1.6s cubic-bezier(.2,.7,.1,1), filter 1.2s ease, opacity 1.2s ease;
}
#bg .bg-img { filter: brightness(.82) contrast(1.08) saturate(.85); }
#bg-glyphs { mix-blend-mode: screen; opacity: .9; }
.bg-wash {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, #6b4dff 0%, #2bb8ff 35%, #ff5fc0 65%, #8a6bff 100%);
  background-size: 300% 300%;
  mix-blend-mode: color;
  opacity: .38;
  animation: wash 18s ease-in-out infinite alternate;
}
@keyframes wash { to { background-position: 100% 100%; } }
.bg-vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 70% 45%, transparent 30%, rgba(8,7,11,.7) 75%, var(--ink) 100%),
    linear-gradient(90deg, rgba(8,7,11,.92) 0%, rgba(8,7,11,.55) 32%, transparent 58%);
  transition: opacity 1s ease;
}
.bg-scan {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}
/* past the opening screen the hall steps back (dimmed, not blurred: a blur on a full-screen picture costs phones frames) */
body:not([data-phase="hero"]) #bg { --bgs: 1.06; }
body:not([data-phase="hero"]) #bg .bg-img { filter: brightness(.36) contrast(1.1) saturate(.7); }
body:not([data-phase="hero"]) #bg-glyphs { opacity: .45; }
body:not([data-phase="hero"]) .bg-vignette {
  background: radial-gradient(70% 70% at 50% 50%, rgba(8,7,11,.2), rgba(8,7,11,.85) 80%, var(--ink));
}

/* ---------- Opening screen ---------- */
#hero {
  position: fixed; z-index: 5;
  left: clamp(20px, 6vw, 120px);
  top: 47%; transform: translateY(-50%);
  width: min(32rem, 44vw);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.hero-words { display: flex; flex-direction: column; align-items: center; }
.wordmark {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(5.5rem, 13vw, 11rem);
  line-height: .86;
  letter-spacing: .04em;
  background: linear-gradient(100deg, #fff 0%, #fff 55%, #e9ddff 72%, #c9f0ff 86%, #fff 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: wordshine 7s ease-in-out infinite;
}
@keyframes wordshine { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
.eyebrow { margin: 1.2rem 0 0; padding-left: .5em; font: 500 .78rem/1 var(--sans); letter-spacing: .5em; text-transform: uppercase; }
.lede { margin: 1.6rem 0 0; font-size: clamp(1.12rem, 1.7vw, 1.4rem); line-height: 1.35; color: rgba(255,244,236,.88); }
.sub { margin: .55rem 0 0; font-size: 1rem; line-height: 1.45; font-style: italic; color: rgba(255,244,236,.8); }
#hero :is(.lede, .sub, .eyebrow) { text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 16px rgba(8,7,11,.85); }
.cta { margin-top: 3.4rem; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.fine { margin: 0; font: 500 .7rem/1.2 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: rgba(255,244,236,.78); text-shadow: 0 1px 2px #000; }

.btn-holo {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 2.3rem;
  border: 0; border-radius: 6px;
  background: linear-gradient(180deg, #1b1a24, #0c0b10);
  font-family: var(--serif); font-weight: 700; font-size: 1.06rem; letter-spacing: .04em;
  cursor: pointer;
  isolation: isolate;
  box-shadow: 0 0 22px rgba(160,180,255,.2), 0 0 50px rgba(200,140,255,.1);
  transition: transform .25s ease, box-shadow .25s ease;
}
.btn-holo::before {
  content: ""; position: absolute; inset: -1.5px; z-index: -1; border-radius: 7px;
  background: linear-gradient(100deg, #f6f0a0, #9ff0c8, #9fe6ff, #c8b6ff, #ffb6dc, #f6f0a0);
  background-size: 300% 100%;
  animation: holo 4s linear infinite;
}
.btn-holo::after {
  content: ""; position: absolute; inset: 1px; z-index: -1; border-radius: 5px;
  background: linear-gradient(180deg, #1c1b25, #0b0a0f);
}
.btn-holo:active { transform: scale(.97); }
.btn-holo:hover { transform: translateY(-2px); box-shadow: 0 0 30px rgba(160,180,255,.36), 0 0 70px rgba(220,140,255,.2); }
.btn-holo:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
@keyframes holo { to { background-position: 300% 0; } }
body:not([data-phase="hero"]) #hero { pointer-events: none; }

/* ---------- Shared screen furniture ---------- */
.stage-head {
  position: absolute; top: max(18px, env(safe-area-inset-top)); left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  pointer-events: none;
}
.mini-mark { font-family: var(--display); font-size: 1.55rem; letter-spacing: .12em; }
.stage-eyebrow { max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; font: 500 .68rem/1 var(--sans); letter-spacing: .42em; text-transform: uppercase; color: var(--cream-dim); }
.stage-hint {
  margin: 0 auto; padding: 0 16px; max-width: 30rem; text-align: center;
  font: 500 1rem/1.45 var(--sans); letter-spacing: .01em; color: #fff4ec;
  text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 18px rgba(8,7,11,.9);
  min-height: 2.9em; /* two lines held, so a shorter message never moves the card */
}
.stage-hint.err { color: #ffb3bc; }

/* consent + privacy under the card, as on the Compass gate: marketing emails only if they tick the box */
.consent-row { width: min(380px, calc(100vw - 32px)); margin: 4px auto 0; display: grid; gap: 8px; font: 400 .78rem/1.4 var(--sans); color: rgba(255,244,236,.82); }
.consent-row.off { visibility: hidden; } /* keeps its room, so the card never jumps when it comes or goes */
.consent { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.consent input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #ff2a40; }
.consent-note { margin: 0; color: rgba(255,244,236,.72); }
.consent-row a, .fine a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- The pack screen: the 3D pack idling, as on Home ---------- */
#packScreen { position: fixed; inset: 0; z-index: 6; display: none; }
body[data-phase="pack"] #packScreen, body[data-phase="opening"] #packScreen { display: block; }
#packScreen .stage-hint { position: absolute; left: 0; right: 0; bottom: max(26px, calc(env(safe-area-inset-bottom) + 14px)); }
.home-pack {
  position: absolute; left: 50%; top: 50%;
  height: min(58svh, 560px, calc((100vw - 48px) * 1.5));
  aspect-ratio: 2 / 3;
  translate: -50% -48%;
  margin: 0; padding: 0; border: 0; background: none;
  cursor: pointer;
  -webkit-user-select: none; user-select: none;
  touch-action: none;
}
/* the bloom of light the pack grows out of, after Claim */
.pack-bloom { position: absolute; left: 50%; top: 50%; width: min(120vw, 900px); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 244, 236, .55), rgba(255, 120, 140, .22) 38%, rgba(160, 120, 255, .1) 60%, transparent); mix-blend-mode: screen; opacity: 0; }
/* the soft halo behind it, like Home's */
.home-pack::before {
  content: ""; position: absolute; inset: -14% -30%; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 46% at 50% 50%, rgba(255, 236, 214, .16), rgba(180, 40, 50, .08) 45%, transparent 72%);
  animation: halo 5s ease-in-out infinite alternate;
}
@keyframes halo { from { opacity: .7; } to { opacity: 1; } }
.home-pack:focus-visible { outline: none; }
.home-pack:focus-visible::after { content: ""; position: absolute; inset: -6px; border-radius: 10px; outline: 2px solid var(--focus); }
.home-pack-flat { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; filter: drop-shadow(0 24px 40px rgba(0,0,0,.6)); }
.home-pack-label { position: absolute; left: 18%; right: 18%; top: 44%; bottom: 17.2%; display: flex; flex-direction: column; align-items: center; gap: .2em; pointer-events: none; }
.home-pack-label b { font: 400 calc(min(58svh, 560px) * .085)/1 var(--wordmark); letter-spacing: .12em; color: #f8f3ea; text-shadow: 0 2px 8px #000; }
.home-pack-label i { font: 700 calc(min(58svh, 560px) * .036)/1 var(--serif); font-style: normal; letter-spacing: .06em; color: #f8f3ea; text-transform: uppercase; }
.home-pack-label em { margin-top: auto; font: 700 calc(min(58svh, 560px) * .022)/1 var(--sans); font-style: normal; letter-spacing: .2em; color: #f3c95c; }
.pack-gl-host { position: absolute; inset: 0; pointer-events: none; }
/* no WebGL: the pack screen's own pack (art and words) is what tears */
.flat-pack { position: absolute; inset: 0; filter: drop-shadow(0 24px 40px rgba(0,0,0,.6)); }
.flat-pack .home-pack-flat { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; }
.pack-gl-host canvas.pack-gl { position: absolute; inset: 0; width: 100%; height: 100%; animation: glIn .4s ease-out; }
.home-pack.gl-on .home-pack-flat, .home-pack.gl-on .home-pack-label { opacity: 0; transition: opacity .4s ease; }
body[data-phase="opening"] .home-pack, body[data-phase="opening"] #packScreen .stage-head { visibility: hidden; }

/* ---------- The opening ---------- */
#opening {
  position: fixed; inset: 0; z-index: 8;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
#opening > .open-veil { position: fixed; }
/* the 3D pack's canvas covers the screen; the cards are dealt under it so the pack hides them until they rise */
#opening > canvas.pack-gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
#opening > .open-fx, #opening > .fx-dim { position: fixed; }
#packSpot { position: fixed; left: 50%; top: 50%; z-index: 4; width: var(--pack-w, 260px); height: var(--pack-h, 390px); translate: -50% -50%; touch-action: none; cursor: grab; }
body[data-phase="cards"] #packSpot, body[data-phase="sealed"] #packSpot { display: none; }
body[data-phase="dealing"] #packSpot { pointer-events: none; }
body:not([data-phase="pack"]) #packHint { visibility: hidden; }
/* focus parked on the stage or the "You're in" line for keyboard users: no ring round the whole screen or through the words */
#opening:focus, #cardsEyebrow:focus { outline: none; }
/* the opening screen's own shimmer stops once it's gone */
body:not([data-phase="hero"]) .wordmark, body:not([data-phase="hero"]) .btn-holo::before { animation-play-state: paused; }
/* the bright wash only moves on the opening screen; after that it would repaint under the veil's blur all the time */
body:not([data-phase="hero"]) .bg-wash { animation-play-state: paused; }

#openStage {
  position: relative; z-index: 2;
  min-height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  padding: calc(max(18px, env(safe-area-inset-top)) + 70px) max(16px, env(safe-area-inset-left)) calc(max(18px, env(safe-area-inset-bottom)) + 18px) max(16px, env(safe-area-inset-right));
}
#openStage .stage-head { opacity: 0; transition: opacity .5s ease; }
body:is([data-phase="dealing"], [data-phase="cards"], [data-phase="sealed"]) #openStage .stage-head { opacity: 1; }
/* the stage scrolls with a finger once the card is up (the app's stage blocks touch scrolling for its drag-to-tear) */
#openStage { touch-action: pan-y; }
#cardsHint { opacity: 0; transition: opacity .35s ease; }
#cardsHint.on { opacity: 1; }

/* ---------- The deal and the card ----------
   #deck stacks two layers in one spot: the dealt ten (#spread, the app's .done-spread grid, two rows of five) and the
   live form card (#zoomCard) that the camera zooms to. The form card always takes its space, so nothing jumps. */
#deck {
  --big: max(250px, min(380px, calc((100svh - 300px) / 1.5)));
  position: relative; display: grid; place-items: center;
}
/* the card can't be touched until it has landed (a skip tap mustn't open the keyboard mid-zoom) */
body:not([data-phase="cards"]):not([data-phase="sealed"]) .zoom-card { pointer-events: none; }
/* the dealt ten float over the card's spot without taking room, so the card, hint and opt-in never move */
#spread { position: absolute; left: 50%; top: 50%; translate: -50% -50%; margin: 0; z-index: 1; visibility: hidden; }
#deck.shown #spread { visibility: visible; }
#spread.gone { visibility: hidden !important; }
#spread .turn-front { position: relative; }
#spread .hand-card { transform-origin: 50% 50%; transition: none; }
#spread .hand-card .tc { overflow: clip; }
/* the face-down Mythic waits glowing red before it turns */
#spread .hand-card.tease .card-down { box-shadow: 0 0 0 1.5px #ff2a40, 0 0 calc(var(--w, 80px) * .28) rgba(255, 42, 64, .75); animation: tease .5s ease-in-out infinite alternate; }
@keyframes tease { to { box-shadow: 0 0 0 2px #ff6b78, 0 0 calc(var(--w, 80px) * .5) rgba(255, 42, 64, .95); } }
/* every sample card says so (the app's rule for its invented artists) */
.sa-tag { position: absolute; top: 49.5%; left: 50%; translate: -50% 0; z-index: 9; white-space: nowrap; padding: .3em .6em; border-radius: 99px; pointer-events: none;
  font: 700 max(6px, calc(var(--w, 120px) * .055))/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: #fff4ec; background: rgba(8, 7, 11, .72); box-shadow: inset 0 0 0 1px rgba(255, 244, 236, .28); }
.zoom-card { position: relative; z-index: 2; width: var(--big); visibility: hidden; transform-origin: 50% 50%; }
.zoom-card.on { visibility: visible; }
.zoom-card .tc { width: 100%; }
/* the light that runs over the card as it arrives, and again when it's sealed */
.zoom-card.sweep::after { content: ""; position: absolute; inset: 0; z-index: 8; pointer-events: none; border-radius: 3.6% / 2.4%; mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 240, 230, .75) 50%, transparent 65%) 0 0 / 300% 100% no-repeat; animation: zoomSweep .9s cubic-bezier(.3,.6,.3,1) both; }
@keyframes zoomSweep { from { background-position: 100% 0; } to { background-position: 0% 0; } }

/* the dealt copy of the Mythic is small: its words scale with the card only (the live card keeps 16 px boxes for iOS) */
#spread .form-card .m-name input { font-size: 6cqw; }
#spread .form-card .m-text > span { font-size: 2.7cqw; }
#spread .form-card .m-text input { font-size: 4.4cqw; }
#spread .form-card .seal-btn { font-size: 3.4cqw; }
#spread .form-card .pen { display: none; }

@media (min-width: 1800px) and (min-height: 1100px) { #deck { --big: min(470px, calc((100svh - 330px) / 1.5)); } }
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  #deck { --big: min(360px, calc(100vw - 40px), max(240px, calc((100svh - 190px) / 1.5))); }
  #openStage { justify-content: flex-start; gap: 14px; padding-top: calc(max(12px, env(safe-area-inset-top)) + 64px); }
  #openStage .stage-head { top: max(12px, env(safe-area-inset-top)); gap: .4rem; }
  .mini-mark { font-size: 1.3rem; }
  .seal-btn { height: 82%; font-size: max(12px, 3.4cqw); }
}

/* the live card is flat: no 3D, no idle motion, so its boxes behave like any form on any phone */
.tc.form-card { transform: none !important; }
.tc.form-card > .tc-holo, .tc.form-card > .tc-shine, .tc.form-card .m-grain, .tc.form-card .holo-sheen { pointer-events: none; }

/* a little holographic foil on the Mythic (Dodd 11-02): a rainbow band that drifts across it and the red foil's light
   circling, on every screen (a phone has no hover to move it) */
@property --bx { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --by { syntax: "<percentage>"; inherits: false; initial-value: 40%; }
@media (prefers-reduced-motion: no-preference) {
  .zoom-card .tc.form-card > .tc-holo { animation: foilLight 7s ease-in-out infinite; }
  .holo-sheen { animation: sheen 6s ease-in-out infinite; }
}
@keyframes foilLight { 0%, 100% { --bx: 22%; --by: 28%; } 25% { --bx: 78%; --by: 36%; } 50% { --bx: 70%; --by: 72%; } 75% { --bx: 26%; --by: 64%; } }
.zoom-card .tc.form-card > .tc-holo { opacity: .62; }
.holo-sheen { position: absolute; inset: 0; z-index: 5; border-radius: inherit;
  background: linear-gradient(115deg, transparent 22%, rgba(255, 95, 162, .55) 33%, rgba(255, 220, 110, .5) 40%, rgba(109, 255, 176, .45) 47%,
    rgba(95, 210, 255, .55) 54%, rgba(155, 123, 255, .55) 61%, transparent 72%) 0 0 / 260% 260% no-repeat;
  mix-blend-mode: color-dodge; opacity: .3; }
@keyframes sheen { 0%, 100% { background-position: 100% 100%; } 50% { background-position: 0% 0%; } }

/* the binary portrait in each card's circle */
.mtg .m-art canvas.glyphs { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; z-index: 1; }

/* ---------- The form on the Mythic card ----------
   Dodd 11-02: the name box should be easy to hit and obviously where your name goes; the email box obvious by colour.
   Each box is a real field (a lit outline, a pen, a pulse until it's filled), and the whole plate or panel around it is
   its label, with a few px more round the edge, so a tap anywhere near it lands in it. */
.form-card .m-name { z-index: 6; padding: .6cqw 1.6cqw; cursor: text; display: flex; align-items: center; }
.form-card .m-name::after { content: ""; position: absolute; inset: -2.6cqw -1.4cqw; z-index: -1; } /* the bigger target, under the box */
.form-card .m-name .pen { position: absolute; left: 3.4cqw; top: 50%; width: 3.6cqw; height: 3.6cqw; translate: 0 -50%; z-index: 2; pointer-events: none;
  fill: none; stroke: #ff8f99; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: opacity .25s; }
.form-card.has-name .m-name .pen, .form-card .m-name:focus-within .pen { opacity: 0; }
.form-card .m-name input {
  position: relative; z-index: 1; width: 100%; height: 100%; min-width: 0; padding: 0 3cqw;
  border: 0; outline: 0; border-radius: 1.4cqw;
  background: rgba(255, 244, 236, .09);
  box-shadow: inset 0 0 0 .45cqw rgba(255, 143, 153, .75), 0 0 2.4cqw rgba(255, 42, 64, .35);
  text-align: center;
  font: 700 max(16px, 6cqw)/1 var(--serif); color: #fff4ec;
  caret-color: #ff6b78; text-overflow: ellipsis;
  -webkit-user-select: text; user-select: text;
  transition: box-shadow .25s ease, background .25s ease;
}
.form-card .m-name input::placeholder { color: rgba(255, 228, 224, .88); font-weight: 400; font-style: italic; }
.form-card .m-name input:focus { background: rgba(255, 244, 236, .14); box-shadow: inset 0 0 0 .55cqw #ff6b78, 0 0 3.6cqw rgba(255, 42, 64, .6); }
.form-card .m-name input:focus::placeholder { color: rgba(255, 228, 224, .45); }
/* the box that's next pulses until it's filled */
.zoom-card .form-card:not(.has-name):not(.sealed) .m-name input:not(:focus),
.zoom-card .form-card.has-name:not(.has-email):not(.sealed) .m-text input:not(:focus) { animation: nextBox 1.6s ease-in-out infinite; }
@keyframes nextBox { 50% { box-shadow: inset 0 0 0 .6cqw #ff6b78, 0 0 4.4cqw rgba(255, 42, 64, .75); } }
.form-card .m-text { z-index: 6; overflow: visible; display: flex; flex-direction: column; justify-content: center; gap: 1.4cqw; padding: 0 3.4cqw; cursor: text; }
.form-card .m-text::after { content: ""; position: absolute; inset: -1.6cqw -1cqw; z-index: -1; }
.form-card .m-text > span { font: 800 max(9px, 2.7cqw)/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: #b3101f; }
.form-card .m-text input {
  position: relative; z-index: 1;
  width: 100%; min-width: 0; padding: 2cqw 2.6cqw;
  border: 0; outline: 0; border-radius: 1.4cqw;
  background: #fffdf9;
  box-shadow: inset 0 0 0 .45cqw #d0162a, 0 .4cqw 1.6cqw rgba(140, 10, 28, .25);
  font: 600 max(16px, 4.4cqw)/1.2 var(--sans); color: #21150d;
  caret-color: #9e0a1e;
  -webkit-user-select: text; user-select: text;
  transition: box-shadow .25s ease;
}
.form-card .m-text input::placeholder { color: rgba(120, 30, 40, .55); font-weight: 500; }
.form-card .m-text input:focus { box-shadow: inset 0 0 0 .6cqw #ff2a40, 0 0 0 1cqw rgba(255, 42, 64, .22); }
.form-card .m-name:focus-within { box-shadow: none; }
.form-card .m-foot { z-index: 6; left: 11%; right: 22%; padding: 0; }
.seal-btn {
  width: 100%; height: 72%;
  border: 0; border-radius: 1.4cqw; cursor: pointer;
  background: linear-gradient(180deg, #cf1c26, #9e0a1e);
  box-shadow: inset 0 .4cqw 0 rgba(255,255,255,.16), 0 .6cqw 1.6cqw rgba(0,0,0,.6);
  font: 700 max(11px, 3.4cqw)/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #fff4ec;
  transition: filter .2s ease, transform .2s ease;
}
.seal-btn:hover { filter: brightness(1.12); }
.seal-btn:active { transform: translateY(.3cqw); }
.seal-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.seal-btn[disabled] { cursor: progress; filter: saturate(.6) brightness(.85); }
.form-card .m-pt b { font-family: var(--wordmark); font-weight: 400; font-size: 4.6cqw; }
.field-err { animation: fielderr .45s ease; }
.form-card .m-name.field-err input, .form-card .m-text.field-err input { box-shadow: inset 0 0 0 .7cqw #ff2a40, 0 0 4cqw rgba(255, 42, 64, .8); }
@keyframes fielderr { 20%, 60% { translate: -1.2cqw 0; } 40%, 80% { translate: 1.2cqw 0; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sealed .m-name input { background: transparent; box-shadow: none; }
.sealed-text { margin: 0; font: italic 600 3.6cqw/1.3 var(--serif); color: #21150d; }
.sealed .m-foot { justify-content: center; letter-spacing: .14em; text-transform: uppercase; font-size: 2.8cqw !important; }

/* ---------- Phone ----------
   The opening screen (Dodd 11-02): the words centred in the top part over the globe, the button a little below the
   middle where a thumb rests, Atlas between them. */
@media (max-width: 720px) {
  #hero { inset: 0; left: 0; top: 0; transform: none; width: auto; display: block; padding: 0 20px; }
  .hero-words { position: absolute; left: 20px; right: 20px; top: calc(env(safe-area-inset-top) + clamp(28px, 8svh, 84px)); }
  .wordmark { font-size: clamp(3.8rem, 21vw, 5.6rem); }
  .eyebrow { font-size: .68rem; letter-spacing: .42em; padding-left: .42em; margin-top: .85rem; }
  .lede { margin-top: 1.1rem; font-size: 1.12rem; max-width: 19rem; }
  .sub { margin-top: .45rem; font-size: .93rem; max-width: 18rem; }
  .cta { position: absolute; left: 20px; right: 20px; top: 63svh; margin: 0; gap: 12px; }
  .btn-holo { min-height: 50px; min-width: min(240px, 100%); padding: 0 1.9rem; font-size: 1.02rem; }
  .fine { letter-spacing: .16em; font-size: .66rem; color: rgba(255,244,236,.8); text-shadow: 0 1px 2px #000, 0 0 10px rgba(8,7,11,.95); }
  .bg-vignette { background:
    radial-gradient(80% 20% at 50% calc(63svh + 46px), rgba(8,7,11,.8), transparent),
    linear-gradient(180deg, rgba(8,7,11,.9) 0%, rgba(8,7,11,.62) 30%, rgba(8,7,11,.12) 50%, transparent 58%, rgba(8,7,11,.55) 100%); }
  #bg .bg-img, #bg-glyphs { object-position: 50% 30%; }
  .stage-hint { font-size: .98rem; }
}
/* a short phone (or one turned sideways): the words and the button simply follow each other */
@media (max-width: 720px) and (max-height: 560px) {
  .hero-words, .cta { position: static; }
  #hero { display: flex; flex-direction: column; justify-content: center; gap: 1.4rem; height: 100%; }
  .wordmark { font-size: 3.6rem; }
}

@media (max-height: 520px) {
  #hero { position: absolute; inset: 0; left: 0; top: 0; transform: none; width: auto; height: auto; min-height: 100%; padding: 20px;
    display: flex; flex-direction: column; justify-content: center; gap: 1.1rem; }
  body[data-phase="hero"] { overflow-y: auto; }
  .hero-words, .cta { position: static; margin: 0; }
  .wordmark { font-size: 3.4rem; }
  .lede { margin-top: .8rem; font-size: 1.02rem; } .sub { font-size: .9rem; }
  .fine { letter-spacing: .14em; }
  #openStage { justify-content: flex-start; }
  #deck { --big: min(300px, calc(100vw - 40px)); }
  .home-pack { height: min(58svh, 300px); top: 57%; }
}

@media (prefers-reduced-motion: reduce) {
  .wordmark, .bg-wash, .btn-holo::before, .home-pack::before { animation: none; }
  .zoom-card .form-card .m-name input, .zoom-card .form-card .m-text input, #spread .hand-card.tease .card-down, .zoom-card.sweep::after { animation: none !important; }
}

/* the cards never scroll inside: a phone scrolling the box you type in into view used to slide the card's contents up
   out of its frame (overflow: clip can't be scrolled, even by the browser) */
#deck .tc { overflow: clip; }
/* the form card holds still: no idle orbit or bob under the cursor while you type */
.tc.form-card, .tc.form-card::after { animation: none !important; rotate: none !important; translate: none !important; }