/* ============================================================
   SIGNUM — shared design tokens
   Type: Newsreader (serif headlines) · Archivo (sans UI) · IBM Plex Mono (labels)
   Color: strict black & white; low-chroma prism ONLY at glass refraction edges.
   ============================================================ */

:root {
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* light surface */
  --paper: oklch(0.971 0.003 250);
  --paper-2: oklch(0.945 0.004 250);
  --ink: oklch(0.18 0.005 270);
  --ink-soft: oklch(0.42 0.006 270);
  --ink-faint: oklch(0.62 0.006 270);
  --hair-d: oklch(0.18 0.005 270 / 0.12);

  /* dark surface */
  --noir: oklch(0.155 0.004 270);
  --noir-2: oklch(0.205 0.005 270);
  --snow: oklch(0.965 0.003 250);
  --snow-soft: oklch(0.78 0.004 250);
  --snow-faint: oklch(0.6 0.004 250);
  --hair-l: oklch(0.97 0 0 / 0.14);
}

* { box-sizing: border-box; }

/* ---- hero shells ------------------------------------------------ */
.hero {
  position: relative;
  width: 1280px;
  height: 720px;
  overflow: hidden;
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.01em;
}
.hero.light { background: var(--paper); color: var(--ink); }
.hero.dark  { background: var(--noir); color: var(--snow); }

/* faint vignette to seat the glass */
.hero .vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
}
.hero.light .vignette {
  background: radial-gradient(120% 90% at 70% 40%, transparent 55%, oklch(0.18 0.005 270 / 0.05) 100%);
}
.hero.dark .vignette {
  background: radial-gradient(110% 80% at 50% 42%, oklch(0.97 0 0 / 0.04) 0%, transparent 45%),
              radial-gradient(120% 100% at 50% 55%, transparent 50%, oklch(0 0 0 / 0.45) 100%);
}

/* ---- shared type atoms ------------------------------------------ */
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}
.hero.light .eyebrow { color: var(--ink-soft); }
.hero.dark  .eyebrow { color: var(--snow-soft); }

.display {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.display em { font-style: italic; font-weight: 300; }

.lede {
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.5;
  text-wrap: pretty;
}
.hero.light .lede { color: var(--ink-soft); }
.hero.dark  .lede { color: var(--snow-soft); }

/* ---- buttons ---------------------------------------------------- */
.btn-row { display: flex; align-items: center; gap: 18px; }
.btn {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 13px 22px;
  border-radius: 2px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
  display: inline-flex; align-items: center; gap: 10px;
}
.hero.light .btn-primary { background: var(--ink); color: var(--paper); }
.hero.light .btn-primary:hover { background: oklch(0.3 0.005 270); }
.hero.dark  .btn-primary { background: var(--snow); color: var(--noir); }
.hero.dark  .btn-primary:hover { background: var(--snow-soft); }

.btn-ghost { background: transparent; }
.hero.light .btn-ghost { color: var(--ink); border-color: var(--hair-d); }
.hero.light .btn-ghost:hover { border-color: var(--ink); }
.hero.dark  .btn-ghost { color: var(--snow); border-color: var(--hair-l); }
.hero.dark  .btn-ghost:hover { border-color: var(--snow); }

.btn .arrow { font-family: var(--mono); font-size: 13px; }

/* ---- top brand bar (inside hero) -------------------------------- */
.brandbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: 30px 56px;
}
.wordmark {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 21px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.wordmark .dot { display:inline-block; }
.navlinks { display: flex; gap: 34px; }
.navlinks a {
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  letter-spacing: 0.02em; text-decoration: none;
}
.hero.light .navlinks a { color: var(--ink-soft); }
.hero.dark  .navlinks a { color: var(--snow-soft); }

/* ============================================================
   GLASS MOSAIC — shards that reassemble (noise -> signal)
   ============================================================ */
.glass-field {
  position: absolute;
  will-change: transform;
}
.shard {
  position: absolute; inset: 0;
  transition:
    transform 1700ms cubic-bezier(.16,.84,.30,1),
    opacity 1200ms ease;
  will-change: transform, opacity;
}
.glass-field.shattered .shard {
  /* per-shard scatter transform supplied inline via --tx/--ty/--rot */
  transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(0.94);
  opacity: 0;
}

/* subtle continuous light drift on the assembled pane */
@keyframes sheen {
  0%   { transform: translateX(-30%) skewX(-12deg); opacity: 0; }
  18%  { opacity: 0.5; }
  50%  { opacity: 0.18; }
  100% { transform: translateX(160%) skewX(-12deg); opacity: 0; }
}
.sheen {
  position: absolute; top: -10%; height: 120%; width: 13%;
  pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(90deg, transparent, oklch(0.98 0 0 / 0.32), transparent);
  filter: blur(7px);
  animation: sheen 9s ease-in-out infinite;
  animation-delay: 2.2s;
}

@media (prefers-reduced-motion: reduce) {
  .glass-field.shattered .shard { transform: none; opacity: 1; }
  .shard { transition: none; }
  .sheen { display: none; }
}