/* ─── Symvolia — Memoirs / Can't Sleep mood · murky · sub · hypnotic ─── */

:root {
  --void: #010101;
  --void-deep: #010101;
  --murk: #0a0908;
  --rim: #1c1814;
  --sigil-glow: rgba(85, 72, 62, 0.42);
  --ash: #8a8074;
  --silver: #969088;
  --silver-dim: rgba(110, 102, 94, 0.48);
  --line: rgba(70, 62, 55, 0.22);
  --sub-hit: rgba(28, 22, 18, 0.22);
  --font-elegant: 'Cormorant Garamond', serif;
  --ease-open: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-requiem: cubic-bezier(0.45, 0.03, 0.55, 0.97);
  --ease-breathe: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-sub: cubic-bezier(0.55, 0, 0.45, 1);
  --ease-flow: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --sclera-lit: #1c1a18;
  --sclera-mid: #151310;
  --sclera: #121110;
  --iris-mid: #1a1816;
  --limbus: rgba(55, 48, 42, 0.35);
  --ease-blink: cubic-bezier(0.34, 0.02, 0.14, 1);
  --t-start: 0.15s;
  --t-open: 4s;
  --t-iris-fill: 0.2s;
  --t-iris-fill-dur: 3.8s;
  --t-tagline: 4.1s;
  --t-enter: 4.4s;
  --eye-w: min(100vw, calc(100vh * 1.92));
  --eye-h: min(54vh, calc(100vw * 0.54));
  --pupil-size: 36%;
  --living-cross: min(78vmin, 700px);
  --living-script: min(92vmin, 860px);
  --living-runes: min(64vmin, 580px);
  --living-runes-r: calc(var(--living-runes) / 2);
  --sigil-alive: min(46vmin, 420px);
  --mandala-size: var(--living-script);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

html, body {
  height: 100%;
}

body {
  background: var(--void);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

body.is-entered {
  overflow: auto;
}

/* ─── Stage ─── */

.stage {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 1rem 1.5rem;
  background: var(--void);
  transition: opacity 1.2s var(--ease-open), visibility 1.2s;
}

/* Beats .esoteric-panel { position: relative } in textures.css */
section#stage.stage {
  position: fixed;
}

.stage--requiem {
  justify-content: center;
  padding: 1.25rem 1rem 1.5rem;
}

/* Unified centered mandala */
.stage__composition {
  position: relative;
  width: var(--mandala-size);
  height: var(--mandala-size);
  max-width: 100%;
  max-height: min(var(--mandala-size), calc(100vh - 12rem));
  flex-shrink: 0;
  transform-origin: center center;
}

.stage--requiem .stage__composition {
  animation: blinkPushIn var(--t-open) var(--ease-blink) var(--t-start) forwards;
}

.stage__footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(1rem, 3.5vh, 2.5rem);
  margin: 0 auto;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  max-width: 36rem;
  padding: 0 1rem;
}

/* Desktop: slight lift for tagline / Enter / contacts */
@media (min-width: 768px) {
  .stage__footer {
    bottom: clamp(1.6rem, 5vh, 3.2rem);
  }
}

.stage--requiem .stage__pulse,
.stage--requiem .stage__haze {
  opacity: 0.12;
}

.stage.is-diving {
  pointer-events: none;
}

.stage.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s var(--ease-open), visibility 0.5s;
}

.stage[hidden] {
  display: none !important;
}

/* Dive / archive — kill every homepage chrome layer (incl. alchemical menu) */
.stage.is-diving .stage__tagline,
.stage.is-diving .stage__enter,
.stage.is-diving .stage__footer,
.stage.is-diving .stage__depth,
.stage.is-diving .stage__pulse,
.stage.is-diving .stage__haze,
.stage.is-diving .stage__living,
.stage.is-diving .stage__menu,
.stage.is-diving .stage__orbit,
.stage.is-diving .stage__orbit-item,
.stage.is-diving .stage__menu-col,
.stage.is-diving .stage__menu-list,
.stage.is-diving .stage__menu-item,
.stage.is-diving .stage__inscriptions,
.stage.is-diving .stage__social,
.stage.is-diving .stage__waveform,
.stage.is-diving .stage__sub,
.stage.is-diving .stage__grain,
.stage.is-leaving .stage__menu,
.stage.is-leaving .stage__orbit,
.stage.is-leaving .stage__orbit-item,
.stage.is-leaving .stage__menu-col,
.stage.is-leaving .stage__menu-item,
.stage.is-leaving .stage__inscriptions,
.stage.is-leaving .stage__footer,
.stage.is-leaving .stage__tagline,
.stage.is-leaving .stage__enter,
.stage.is-leaving .stage__social,
body.is-entered .stage__menu,
body.is-entered .stage__orbit,
body.is-entered .stage__orbit-item,
body.is-entered .stage__menu-col,
body.is-entered .stage__menu-item,
body.is-entered .stage__inscriptions,
body.is-entered .stage__footer,
body.is-entered .stage__tagline,
body.is-entered .stage__enter,
body.is-entered .stage__social,
html.is-home .stage.is-diving .stage__menu,
html.is-home .stage.is-diving .stage__orbit,
html.is-home .stage.is-diving.stage--home-enter .stage__menu,
html.is-home .stage.is-diving.stage--home-visible.stage--home-enter .stage__orbit-item,
html.is-home .stage.is-diving.stage--home-visible.stage--home-enter .stage__menu-col,
html.is-home .stage.is-diving.stage--home-visible.stage--home-enter .stage__menu-col--left,
html.is-home .stage.is-diving.stage--home-visible.stage--home-enter .stage__menu-col--right,
html.is-home .stage.is-diving.stage--home-visible.stage--home-enter .stage__menu-item {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.stage.is-diving .stage__menu,
.stage.is-diving .stage__orbit,
.stage.is-leaving .stage__menu,
.stage.is-leaving .stage__orbit,
body.is-entered .stage__menu,
body.is-entered .stage__orbit,
.stage__menu[hidden],
html.is-home .stage.is-diving .stage__menu,
html.is-home .stage.is-diving .stage__orbit,
html.is-home .stage.is-diving.stage--home-visible.stage--home-enter .stage__menu {
  display: none !important;
}

.stage.is-diving .eye__halo {
  opacity: 0;
  transition: opacity 0.3s;
}

.stage.is-diving .stage__composition {
  z-index: 6;
  animation: diveIntoEye 2.5s var(--ease-open) forwards;
}

.stage.is-diving .eye--requiem {
  animation: none;
}

.stage.is-diving .eye__socket {
  animation: none;
}

.stage.is-diving .stage__sigil-img {
  animation: sigilImgDive 2.5s var(--ease-open) forwards;
}

.stage.is-diving .stage__sigil-glow {
  animation: sigilGlowDive 2.5s var(--ease-open) forwards;
}

.stage.is-diving .stage__vignette {
  animation: vignetteTunnel 2.5s var(--ease-open) forwards;
}

.stage__tunnel {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 50%, transparent 0%, var(--void) 68%);
}

.stage__tunnel.is-active {
  animation: tunnelRush 2.5s var(--ease-open) forwards;
}

@keyframes diveIntoEye {
  0% {
    transform: scale(1);
    filter: blur(0);
    opacity: 1;
  }
  30% {
    transform: scale(2.4);
    filter: blur(0);
    opacity: 1;
  }
  55% {
    transform: scale(6);
    filter: blur(0.5px);
    opacity: 0.9;
  }
  80% {
    transform: scale(14);
    filter: blur(3px);
    opacity: 0.5;
  }
  100% {
    transform: scale(24);
    filter: blur(10px);
    opacity: 0;
  }
}

@keyframes sigilImgDive {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
  40% {
    opacity: 0.85;
    transform: scale(1.04);
    filter: blur(2px);
  }
  100% {
    opacity: 0;
    transform: scale(1.35);
    filter: blur(14px) brightness(1.4);
  }
}

@keyframes sigilGlowDive {
  0% { opacity: 0.35; }
  30% { opacity: 0.95; transform: scale(1.15); }
  100% { opacity: 0; transform: scale(1.8); }
}

@keyframes vignetteTunnel {
  0% {
    background: radial-gradient(ellipse at center, transparent 28%, var(--void) 88%);
  }
  50% {
    background: radial-gradient(circle at 50% 50%, transparent 8%, rgba(1, 1, 2, 0.6) 35%, var(--void) 72%);
  }
  100% {
    background: radial-gradient(circle at 50% 50%, transparent 0%, var(--void) 55%);
  }
}

@keyframes tunnelRush {
  0% { opacity: 0; }
  20% { opacity: 0.4; }
  60% { opacity: 0.85; }
  100% { opacity: 1; }
}

.stage__depth {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 50% at 50% 40%, rgba(35, 28, 22, 0.14) 0%, transparent 62%),
    radial-gradient(ellipse 45% 35% at 15% 85%, rgba(20, 15, 12, 0.1) 0%, transparent 55%),
    radial-gradient(ellipse 40% 30% at 88% 20%, rgba(30, 22, 18, 0.07) 0%, transparent 50%);
  pointer-events: none;
}

.stage__pulse {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 48%, var(--sub-hit) 0%, transparent 48%);
  opacity: 0;
  animation: subPulse 9s var(--ease-sub) 5s infinite;
  pointer-events: none;
}

@keyframes subPulse {
  0%, 88%, 100% { opacity: 0; transform: scale(0.98); }
  42%           { opacity: 0.35; transform: scale(1.015); }
  50%           { opacity: 1; transform: scale(1.02); }
}

.stage__sub {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 70%, rgba(8, 6, 5, 0.35) 100%);
  animation: subFloor 9s var(--ease-sub) 5s infinite;
}

@keyframes subFloor {
  0%, 88%, 100% { opacity: 0.3; }
  50%           { opacity: 0.85; }
}

.stage__haze {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 18%, var(--void) 82%);
  pointer-events: none;
}

.stage__grain {
  position: absolute;
  inset: 0;
  opacity: 0.065;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.stage__waveform,
.main__waveform {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  height: 36px;
  padding: 0 8%;
  opacity: 0.14;
  pointer-events: none;
}

.stage__waveform span,
.main__waveform span {
  flex: 1;
  max-width: 6px;
  min-height: 2px;
  background: linear-gradient(to top, rgba(60, 50, 42, 0.9), rgba(90, 78, 68, 0.35));
  transform-origin: bottom;
  animation: waveBar var(--wave-dur, 2.8s) var(--ease-sub) infinite;
  animation-delay: var(--wave-delay, 0s);
}

.stage__waveform span:nth-child(1)  { --wave-dur: 3.2s; --wave-delay: 0s;    height: 18%; }
.stage__waveform span:nth-child(2)  { --wave-dur: 2.6s; --wave-delay: 0.1s;  height: 32%; }
.stage__waveform span:nth-child(3)  { --wave-dur: 3.8s; --wave-delay: 0.2s;  height: 48%; }
.stage__waveform span:nth-child(4)  { --wave-dur: 2.4s; --wave-delay: 0.05s; height: 28%; }
.stage__waveform span:nth-child(5)  { --wave-dur: 3.4s; --wave-delay: 0.15s; height: 62%; }
.stage__waveform span:nth-child(6)  { --wave-dur: 2.9s; --wave-delay: 0.25s; height: 44%; }
.stage__waveform span:nth-child(7)  { --wave-dur: 3.6s; --wave-delay: 0.08s; height: 72%; }
.stage__waveform span:nth-child(8)  { --wave-dur: 2.5s; --wave-delay: 0.18s; height: 38%; }
.stage__waveform span:nth-child(9)  { --wave-dur: 3.1s; --wave-delay: 0.3s;  height: 55%; }
.stage__waveform span:nth-child(10) { --wave-dur: 2.7s; --wave-delay: 0.12s; height: 26%; }
.stage__waveform span:nth-child(11) { --wave-dur: 3.5s; --wave-delay: 0.22s; height: 68%; }
.stage__waveform span:nth-child(12) { --wave-dur: 2.8s; --wave-delay: 0.04s; height: 42%; }
.stage__waveform span:nth-child(13) { --wave-dur: 3.3s; --wave-delay: 0.16s; height: 58%; }
.stage__waveform span:nth-child(14) { --wave-dur: 2.6s; --wave-delay: 0.28s; height: 34%; }
.stage__waveform span:nth-child(15) { --wave-dur: 3.7s; --wave-delay: 0.1s;  height: 22%; }

.main__waveform span:nth-child(1)  { --wave-dur: 3.4s; --wave-delay: 0s;    height: 20%; }
.main__waveform span:nth-child(2)  { --wave-dur: 2.8s; --wave-delay: 0.08s; height: 35%; }
.main__waveform span:nth-child(3)  { --wave-dur: 3.9s; --wave-delay: 0.16s; height: 50%; }
.main__waveform span:nth-child(4)  { --wave-dur: 2.5s; --wave-delay: 0.04s; height: 30%; }
.main__waveform span:nth-child(5)  { --wave-dur: 3.2s; --wave-delay: 0.12s; height: 65%; }
.main__waveform span:nth-child(6)  { --wave-dur: 2.9s; --wave-delay: 0.2s;  height: 46%; }
.main__waveform span:nth-child(7)  { --wave-dur: 3.6s; --wave-delay: 0.06s; height: 75%; }
.main__waveform span:nth-child(8)  { --wave-dur: 2.6s; --wave-delay: 0.14s; height: 40%; }
.main__waveform span:nth-child(9)  { --wave-dur: 3.1s; --wave-delay: 0.24s; height: 58%; }
.main__waveform span:nth-child(10) { --wave-dur: 2.7s; --wave-delay: 0.1s;  height: 28%; }
.main__waveform span:nth-child(11) { --wave-dur: 3.5s; --wave-delay: 0.18s; height: 70%; }
.main__waveform span:nth-child(12) { --wave-dur: 2.8s; --wave-delay: 0.02s; height: 44%; }
.main__waveform span:nth-child(13) { --wave-dur: 3.3s; --wave-delay: 0.14s; height: 60%; }
.main__waveform span:nth-child(14) { --wave-dur: 2.6s; --wave-delay: 0.22s; height: 36%; }
.main__waveform span:nth-child(15) { --wave-dur: 3.8s; --wave-delay: 0.08s; height: 24%; }
.main__waveform span:nth-child(16) { --wave-dur: 2.9s; --wave-delay: 0.16s; height: 52%; }
.main__waveform span:nth-child(17) { --wave-dur: 3.4s; --wave-delay: 0.26s; height: 38%; }
.main__waveform span:nth-child(18) { --wave-dur: 2.5s; --wave-delay: 0.04s; height: 66%; }
.main__waveform span:nth-child(19) { --wave-dur: 3.2s; --wave-delay: 0.12s; height: 42%; }
.main__waveform span:nth-child(20) { --wave-dur: 3.6s; --wave-delay: 0.2s;  height: 18%; }

@keyframes waveBar {
  0%, 100% { transform: scaleY(0.35); opacity: 0.4; }
  35%      { transform: scaleY(0.7); opacity: 0.65; }
  50%      { transform: scaleY(1); opacity: 0.9; }
  65%      { transform: scaleY(0.55); opacity: 0.55; }
}

.stage__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: radial-gradient(ellipse 72% 58% at 50% 50%, transparent 0%, rgba(2, 1, 1, 0.35) 48%, var(--void) 92%);
}

.stage--requiem .stage__vignette {
  background: radial-gradient(ellipse 68% 52% at 50% 50%, transparent 2%, rgba(2, 1, 1, 0.5) 42%, var(--void) 90%);
}

.stage__composition .eye {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
}

.stage__composition .eye--requiem {
  width: min(var(--eye-w), 86%);
  height: min(var(--eye-h), 54%);
  max-width: 86%;
  max-height: 54%;
}

@keyframes blinkPushIn {
  0%   { transform: scale(1); }
  100% { transform: scale(1.1); }
}

.stage .stage__waveform {
  opacity: 0;
  animation: stageWaveIn 8s ease 6.5s forwards;
}

@keyframes stageWaveIn {
  to { opacity: 0.12; }
}

.stage .stage__pulse,
.stage .stage__haze {
  opacity: 0.35;
}

/* ─── Eye — Requiem ECU homepage ─── */

.eye {
  opacity: 0;
  filter: blur(2px);
  animation: eyePresence 0.8s var(--ease-open) 0.05s forwards;
}

@keyframes eyePresence {
  to { opacity: 1; filter: blur(0); }
}

@keyframes requiemPushIn {
  0%   { transform: scale(1); }
  100% { transform: scale(1.22); }
}

.eye__halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 128%;
  height: 200%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(45, 38, 32, 0.08) 0%, transparent 65%);
  opacity: 0;
  animation: fadeIn 1.4s var(--ease-open) var(--t-start) forwards;
  pointer-events: none;
}

@keyframes fadeIn {
  to { opacity: 1; }
}

.eye__socket {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50% / 42%;
  overflow: hidden;
  box-shadow:
    0 0 40px rgba(255, 255, 255, 0.02),
    0 0 80px rgba(0, 0, 0, 0.35);
}

@keyframes eyeBreathe {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(0.992); }
}

/* Orbital depth — clinical ECU rim */
.eye__orbit {
  position: absolute;
  inset: -10% -6% -6%;
  border-radius: 50% / 42%;
  pointer-events: none;
  z-index: 3;
  background:
    radial-gradient(ellipse 48% 20% at 50% 2%, rgba(0, 0, 0, 0.5) 0%, transparent 100%),
    radial-gradient(ellipse 94% 86% at 50% 50%, transparent 50%, rgba(0, 0, 0, 0.38) 100%);
  -webkit-mask-image: radial-gradient(ellipse 72% 62% at 50% 50%, transparent 56%, #000 98%);
  mask-image: radial-gradient(ellipse 72% 62% at 50% 50%, transparent 56%, #000 98%);
  opacity: 0;
  animation: orbitDepthIn 4s var(--ease-requiem) calc(var(--t-start) + 2s) forwards;
}

@keyframes orbitDepthIn {
  to { opacity: 1; }
}

.eye__ball {
  position: absolute;
  inset: 0;
  z-index: 1;
  clip-path: ellipse(50% 0.35% at 50% 50%);
  -webkit-clip-path: ellipse(50% 0.35% at 50% 50%);
  animation:
    blinkOpen var(--t-open) var(--ease-blink) var(--t-start) forwards,
    eyeBreathe 14s var(--ease-breathe) 5s infinite;
  will-change: clip-path;
}

@keyframes blinkOpen {
  0%   { clip-path: ellipse(50% 0.35% at 50% 50%); -webkit-clip-path: ellipse(50% 0.35% at 50% 50%); }
  10%  { clip-path: ellipse(50% 4% at 50% 50%); -webkit-clip-path: ellipse(50% 4% at 50% 50%); }
  25%  { clip-path: ellipse(50% 16% at 50% 50%); -webkit-clip-path: ellipse(50% 16% at 50% 50%); }
  42%  { clip-path: ellipse(50% 30% at 50% 50%); -webkit-clip-path: ellipse(50% 30% at 50% 50%); }
  58%  { clip-path: ellipse(50% 40% at 50% 50%); -webkit-clip-path: ellipse(50% 40% at 50% 50%); }
  74%  { clip-path: ellipse(50% 46% at 50% 50%); -webkit-clip-path: ellipse(50% 46% at 50% 50%); }
  88%  { clip-path: ellipse(50% 49% at 50% 50%); -webkit-clip-path: ellipse(50% 49% at 50% 50%); }
  100% { clip-path: ellipse(50% 50% at 50% 50%); -webkit-clip-path: ellipse(50% 50% at 50% 50%); }
}

.eye__sclera {
  position: absolute;
  inset: 0;
  border-radius: 50% / 42%;
  background:
    radial-gradient(ellipse 78% 68% at 46% 44%,
      var(--sclera-lit) 0%,
      var(--sclera-mid) 48%,
      #10100e 82%,
      #0a0908 100%
    );
}

.eye__sclera-depth {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.55;
  background:
    radial-gradient(ellipse 55% 45% at 52% 48%, rgba(255, 248, 240, 0.04) 0%, transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.22) 100%);
  mix-blend-mode: soft-light;
}

.eye__sclera-depth::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0.35;
  background:
    radial-gradient(ellipse 8% 3% at 22% 56%, rgba(90, 45, 40, 0.12) 0%, transparent 100%),
    radial-gradient(ellipse 6% 2% at 78% 50%, rgba(70, 40, 35, 0.1) 0%, transparent 100%),
    radial-gradient(ellipse 5% 2% at 38% 68%, rgba(60, 35, 30, 0.08) 0%, transparent 100%);
}

/* Central seal — fixed anchor, revealed through blink */
.stage__sigil {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 54%;
  height: 86%;
  transform: translate(-50%, -50%);
  z-index: 5;
  border-radius: 50%;
  pointer-events: none;
  background: #010101;
}

.stage__sigil-glow {
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(220, 210, 195, 0.35) 0%,
    rgba(140, 125, 110, 0.12) 40%,
    transparent 68%
  );
  opacity: 0;
  filter: blur(12px);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: sigilGlowIn var(--t-iris-fill-dur) var(--ease-open) var(--t-iris-fill) forwards;
}

@keyframes sigilGlowIn {
  0%   { opacity: 0; transform: scale(0.5); }
  40%  { opacity: 0.75; transform: scale(1.05); }
  100% { opacity: 0.45; transform: scale(1); }
}

.stage__sigil-reveal {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: #010101;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, rgba(0, 0, 0, 0.6) 52%, rgba(0, 0, 0, 0) 74%);
  mask-image: radial-gradient(circle at 50% 50%, #000 30%, rgba(0, 0, 0, 0.6) 52%, rgba(0, 0, 0, 0) 74%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0% 0%;
  mask-size: 0% 0%;
  animation: sigilReveal var(--t-iris-fill-dur) var(--ease-flow) var(--t-iris-fill) forwards;
  will-change: mask-size, -webkit-mask-size;
}

@keyframes sigilReveal {
  0%   { -webkit-mask-size: 0% 0%; mask-size: 0% 0%; }
  100% { -webkit-mask-size: 340% 340%; mask-size: 340% 340%; }
}

.stage__sigil-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #010101;
  opacity: 0;
  filter: blur(14px) brightness(1.4);
  transform: scale(0.94);
  animation: sigilImgIn var(--t-iris-fill-dur) var(--ease-flow) var(--t-iris-fill) forwards;
}

@keyframes sigilImgIn {
  0%   { opacity: 0; filter: blur(18px) brightness(1.5); transform: scale(0.9); }
  40%  { opacity: 0.6; filter: blur(7px) brightness(1.18); transform: scale(0.97); }
  70%  { opacity: 0.9; filter: blur(2px) brightness(1.05); transform: scale(0.995); }
  100% { opacity: 1; filter: blur(0) brightness(1) contrast(1.04); transform: scale(1); }
}

/* Iris overlays — ring, rays, cornea around the seal */
.eye__iris {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 54%;
  height: 86%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 4;
  pointer-events: none;
  box-shadow:
    inset 0 0 22px rgba(0, 0, 0, 0.5),
    inset 0 -4px 12px rgba(0, 0, 0, 0.25),
    0 2px 14px rgba(0, 0, 0, 0.2);
  animation: irisFocus var(--t-open) var(--ease-requiem) var(--t-start) forwards;
}

.eye__iris-base {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 38%,
    #2e2822 0%,
    #1c1814 32%,
    #100e0c 62%,
    #050403 88%,
    #010101 100%
  );
  animation: irisBaseFade var(--t-iris-fill-dur) var(--ease-open) var(--t-iris-fill) forwards;
}

@keyframes irisFocus {
  0%, 25%  { filter: brightness(0.72) contrast(1.08); }
  60%      { filter: brightness(0.88) contrast(1.04); }
  100%     { filter: brightness(0.96) contrast(1.02); }
}

@keyframes irisBaseFade {
  0%   { opacity: 1; }
  55%  { opacity: 0.45; }
  100% { opacity: 0; }
}

/* Iris overlays only — seal lives in .stage__sigil */
.eye__cornea {
  position: absolute;
  inset: -4%;
  z-index: 4;
  border-radius: 50%;
  pointer-events: none;
  transform-origin: center;
  background:
    radial-gradient(ellipse 42% 32% at 58% 36%, rgba(255, 250, 245, 0.14) 0%, transparent 72%),
    radial-gradient(ellipse 95% 88% at 50% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 58%);
  opacity: 0;
  mix-blend-mode: screen;
  animation:
    corneaIn 2s var(--ease-blink) calc(var(--t-start) + 1s) forwards,
    corneaFill var(--t-iris-fill-dur) var(--ease-open) var(--t-iris-fill) forwards;
}

@keyframes corneaIn {
  0%   { opacity: 0; }
  40%  { opacity: 0.35; }
  100% { opacity: 0.5; }
}

@keyframes corneaFill {
  0%   { transform: scale(1); opacity: 0.5; filter: brightness(1); }
  50%  { transform: scale(1.06); opacity: 0.78; filter: brightness(1.08); }
  100% { transform: scale(1.1); opacity: 1; filter: brightness(1.12); }
}

/* White organic roots / sun-rays from iris center */
.eye__iris-rays {
  position: absolute;
  inset: -8%;
  z-index: 2;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255, 255, 255, 0.42) 0%,
      rgba(255, 255, 255, 0.16) 20%,
      rgba(255, 255, 255, 0.06) 46%,
      transparent 74%
    );
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 16%, transparent 78%);
  mask-image: radial-gradient(circle at 50% 50%, #000 16%, transparent 78%);
  animation:
    irisRaysIn 2s var(--ease-blink) calc(var(--t-start) + 1.5s) forwards,
    irisRaysFill var(--t-iris-fill-dur) var(--ease-open) var(--t-iris-fill) forwards,
    irisRaysPulse 14s var(--ease-sub) 5s infinite;
}

.eye__iris-rays::before {
  content: '';
  position: absolute;
  inset: -4%;
  border-radius: 50%;
  opacity: 0.9;
  background-image: url('../assets/iris-rays.svg');
  background-size: cover;
  background-position: center;
  filter: blur(0.35px);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 18%, transparent 76%);
  mask-image: radial-gradient(circle at 50% 50%, #000 18%, transparent 76%);
}

.eye__iris-rays::after {
  content: '';
  position: absolute;
  inset: -2%;
  border-radius: 50%;
  opacity: 0.55;
  background-image: url('../assets/iris-rays.svg');
  background-size: 108% 108%;
  background-position: center;
  transform: rotate(14deg);
  filter: blur(1.2px);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 22%, transparent 74%);
  mask-image: radial-gradient(circle at 50% 50%, #000 22%, transparent 74%);
}

@keyframes irisRaysIn {
  0%   { opacity: 0; transform: scale(0.96); }
  100% { opacity: 0.72; transform: scale(1); }
}

@keyframes irisRaysFill {
  0%   { opacity: 0.72; transform: scale(1); }
  45%  { opacity: 0.92; transform: scale(1.03); }
  100% { opacity: 1; transform: scale(1.05); }
}

@keyframes irisRaysPulse {
  0%, 100% { opacity: 0.82; }
  50%      { opacity: 1; }
}

.eye__iris-depth {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    rgba(80, 70, 60, 0.04) 2deg,
    transparent 4deg
  );
  opacity: 0.6;
}

.eye__iris-ring {
  position: absolute;
  inset: -3%;
  z-index: 3;
  border-radius: 50%;
  border: 1px solid rgba(70, 58, 48, 0.45);
  box-shadow:
    inset 0 0 14px rgba(0, 0, 0, 0.4),
    inset 0 0 4px rgba(40, 32, 26, 0.5),
    0 0 8px rgba(50, 42, 36, 0.12);
}

.eye__shine {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  animation: shineIn 2s var(--ease-open) calc(var(--t-start) + 2s) forwards;
}

.eye__shine--main {
  top: 32%;
  left: 59%;
  width: 10%;
  height: 6.5%;
  background: radial-gradient(circle, rgba(240, 235, 228, 0.16) 0%, rgba(220, 215, 205, 0.05) 45%, transparent 72%);
}

.eye__shine--soft {
  top: 40%;
  left: 39%;
  width: 4%;
  height: 3%;
  background: radial-gradient(circle, rgba(210, 205, 198, 0.08) 0%, transparent 70%);
  animation-delay: calc(var(--t-start) + 2.6s);
}

@keyframes shineIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* Black hold — fade into open eye */
.eye__shutter {
  position: absolute;
  inset: 0;
  z-index: 8;
  border-radius: inherit;
  background: var(--void);
  pointer-events: none;
  animation: shutterLift var(--t-open) var(--ease-blink) var(--t-start) forwards;
}

@keyframes shutterLift {
  0%, 5%   { opacity: 1; }
  18%      { opacity: 0.6; }
  32%      { opacity: 0; visibility: hidden; }
  100%     { opacity: 0; visibility: hidden; }
}

/* ─── Tagline ─── */

.stage__tagline {
  position: relative;
  z-index: 4;
  margin: 0;
  padding: 0;
  text-align: center;
  opacity: 0;
  animation: taglineIn 2s var(--ease-open) var(--t-tagline) forwards;
}

.stage__tagline span {
  display: inline-block;
  font-family: var(--font-elegant);
  font-size: clamp(0.95rem, 2.8vw, 1.2rem);
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--silver);
  opacity: 0.75;
  text-shadow: 0 0 36px rgba(70, 60, 50, 0.12);
}

@keyframes taglineIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Enter CTA ─── */

.stage__enter {
  position: relative;
  z-index: 4;
  margin-top: 0.85rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  opacity: 0;
  pointer-events: none;
  animation: enterIn 1.4s var(--ease-open) var(--t-enter) forwards;
}

.stage__enter.is-active {
  pointer-events: auto;
}

@keyframes enterIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.stage__enter-btn {
  position: relative;
  font-family: var(--font-elegant);
  font-size: 0.85rem;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--silver);
  background: transparent;
  border: 1px solid rgba(90, 78, 68, 0.38);
  padding: 0.75rem 2.2rem;
  cursor: pointer;
  transition:
    color 0.4s var(--ease-open),
    border-color 0.4s var(--ease-open),
    background 0.4s var(--ease-open),
    box-shadow 0.4s var(--ease-open);
}

.stage__enter-btn:hover,
.stage__enter-btn:focus-visible {
  color: #c8beb2;
  border-color: rgba(110, 95, 82, 0.55);
  background: rgba(30, 24, 20, 0.45);
  box-shadow: 0 0 28px rgba(50, 40, 32, 0.18);
  outline: none;
}

.stage__enter-hint {
  font-family: var(--font-elegant);
  font-size: 0.7rem;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.18em;
  color: var(--silver-dim);
  text-transform: lowercase;
}

/* ─── Social icons — below the sigil ─── */

.stage__social {
  position: relative;
  z-index: 4;
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  opacity: 0;
}

.stage--alive .stage__social {
  animation: socialIn 1.6s var(--ease-open) 0.4s forwards;
}

@keyframes socialIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.stage__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  color: var(--silver-dim);
  background: rgba(6, 5, 4, 0.72);
  border: 1px solid rgba(90, 78, 68, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    inset 0 0 12px rgba(0, 0, 0, 0.55);
  transition:
    color 0.35s var(--ease-open),
    border-color 0.35s var(--ease-open),
    background 0.35s var(--ease-open),
    box-shadow 0.35s var(--ease-open),
    transform 0.35s var(--ease-open);
}

.stage__social-link svg {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
}

.stage__social-link:hover,
.stage__social-link:focus-visible {
  color: #c8beb2;
  border-color: rgba(120, 102, 84, 0.6);
  background: rgba(20, 16, 13, 0.85);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 22px rgba(60, 48, 38, 0.28);
  transform: translateY(-2px);
  outline: none;
}

/* ─── Main — inner realm after the dive ─── */

.main {
  position: relative;
  z-index: 1;
  min-height: 100%;
  background: var(--void);
  opacity: 0;
  transition: opacity 1.8s var(--ease-open);
}

body.is-entered .main {
  z-index: 11;
}

.main__waveform {
  z-index: 2;
}

.main.is-visible {
  opacity: 1;
}

.main__grain {
  position: fixed;
  inset: 0;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.main__sub {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(to bottom, transparent 75%, rgba(6, 5, 4, 0.4) 100%);
  animation: subFloor 9s var(--ease-sub) infinite;
}

.main__depth {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 75% 55% at 50% 18%, rgba(32, 26, 20, 0.11) 0%, transparent 58%),
    radial-gradient(ellipse 48% 38% at 82% 82%, rgba(18, 14, 11, 0.08) 0%, transparent 52%);
}

.main__header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--line);
  background: rgba(2, 1, 1, 0.82);
  backdrop-filter: blur(8px);
}

.mail-menu {
  position: absolute;
  z-index: 200;
  display: flex;
  flex-direction: column;
  min-width: 12rem;
  padding: 0.4rem;
  background: rgba(8, 6, 5, 0.96);
  border: 1px solid rgba(90, 78, 68, 0.4);
  border-radius: 0.6rem;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
}

.mail-menu[hidden] {
  display: none;
}

.mail-menu__item {
  font-family: var(--font-elegant);
  font-size: 0.78rem;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  color: rgba(150, 138, 126, 0.82);
  background: none;
  border: none;
  border-radius: 0.4rem;
  padding: 0.65rem 0.8rem;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.25s var(--ease-open), background 0.25s var(--ease-open);
}

.mail-menu__item:hover,
.mail-menu__item:focus-visible {
  color: #d8cec2;
  background: rgba(30, 24, 20, 0.85);
  outline: none;
}

.main__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--silver);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.3s var(--ease-open), transform 0.3s var(--ease-open);
}

.main__back svg {
  width: 1.4rem;
  height: 1.4rem;
  display: block;
}

.main__back:hover {
  opacity: 1;
  transform: translateX(-3px);
}

.main__nav {
  display: flex;
  gap: 1.5rem;
}

.main__nav a {
  font-family: var(--font-elegant);
  font-size: 0.75rem;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver-dim);
  text-decoration: none;
  transition: color 0.3s var(--ease-open);
}

.main__nav a:hover {
  color: var(--silver);
}

.main__nav a.main__nav-link--share {
  color: rgba(170, 148, 120, 0.85);
}

.main__nav a.main__nav-link--share:hover {
  color: rgba(196, 172, 140, 1);
}

.main__hero {
  position: relative;
  z-index: 1;
  max-width: 42rem;
  margin: 0 auto;
  padding: 5rem 1.5rem 4rem;
  text-align: center;
  scroll-margin-top: 5rem;
}

.main__hero-inner {
  margin: 0 auto;
}

.main__eyebrow {
  font-family: var(--font-elegant);
  font-size: 0.75rem;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(182, 172, 159, 0.85);
  margin-bottom: 1.5rem;
}

.main__title {
  font-family: var(--font-elegant);
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.08em;
  color: rgba(216, 208, 196, 0.96);
  margin-bottom: 1.25rem;
  line-height: 1.2;
}

.main__lead {
  font-family: var(--font-elegant);
  font-size: clamp(1rem, 2.5vw, 1.15rem);
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.06em;
  color: rgba(202, 193, 181, 0.9);
  margin-bottom: 2.5rem;
  line-height: 1.6;
}

.main__manifesto {
  text-align: center;
  border-top: 1px solid var(--line);
  padding-top: 2rem;
  max-width: 36rem;
  margin: 0 auto;
}

.main__manifesto p {
  font-family: var(--font-elegant);
  font-size: clamp(1rem, 2.2vw, 1.1rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.85;
  color: rgba(202, 193, 181, 0.9);
  margin-bottom: 1.25rem;
  text-align: center;
}

.main__manifesto p:last-child {
  margin-bottom: 0;
  color: rgba(188, 179, 167, 0.82);
}

.main__bio {
  position: relative;
  z-index: 1;
  max-width: 56rem;
  margin: 0 auto;
  padding: 5rem 1.5rem 2rem;
  scroll-margin-top: 5rem;
}

.main__bio-inner {
  margin: 0 auto;
}

.main__bio-body {
  max-width: 48rem;
  margin: 0 auto;
  border-top: 1px solid var(--line);
  padding-top: 2rem;
  text-align: center;
}

.main__bio-body p {
  font-family: var(--font-elegant);
  font-size: clamp(1rem, 2.2vw, 1.1rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.85;
  color: rgba(202, 193, 181, 0.9);
  margin-bottom: 1.35rem;
}

.main__bio-body p:last-child {
  margin-bottom: 0;
  color: rgba(210, 201, 189, 0.92);
}

.main__archive {
  position: relative;
  z-index: 1;
  max-width: 56rem;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
  scroll-margin-top: 5rem;
}

.main__section-head {
  text-align: center;
  margin-bottom: 3rem;
}

.main__section-title {
  font-family: var(--font-elegant);
  font-size: clamp(1.4rem, 4vw, 1.75rem);
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.12em;
  color: rgba(216, 208, 196, 0.96);
  margin-bottom: 0.5rem;
}

.main__section-sub {
  font-family: var(--font-elegant);
  font-size: 0.75rem;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(182, 172, 159, 0.82);
}

.archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin: 0 auto;
}

.archive-card {
  background: rgba(5, 4, 3, 0.92);
  padding: 1.75rem 1.5rem;
  transition: background 0.6s var(--ease-soft), transform 0.6s var(--ease-flow);
}

#podcast {
  scroll-margin-top: 5rem;
}

.archive-card:hover {
  background: rgba(14, 11, 9, 0.96);
}

.archive-card__title {
  font-family: var(--font-elegant);
  font-size: 1.1rem;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.1em;
  color: rgba(216, 208, 196, 0.96);
  margin-bottom: 0.75rem;
}

.archive-card__desc {
  font-family: var(--font-elegant);
  font-size: 0.95rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.65;
  color: rgba(198, 189, 177, 0.88);
  margin-bottom: 1.25rem;
}

.archive-card__link,
.archive-card__links a {
  font-family: var(--font-elegant);
  font-size: 0.72rem;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(188, 176, 162, 0.85);
  text-decoration: none;
  transition: color 0.3s var(--ease-open);
}

.archive-card__link:hover,
.archive-card__links a:hover {
  color: var(--silver);
}

.archive-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
}

.archive-card__links + .archive-card__desc {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.main__contact {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--line);
  padding: 4rem 1.5rem 5rem;
  scroll-margin-top: 5rem;
}

.main__contact-inner {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
}

.main__contact-lead {
  font-family: var(--font-elegant);
  font-size: 1rem;
  font-weight: 300;
  font-style: italic;
  color: rgba(110, 100, 90, 0.55);
  margin: 1rem 0 2rem;
  line-height: 1.6;
}

.main__social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}

.main__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  color: rgba(115, 102, 90, 0.72);
  background: rgba(6, 5, 4, 0.72);
  border: 1px solid rgba(90, 78, 68, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    inset 0 0 12px rgba(0, 0, 0, 0.55);
  transition:
    color 0.35s var(--ease-open),
    border-color 0.35s var(--ease-open),
    background 0.35s var(--ease-open),
    box-shadow 0.35s var(--ease-open),
    transform 0.35s var(--ease-open);
}

.main__social-link svg {
  width: 1.2rem;
  height: 1.2rem;
  display: block;
}

.main__social-link:hover,
.main__social-link:focus-visible {
  color: #c8beb2;
  border-color: rgba(120, 102, 84, 0.6);
  background: rgba(20, 16, 13, 0.85);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 22px rgba(60, 48, 38, 0.28);
  transform: translateY(-2px);
  outline: none;
}

.main__share-link {
  display: inline-block;
  margin-bottom: 2.5rem;
  font-family: var(--font-elegant);
  font-size: 0.72rem;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(115, 102, 90, 0.6);
  text-decoration: none;
  transition: color 0.3s var(--ease-open);
}

.main__share-link:hover {
  color: var(--silver);
}

.main__footer-note {
  font-family: var(--font-elegant);
  font-size: 0.7rem;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.2em;
  color: rgba(90, 82, 74, 0.4);
}

/* Staggered reveal, triggered on scroll */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(5px);
  will-change: opacity, transform, filter;
}

.reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition:
    opacity 1.1s var(--ease-flow),
    transform 1.1s var(--ease-flow),
    filter 1.1s var(--ease-flow);
  transition-delay: var(--reveal-delay, 0s);
}

.reveal.is-revealed {
  will-change: auto;
}

/* ─── Reduced motion ─── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .eye { filter: none; }
  .eye__ball {
    clip-path: ellipse(50% 50% at 50% 50%);
    -webkit-clip-path: ellipse(50% 50% at 50% 50%);
  }
  .stage--requiem .stage__composition { transform: scale(1.05); }
  .eye__shutter { opacity: 0; visibility: hidden; }
  .stage--alive .stage__living { opacity: 1; visibility: visible; }
  .stage--alive .stage__inscriptions { opacity: 1; visibility: visible; }
  .stage--alive .eye--requiem {
    width: var(--sigil-alive);
    height: var(--sigil-alive);
    max-width: var(--sigil-alive);
    max-height: var(--sigil-alive);
  }
  .stage--alive .eye__socket {
    border-radius: 50%;
    box-shadow: none;
    background: #010101;
  }
  .stage--alive .eye__ball {
    clip-path: none;
    -webkit-clip-path: none;
    animation: none;
    background: #010101;
  }
  .stage--alive .stage__sigil { width: 100%; height: 100%; background: #010101; }
  .stage--alive .stage__sigil-reveal {
    clip-path: circle(100% at 50% 50%);
    -webkit-clip-path: circle(100% at 50% 50%);
    background: #010101;
  }
  .stage__sigil-reveal {
    clip-path: circle(98% at 50% 50%);
    -webkit-clip-path: circle(98% at 50% 50%);
  }
  .stage__sigil-img { opacity: 1; filter: none; transform: none; background: #010101; }
  .stage__sigil-glow { opacity: 0; visibility: hidden; }
  .eye__orbit { opacity: 0; }
  .eye__cornea { opacity: 0; }
  .eye__iris { opacity: 0; }
  .eye__sclera { opacity: 0; }
  .eye__halo { opacity: 0; }
  .eye__shutter { opacity: 0; visibility: hidden; }
  .stage__tagline { opacity: 1; }
  .stage__enter { opacity: 1; }
  .reveal { opacity: 1; transform: none; filter: none; }
}