/* Palette:
 *   --mosaic        #0D3D42  deep teal — cosmic background
 *   --william       #376B73  mid teal   — the "face" disc
 *   --country-cream #F2F1D7  off-white  — hero text, lit sweep, dot
 *   --hemp-brown    #8C7A75  taupe      — muted rail, status hint
 *   --country-brown #59423D  deep brown — edges, stroke accents, halo
 *
 * Composition is a homage to the Ritholtz DON'T PANIC cover:
 * cosmic disc up top, huge warm banner below.
 */
:root {
  color-scheme: dark;
  --mosaic:        #0D3D42;
  --william:       #376B73;
  --country-cream: #F2F1D7;
  --hemp-brown:    #8C7A75;
  --country-brown: #59423D;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background:
    radial-gradient(ellipse at 50% 30%,
      var(--mosaic) 0%,
      #072529 55%,
      var(--country-brown) 100%);
  color: var(--country-cream);
  font-family: 'Helvetica Neue', system-ui, -apple-system, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  gap: 4px;
}

#sophie-svg {
  width: min(82vmin, 420px);
  height: auto;
  display: block;
  /* Mobile: prevent the browser from interpreting a pointer drag as a
   * pan/pinch gesture. Without this, pointermove events are swallowed
   * by native scroll handling on iOS Safari and Android Chrome. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* The hero. A thick condensed sans stands in for the proprietary
 * Hitchhiker's Guide lettering. The palette has no orange/yellow so
 * we substitute Country Cream and rely on layered Country Brown /
 * Hemp Brown shadows to get the same warm halo the original fiery
 * letters give against deep space. */
.dontpanic {
  font-family: 'Impact', 'Haettenschweiler', 'Arial Narrow Bold', sans-serif;
  font-size: clamp(56px, 13vmin, 108px);
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--country-cream);
  text-transform: uppercase;
  margin-top: 18px;
  line-height: 0.95;
  text-shadow:
    0  1px 0  var(--country-brown),
    0  2px 0  var(--country-brown),
    0  0    3px var(--country-brown),
    0  0    8px var(--hemp-brown),
    0  0   22px rgba(242, 241, 215, 0.55),
    0  0   44px rgba(242, 241, 215, 0.25);
}

.status-line {
  margin-top: 14px;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--hemp-brown);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.counter {
  margin-top: 4px;
  font-family: 'Menlo', 'Monaco', monospace;
  font-size: 12px;
  color: var(--william);
  letter-spacing: 0.05em;
}

.footer {
  margin-top: 22px;
  font-size: 10px;
  color: var(--country-brown);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.8;
}

/* Make the dot visibly grabbable. */
#sophie-dot:hover {
  filter: drop-shadow(0 0 12px var(--country-cream));
}
#sophie-dot:active {
  cursor: grabbing;
}

/* ─── Alien reveal ──────────────────────────────────────────────────
 * Hidden by default; WASM flips `.revealed` on successful verify and
 * the group fades in + scales up from near-zero with a light bounce.
 * transform-origin is the visual centre of the face features (the
 * midpoint of the eyes/mouth cluster) in viewBox units. */
.alien-face {
  opacity: 0;
  transform: scale(0.35);
  transform-box: view-box;
  transform-origin: 200px 235px;
  transition:
    opacity   520ms ease-out,
    transform 680ms cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.alien-face.revealed {
  opacity: 1;
  transform: scale(1);
}

/* Tiny idle wiggle of the tongue once revealed, because of course. */
.alien-face.revealed path:last-of-type {
  transform-box: view-box;
  transform-origin: 200px 300px;
  animation: tongue-wag 1200ms ease-in-out 520ms 2 alternate;
}

@keyframes tongue-wag {
  0%   { transform: rotate(-6deg); }
  100% { transform: rotate(6deg);  }
}