@font-face {
  font-family: "Noto Sans Runic";
  src: url("assets/noto-sans-runic.ttf") format("truetype");
  font-display: swap;
  unicode-range: U+16A0-16FF;
}

/* Black and quiet, in Yggdrasil's warm white, with Yggdrasil's easing. */
:root {
  color-scheme: dark;
  --bg: #000;
  --fg: #f4f1ee;
  --fg2: rgba(244, 241, 238, 0.64);
  --fg3: rgba(244, 241, 238, 0.36);
  --line: rgba(244, 241, 238, 0.1);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pad: clamp(20px, 5vw, 56px);
  --sans: Geist, -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
  --runic: "Noto Sans Runic", "Apple Symbols", "Segoe UI Symbol", sans-serif;
  --seal: clamp(200px, 26vw, 280px);
}

* { box-sizing: border-box; }
html { background: var(--bg); scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 17px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; border-radius: 6px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.lede, .sec-lede { text-wrap: balance; }
main { position: relative; z-index: 1; }

.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.skip-link {
  position: fixed;
  z-index: 20;
  top: 10px;
  left: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  color: #000;
  background: var(--fg);
  transform: translateY(-200%);
  transition: transform 200ms var(--ease);
}
.skip-link:focus { transform: none; }
/* Clipped away entirely until it has focus: parking it just above the top edge isn't enough, since Safari's
   rubber-band bounce pulls fixed elements down into view. */
.skip-link:not(:focus) { clip-path: inset(50%); opacity: 0; pointer-events: none; }

/* ---------- Threads and light ---------- */

.light-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* The light the falling beam casts on the page behind it. landing.js sets its opacity. */
.beam-glow {
  position: fixed;
  z-index: 0;
  top: 0;
  left: 50%;
  width: min(100vw, 900px);
  height: 100%;
  translate: -50% 0;
  /* Feathered on every side with gradients rather than a blur filter, which would clip to the box. */
  background:
    linear-gradient(90deg,
      transparent 22%,
      rgba(255, 107, 122, .14) 36%,
      rgba(255, 171, 94, .13) 42%,
      rgba(255, 224, 138, .12) 48%,
      rgba(123, 216, 143, .12) 53%,
      rgba(92, 200, 255, .13) 59%,
      rgba(169, 139, 255, .14) 65%,
      transparent 78%);
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(60% 75% at 50% 50%, #000 40%, transparent 100%);
  mask-image: radial-gradient(60% 75% at 50% 50%, #000 40%, transparent 100%);
}

.cursor-light {
  position: fixed;
  z-index: 0;
  left: 0;
  top: 0;
  width: 60vmax;
  height: 60vmax;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(244, 241, 238, 0.05), transparent 70%);
  pointer-events: none;
  opacity: 0;
  translate: -50% -50%;
  transition: opacity 1s var(--ease);
  will-change: transform;
}
.has-pointer .cursor-light { opacity: 1; }

/* ---------- Header ---------- */

.top {
  position: fixed;
  z-index: 10;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--pad);
  font-size: 14px;
  background: linear-gradient(rgba(0, 0, 0, 0.9), transparent);
}

.brand { display: inline-flex; align-items: center; font-weight: 600; letter-spacing: .01em; }
/* The small mark docks in once the seal has scattered. */
.brand-mark {
  width: 0;
  margin-right: 0;
  opacity: 0;
  scale: .6;
  transition: opacity 600ms var(--ease), scale 600ms var(--ease), width 600ms var(--ease), margin 600ms var(--ease);
}
.brand-mark { height: 15px; }
.top.is-docked .brand-mark { width: 22px; margin-right: 9px; opacity: 1; scale: 1; }

.top-link { color: var(--fg2); transition: color 200ms var(--ease); }
.top-link:hover { color: var(--fg); }

/* ---------- Hero ---------- */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100svh;
  padding: clamp(110px, 16vh, 150px) var(--pad) 64px;
  text-align: center;
}

.seal-stage {
  position: relative;
  width: var(--seal);
  aspect-ratio: 1;
  margin-bottom: clamp(36px, 6vh, 64px);
}

/* A soft halo under the seal. */
.seal-stage::before {
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(244, 241, 238, 0.09), rgba(244, 241, 238, 0.025) 50%, transparent 75%);
  opacity: var(--halo, 1);
  content: "";
}

.hero-title {
  font-size: clamp(44px, 6.4vw, 72px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.035em;
}
.hero-title .line { display: block; }

.lede {
  max-width: 34ch;
  margin-top: 18px;
  color: var(--fg2);
  font-size: clamp(17px, 1.6vw, 19px);
}

.actions { margin-top: 32px; }

.pill {
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 24px;
  border: 1px solid var(--fg);
  border-radius: 999px;
  color: #000;
  background: var(--fg);
  font-size: 15px;
  font-weight: 500;
  transition: transform 400ms var(--ease), background-color 300ms var(--ease), color 300ms var(--ease);
}
.pill:hover { transform: translateY(-2px); }
.pill:active { transform: scale(.97); transition-duration: 120ms; }

.hero-runes {
  margin-top: auto;
  padding-top: 56px;
  color: var(--fg3);
  font: 13px var(--runic);
  letter-spacing: .4em;
}

/* ---------- Sections ---------- */

.sec {
  width: min(100% - var(--pad) * 2, 880px);
  margin: 0 auto;
  padding: clamp(72px, 12vh, 120px) 0 0;
  text-align: center;
}

.sec h2 {
  font-size: clamp(32px, 4.4vw, 46px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.03em;
}

.sec-lede {
  max-width: 40em;
  margin: 18px auto 0;
  color: var(--fg2);
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.55;
}

.sec-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px 36px;
  padding-top: 72px;
  text-align: left;
}

.feat h3 { margin-top: 10px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.feat p { margin-top: 8px; color: var(--fg2); font-size: 15px; line-height: 1.55; }
.feat-rune {
  display: block;
  color: var(--fg3);
  font: 22px/1 var(--runic);
  transition: color 300ms var(--ease), text-shadow 300ms var(--ease);
}
.feat:hover .feat-rune { color: var(--fg); text-shadow: 0 0 18px rgba(244, 241, 238, .45); }

.sec-end {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: clamp(110px, 18vh, 180px);
  padding-bottom: 40px;
}
.seal-stage-end { --seal: clamp(150px, 18vw, 200px); }

/* The light lands: the closing seal's halo flares in the bridge's colours, then settles. */
.seal-stage-end::after {
  position: absolute;
  inset: -45%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 224, 138, .35), rgba(92, 200, 255, .18) 45%, rgba(169, 139, 255, .08) 65%, transparent 80%);
  opacity: 0;
  pointer-events: none;
  content: "";
}
.seal-stage-end.is-flash::after { animation: land 1400ms var(--ease); }
@keyframes land {
  0% { opacity: 0; scale: .6; }
  18% { opacity: 1; scale: 1; }
  100% { opacity: 0; scale: 1.25; }
}

/* ---------- Footer ---------- */

.foot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 28px;
  padding: 64px var(--pad) 40px;
  color: var(--fg3);
  font-size: 13px;
}
.foot a { transition: color 200ms var(--ease); }
.foot a:hover { color: var(--fg); }
.foot-brand { display: inline-flex; align-items: center; gap: 8px; }
.foot-mark { width: 20px; height: 14px; }
.foot-runes { font-family: var(--runic); letter-spacing: .3em; }

/* ---------- Rune → English decode ---------- */

[data-decode] { position: relative; }
.decode-output { position: absolute; inset: 0; display: none; pointer-events: none; }
.is-decoding .decode-source { color: transparent; }
.is-decoding .decode-output { display: block; }
/* One cell per character, placed by landing.js over that character; a rune is centred in its letter's slot. */
.decode-output > span { position: absolute; display: block; text-align: center; white-space: pre; }
.decode-output .rune { font-family: var(--runic); font-weight: 400; font-size: .86em; color: var(--fg2); }

/* ---------- Entrances ---------- */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* Hero lines come into focus while their runes decode. */
  .motion-ready .hero-title .line {
    filter: blur(10px);
    opacity: 0;
    translate: 0 10px;
    transition: filter 1100ms var(--ease), opacity 1100ms var(--ease), translate 1100ms var(--ease);
  }
  .motion-ready .hero-title .line:nth-child(2) { transition-delay: 140ms; }
  .motion-ready .hero.is-in .hero-title .line { filter: none; opacity: 1; translate: 0 0; }

  /* Yggdrasil's rise, staggered through --rise-delay. */
  .motion-ready [data-rise] {
    transition: opacity 900ms var(--ease) var(--rise-delay, 0ms), transform 900ms var(--ease) var(--rise-delay, 0ms);
  }
  .motion-ready [data-rise]:not(.is-risen) { opacity: 0; transform: translateY(16px) scale(.97); }

  .motion-ready .hero-runes { opacity: 0; transition: opacity 1400ms var(--ease) 1500ms; }
  .motion-ready .hero.is-in .hero-runes { opacity: 1; }
}

@media (max-width: 760px) {
  .sec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  body { font-size: 16px; }
  .sec-grid { grid-template-columns: 1fr; gap: 32px; padding-top: 56px; }
  .hero-runes { letter-spacing: .25em; font-size: 11px; }
  .foot { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}