:root {
  /* Space Mono used sparingly for measurement ticks and optical serial marks. */
  --mirror-black: #07080D;
  --mercury-silver: #C8CDD8;
  --iris-violet: #6E4BFF;
  --optic-green: #39FFB6;
  --pupil-ink: #11172A;
  --lacquer-gold: #F3C969;
  --wet-rose: #FF6FAE;
  --bodoni: 'Bodoni Moda', serif;
  --fraunces: 'Fraunces', serif;
  --manrope: 'Manrope', sans-serif;
  --mono: 'Space Mono', monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--mirror-black); }

body {
  margin: 0;
  color: var(--mercury-silver);
  background:
    radial-gradient(circle at 14% 18%, rgba(110, 75, 255, .28), transparent 34vw),
    radial-gradient(circle at 84% 38%, rgba(57, 255, 182, .14), transparent 26vw),
    linear-gradient(115deg, var(--mirror-black), var(--pupil-ink) 48%, var(--mirror-black));
  font-family: var(--manrope);
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .22;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(200, 205, 216, .12) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(243, 201, 105, .10) 0 1px, transparent 1px);
  background-size: 37px 41px, 53px 47px;
}

.calibration-nav {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 18px;
  z-index: 30;
}

.tick {
  width: 54px;
  height: 2px;
  border: 0;
  background: rgba(200, 205, 216, .38);
  color: var(--mercury-silver);
  font-family: var(--mono);
  font-size: 10px;
  text-align: left;
  padding: 0;
  cursor: pointer;
  transition: background .4s ease, box-shadow .4s ease, width .4s ease;
}

.tick span { position: relative; top: -14px; left: -3px; opacity: .62; }
.tick.is-active { width: 78px; background: var(--optic-green); box-shadow: 0 0 18px var(--optic-green); }

.scene {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.scene::before {
  content: "";
  position: absolute;
  inset: 4vw;
  border: 1px solid rgba(200, 205, 216, .18);
  border-radius: 48% 52% 44% 56% / 62% 36% 64% 38%;
  pointer-events: none;
}

.mirror-field { min-height: 100vh; position: relative; display: grid; place-items: center; }
.reverse-splinters { position: absolute; inset: 0; overflow: hidden; font-family: var(--bodoni); font-size: clamp(3rem, 13vw, 13rem); color: rgba(200,205,216,.16); }
.reverse-splinters span { position: absolute; transform: scaleX(-1) rotate(-6deg); filter: blur(1px); }
.reverse-splinters span:nth-child(1) { top: 10%; left: -6%; color: rgba(110,75,255,.38); }
.reverse-splinters span:nth-child(2) { top: 35%; right: -18%; clip-path: inset(40% 0 42% 0); }
.reverse-splinters span:nth-child(3) { bottom: 8%; left: 8%; color: rgba(255,111,174,.22); }
.reverse-splinters span:nth-child(4) { top: 58%; left: 20%; color: rgba(57,255,182,.24); }
.reverse-splinters span:nth-child(5) { top: 44%; left: -12%; clip-path: inset(46% 0 45% 0); }

.eyelid { position: absolute; left: 0; right: 0; height: 50%; background: linear-gradient(var(--mirror-black), rgba(17,23,42,.94)); z-index: 2; transition: transform 1s cubic-bezier(.2,.8,.1,1); }
.eyelid.upper { top: 0; transform: translateY(calc(var(--open, 0) * -26vh)); border-bottom: 1px solid rgba(243,201,105,.35); }
.eyelid.lower { bottom: 0; transform: translateY(calc(var(--open, 0) * 26vh)); border-top: 1px solid rgba(57,255,182,.3); }

.horizontal-aperture {
  position: relative;
  z-index: 4;
  width: min(980px, 82vw);
  height: clamp(62px, 10vw, 132px);
  display: grid;
  place-items: center;
  border-top: 1px solid var(--lacquer-gold);
  border-bottom: 1px solid var(--optic-green);
  clip-path: polygon(3% 42%, 97% 30%, 100% 70%, 0 62%);
  background: radial-gradient(ellipse at center, rgba(200,205,216,.16), rgba(7,8,13,.82) 72%);
  box-shadow: 0 0 48px rgba(57,255,182,.12), inset 0 0 80px rgba(110,75,255,.24);
}

.horizontal-aperture h1 { margin: 0; font-family: var(--bodoni); font-size: clamp(3.5rem, 12vw, 12rem); font-weight: 400; letter-spacing: .08em; color: var(--mercury-silver); text-shadow: -4px 0 var(--iris-violet), 3px 0 var(--wet-rose), 0 0 28px rgba(200,205,216,.45); }
.horizontal-aperture i { color: var(--lacquer-gold); font-style: normal; }
.scene-label, .serial { font-family: var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--optic-green); font-size: 11px; }
.scene-label { position: absolute; bottom: 7vh; left: 8vw; z-index: 5; }

.scene-grinding { background: radial-gradient(circle at 70% 22%, rgba(243,201,105,.13), transparent 20vw), linear-gradient(150deg, var(--pupil-ink), var(--mirror-black)); }
.diagonal-bench { position: absolute; inset: 6vh 7vw; transform: rotate(-10deg); }
.rail { position: absolute; left: -10%; right: -10%; height: 10px; border: 1px solid rgba(243,201,105,.38); background: linear-gradient(90deg, transparent, rgba(200,205,216,.16), transparent); }
.rail-a { top: 33%; } .rail-b { top: 53%; }
.lens-disc { position: absolute; border-radius: 50%; border: 1px solid rgba(200,205,216,.42); background: radial-gradient(circle at 35% 30%, rgba(200,205,216,.34), rgba(110,75,255,.18) 36%, rgba(17,23,42,.58) 65%, transparent 66%), conic-gradient(from 20deg, rgba(57,255,182,.15), transparent, rgba(255,111,174,.2), transparent, rgba(243,201,105,.16)); box-shadow: inset 0 0 44px rgba(200,205,216,.12), 0 0 52px rgba(110,75,255,.18); animation: orbit 18s linear infinite; }
.lens-disc span { position: absolute; inset: auto 20% 18% auto; font-family: var(--mono); color: var(--lacquer-gold); font-size: 12px; }
.disc-one { width: 34vw; height: 34vw; min-width: 280px; min-height: 280px; left: 8%; top: 15%; }
.disc-two { width: 22vw; height: 22vw; min-width: 190px; min-height: 190px; right: 13%; top: 44%; animation-direction: reverse; }
.crescent { position: absolute; width: 19vw; height: 19vw; border-radius: 50%; box-shadow: -32px 10px 0 rgba(255,111,174,.28); filter: blur(.2px); }
.crescent-one { right: 31%; top: 15%; }
.engraved-note { position: absolute; max-width: 330px; padding: 22px 24px; border: 1px solid rgba(200,205,216,.25); border-radius: 999px; background: rgba(7,8,13,.58); transform: rotate(10deg); backdrop-filter: blur(10px); }
.engraved-note b { font-family: var(--fraunces); color: var(--lacquer-gold); font-size: 1.35rem; }
.engraved-note p { margin: 8px 0 0; line-height: 1.65; }
.note-a { left: 46%; top: 18%; } .note-b { left: 18%; bottom: 13%; }
.scale-ruler { position: absolute; left: 6vw; bottom: 9vh; width: 48vw; display: flex; justify-content: space-between; }
.scale-ruler span { width: 1px; height: 46px; background: var(--mercury-silver); opacity: .48; }

.scene-bloom { background: radial-gradient(circle at 19% 72%, rgba(57,255,182,.24), transparent 28vw), radial-gradient(circle at 56% 42%, rgba(255,111,174,.16), transparent 32vw), var(--mirror-black); }
.bloom-origin { position: absolute; left: -8vw; bottom: -12vw; width: min(74vw, 760px); aspect-ratio: 1; }
.petal-ring, .pupil-core { position: absolute; inset: 0; border-radius: 50%; transform-origin: center; }
.petal-ring { background: repeating-conic-gradient(from 0deg, rgba(110,75,255,.62) 0 11deg, rgba(255,111,174,.42) 11deg 22deg, rgba(57,255,182,.34) 22deg 33deg, transparent 33deg 45deg); mask: radial-gradient(circle, transparent 0 28%, #000 29% 62%, transparent 63%); animation: bloomSpin 32s linear infinite; }
.ring-two { inset: 12%; background: repeating-conic-gradient(from 12deg, rgba(243,201,105,.40) 0 13deg, rgba(110,75,255,.48) 13deg 28deg, transparent 28deg 44deg); animation-direction: reverse; }
.ring-three { inset: 25%; background: conic-gradient(var(--optic-green), var(--iris-violet), var(--wet-rose), var(--lacquer-gold), var(--optic-green)); opacity: .58; }
.pupil-core { inset: 39%; background: radial-gradient(circle at 63% 32%, var(--lacquer-gold) 0 6%, transparent 7%), radial-gradient(circle, var(--mirror-black), var(--pupil-ink)); box-shadow: 0 0 0 1px var(--mercury-silver), 0 0 70px rgba(57,255,182,.2); }
.bloom-text { position: absolute; right: 9vw; top: 18vh; width: min(560px, 54vw); }
.bloom-text h2, .archive-calm h2, .final-inscription h2 { font-family: var(--bodoni); font-weight: 400; line-height: .98; color: var(--mercury-silver); font-size: clamp(3rem, 7vw, 7.2rem); margin: 18px 0; }
.bloom-text p, .archive-calm p, .final-inscription p { font-size: clamp(1rem, 1.45vw, 1.35rem); line-height: 1.75; color: rgba(200,205,216,.78); }
.prism-band { position: absolute; right: -16vw; bottom: 4vh; width: 62vw; height: 16vh; transform: rotate(-18deg); background: linear-gradient(90deg, transparent, rgba(110,75,255,.2), rgba(255,111,174,.34), rgba(57,255,182,.24), transparent); filter: blur(6px); }

.scene-double { background: linear-gradient(90deg, var(--mirror-black) 0 48%, var(--pupil-ink) 48% 52%, var(--mirror-black) 52%); }
.archive-columns { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(260px, .82fr); gap: 8vw; min-height: 100vh; align-items: center; padding: 8vw 12vw 8vw 8vw; }
.archive-calm { max-width: 620px; transform: translateY(-4vh); }
.archive-warped { font-family: var(--mono); font-size: clamp(1.1rem, 2vw, 2.1rem); color: rgba(255,111,174,.68); transform: scaleX(-1) rotate(4deg); filter: blur(.25px); }
.archive-warped p { border-bottom: 1px solid rgba(57,255,182,.22); padding: 18px 0; }
.split-reflection { position: absolute; top: 11vh; bottom: 11vh; width: 18vw; border-radius: 50%; border: 1px solid rgba(200,205,216,.2); background: radial-gradient(ellipse at center, rgba(200,205,216,.18), transparent 68%); mix-blend-mode: screen; }
.reflection-left { left: -8vw; } .reflection-right { right: -8vw; }

.scene-final { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at 50% 48%, rgba(57,255,182,.16), transparent 32vw), radial-gradient(circle at 50% 50%, rgba(110,75,255,.30), transparent 48vw), var(--mirror-black); }
.final-emblem { width: min(54vw, 540px); aspect-ratio: 1; display: grid; place-items: center; filter: drop-shadow(0 0 42px rgba(110,75,255,.45)); }
.eye-flower { width: 100%; overflow: visible; animation: emblemFloat 7s ease-in-out infinite; }
.svg-petals { transform-origin: 250px 250px; animation: bloomSpin 40s linear infinite; mix-blend-mode: screen; }
.final-inscription { position: absolute; bottom: 9vh; text-align: center; }
.final-inscription h2 { margin: 8px 0 0; letter-spacing: .08em; text-shadow: -3px 0 var(--iris-violet), 3px 0 var(--wet-rose); }
.final-inscription p { margin: 0; color: var(--lacquer-gold); font-family: var(--fraunces); font-size: 1.4rem; }

.scene.in-view .engraved-note, .scene.in-view .bloom-text, .scene.in-view .archive-calm, .scene.in-view .final-inscription { animation: focusIn 1s cubic-bezier(.2,.8,.1,1) both; }

@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes bloomSpin { to { transform: rotate(360deg); } }
@keyframes emblemFloat { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-12px) scale(1.018); } }
@keyframes focusIn { from { opacity: .2; filter: blur(14px); transform: translateY(24px); } to { opacity: 1; filter: blur(0); } }

@media (max-width: 780px) {
  .calibration-nav { right: 10px; }
  .archive-columns { grid-template-columns: 1fr; padding: 18vh 10vw; gap: 2vh; }
  .archive-warped { font-size: 1rem; }
  .bloom-text { width: 76vw; right: 8vw; top: 10vh; }
  .note-a, .note-b { left: 8vw; right: 8vw; top: auto; bottom: 12vh; }
  .note-b { bottom: 32vh; }
}