/* ============ TOKENS ============ */
:root {
  --ink:        #07091c;
  --ink-2:      #0f0a2a;
  --plum:       #2a1a55;
  --gold:       #F4D58D;
  --gold-deep:  #D4A24E;
  --gold-soft:  #f4d58d40;
  --cream:      #F6F1E7;
  --cream-dim:  #b9b3c8;
  --rose:       #FF8FB0;
  --maxw: 880px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; }
body {
  font-family: 'Onest', system-ui, sans-serif;
  background: var(--ink);
  color: var(--cream);
  overflow-x: hidden;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ============ 3D TIME TUNNEL ============ */
.tunnel {
  position: fixed;
  inset: 0;
  z-index: 0;
  perspective: 700px;
  perspective-origin: 50% 50%;
  /* dark monochrome (SFG-like) — also the fallback bg if the star canvas fails */
  background: radial-gradient(120% 90% at 50% 50%, #10131c 0%, #090b12 42%, #05060b 78%);
  overflow: hidden;
}
/* 3D star-warp canvas — the visible cosmos background (covers the fallback ring tunnel) */
#warp { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.tunnel__scene { position: absolute; inset: 0; transform-style: preserve-3d; }
.tunnel__rings { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-style: preserve-3d; }
/* radial dolly tunnel: centered, JS drives transform=translate(-50%,-50%) scale() per scroll */
.ring {
  position: absolute;
  left: 50%; top: 50%;
  width: 72vmin; height: 72vmin;
  transform: translate(-50%, -50%) scale(0.05);
  border: 1.5px solid color-mix(in srgb, var(--cream) 32%, transparent);
  border-radius: 16%;
  box-shadow:
    0 0 50px -6px color-mix(in srgb, var(--plum) 70%, transparent),
    inset 0 0 40px -12px color-mix(in srgb, var(--gold) 36%, transparent);
  will-change: transform, opacity;
}
/* the light at the end of the tunnel — vanishing-point glow */
.tunnel__floor {
  position: absolute;
  left: 50%; top: 50%;
  width: 36vmax; height: 36vmax;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-soft) 0%, transparent 62%);
  opacity: 0.5;
  filter: blur(6px);
}

/* near-clip vignette: hides rings as they swell past the camera */
.vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 100% at 50% 46%, transparent 30%, var(--ink) 78%);
}
/* grave dim + finale light overlays */
.dim   { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: #04050f; opacity: 0; }
.light { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(80% 60% at 50% 42%, var(--gold-soft) 0%, transparent 60%); opacity: 0; }
#fx { position: fixed; inset: 0; z-index: 2; pointer-events: none; }

/* ============ PROGRESS RAIL ============ */
.rail {
  position: fixed; left: 0; right: 0; bottom: 22px; z-index: 5;
  display: flex; align-items: center; gap: 14px;
  max-width: var(--maxw); margin: 0 auto; padding: 0 28px;
  font-family: 'JetBrains Mono', monospace; font-size: 0.64rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--cream-dim);
}
.rail__line { flex: 1; height: 1px; background: color-mix(in srgb, var(--cream) 16%, transparent); position: relative; }
.rail__line i { position: absolute; left: 0; top: 0; height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); }

/* ============ CONTENT ============ */
main { position: relative; z-index: 3; }
.block {
  position: relative;
  min-height: 100svh;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 16vh 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* soft dark backing so text always reads over the moving tunnel */
.block::before {
  content: "";
  position: absolute; inset: 6vh -4vw;
  background: radial-gradient(60% 50% at 38% 50%, color-mix(in srgb, var(--ink) 78%, transparent) 0%, transparent 72%);
  z-index: -1; pointer-events: none;
}
.block--hero { align-items: center; text-align: center; }
.block--hero::before { left: -10vw; right: -10vw; background: radial-gradient(60% 55% at 50% 48%, color-mix(in srgb, var(--ink) 72%, transparent) 0%, transparent 70%); }

.year, .tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.74rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.4em;
}
.tag--quiet { color: var(--cream-dim); }

.hero-title {
  font-family: 'Unbounded', sans-serif; font-weight: 800;
  font-size: clamp(3rem, 12vw, 7rem); line-height: 0.94; letter-spacing: -0.02em;
  margin-bottom: 0.4em;
  background: linear-gradient(105deg, var(--gold-deep), var(--gold) 48%, #fff6df 56%, var(--gold) 70%, var(--gold-deep));
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 8px 30px var(--gold-soft));
}
.lede {
  max-width: 30ch; font-size: clamp(1.05rem, 2.6vw, 1.35rem); font-weight: 300; color: var(--cream);
  margin: 0 auto;
}
.aside {
  max-width: 34ch; margin: 1.6em auto 0; font-size: 0.95rem; font-style: italic;
  font-weight: 300; color: var(--cream-dim);
}
.cue {
  margin-top: 3.4em; font-family: 'JetBrains Mono', monospace; font-size: 0.66rem;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--cream-dim);
}

.big {
  font-size: clamp(1.5rem, 4.4vw, 2.5rem); font-weight: 300; line-height: 1.28;
  letter-spacing: -0.015em; max-width: 20ch; margin-bottom: 0.7em;
}
.mid {
  font-size: clamp(1.05rem, 2.4vw, 1.32rem); font-weight: 300; line-height: 1.5;
  color: var(--cream-dim); max-width: 30ch; margin-bottom: 0.8em;
}
.big em { font-style: normal; color: var(--gold); }
.big strong, .mid strong { font-weight: 600; color: var(--rose); }
.big em + *, .mid strong { font-style: normal; }

/* ===== grave (the operation) — restraint ===== */
.block--grave { }
.grave-line {
  font-size: clamp(1.2rem, 3vw, 1.7rem); font-weight: 300; line-height: 1.42;
  color: var(--cream-dim); max-width: 24ch; margin-bottom: 0.9em;
}
.grave-line .hl { color: var(--gold); font-weight: 500; }
.grave-line--last { color: var(--cream); }

/* ============ CERTIFICATE ============ */
.certificate {
  position: relative; width: min(560px, 100%); margin-top: 3rem;
  padding: 34px 32px 40px;
  border: 1px solid color-mix(in srgb, var(--cream) 14%, transparent);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff0a, #ffffff03), radial-gradient(120% 140% at 100% 0%, #f4d58d12, transparent 55%);
  backdrop-filter: blur(10px);
  box-shadow: 0 30px 80px -40px #000, inset 0 1px 0 #ffffff1a;
  overflow: hidden;
}
.cert-head { display: flex; justify-content: space-between; align-items: baseline; padding-right: 78px; padding-bottom: 18px; margin-bottom: 16px; border-bottom: 1px solid #ffffff14; }
.cert-kicker { font-family: 'JetBrains Mono', monospace; font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); }
.cert-id { font-family: 'JetBrains Mono', monospace; font-size: 0.64rem; color: var(--cream-dim); }
.cert-rows { display: flex; flex-direction: column; gap: 11px; }
.cert-rows .row { display: grid; grid-template-columns: 110px 1fr; align-items: baseline; gap: 14px; }
.cert-rows dt { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-dim); }
.cert-rows dd { font-family: 'Unbounded', sans-serif; font-weight: 600; font-size: 1rem; color: var(--cream); }
.cert-rows dd.ok { color: var(--gold); }
.cert-note { margin-top: 20px; padding-top: 16px; border-top: 1px solid #ffffff14; font-size: 0.92rem; font-weight: 300; font-style: italic; color: var(--cream-dim); max-width: 42ch; }
.cert-seal { position: absolute; top: 28px; right: 28px; width: 60px; height: 60px; display: grid; place-items: center; }
.seal-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed var(--gold-deep); opacity: 0.7; animation: spin 14s linear infinite; }
.seal-core { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 1rem; color: var(--ink); background: radial-gradient(circle at 35% 30%, #fff6df, var(--gold) 50%, var(--gold-deep)); box-shadow: 0 0 24px var(--gold-soft); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============ FINALE ============ */
.block--finale { align-items: center; text-align: center; }
.finale-title {
  font-family: 'Unbounded', sans-serif; font-weight: 700;
  font-size: clamp(2rem, 6vw, 3.6rem); line-height: 1.05; letter-spacing: -0.02em;
  margin: 0.5em 0; color: var(--cream);
}
.toast-line {
  font-family: 'Unbounded', sans-serif; font-weight: 400;
  font-size: clamp(1.2rem, 3vw, 1.7rem); margin: 1em 0 1.6em; color: var(--gold);
}
.launch {
  font-family: 'Unbounded', sans-serif; font-weight: 600; font-size: 1.02rem; color: var(--ink);
  background: linear-gradient(100deg, var(--gold-deep), var(--gold) 50%, #fff6df 90%);
  border: none; border-radius: 999px; padding: 16px 34px; cursor: pointer;
  box-shadow: 0 14px 40px -16px var(--gold), inset 0 1px 0 #fff8;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.launch:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 20px 54px -16px var(--gold); }
.launch:active { transform: translateY(0) scale(0.99); }
.launch:focus-visible { outline: 2px solid var(--cream); outline-offset: 4px; }
.sign { margin-top: 2.6rem; font-family: 'JetBrains Mono', monospace; font-size: 0.95rem; letter-spacing: 0.1em; color: var(--cream); }
.sign-sub { margin-top: 0.4rem; font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream-dim); }

/* easter-egg banter */
.egg { width: min(440px, 100%); margin: 3rem auto 0; display: flex; flex-direction: column; gap: 10px; }
.egg-row { display: flex; align-items: flex-end; gap: 10px; text-align: left; }
.egg-row--cc { flex-direction: row-reverse; }
.egg-who { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; letter-spacing: 0.1em; color: var(--cream-dim); opacity: 0.7; padding-bottom: 8px; min-width: 42px; }
.egg-row--cc .egg-who { text-align: right; color: var(--gold-deep); }
.egg-bubble {
  font-size: 0.92rem; font-weight: 300; line-height: 1.4; color: var(--cream);
  padding: 10px 15px; border-radius: 16px 16px 16px 4px;
  background: color-mix(in srgb, var(--cream) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--cream) 10%, transparent);
}
.egg-row--cc .egg-bubble {
  border-radius: 16px 16px 4px 16px;
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  border-color: color-mix(in srgb, var(--gold) 22%, transparent);
}

.foot { max-width: var(--maxw); margin: 0 auto; padding: 30px 28px 90px; display: flex; justify-content: space-between; font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; letter-spacing: 0.12em; color: var(--cream-dim); opacity: 0.55; }

/* ============ REVEAL ============ */
/* visible by default — JS (gsap.set) hides synchronously before paint only when motion runs,
   so if any script fails to load the page still shows everything */
.word { display: inline-block; will-change: transform, opacity; }
[data-reveal] { /* visible by default */ }

/* ============ RESPONSIVE ============ */
@media (max-width: 560px) {
  .block { padding: 12vh 22px; }
  .cert-rows .row { grid-template-columns: 90px 1fr; gap: 10px; }
  .cert-seal { top: 18px; right: 18px; width: 50px; height: 50px; }
  .foot { flex-direction: column; gap: 8px; }
  .ring { border-radius: 24px; }
}

/* NOTE: no prefers-reduced-motion gate — this personal card animates for everyone by design
   (OveR's request; his/Nizov's OS has reduce-motion ON which would otherwise freeze it). */