/*
  Brand tokens from `docs/brand/STYLE_GUIDE.md` §3, in the hero-tuned bands.

  **Both faces are served from this tile, and that is the only way a tile can have a
  typeface at all.** The origin's CSP is `font-src 'self' data:` (DESIGN.md §8.3), so a
  Google Fonts link is not a slow font — it is a request the browser refuses, on somebody
  else's domain, for every visitor, with nothing in the page to say so. `web/styles/base.css`
  self-hosts the same two faces through Fontsource for the same reason.

  Bungee covers Latin only, which is deliberate rather than unfinished: the greetings cycle
  through Devanagari, Han, Arabic, Cherokee and a dozen more, and each falls back to the
  platform's own face for its script. Bundling coverage for all of them would be megabytes
  of blobs on a page whose whole job is to load instantly on a domain somebody claimed a
  minute ago.
*/
@font-face {
  font-family: 'Bungee';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/bungee.woff2') format('woff2');
}

@font-face {
  font-family: 'Atkinson Hyperlegible Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/mono.woff2') format('woff2');
}

:root {
  --hp-black: #0b0b0d;
  --hp-navy: #12141f;
  --hp-cream: #f5eedd;
  --hp-eggshell: #ede3cc;
  --hp-chocolate: #241a12;
  --band-1: #e3a23d; /* harvest gold */
  --band-2: #d9562b; /* burnt orange */
  --band-3: #a8301f; /* brick red */
  --beacon: #6fd3ff;
  --pink: #ff4d9d;
  --phosphor: #4ce6a1;
  --amber: #ffb44d;

  --font-display: 'Bungee', 'Righteous', system-ui, sans-serif;
  --font-mono: 'Atkinson Hyperlegible Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Dark mode (default: it is a spaceport at night) */
  --bg: var(--hp-black);
  --bg-2: #101119;
  --text: var(--hp-cream);
  --text-muted: #b9b09a;
  --panel: var(--hp-navy);
  --panel-border: #2a2e42;
  --lamp: var(--phosphor);
  --focus: var(--beacon);
  --label: var(--amber);
  --star: var(--hp-cream);
}

:root[data-theme='light'] {
  --bg: #f9f4e7;
  --bg-2: #efe3cb;
  --text: var(--hp-chocolate);
  --text-muted: #5a4b38;
  --panel: var(--hp-eggshell);
  --panel-border: #c9bda0;
  --lamp: #4f5d23;
  --focus: #0e6e93;
  --label: var(--amber);
  --star: var(--hp-chocolate);
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: linear-gradient(135deg, var(--bg) 0%, var(--bg-2) 100%);
  color: var(--text);
  font-family: var(--font-mono);
  display: grid;
  place-items: center;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---- Starfield backdrop (from hero-dark.svg) ---- */
.stars {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  transition: opacity 400ms ease;
}

:root[data-theme='light'] .stars {
  opacity: 0.12;
}

.stars circle {
  fill: var(--star);
}

.stars .twinkle {
  animation: twinkle var(--dur, 4s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes twinkle {
  0%,
  100% {
    opacity: var(--lo, 0.35);
  }
  50% {
    opacity: var(--hi, 1);
  }
}

/* ---- Layout ---- */
main {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 16px;
  justify-items: center;
  padding: 16px;
  width: 100%;
}

/* The mark, enlarged. rx 38/160 = 23.75% of side. */
.mark {
  position: relative;
  width: min(92vw, 72vh, 640px);
  aspect-ratio: 1;
  border-radius: 23.75%;
  background: var(--hp-black);
  overflow: hidden;
  container-type: size;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(245, 238, 221, 0.06),
    0 30px 80px -30px rgba(0, 0, 0, 0.8);
}

:root[data-theme='light'] .mark {
  box-shadow:
    0 0 0 1px rgba(36, 26, 18, 0.15),
    0 30px 60px -30px rgba(36, 26, 18, 0.55);
}

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

.fan {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/*
  Everything the mark shows sits in one stage, so the easter egg can move it as a single
  piece — the rumble before launch and the credits-style scroll out of the frame. The
  frame itself (`.mark`) never moves; its rounded mask is what clips the stage away.
*/
.stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Opaque, so the sky behind it shows only where the stage has scrolled away from. */
  background: var(--hp-black);
}

/* The egg's ship. It waits below the frame's bottom edge, clipped, until a hold wakes it. */
.egg-ship {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: calc(var(--ship-y, 103) * 1%);
  width: 7.5%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  overflow: visible;
  pointer-events: none;
}

.egg-ship path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.egg-ship .hull {
  stroke: var(--hp-cream);
  stroke-width: 2.4;
}

.egg-ship .flame {
  stroke: var(--amber);
  stroke-width: 2.2;
  transform-origin: 0 9px;
  transform: scaleY(var(--flame, 0));
}

.egg-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
}

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

.greeting {
  position: absolute;
  top: 9.5%;
  left: 9%;
  width: 64%;
  margin: 0;
  color: var(--hp-cream);
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-size: clamp(22px, 11cqw, 76px);
  text-shadow:
    0 2px 0 rgba(11, 11, 13, 0.9),
    0 0 24px rgba(11, 11, 13, 0.9);
  overflow-wrap: anywhere;
  transition:
    opacity 260ms ease,
    transform 260ms ease;
}

.greeting[dir='rtl'] {
  text-align: right;
}

.greeting.long {
  font-size: clamp(18px, 8.4cqw, 58px);
}

.language {
  position: absolute;
  right: 9%;
  bottom: 9.5%;
  margin: 0;
  max-width: 62%;
  text-align: right;
  color: var(--label);
  font-family: var(--font-mono);
  font-size: clamp(11px, 3.6cqw, 22px);
  letter-spacing: 0.12em;
  text-shadow: 0 0 18px rgba(11, 11, 13, 0.95);
  transition:
    opacity 260ms ease,
    transform 260ms ease;
}

.language small {
  display: block;
  font-size: 0.68em;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-top: 0.35em;
}

:root[data-theme='light'] .language small {
  color: #b9b09a;
}

.swap .greeting,
.swap .language {
  opacity: 0;
  transform: translateY(6px);
}

/* ---- Reduced motion: keep meaning, stop the drift ---- */
@media (prefers-reduced-motion: reduce) {
  .stars .twinkle {
    animation: none;
    opacity: var(--hi, 1);
  }

  .greeting,
  .language {
    transition: none;
  }
}