@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300&display=swap");

/* Layer order declared upfront so specificity is explicit, not accidental. */
@layer reset, tokens, base, layout, footer, sphere, decode;

/* ─── Reset ─────────────────────────────────────────────────────────────── */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { block-size: 100%; scrollbar-gutter: stable; }
}

/* ─── Design tokens ──────────────────────────────────────────────────────── */
@layer tokens {
  :root {
    color-scheme: light;

    /* Palette */
    --bg:        #ffffff;
    --fg:        rgb(120, 114, 109);
    --fg-strong: rgb(80, 75, 70);
    --muted:     color-mix(in oklab, var(--fg) 60%, var(--bg));
    --accent:    rgb(239, 67, 67);
    --border:    color-mix(in oklab, var(--fg) 16%, var(--bg));

    /* Typography */
    --font-sans: "Space Grotesk", system-ui, sans-serif;
    --step-0:    clamp(0.8rem, 0.76rem + 0.19vw, 0.9375rem);

    /* Spacing */
    --space-lg:  2rem;

    /* Layout */
    --footer-h:  3.5rem;
  }
}

/* ─── Base ───────────────────────────────────────────────────────────────── */
@layer base {
  body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: var(--step-0);
    font-weight: 300;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    min-block-size: 100dvh;
    overflow-x: clip;
  }
}

/* ─── Layout ─────────────────────────────────────────────────────────────── */
@layer layout {
  /*
   * Full-viewport stage for the sphere.
   * Subtracts the fixed footer height so the sphere centers in the
   * visible area above the footer, not behind it.
   */
  #stage {
    display: flex;
    align-items: center;
    justify-content: center;
    block-size: calc(100dvh - var(--footer-h));
  }
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */
@layer footer {
  /* Fixed to the bottom; sits above the sphere canvas (z-index: 10). */
  #site-footer {
    position: fixed;
    inset-block-end: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    z-index: 10;
    /* Respect iOS home indicator via safe-area-inset-bottom. */
    padding-block-end: max(2rem, env(safe-area-inset-bottom, 2rem));
    background: var(--bg);
    font-size: 11px;
    font-weight: 300;
    color: var(--muted);
    letter-spacing: 0.02em;
  }

  /*
   * Inner wrapper: constrains content to the same max-width as the page
   * wrapper so the separator line aligns with the content above.
   * position: relative anchors the ::before separator line.
   */
  #site-footer .footer-inner {
    position: relative;
    margin-inline: auto;
    max-inline-size: min(100% - var(--space-lg), 52rem);
    padding-block-start: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    text-align: center;
  }

  /*
   * Decorative separator line: 60% of the footer-inner width, centered.
   * Drawn via ::before so it doesn't participate in flex layout.
   */
  #site-footer .footer-inner::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    inline-size: 60%;
    border-block-start: 1px solid var(--border);
  }

  /* On wider viewports, arrange items in a single row. */
  #site-footer .sep {
    display: none;
    margin-inline: 0.75rem;
    color: var(--muted);
  }

  /* Separator between brand links inside .footer-brand */
  #site-footer .sep-inner {
    margin-inline: 0.75rem;
    color: var(--muted);
  }

  @media (min-width: 640px) {
    #site-footer .footer-inner { flex-direction: row; justify-content: center; gap: 0; }
    #site-footer .sep          { display: inline; }
  }

  #site-footer a              { color: var(--muted); text-decoration: none; transition: color 0.2s; }
  #site-footer a:hover        { color: var(--fg-strong); }

  #site-footer .footer-brand a       { color: var(--accent); }
  #site-footer .footer-brand a:hover { color: var(--fg-strong); }
}

/* ─── Decode text ────────────────────────────────────────────────────────── */
@layer decode {
  /* Anchor the tagline overlay inside the stage */
  #stage { position: relative; }

  #tagline {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    pointer-events: none;
    user-select: none;
  }

  .decode-letter {
    display: inline-block;
    position: relative;
    color: transparent;
    font-family: var(--font-sans);
    font-size: clamp(1rem, 2.5vw, 1.75rem);
    font-weight: 300;
    letter-spacing: 0.25em;
    line-height: 1;
  }

  /* Word gap between COMING and SOON */
  .decode-gap { display: inline-block; inline-size: 1.5em; }

  /* Scanning bar drawn via ::before */
  .decode-letter::before {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    background: var(--accent);
    inline-size: 0;
    block-size: 1.1em;
    transform: translate(-50%, -55%);
  }

  .decode-letter.state-1::before { inline-size: 1px; }
  .decode-letter.state-2::before { inline-size: 0.8em; }
  .decode-letter.state-3         { color: var(--fg-strong); }
  .decode-letter.state-3::before { inline-size: 0; }
}

/* ─── Sphere canvas ──────────────────────────────────────────────────────── */
@layer sphere {
  /*
   * The canvas is a square whose side equals 50% of the viewport's
   * shorter axis (min of 50vh / 50vw). Three.js reads this size at
   * init and on resize to set the drawing-buffer resolution.
   */
  #bg-canvas {
    display: block;
    inline-size: min(50vh, 50vw);
    block-size:  min(50vh, 50vw);
    pointer-events: none;
    will-change: transform; /* promote to GPU compositor layer */
  }
}