/* Generative wordmark — shared scene styles.
 * Reads CSS vars + data-* attrs set by scene.js. */

:root {
  /* sensible defaults so the page looks like the original splash even before scene.js runs */
  --paper: #fbfaf6;
  --ink: #15120f;
  --accent: #0b2a57;
  --font: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --weight: 700;
  --tracking: -0.07em;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 240ms ease;
}

/* Two stacked overlays: ::before is texture, ::after is glow. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* ----- TEXTURES (driven by [data-texture]) ----- */

[data-texture="grid-soft"] body::before {
  background-image:
    linear-gradient(color-mix(in srgb, var(--ink) 14%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 14%, transparent) 1px, transparent 1px);
  background-size: 96px 96px;
  -webkit-mask-image: radial-gradient(circle at center, black 0, transparent 72%);
          mask-image: radial-gradient(circle at center, black 0, transparent 72%);
  opacity: 0.42;
}

[data-texture="blueprint"] body::before {
  background-image:
    linear-gradient(color-mix(in srgb, var(--ink) 22%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 22%, transparent) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.55;
}

[data-texture="stripes"] body::before {
  background-image: repeating-linear-gradient(
    12deg,
    color-mix(in srgb, var(--ink) 7%, transparent) 0 2px,
    transparent 2px 14px
  );
  opacity: 1;
}

[data-texture="dots"] body::before {
  background-image: radial-gradient(
    color-mix(in srgb, var(--ink) 32%, transparent) 1.5px,
    transparent 1.6px
  );
  background-size: 24px 24px;
  opacity: 0.55;
}

[data-texture="noise"] body::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/></svg>");
  opacity: 0.55;
  mix-blend-mode: multiply;
}
[data-family="after-hours"][data-texture="noise"] body::before {
  /* on dark grounds, multiply hides noise — overlay it instead */
  mix-blend-mode: screen;
  opacity: 0.18;
}

[data-texture="none"] body::before { display: none; }

/* ----- GLOWS (driven by [data-glow]) ----- */

[data-glow="warm-radial"] body::after {
  background: radial-gradient(
    circle at 50% 52%,
    color-mix(in srgb, var(--accent) 22%, transparent),
    transparent 28rem
  );
}

[data-glow="cool-radial"] body::after {
  background: radial-gradient(
    circle at 50% 48%,
    color-mix(in srgb, var(--accent) 18%, transparent),
    transparent 30rem
  );
}

[data-glow="none"] body::after { display: none; }

/* ----- WORDMARK ----- */

main {
  position: relative;
  z-index: 1;
  width: min(92vw, 1120px);
  padding: 8vh 4vw;
  text-align: center;
}

h1 {
  margin: 0;
  font-family: var(--font);
  font-weight: var(--weight);
  font-style: normal;
  font-size: clamp(3.75rem, 16vw, 14rem);
  letter-spacing: var(--tracking);
  line-height: 0.9;
  color: var(--ink);
}

[data-style="italic"] h1 { font-style: italic; }

.dot { color: var(--accent); }

/* Slightly tighter wordmark on small screens, regardless of scene. */
@media (max-width: 640px) {
  h1 { letter-spacing: var(--tracking); }
}

/* Hidden caption naming the active edition — fun easter-egg, also useful in dev. */
.edition-caption {
  position: fixed;
  bottom: 14px;
  right: 16px;
  z-index: 2;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
  user-select: none;
}
body:hover .edition-caption { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
  .edition-caption { transition: none; }
}

/* deploy pipeline smoke test — 2026-05-14T06:48:30Z */