/* coming-soon — the "coming soon" landing page (src/coming-soon.njk). Everything visual it shares with the site —
   theme tokens, fonts, the particle layer, the social pills, the contact button, the kinetic title — comes from
   v2.css and the page's token block; only this page's layout and its motion live here.
   Motion stops for reduced motion (OS setting) and for the visitor's calm / still choices (a11y.js body classes). */

.cs-page { display: flex; flex-direction: column; }

/* The page is centred, so the scrim is too (the site's is weighted to the left, where its text sits). */
.cs-vignette {
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgb(3 4 8 / var(--scrim)) 0%, rgb(3 4 8 / calc(var(--scrim) * 0.8)) 55%, rgb(3 4 8 / calc(var(--scrim) * 0.35)) 100%),
    linear-gradient(to top, rgb(3 4 8 / calc(var(--scrim) + 0.15)), transparent 30%);
}

/* zoom: the visitor's text size (a11y.js --a-scale; regression B11). overflow-wrap: one long word — an email shown in
   full, a long name — must wrap on a 320px phone instead of widening the page (B9). */
.cs, .cs-foot { zoom: var(--a-scale, 1); overflow-wrap: anywhere; }
.cs { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(14px, 2.2vw, 22px); padding: clamp(56px, 10vh, 120px) var(--gutter) 28px; text-align: center; }

.cs-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
  color: var(--cyan); text-shadow: var(--halo); }
.cs-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent-glow); animation: cs-blink 1.8s ease-in-out infinite; }

/* .kinetic gives the size, weight, tracking and halo; here it's centred (the site's grows from the left). */
.cs-title { --d-align: center; margin: 0; transform-origin: center; text-wrap: balance; }   /* .o aligns to start by default */

.cs-soon { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 4vw, 42px);
  letter-spacing: 0.32em; text-transform: uppercase; padding-inline-start: 0.32em; /* tracking adds space after the last letter */ }
/* One box per letter (each rides its own wave), grouped per word (.cs-word) so a long headline wraps BETWEEN words —
   boxed letters would otherwise break anywhere, mid-word. A word that is alone wider than the line (a 24-letter word on
   a 320px phone, or at the visitor's largest text size) wraps INSIDE itself instead of being cut off (WCAG 1.4.10;
   regression 2026-10-02 lane A #1): inline-flex + wrap, never wider than the line. src/assets/js/wave-letters.js. */
.cs-word { display: inline-flex; flex-wrap: wrap; justify-content: center; max-width: 100%; }
.cs-word > span { display: inline-block; color: var(--txt); text-shadow: var(--halo);
  animation: cs-wave 3s var(--ease) infinite; animation-delay: calc(var(--i) * 85ms); }

.cs-sub { margin: 0; font-size: clamp(15px, 1.7vw, 19px); font-style: italic; color: var(--txt-dim); text-shadow: var(--halo); }

.cs-line { width: min(440px, 72vw); height: 2px; border-radius: 2px; margin: 4px 0;
  background: linear-gradient(90deg, transparent, var(--lime), var(--accent), var(--cyan), transparent);
  background-size: 200% 100%; animation: cs-flow 5s linear infinite; }

.cs-msg { margin: 0; max-width: 46ch; text-wrap: balance; font-size: clamp(15px, 1.6vw, 18px); line-height: 1.55; color: var(--txt); text-shadow: var(--halo); }

.cs-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 780px; }
/* Bigger than the header's pills: this page IS the links — a 44px target (WCAG 2.5.5 AAA). */
.cs-links .social { --d-size: 12px; --d-color: var(--txt); min-height: 44px; padding: 10px 18px; gap: 9px; }
.cs-links .social .ico { width: 16px; height: 16px; }
.cs-links .social:hover { border-color: var(--lime); box-shadow: 0 0 18px color-mix(in srgb, var(--lime) 32%, transparent); }
.cs-links .social, .cs .contact { --d-align: center; }
.cs .contact { min-height: 44px; padding-inline: 20px; margin-top: 4px; }
.cs a:focus-visible, .cs button:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

.cs-play { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin: 6px 0 0; }
.cs-play-note { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--txt-dim); text-shadow: var(--halo); }

/* The footer (.page-foot, v2.css) sits above the particle layer. */
.cs-foot { position: relative; z-index: 2; }

/* Entrance: each line rises in turn. Transform on the lines only — never on anything holding a fixed layer (C3). */
.cs > * { animation: cs-in 0.9s var(--ease) both; }
.cs > :nth-child(2) { animation-delay: 80ms; }
.cs > :nth-child(3) { animation-delay: 160ms; }
.cs > :nth-child(4) { animation-delay: 240ms; }
.cs > :nth-child(5) { animation-delay: 320ms; }
.cs > :nth-child(6) { animation-delay: 400ms; }
.cs > :nth-child(n + 7) { animation-delay: 480ms; }
/* The line keeps its own endless shimmer. */
.cs > .cs-line { animation: cs-in 0.9s var(--ease) 320ms both, cs-flow 5s linear 1.2s infinite; }

@keyframes cs-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes cs-wave {
  0%, 55%, 100% { transform: none; color: var(--txt); }
  18% { transform: translateY(-0.2em); color: var(--lime); text-shadow: 0 0 18px color-mix(in srgb, var(--lime) 55%, transparent), var(--halo); }
}
@keyframes cs-flow { from { background-position: 200% 0; } to { background-position: 0 0; } }
@keyframes cs-blink { 50% { opacity: 0.35; } }

@media (max-width: 600px) {
  .cs-kicker { font-size: 11px; letter-spacing: 2px; }
  .cs-links ul { gap: 8px; }
  .cs-links .social { padding: 10px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .cs > *, .cs > .cs-line, .cs-word > span, .cs-dot { animation: none; }
}
/* Calm mode: the Play button joins the steady high-contrast palette, like the site's primary CTA (v2.css). */
body.calm .game-play { color: var(--calm-bg); background: var(--calm-fg); box-shadow: none; }
body.calm .cs > *, body.calm .cs > .cs-line, body.calm .cs-word > span, body.calm .cs-dot,
body.reduce-motion .cs > *, body.reduce-motion .cs > .cs-line, body.reduce-motion .cs-word > span, body.reduce-motion .cs-dot { animation: none; }