/* ============================================================
   YelloGem — Design tokens, reset, base type
   Cinematic mono + one yellow gem accent
   ============================================================ */

:root {
  /* — Ink (dark base) — */
  --ink:        #0A0A0B;
  --ink-1:      #0E0E10;
  --ink-2:      #141417;
  --ink-3:      #1C1C20;
  --ink-4:      #26262B;

  /* — Light (inverted rhythm section) — */
  --paper:      #F2F1EC;
  --paper-2:    #E7E6DF;

  --white:      #FFFFFF;

  /* — Text — */
  --tx:         #F6F6F4;          /* primary on dark */
  --tx-mut:     rgba(246,246,244,0.56);
  --tx-dim:     rgba(246,246,244,0.34);
  --tx-ink:     #0A0A0B;          /* on paper */
  --tx-ink-mut: rgba(10,10,11,0.56);

  /* — Lines — */
  --line:       rgba(246,246,244,0.13);
  --line-2:     rgba(246,246,244,0.07);
  --line-ink:   rgba(10,10,11,0.14);

  /* — The Gem (yellow accent) — */
  --gem:        #FFE000;
  --gem-deep:   #E6C800;
  --gem-soft:   rgba(255,224,0,0.14);
  --gem-glow:   rgba(255,224,0,0.40);

  /* — Type families — */
  --f-display:  'Bricolage Grotesque', sans-serif;
  --f-body:     'Space Grotesk', sans-serif;
  --f-mono:     'JetBrains Mono', monospace;

  /* — Fluid type scale — */
  --t-eyebrow:  clamp(0.68rem, 0.62rem + 0.3vw, 0.8rem);
  --t-body:     clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  --t-lead:     clamp(1.25rem, 1.05rem + 1vw, 1.75rem);
  --t-h3:       clamp(1.5rem, 1.1rem + 2vw, 2.6rem);
  --t-h2:       clamp(2.4rem, 1.4rem + 5vw, 5.5rem);
  --t-mega:     clamp(3rem, 1rem + 10vw, 10rem);
  --t-giga:     clamp(3rem, 0.5rem + 10.5vw, 9.5rem);

  /* — Spacing / layout — */
  --gutter:     clamp(20px, 5vw, 96px);
  --maxw:       1560px;
  --radius:     14px;

  /* — Motion — */
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io:    cubic-bezier(0.65, 0.05, 0.36, 1);
  --dur:        0.7s;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--f-body);
  background: var(--ink);
  color: var(--tx);
  line-height: 1.5;
  font-size: var(--t-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--gem); color: #0A0A0B; }

/* ---- Base type ---- */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.eyebrow {
  font-family: var(--f-mono);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tx-mut);
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
}
.eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--gem);
  border-radius: 50%;
  flex: none;
  box-shadow: 0 0 0 0 var(--gem-glow);
  animation: gemPulse 2.6s var(--ease-io) infinite;
}
@media (prefers-reduced-motion: reduce) { .eyebrow::before { animation: none; } }
@keyframes gemPulse {
  0%   { box-shadow: 0 0 0 0 var(--gem-glow); }
  70%  { box-shadow: 0 0 0 9px rgba(255,224,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,224,0,0); }
}

.gem-text { color: var(--gem); }

/* ---- Shared layout ---- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
section { position: relative; }

/* utility: hide for a11y */
.vh {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---- Dot-grid texture layer ---- */
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 4px 4px;
  opacity: 0.5;
  mix-blend-mode: screen;
}

/* ---- Reveal primitives (driven by JS IntersectionObserver) ---- */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }
[data-stagger] > * { transition-delay: calc(var(--i, 0) * 70ms); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

/* line-mask reveal for headline rows */
.line-mask { overflow: hidden; display: block; }
.line-mask > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1s var(--ease);
}
.in .line-mask > span,
.line-mask.in > span { transform: none; }