/* ── UnrealOT base: document, type scale, ornament, motion law ── */
body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
/* The window never pans sideways. A turning canvas or a wide glow can outrun
   the page box; the root clips it, so nothing scrolls the page off its left edge. */
html { overflow-x: clip; }
::selection { background: var(--am-deep); color: var(--ink); }
a { color: var(--amethyst); text-decoration: none; transition: color .2s ease-out; }
a:hover { color: var(--gold); }

/* ── heading scale. Cinzel only. ── */
h1, h2, h3 { font-family: var(--display); color: var(--ink); line-height: 1.12; margin: 0 0 .45em; }
h1 { font-size: clamp(40px, 5vw, 64px); font-weight: 900; letter-spacing: .01em; }
h2 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 700; letter-spacing: .02em; }
h3 { font-size: clamp(19px, 2vw, 23px); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
p { margin: 0 0 1em; }
.eyebrow {
  font-family: var(--display); font-size: 13px; font-weight: 700;
  letter-spacing: .32em; text-transform: uppercase; color: var(--amethyst);
}

/* ── the metal type treatment. Never fake it with flat colour. ── */
.foil-steel, .foil-gold {
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent;
}
.foil-steel { background-image: var(--foil-steel); }
.foil-gold  { background-image: var(--foil-gold); }
.wordmark { font-family: var(--wordmark); font-weight: 900; letter-spacing: .01em; }

/* ── section-title lockup: heading, diamond ornament, one line of subcopy ── */
.section-title { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.section-title h1, .section-title h2 { margin-bottom: 0; }
.section-title .subcopy { color: var(--ink-dim); font-size: 17px; margin: 10px 0 0; }
.ornament { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 16px 0 0; }
.ornament::before, .ornament::after {
  content: ""; height: 1px; width: min(110px, 18vw);
  background: linear-gradient(90deg, transparent, var(--brd-am));
}
.ornament::after { transform: scaleX(-1); }
.ornament i {
  width: 8px; height: 8px; transform: rotate(45deg); flex: none;
  background: linear-gradient(135deg, var(--amethyst), var(--am-deep));
  box-shadow: 0 0 12px var(--am-glow);
}

/* ── motion law: stone and candlelight ── */
/* ⛔ The deep no longer breathes as a whole. Fading the entire backdrop
   82% -> 100% reads as almost nothing, and it is not what unrealot.com does:
   there the base is static and only the two extra nebulae on .bg-arcane::before
   pulse, 45% -> 100%. That pair lives in tokens/brand.css. Putting the
   animation back here would fight it. */
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 10px var(--am-glow); }
  50%      { box-shadow: 0 0 24px var(--am-glow); }
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.reveal { animation: rise-in .5s ease-out both; }
.reveal-stagger > * { animation: rise-in .5s ease-out both; }
.reveal-stagger > :nth-child(2) { animation-delay: 60ms; }
.reveal-stagger > :nth-child(3) { animation-delay: 120ms; }
.reveal-stagger > :nth-child(4) { animation-delay: 180ms; }
.reveal-stagger > :nth-child(5) { animation-delay: 240ms; }
.reveal-stagger > :nth-child(6) { animation-delay: 300ms; }
.reveal-stagger > :nth-child(7) { animation-delay: 360ms; }
.reveal-stagger > :nth-child(8) { animation-delay: 420ms; }

@media (prefers-reduced-motion: reduce) {
  .bg-arcane { animation: none; }
  .reveal, .reveal-stagger > * { animation-name: fade-only; animation-delay: 0ms; }
  @keyframes fade-only { from { opacity: 0; } to { opacity: 1; } }
}