:root {
  /* Design typography extraction tokens: Space Grotesk** Grotes* for clear explanatory fragments */
  --retinal-violet: #5B2CFF;
  --phosphor-cyan: #00E5FF;
  --sunset-cornea: #FF6B9A;
  --deep-pupil: #06051A;
  --milk-lens: #F4F1FF;
  --laser-lime: #B8FF3D;
  --cassette-plum: #2A0E3F;
  --mx: 50vw;
  --my: 50vh;
  --scroll: 0;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--deep-pupil);
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--milk-lens);
  font-family: "Space Grotesk", Inter, sans-serif;
  background:
    radial-gradient(circle at 12% calc(18% + var(--scroll) * 20%), rgba(91, 44, 255, .52), transparent 34vw),
    radial-gradient(circle at 86% 30%, rgba(255, 107, 154, .28), transparent 28vw),
    linear-gradient(135deg, var(--deep-pupil) 0%, var(--cassette-plum) 46%, #06051A 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 12;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(244, 241, 255, .035) 0 1px, transparent 1px 5px);
  mix-blend-mode: screen;
}

a { color: inherit; text-decoration: none; }

.ambient-field {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.scanline {
  position: absolute;
  inset: -20%;
  background: linear-gradient(transparent, rgba(0, 229, 255, .14), transparent);
  height: 18vh;
  animation: scanDrift 8s linear infinite;
  filter: blur(8px);
}

.vapor-beam {
  position: absolute;
  width: 76vw;
  height: 18vh;
  background: linear-gradient(90deg, transparent, rgba(0, 229, 255, .26), rgba(255, 107, 154, .24), transparent);
  transform: rotate(-24deg);
  filter: blur(18px);
  mix-blend-mode: screen;
}

.beam-one { left: -18vw; top: 18vh; animation: beamPulse 9s ease-in-out infinite; }
.beam-two { right: -22vw; bottom: 20vh; transform: rotate(28deg); animation: beamPulse 11s ease-in-out infinite reverse; }

.plus-glint {
  position: absolute;
  font: 500 clamp(1.1rem, 2vw, 2.4rem) "Space Grotesk", sans-serif;
  color: var(--laser-lime);
  text-shadow: 0 0 16px var(--laser-lime), 6px 0 0 rgba(0, 229, 255, .45), -5px 0 0 rgba(255, 107, 154, .45);
  animation: glintFloat 5s ease-in-out infinite;
}

.glint-a { top: 18%; left: 72%; }
.glint-b { top: 72%; left: 10%; animation-delay: -1.8s; }
.glint-c { top: 48%; left: 91%; animation-delay: -3.2s; }

.iris-aperture {
  position: fixed;
  left: calc(-34vw + var(--scroll) * 68vw);
  top: 50%;
  z-index: 1;
  width: clamp(34rem, 68vw, 78rem);
  aspect-ratio: 1;
  transform: translateY(-50%) rotate(calc(var(--scroll) * 72deg));
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, rgba(244, 241, 255, .08) 0 2px, transparent 2px 14px),
    conic-gradient(from 90deg, rgba(0, 229, 255, .28), rgba(91, 44, 255, .75), rgba(255, 107, 154, .5), rgba(184, 255, 61, .2), rgba(0, 229, 255, .28));
  box-shadow: inset 0 0 90px rgba(6, 5, 26, .95), 0 0 130px rgba(91, 44, 255, .35);
  opacity: .82;
  transition: left .35s ease-out;
}

.iris-ring {
  position: absolute;
  inset: 8%;
  border: 1px solid rgba(244, 241, 255, .22);
  border-radius: 50%;
  box-shadow: 0 0 35px rgba(0, 229, 255, .18), inset 0 0 28px rgba(255, 107, 154, .12);
}

.ring-two { inset: 20%; border-style: dashed; animation: ringRotate 18s linear infinite reverse; }
.ring-three { inset: 33%; border-color: rgba(184, 255, 61, .34); animation: ringRotate 12s linear infinite; }

.pupil-portal {
  position: absolute;
  inset: calc(38% - var(--scroll) * 7%);
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 36%, rgba(0, 229, 255, .35), transparent 15%),
    radial-gradient(circle, #06051A 0 48%, rgba(42, 14, 63, .9) 75%, #06051A 100%);
  box-shadow: inset 0 0 60px #06051A, 0 0 46px rgba(0, 229, 255, .28);
}

.pupil-portal span {
  position: absolute;
  font-family: "Monoton", cursive;
  font-size: clamp(1.2rem, 4vw, 4rem);
  color: rgba(244, 241, 255, .12);
  animation: portalWords 13s linear infinite;
}
.pupil-portal span:nth-child(2) { animation-delay: -4.3s; color: rgba(0, 229, 255, .14); }
.pupil-portal span:nth-child(3) { animation-delay: -8.6s; color: rgba(255, 107, 154, .14); }

.pupil-portal.wide {
  box-shadow: inset 0 0 90px #06051A, 0 0 70px rgba(255, 107, 154, .32), 0 0 110px rgba(0, 229, 255, .2);
}

.iris-highlight {
  position: absolute;
  left: calc(var(--mx) * .08 + 38%);
  top: calc(var(--my) * .08 + 34%);
  width: 15%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 241, 255, .88), rgba(0, 229, 255, .28) 35%, transparent 70%);
  filter: blur(2px);
  mix-blend-mode: screen;
}

.exam-nav {
  position: fixed;
  left: 2rem;
  right: 2rem;
  top: 1.3rem;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: .76rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(244, 241, 255, .76);
}

.exam-nav span { margin-right: auto; color: var(--phosphor-cyan); }
.exam-nav a {
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(244, 241, 255, .2);
  border-radius: 50%;
  background: rgba(6, 5, 26, .28);
  transition: .3s ease;
}
.exam-nav a.active { color: var(--deep-pupil); background: var(--laser-lime); box-shadow: 0 0 20px rgba(184, 255, 61, .55); }

.vision-room {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  isolation: isolate;
  overflow: hidden;
  padding: 7rem clamp(1.4rem, 5vw, 5rem);
}

.vision-room::after {
  content: attr(data-room);
  position: absolute;
  right: -2vw;
  bottom: 3vh;
  z-index: -1;
  font-family: "Monoton", cursive;
  font-size: clamp(4.8rem, 16vw, 16rem);
  color: rgba(244, 241, 255, .035);
  white-space: nowrap;
}

.room-orbit {
  position: absolute;
  width: min(40rem, 86vw);
  padding: clamp(1.3rem, 3vw, 2.4rem);
  border: 1px solid rgba(244, 241, 255, .16);
  border-radius: 46% 54% 42% 58% / 60% 38% 62% 40%;
  background: linear-gradient(135deg, rgba(244, 241, 255, .08), rgba(6, 5, 26, .26));
  backdrop-filter: blur(12px);
  box-shadow: 0 0 50px rgba(0, 229, 255, .12);
}

.orbit-left { left: clamp(1rem, 7vw, 7rem); top: 25vh; }
.orbit-right { right: clamp(1rem, 7vw, 7rem); top: 25vh; }
.orbit-center { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.narrow { width: min(34rem, 84vw); }

.kicker {
  margin: 0 0 1rem;
  color: var(--laser-lime);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: .78rem;
}

h1, h2 {
  margin: 0;
  font-family: "Monoton", cursive;
  font-weight: 400;
  line-height: .95;
}

.brand-title {
  position: relative;
  font-size: clamp(4rem, 12vw, 12rem);
  color: var(--milk-lens);
  text-shadow: 0 0 28px rgba(244, 241, 255, .36);
  transform: perspective(700px) rotateY(-10deg);
}

.brand-title::before,
.brand-title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  transition: transform .18s ease-out;
}
.brand-title::before { color: var(--phosphor-cyan); transform: translate(calc(var(--mx) * -.012), -3px); }
.brand-title::after { color: var(--sunset-cornea); transform: translate(calc(var(--mx) * .012), 3px); }

h2 {
  font-size: clamp(4rem, 11vw, 12rem);
  color: transparent;
  -webkit-text-stroke: 1px var(--milk-lens);
  text-shadow: 8px 0 0 rgba(0, 229, 255, .25), -8px 0 0 rgba(255, 107, 154, .23);
}

.copy {
  max-width: 28rem;
  color: rgba(244, 241, 255, .8);
  font-size: clamp(1rem, 1.5vw, 1.35rem);
  line-height: 1.6;
}

.whisper {
  max-width: 32rem;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.45rem, 2.7vw, 2.6rem);
  font-style: italic;
  line-height: 1.08;
  color: rgba(244, 241, 255, .82);
}

.lens {
  border-radius: 50%;
  border: 1px solid rgba(244, 241, 255, .28);
  background: radial-gradient(circle at 34% 28%, rgba(244, 241, 255, .22), rgba(0, 229, 255, .1) 34%, rgba(91, 44, 255, .08) 62%, transparent 72%);
  box-shadow: inset 0 0 36px rgba(244, 241, 255, .1), 0 0 70px rgba(0, 229, 255, .15);
}

.lens-large {
  position: absolute;
  right: 8vw;
  bottom: 8vh;
  width: clamp(17rem, 34vw, 37rem);
  aspect-ratio: 1.4 / 1;
  border-radius: 50%;
  transform: rotate(-11deg);
}

.crescent {
  position: absolute;
  left: 12%;
  right: 12%;
  height: 26%;
  border-radius: 50%;
  border: 2px solid rgba(255, 107, 154, .36);
}
.crescent-top { top: 16%; border-bottom: 0; }
.crescent-bottom { bottom: 16%; border-top: 0; border-color: rgba(0, 229, 255, .34); }

.curved-label {
  position: absolute;
  left: 4vw;
  bottom: 8vh;
  color: rgba(0, 229, 255, .82);
  letter-spacing: .24em;
  text-transform: uppercase;
  transform: rotate(-90deg);
  transform-origin: left center;
}

.phoropter-wheel {
  position: absolute;
  left: 6vw;
  top: 19vh;
  width: clamp(19rem, 42vw, 45rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(244, 241, 255, .12) 0 6deg, transparent 6deg 18deg), radial-gradient(circle, transparent 28%, rgba(91, 44, 255, .18) 29% 45%, transparent 46%);
  animation: ringRotate 24s steps(24) infinite;
}
.phoropter-wheel span {
  position: absolute;
  width: 18%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(244, 241, 255, .28);
  left: 41%; top: 41%;
  transform: rotate(calc(var(--i, 0) * 60deg)) translateY(-170%);
}
.phoropter-wheel span:nth-child(1) { --i: 0; }
.phoropter-wheel span:nth-child(2) { --i: 1; }
.phoropter-wheel span:nth-child(3) { --i: 2; }
.phoropter-wheel span:nth-child(4) { --i: 3; }
.phoropter-wheel span:nth-child(5) { --i: 4; }
.phoropter-wheel span:nth-child(6) { --i: 5; }

.eye-chart {
  position: absolute;
  left: 13vw;
  bottom: 10vh;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .25rem 1.1rem;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 5rem);
  letter-spacing: .14em;
  filter: blur(calc(7px - var(--focus, 0) * 7px));
  color: var(--milk-lens);
  text-shadow: 5px 0 0 rgba(0, 229, 255, .35), -5px 0 0 rgba(255, 107, 154, .3);
  transition: filter .45s ease;
}

.prescription-tag {
  position: absolute;
  left: 44vw;
  top: 18vh;
  padding: .8rem 1rem;
  border: 1px solid rgba(184, 255, 61, .45);
  border-radius: 999px;
  color: var(--laser-lime);
  background: rgba(6, 5, 26, .42);
  letter-spacing: .16em;
  font-size: .72rem;
}

.after-stack b {
  position: absolute;
  left: 10vw;
  top: 22vh;
  font-family: "Monoton", cursive;
  font-size: clamp(7rem, 19vw, 20rem);
  font-weight: 400;
  opacity: .23;
}
.after-stack b:nth-child(1) { color: var(--sunset-cornea); transform: translate(-1rem, -1rem); }
.after-stack b:nth-child(2) { color: var(--phosphor-cyan); transform: translate(1.4rem, .7rem); }
.after-stack b:nth-child(3) { color: var(--retinal-violet); transform: translate(0, 2.2rem); }

.equalizer-cornea {
  position: absolute;
  right: 8vw;
  bottom: 13vh;
  width: min(36rem, 80vw);
  height: 16rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  clip-path: ellipse(50% 35% at 50% 50%);
  background: radial-gradient(ellipse, rgba(244, 241, 255, .14), rgba(91, 44, 255, .08), transparent 70%);
}
.equalizer-cornea i {
  width: .7rem;
  height: 34%;
  border-radius: 999px;
  background: linear-gradient(var(--phosphor-cyan), var(--sunset-cornea));
  animation: eqBounce 1.4s ease-in-out infinite;
}
.equalizer-cornea i:nth-child(2n) { animation-delay: -.25s; }
.equalizer-cornea i:nth-child(3n) { animation-delay: -.65s; background: linear-gradient(var(--laser-lime), var(--phosphor-cyan)); }

.edge-text {
  position: absolute;
  top: 50%;
  font-family: "Monoton", cursive;
  font-size: clamp(3rem, 8vw, 9rem);
  color: rgba(244, 241, 255, .12);
  writing-mode: vertical-rl;
  text-shadow: 0 0 28px rgba(0, 229, 255, .25);
}
.edge-left { left: .6rem; transform: translateY(-50%) rotate(180deg); }
.edge-right { right: .6rem; transform: translateY(-50%); color: rgba(255, 107, 154, .13); }

.prism-field span {
  position: absolute;
  width: 0;
  height: 0;
  border-left: clamp(2rem, 5vw, 4rem) solid transparent;
  border-right: clamp(2rem, 5vw, 4rem) solid transparent;
  border-bottom: clamp(4rem, 9vw, 8rem) solid rgba(0, 229, 255, .22);
  filter: drop-shadow(0 0 24px rgba(255, 107, 154, .35));
  animation: prismDrift 7s ease-in-out infinite;
}
.prism-field span:nth-child(1) { left: 18%; top: 18%; }
.prism-field span:nth-child(2) { right: 19%; top: 22%; animation-delay: -2s; border-bottom-color: rgba(255, 107, 154, .24); }
.prism-field span:nth-child(3) { left: 26%; bottom: 16%; animation-delay: -4s; border-bottom-color: rgba(184, 255, 61, .2); }
.prism-field span:nth-child(4) { right: 28%; bottom: 18%; animation-delay: -1s; }

.final-eye {
  position: absolute;
  left: 9vw;
  top: 50%;
  width: min(56rem, 84vw);
  aspect-ratio: 1.7 / 1;
  transform: translateY(-50%);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse, rgba(244, 241, 255, .08), transparent 70%);
}
.final-eye .lens { position: absolute; aspect-ratio: 1.7 / 1; border-radius: 50%; }
.final-eye .outer { width: 100%; }
.final-eye .middle { width: 70%; border-color: rgba(0, 229, 255, .5); transform: rotate(-8deg); }
.final-eye .inner { width: 38%; aspect-ratio: 1; background: radial-gradient(circle, var(--deep-pupil) 38%, rgba(91, 44, 255, .6), rgba(0, 229, 255, .26)); }
.plus-core {
  position: relative;
  z-index: 2;
  font-size: clamp(4rem, 11vw, 12rem);
  color: var(--laser-lime);
  text-shadow: 0 0 34px var(--laser-lime), 10px 0 0 rgba(0, 229, 255, .28), -10px 0 0 rgba(255, 107, 154, .28);
}
.final-copy { top: 18vh; }
.closing-mark {
  position: absolute;
  right: 5vw;
  bottom: 6vh;
  font-family: "Monoton", cursive;
  font-size: clamp(2rem, 5vw, 6rem);
  color: rgba(244, 241, 255, .24);
}
.closing-mark span { color: var(--laser-lime); text-shadow: 0 0 20px var(--laser-lime); }

@keyframes scanDrift { from { transform: translateY(-30vh); } to { transform: translateY(130vh); } }
@keyframes beamPulse { 0%, 100% { opacity: .25; } 50% { opacity: .75; } }
@keyframes glintFloat { 0%, 100% { transform: translateY(0) rotate(0deg); opacity: .55; } 50% { transform: translateY(-1.2rem) rotate(18deg); opacity: 1; } }
@keyframes ringRotate { to { transform: rotate(360deg); } }
@keyframes portalWords { from { transform: translateY(150%) rotate(-12deg); } to { transform: translateY(-150%) rotate(12deg); } }
@keyframes eqBounce { 0%, 100% { height: 24%; } 50% { height: 82%; } }
@keyframes prismDrift { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(1.4rem, -1rem) rotate(12deg); } }

@media (max-width: 760px) {
  .exam-nav { left: 1rem; right: 1rem; gap: .35rem; }
  .exam-nav span { display: none; }
  .exam-nav a { width: 2rem; height: 2rem; }
  .iris-aperture { width: 38rem; left: calc(-26rem + var(--scroll) * 38rem); opacity: .62; }
  .room-orbit { position: relative; left: auto; right: auto; top: auto; transform: none; margin-top: 18vh; }
  .brand-title { font-size: clamp(3.4rem, 17vw, 6rem); }
  .eye-chart, .prescription-tag, .equalizer-cornea, .final-eye { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin: 2rem auto; }
  .curved-label { display: none; }
}