/* Flock Halloween sign-up. Ported from the design canvas boards (390x844) to viewport units.
   Every vh offset is declared twice, vh then svh: iOS Safari's vh is the large viewport on a page that never scrolls. */

:root {
  --void: #020203; --text: #ececef; --text-2: #c9cdd3; --muted: #9a9ea6;
  --pink: 255, 46, 136; --cyan: 40, 220, 255;
  --error: #ff8fb8;
  --vp: 44%;                                   /* vanishing point height */
  --arch-w: 64vmin; --arch-h: 90vmin;          /* 250x350 on a 390-wide phone */
  --mark: clamp(72px, 21.5vmin, 132px);        /* 84px on a 390-wide phone */
  --ease-walk: cubic-bezier(0.7, 0, 1, 1);
  --ease-move: cubic-bezier(0.7, 0, 0.15, 1);
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --serif: 'Instrument Serif', 'Times New Roman', serif;
  --sans: 'Instrument Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
html, body { height: 100%; margin: 0; background: var(--void); color: var(--text); }
body { font-family: var(--sans); overflow: hidden; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
a { color: var(--text-2); }
a:hover { color: #ffffff; }

/* ---------- Corridor ---------- */

.corridor { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.tunnel { position: absolute; inset: 0; transform-origin: 50% var(--vp); transition: transform 1.4s var(--ease-move), opacity 1.4s ease; }
body[data-stage="form"] .tunnel { transform: translateY(-24vh) scale(1.5); transform: translateY(-24svh) scale(1.5); opacity: 0.6; }
body[data-stage="thanks"] .tunnel { transform: translateY(-10vh) scale(1); transform: translateY(-10svh) scale(1); opacity: 0.9; }
.glitch, .hue { position: absolute; inset: 0; }
.hue { animation: hue 16s linear infinite; }
@keyframes hue { to { filter: hue-rotate(360deg); } }
.glitch { animation: glitch 7s steps(1, end) infinite; }
@keyframes glitch { 0%, 93%, 100% { transform: none; } 94% { transform: translateX(-5px) skewX(4deg); } 95% { transform: translateX(4px) scaleY(1.02); } 96.5% { transform: translateX(-2px); } }
.glow { position: absolute; left: 50%; top: var(--vp); width: 72vmin; height: 72vmin; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(214, 219, 228, 0.16), rgba(214, 219, 228, 0)); }

.arch { position: absolute; left: 50%; top: var(--vp); width: var(--arch-w); height: var(--arch-h); margin-left: calc(var(--arch-w) / -2); margin-top: calc(var(--arch-h) / -2); box-sizing: border-box; border: 1px solid rgba(226, 229, 234, 0.95); border-radius: calc(var(--arch-w) / 2) calc(var(--arch-w) / 2) 2px 2px; opacity: 0; animation: walk 12s var(--ease-walk) infinite; animation-delay: calc(var(--i) * -1s); }
.arch::before, .arch::after { content: ""; position: absolute; inset: -1px; box-sizing: border-box; border: 1px solid transparent; border-radius: inherit; }
.arch::before { border-color: rgba(var(--pink), 0.8); transform: translateX(-3px); }
.arch::after { border-color: rgba(var(--cyan), 0.8); transform: translateX(3px); }
@keyframes walk { 0% { transform: scale(0.02) rotate(-80deg); opacity: 0; } 15% { opacity: 0.9; } 78% { opacity: 0.55; } 100% { transform: scale(2.6) rotate(24deg); opacity: 0; } }

.mark-wrap { position: absolute; left: 50%; top: var(--vp); width: var(--mark); height: var(--mark); margin-left: calc(var(--mark) / -2); margin-top: calc(var(--mark) / -2); transition: transform 1.2s var(--ease-move); }
body[data-stage="form"] .mark-wrap { transform: scale(0.55); }
body[data-stage="thanks"] .mark-wrap { transform: scale(1.7); }
.mark-fx { width: 100%; height: 100%; filter: drop-shadow(-3px 0 0 rgba(var(--pink), 0.85)) drop-shadow(3px 0 0 rgba(var(--cyan), 0.85)); animation: pulse 4s ease-in-out infinite; }
/* The PNG keeps 4.2% transparent padding around the circle; overscan it so the circle itself is --mark wide, as on the canvas. */
.mark { display: block; position: relative; left: -4.26%; top: -4.26%; width: 108.52%; height: 108.52%; max-width: none; animation: turn 30s linear infinite; }
/* A co-host's mark (see COHOSTS in config.js). The Flock mark is a circle, so it bleeds a little past
   its box and turns; a co-host's is neither round nor wordless, so it sits inside its box at its own
   aspect ratio and jumps on the same abrupt steps as .glitch instead of rotating. The chromatic
   split and the pulse on .mark-fx are untouched, so it still belongs to the page. */
body[data-cohost] .mark { left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; animation: cohost-glitch 3.6s steps(1, end) infinite; }
/* Sideways only, never a rotation: the wordmark has to stay upright and readable. steps(1, end) so
   each position is held and then jumped from, with no interpolation between them, which is what
   makes it read as tak-tak-tak rather than a slide. Six jumps over ~430ms, then held still for
   three seconds, so it punctuates the corridor instead of competing with it. A smaller second
   burst keeps the loop from feeling metronomic. Tune: the 3.6s is how often, the px are how far. */
@keyframes cohost-glitch {
  0%, 12%, 60%, 100% { transform: translateX(0); }
  2%  { transform: translateX(-7px); }
  4%  { transform: translateX(6px); }
  6%  { transform: translateX(-4px); }
  8%  { transform: translateX(7px); }
  10% { transform: translateX(-2px); }
  61% { transform: translateX(-4px); }
  63% { transform: translateX(3px); }
}
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes turn { to { transform: rotate(360deg); } }

.scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 72vh; height: 72svh; opacity: 0; background: linear-gradient(to bottom, rgba(2, 2, 3, 0) 0%, rgba(2, 2, 3, 0.8) 30%, rgba(2, 2, 3, 0.93) 55%, rgba(2, 2, 3, 0.96) 100%); transition: opacity 1s ease 0.3s, height 1s ease; }
body[data-stage="form"] .scrim { opacity: 1; }
body[data-stage="thanks"] .scrim { opacity: 1; height: 62vh; height: 62svh; }

/* ---------- Landing ---------- */

.landing { transition: opacity 0.5s ease; }
body:not([data-stage="landing"]) .landing { opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0s linear 0.5s; }
.enter { position: fixed; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.enter:focus-visible { outline: 2px solid var(--text); outline-offset: -8px; }
.date-small { position: absolute; top: calc(34px + env(safe-area-inset-top)); left: 0; right: 0; text-align: center; font-family: var(--mono); font-size: 15px; letter-spacing: 0.42em; text-indent: 0.42em; color: rgba(236, 236, 239, 0.72); }
.cue { position: absolute; left: 0; right: 0; bottom: calc(42px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cue-text { font-family: var(--mono); font-size: 11px; letter-spacing: 0.34em; text-indent: 0.34em; text-transform: uppercase; animation: flicker 5s steps(1, end) infinite; }
@keyframes flicker { 0%, 88%, 100% { opacity: 1; } 90% { opacity: 0.3; } 92% { opacity: 1; } 93% { opacity: 0.5; } }
.drip { display: block; width: 1px; height: 44px; position: relative; overflow: hidden; background: rgba(236, 236, 239, 0.16); }
.drip-dot { position: absolute; left: 0; top: -14px; width: 1px; height: 14px; background: var(--text); animation: drip 2.2s cubic-bezier(0.6, 0, 0.4, 1) infinite; }
@keyframes drip { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(58px); opacity: 0; } }

/* ---------- Panels ---------- */

.panel { position: fixed; inset: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; display: flex; flex-direction: column; visibility: hidden; opacity: 0; padding: calc(24px + env(safe-area-inset-top)) 34px calc(24px + env(safe-area-inset-bottom)); box-sizing: border-box; }
.panel > * { width: 100%; max-width: 420px; margin-inline: auto; box-sizing: border-box; }
@keyframes rise { from { opacity: 0; transform: translateY(28px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

/* Form: bottom-anchored. margin-top:auto (not justify-content:flex-end) keeps the top reachable when it has to scroll. */
.panel-form > form { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
body[data-stage="form"] .panel-form { visibility: visible; animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.55s both; }

/* Closing: a centred column below the enlarged mark. */
.panel-thanks { align-items: center; text-align: center; gap: 14px; padding-top: calc(34vh + var(--mark) * 0.85 + 20px); padding-top: calc(34svh + var(--mark) * 0.85 + 20px); }
body[data-stage="thanks"] .panel-thanks { visibility: visible; animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s both; }

/* ---------- Type ---------- */

.eyebrow { margin: 0; font-family: var(--mono); font-size: 10.5px; line-height: 1.3; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.eyebrow .x { text-transform: none; }
/* Failing-neon flicker: on for ~86% of a 3s cycle. Opacity only, so screen readers still read it once.
   A four-flash burst (alternating dim-to-0.25 and full-off, ~80ms each) around the 1.1-1.5s mark, plus one
   isolated dim flicker near 2.5s. steps(1, end) snaps between values instead of fading. */
.eyebrow .blink { color: var(--text); animation: blink 3s steps(1, end) infinite; }
@keyframes blink {
  0%, 39.33%, 42.67%, 46%, 49.33%, 87.67%, 100% { opacity: 1; }
  36.67%, 43.33%, 84.67% { opacity: 0.25; }
  40%, 46.67% { opacity: 0; }
}
/* The heading and the line under it shrink on narrow phones so each stays on one line (the column is the screen less 68px). */
h1 { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 60px; font-size: min(60px, calc((100vw - 68px) * 0.17)); line-height: 0.95; letter-spacing: -0.01em; }
h2 { margin-block: 4px 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 34px; line-height: 1; }
h1:focus, h2:focus { outline: none; }
.split { text-shadow: -1.5px 0 rgba(var(--pink), 0.55), 1.5px 0 rgba(var(--cyan), 0.55); }
.lede { margin-block: 0 14px; font-size: 15px; font-size: clamp(13px, calc((100vw - 68px) * 0.045), 15px); line-height: 1.4; color: var(--text-2); }
.note { margin-block: 0; font-size: 13.5px; line-height: 1.4; letter-spacing: 0.01em; color: var(--muted); }
.date-big { margin-block: 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(96px, 30vmin, 150px); line-height: 0.9; letter-spacing: -0.02em; white-space: nowrap; }
.split-heavy { text-shadow: -3px 0 rgba(var(--pink), 0.6), 3px 0 rgba(var(--cyan), 0.6); }

/* ---------- Fields ---------- */

/* Grouping: each label sits close to its own line (about 28px from label to line) and well clear of the line above
   (about 40px, set by margin-bottom here plus the form gap), so it never reads as belonging to the field above.
   Inputs are 32px tall for the tap target, but the top 6px tucks up behind the label (negative margin, label and
   input both focus the input), so the text sits low near the line without adding visible space. */
.field { display: flex; flex-direction: column; gap: 2px; margin-bottom: 29px; }
.field label { font-family: var(--mono); font-size: 10.5px; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.field > input { width: 100%; height: 32px; box-sizing: border-box; margin: -6px 0 0; border: 0; border-bottom: 1px solid rgba(201, 205, 211, 0.42); border-radius: 0; background: transparent; padding: 8px 0 3px; font: 400 16px/1.25 var(--sans); color: var(--text); outline: none; -webkit-appearance: none; appearance: none; }
.field > input:focus { border-bottom-color: var(--text); box-shadow: 0 1px 0 0 var(--text); }
.field > input[aria-invalid="true"] { border-bottom-color: var(--error); }
.field > input[aria-invalid="true"]:focus { box-shadow: 0 1px 0 0 var(--error); }
.field input:-webkit-autofill { -webkit-text-fill-color: var(--text); caret-color: var(--text); transition: background-color 9999s ease 0s; }
/* Error sits 4px under its line: the 2px field gap plus 2px more here (only when the error has text; :empty removes it from flow). */
.field > .error { margin-top: 2px; }

/* ---------- Mobile: country code picker ---------- */

.field-mobile { position: relative; margin-bottom: 12px; }
.field-mobile.is-open { z-index: 5; }
/* Same line position and text baseline as Name and Email. Only the number input tucks up behind the label (to 32px
   with the line); the country button stays inside the visible row so its focus ring clears the label. */
.tel { display: flex; align-items: stretch; height: 26px; box-sizing: border-box; border-bottom: 1px solid rgba(201, 205, 211, 0.42); }
.tel:focus-within { border-bottom-color: var(--text); box-shadow: 0 1px 0 0 var(--text); }
.tel:has(> input[aria-invalid="true"]) { border-bottom-color: var(--error); }
.tel:has(> input[aria-invalid="true"]):focus-within { box-shadow: 0 1px 0 0 var(--error); }
.cc { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; margin: 0; padding: 3px 0 2px; border: 0; border-radius: 0; background: transparent; color: var(--text); font: 500 13px/1.25 var(--mono); letter-spacing: 0.04em; cursor: pointer; }
.cc::after { content: ""; width: 1px; height: 18px; margin-left: 5px; background: rgba(201, 205, 211, 0.3); }
.cc:hover { color: #ffffff; }
.cc:focus-visible { outline: 2px solid var(--text); outline-offset: 0; border-radius: 3px; }
.cc-chev { color: var(--muted); transition: transform 0.2s ease; }
.cc[aria-expanded="true"] .cc-chev { transform: rotate(180deg); }
.tel > input { flex: 1 1 auto; min-width: 0; margin: -6px 0 0; border: 0; border-radius: 0; background: transparent; padding: 8px 0 3px 12px; font: 400 16px/1.25 var(--sans); color: var(--text); outline: none; -webkit-appearance: none; appearance: none; }

/* Anchored above the field (the form sits at the bottom of the screen); app.js caps the height to the room there. */
.cc-pop { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); display: flex; flex-direction: column; max-height: 50vh; max-height: 50svh; box-sizing: border-box; overflow: hidden; background: #09090c; border: 1px solid rgba(201, 205, 211, 0.2); border-radius: 18px 18px 4px 4px; box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.75); animation: pop 0.16s ease-out both; }
.cc-pop[hidden] { display: none; }
.cc-pop.is-down { bottom: auto; top: calc(100% + 8px); border-radius: 4px 4px 18px 18px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.75); }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cc-search-wrap { position: relative; flex-shrink: 0; border-bottom: 1px solid rgba(201, 205, 211, 0.16); }
.cc-search-wrap:focus-within { border-bottom-color: rgba(236, 236, 239, 0.7); }
.cc-search-wrap svg { position: absolute; left: 16px; top: 50%; margin-top: -7px; color: var(--muted); pointer-events: none; }
.cc-search { display: block; width: 100%; box-sizing: border-box; margin: 0; border: 0; border-radius: 0; background: transparent; padding: 14px 16px 14px 40px; font: 400 16px/1.2 var(--sans); color: var(--text); outline: none; -webkit-appearance: none; appearance: none; }
.cc-search::placeholder { color: var(--muted); opacity: 1; }
.cc-list { position: relative; flex: 1 1 auto; min-height: 0; margin: 0; padding: 6px 0; list-style: none; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(201, 205, 211, 0.25) transparent; }
.cc-opt { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 44px; box-sizing: border-box; padding: 10px 16px; font-size: 15px; line-height: 1.25; color: var(--text-2); cursor: pointer; }
.cc-opt[hidden] { display: none; }
.cc-opt.is-active { background: rgba(236, 236, 239, 0.08); color: var(--text); }
.cc-opt[aria-selected="true"] { color: var(--text); box-shadow: inset 2px 0 0 var(--text); }
.cc-code { flex-shrink: 0; font: 400 12.5px/1 var(--mono); letter-spacing: 0.04em; color: var(--muted); }
.cc-opt[aria-selected="true"] .cc-code, .cc-opt.is-active .cc-code { color: var(--text-2); }
.cc-empty { margin: 0; padding: 16px; font-size: 14px; color: var(--muted); }

.check { margin-top: 0; display: flex; gap: 10px; align-items: center; font-size: 14px; line-height: 1.3; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--text-2); flex-shrink: 0; cursor: pointer; }
.check input:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

.error, .form-error { margin: 0; min-height: 0; font-size: 12.5px; line-height: 1.35; color: var(--error); }
.error:empty { display: none; }
.form-error { text-align: center; }
/* Focus lands here after a failed send (so it is not lost when the button re-enables); it is a message, not a control. */
.form-error:focus { outline: none; }
/* Kept in the accessibility tree while empty (it is an alert region) but takes no space in the column. */
.form-error:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Under the submit button: a lock and "Secure sign-up", as quiet as the fine print. It tucks 6px up into the form's 12px
   gap, so the column grows by 18px. The negative right margin cancels the letter-spacing after the last letter, so the
   line is optically centred. */
.secure { display: flex; align-items: center; justify-content: center; gap: 6px; margin: -6px 0 0; font-family: var(--mono); font-size: 10px; line-height: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.secure svg { flex-shrink: 0; }
.secure span { margin-right: -0.16em; }

.fine { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--muted); text-align: center; }

/* Preview mode label: bottom-left in the panel's bottom padding, under the last line of the column, so it never covers
   a control. Taps pass through. Not shown on the landing. */
.preview-tag { position: fixed; left: calc(12px + env(safe-area-inset-left)); bottom: calc(6px + env(safe-area-inset-bottom)); z-index: 2; margin: 0; font-family: var(--mono); font-size: 10px; line-height: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.5s ease; }
.preview-tag[hidden] { display: none; }
body[data-stage="form"] .preview-tag, body[data-stage="thanks"] .preview-tag { opacity: 1; visibility: visible; }

/* ---------- Buttons ---------- */

.btn { box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 48px; margin: 0; padding: 0 20px; border: 0; border-radius: 999px; background: linear-gradient(100deg, #cfd3d8 0%, #e4e6e9 38%, #eef0f2 50%, #e0e3e6 62%, #d3d7dc 100%); background-size: 220% 100%; background-position: 100% 0; color: var(--void); font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; cursor: pointer; animation: sheen 9s ease-in-out infinite; }
.btn:hover { color: var(--void); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.btn:disabled { opacity: 0.6; cursor: progress; }
/* Sweep is rare and quick: holds still for most of the 9s cycle, sweeps out and back over ~1.2s near the end. */
@keyframes sheen { 0%, 86%, 100% { background-position: 100% 0; } 93% { background-position: 0% 0; } }
#submit { margin-top: 6px; }
/* The closing CTA is the canvas .c-cta: the same metal, static, highlight centred, with a slow soft glow behind it. */
#wa { position: relative; isolation: isolate; max-width: 322px; margin-top: 10px; background-size: 100% 100%; background-position: 0 0; animation: none; }
#wa::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: 0 0 13px 1.5px rgba(236, 236, 239, 0.3), -4.5px 0 17px rgba(var(--pink), 0.3), 4.5px 0 17px rgba(var(--cyan), 0.3); opacity: 0.3; animation: glow 6s ease-in-out infinite; }
@keyframes glow { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.5; } }

/* ---------- Short screens ---------- */

/* Short phones, and landscape laptops up to 800px tall (1280x720, 1366x768), where the closing column would otherwise scroll. */
@media (max-height: 700px), (min-aspect-ratio: 1/1) and (max-height: 800px) {
  h1 { font-size: min(48px, calc((100vw - 68px) * 0.17)); }
  .date-big { font-size: clamp(72px, 22vmin, 110px); }
  body[data-stage="form"] .tunnel { transform: translateY(-27vh) scale(1.5); transform: translateY(-27svh) scale(1.5); }
  body[data-stage="thanks"] .mark-wrap { transform: scale(1.35); }
  /* The mark still sits at 34vh here (44% less the 10vh slide), so the column starts below it: radius 0.675 x mark, plus the pulse. */
  .panel-thanks { padding-top: calc(34vh + var(--mark) * 0.7 + 20px); padding-top: calc(34svh + var(--mark) * 0.7 + 20px); }
}

/* Very short phones (320x568): the spaced-out fields need the room, so the form column starts nearer the top, and the
   gaps are a pixel tighter to make room for the "Secure sign-up" line. */
@media (max-height: 600px) {
  .panel-form { padding-top: calc(8px + env(safe-area-inset-top)); }
  .panel-form > form { gap: 11px; }
  .lede { margin-bottom: 7px; }
  #submit { margin-top: 2px; }
}

/* ---------- Utilities ---------- */

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Hidden tab ---------- */

body.is-hidden .arch, body.is-hidden .hue, body.is-hidden .mark { animation-play-state: paused; }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .arch, .hue, .glitch, .mark-fx, .mark, .cue-text, .drip-dot, .btn, .eyebrow .blink, .cc-pop, #wa::before { animation: none !important; }
  #wa::before { opacity: 0.5; }
  .arch { opacity: 0.35; }
  .arch:nth-child(2) { transform: scale(0.06) rotate(-70deg); }
  .arch:nth-child(3) { transform: scale(0.1) rotate(-62deg); }
  .arch:nth-child(4) { transform: scale(0.16) rotate(-54deg); }
  .arch:nth-child(5) { transform: scale(0.24) rotate(-46deg); }
  .arch:nth-child(6) { transform: scale(0.34) rotate(-38deg); }
  .arch:nth-child(7) { transform: scale(0.46) rotate(-30deg); }
  .arch:nth-child(8) { transform: scale(0.62) rotate(-22deg); }
  .arch:nth-child(9) { transform: scale(0.82) rotate(-14deg); }
  .arch:nth-child(10) { transform: scale(1.06) rotate(-6deg); }
  .arch:nth-child(11) { transform: scale(1.36) rotate(2deg); }
  .arch:nth-child(12) { transform: scale(1.72) rotate(10deg); }
  .arch:nth-child(13) { transform: scale(2.2) rotate(18deg); }
  .tunnel, .mark-wrap, .scrim, .landing { transition-duration: 0.01s !important; }
  body[data-stage="form"] .panel-form, body[data-stage="thanks"] .panel-thanks { animation: fade 0.2s ease both !important; }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
}

/* ---------- Still frames (?still=1): every animation paused at its first frame, stages shown without entrances. Last, so it wins over reduced motion. ---------- */

body.still *, body.still *::before, body.still *::after { animation-play-state: paused !important; }
body.still .panel, body.still .cc-pop { animation: none !important; }
body.still[data-stage="form"] .panel-form, body.still[data-stage="thanks"] .panel-thanks { opacity: 1; }
body.still .tunnel, body.still .mark-wrap, body.still .scrim, body.still .landing { transition: none !important; }