/* The public Coming soon page (spec 047). Same-origin files only: the CSP in _headers allows no inline styles,
 * outside fonts or requests (design §6, TD-242). Tokens copied from frontend/src/index.css :root (TD-236). */

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('fonts/nunito-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --page: #f5f8fe;
  --surface: #ffffff;
  --surface-soft: #eaf0fc;
  --border: #dce4f2;
  --heading: #14213d;
  --text: #334155;
  --muted: #5b6b82;
  --accent: #2f5bea;
  --logo-mint: #7ee2a8;
  --logo-peach: #fdba74;

  color-scheme: light;
}

[hidden] {
  display: none !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: clip;
  background: radial-gradient(ellipse 120% 70% at 50% 100%, var(--surface-soft), var(--page) 70%);
  background-color: var(--page);
  color: var(--text);
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Layout (design §4.2): the brand above the picture, in separate boxes so text never sits on it ── */

.stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 4vh, 2.5rem);
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(2rem, 8vh, 5rem) clamp(1rem, 5vw, 3rem) clamp(4.75rem, 10vh, 6rem);
  text-align: center;
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  max-width: 40rem;
}

.logo {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.2em 0.45em;
  margin: 0;
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 800;
  line-height: 1.05;
}

.logo-mark {
  flex: none;
  width: 1.3em;
  height: 1.2em;
}

.heart {
  fill: var(--accent);
}

.mint {
  fill: var(--logo-mint);
}

.peach {
  fill: var(--logo-peach);
}

.logo-name {
  color: var(--heading);
  letter-spacing: -0.01em;
}

.logo-un {
  color: var(--accent);
}

.line {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.125rem, 2.6vw, 1.5rem);
  font-weight: 600;
}

.soon {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.sky {
  display: block;
  width: min(100%, 1100px);
  height: auto;
  max-height: 55vh;
  max-height: 55svh;
  aspect-ratio: 5 / 3;
}

/* Landscape phones: side by side, so both fit in about 390px of height. */
@media (max-height: 500px) and (orientation: landscape) {
  .stage {
    flex-direction: row;
    gap: clamp(1rem, 4vw, 2.5rem);
    padding: 1rem max(1.5rem, env(safe-area-inset-right)) 1rem max(1.5rem, env(safe-area-inset-left));
  }

  .brand {
    flex: 1 1 45%;
  }

  .logo {
    font-size: clamp(1.75rem, 4.5vw, 2.5rem);
  }

  .sky {
    flex: 1 1 55%;
    width: 55%;
    max-height: 85vh;
    max-height: 85svh;
  }
}

/* ── The constellation (design §5.1): the finished picture is the default ── */

.ln {
  fill: none;
  stroke: var(--accent);
  stroke-opacity: 0.45;
  stroke-width: 2.4;
  stroke-linecap: round;
}

.st {
  fill: var(--accent);
}

.halo {
  fill: var(--accent);
  fill-opacity: 0.16;
}

.bg {
  fill: var(--accent);
  fill-opacity: 0.45;
}

.st,
.halo,
.bg {
  transform-box: fill-box;
  transform-origin: center;
}

/* ── Motion (design §5.2–5.4): only while landing.js sets .motion-on ── */

.s0 { --d: 0.2s; }
.s1 { --d: 1.1s; }
.s2 { --d: 2s; }
.s3 { --d: 2.9s; }
.s4 { --d: 3.8s; }
.s5 { --d: 4.7s; }
.s6 { --d: 5.6s; }
.s7 { --d: 6.5s; }
.l1 { --d: 0.4s; }
.l2 { --d: 1.3s; }
.l3 { --d: 2.2s; }
.l4 { --d: 3.1s; }
.l5 { --d: 4s; }
.l6 { --d: 4.9s; }
.l7 { --d: 5.8s; }
.b1 { --d: 1.5s; }
.b2 { --d: 3.3s; }
.b3 { --d: 5s; }
.h { --d: 6.8s; }
.t1 { --tw: 4.2s; }
.t2 { --tw: 5.4s; }
.t3 { --tw: 6.1s; }

.motion-on .ln {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 0.7s ease-out var(--d) both;
}

.motion-on .st,
.motion-on .halo,
.motion-on .bg {
  animation: appear 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) var(--d) both;
}

/* After forming, a few stars and the four tips' halos keep twinkling (opacity only; nothing moves position). */
.motion-on .tw {
  animation:
    appear 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) var(--d) both,
    twinkle var(--tw, 5s) ease-in-out calc(var(--d) + 1.4s) infinite;
}

.motion-paused .sky * {
  animation-play-state: paused !important;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes appear {
  from {
    opacity: 0;
    transform: scale(0.2);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.45;
  }
}

/* Fallback if the script and the setting ever disagree: no movement, and the finished picture (FR-005). */
@media (prefers-reduced-motion: reduce) {
  .sky * {
    animation: none !important;
    stroke-dashoffset: 0 !important;
  }
}

/* ── Pause / Play (FR-006) ── */

.motion {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0.55rem 1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--heading);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
}

.motion:hover {
  border-color: var(--accent);
}

.motion:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.motion-icon {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.icon-play,
.motion-paused .icon-pause {
  display: none;
}

.motion-paused .icon-play {
  display: inline;
}