:root {
    --aperture-black: #05070D;
    --lens-graphite: #111827;
    --optical-white: #F8FAFC;
    --iris-cyan: #66E7FF;
    --violet-refraction: #8B5CF6;
    --afterimage-magenta: #FF4FD8;
    --retinal-amber: #F7C948;
    --glass-green: #7CFFB2;
    --aperture-x: 64vw;
    --aperture-y: 50vh;
    --cursor-x: 0px;
    --cursor-y: 0px;
    --scroll-progress: 0;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background: #05070D;
}

body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    color: #F8FAFC;
    background:
        radial-gradient(circle at 68% 46%, rgba(102, 231, 255, 0.08), transparent 23rem),
        radial-gradient(circle at 25% 75%, rgba(255, 79, 216, 0.06), transparent 28rem),
        linear-gradient(115deg, #05070D 0%, #111827 58%, #05070D 100%);
    font-family: "Space Grotesk", sans-serif;
}

body::before {
    content: "";
    position: fixed;
    inset: -20%;
    pointer-events: none;
    z-index: 0;
    background:
        repeating-radial-gradient(circle at var(--aperture-x) var(--aperture-y), rgba(248, 250, 252, 0.055) 0 1px, transparent 1px 18px),
        repeating-linear-gradient(97deg, rgba(102, 231, 255, 0.035) 0 1px, transparent 1px 22px);
    mix-blend-mode: screen;
    opacity: 0.42;
    transform: translate3d(calc(var(--cursor-x) * -0.015), calc(var(--cursor-y) * -0.015), 0);
}

.grain-field {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.18;
    background-image:
        radial-gradient(circle at 10% 20%, rgba(248, 250, 252, 0.16) 0 1px, transparent 1px),
        radial-gradient(circle at 70% 90%, rgba(102, 231, 255, 0.12) 0 1px, transparent 1px),
        radial-gradient(circle at 40% 50%, rgba(255, 79, 216, 0.13) 0 1px, transparent 1px);
    background-size: 37px 41px, 53px 59px, 71px 67px;
}

.aperture-stage {
    position: relative;
    z-index: 2;
}

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

.scene-field {
    position: relative;
    min-height: 100vh;
    padding: 8vh 7vw;
}

.persistent-aperture {
    position: fixed;
    left: calc(var(--aperture-x) - 18vmin + var(--cursor-x) * 0.012);
    top: calc(var(--aperture-y) - 18vmin + var(--cursor-y) * 0.012);
    width: 36vmin;
    height: 36vmin;
    z-index: 5;
    pointer-events: none;
    border-radius: 50%;
    filter: drop-shadow(0 0 24px rgba(102, 231, 255, 0.28));
    transform: rotate(calc(var(--scroll-progress) * 90deg)) scale(calc(0.82 + var(--scroll-progress) * 0.2));
    transition: left 700ms ease, top 700ms ease;
}

.iris-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

.persistent-aperture .outer {
    border: 1px solid rgba(248, 250, 252, 0.28);
    background:
        conic-gradient(from 20deg, transparent 0 12deg, rgba(102, 231, 255, 0.58) 12deg 17deg, transparent 17deg 62deg, rgba(139, 92, 246, 0.55) 62deg 70deg, transparent 70deg 156deg, rgba(255, 79, 216, 0.45) 156deg 164deg, transparent 164deg 360deg),
        radial-gradient(circle, transparent 52%, rgba(17, 24, 39, 0.65) 53%, transparent 68%);
    mask-image: radial-gradient(circle, transparent 44%, #000 45% 67%, transparent 68%);
}

.persistent-aperture .middle {
    inset: 12%;
    border: 1px solid rgba(102, 231, 255, 0.48);
    box-shadow: inset 0 0 22px rgba(139, 92, 246, 0.32), 0 0 16px rgba(255, 79, 216, 0.18);
}

.persistent-aperture .inner {
    inset: 32%;
    border: 1px solid rgba(124, 255, 178, 0.28);
    background: radial-gradient(circle, rgba(5, 7, 13, 0.35), rgba(5, 7, 13, 0.82));
}

.aperture-notch {
    position: absolute;
    width: 16%;
    height: 16%;
    right: 8%;
    top: 28%;
    border-radius: 50%;
    background: #05070D;
    box-shadow: 0 0 0 1px rgba(247, 201, 72, 0.42);
}

.focus-point, .amber-focus {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #F7C948;
    box-shadow: 0 0 18px #F7C948;
}

.focus-point {
    right: 28%;
    bottom: 31%;
    opacity: calc(0.15 + var(--scroll-progress) * 0.85);
}

.lens-index {
    position: fixed;
    right: 2.2rem;
    top: 50%;
    z-index: 10;
    display: grid;
    gap: 0.9rem;
    transform: translateY(-50%);
    font-family: "Azeret Mono", monospace;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.index-dot {
    position: relative;
    width: 2.6rem;
    height: 2.6rem;
    color: rgba(248, 250, 252, 0.45);
    text-decoration: none;
    border: 1px solid rgba(248, 250, 252, 0.18);
    border-radius: 50%;
    display: grid;
    place-items: center;
    transform: rotate(-18deg);
    transition: border-color 300ms ease, color 300ms ease, box-shadow 300ms ease;
}

.index-dot::before {
    content: attr(data-scene);
}

.index-dot span {
    position: absolute;
    right: 3.4rem;
    opacity: 0;
    color: #66E7FF;
    transform: translateX(0.8rem);
    transition: opacity 300ms ease, transform 300ms ease;
}

.index-dot.active, .index-dot:hover {
    color: #F8FAFC;
    border-color: #66E7FF;
    box-shadow: 0 0 20px rgba(102, 231, 255, 0.3), inset 0 0 18px rgba(139, 92, 246, 0.18);
}

.index-dot.active span, .index-dot:hover span {
    opacity: 1;
    transform: translateX(0);
}

.scene-dilate {
    background: radial-gradient(circle at 64% 50%, rgba(102, 231, 255, 0.06), transparent 19rem), #05070D;
}

.opening-aperture {
    position: absolute;
    left: 54vw;
    top: 18vh;
    width: min(48vw, 68vh);
    height: min(48vw, 68vh);
    border-radius: 50%;
    display: grid;
    place-items: center;
    clip-path: circle(50%);
}

.opening-ring {
    border: 1px solid #66E7FF;
    box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.65), 0 0 60px rgba(102, 231, 255, 0.2), inset 0 0 42px rgba(139, 92, 246, 0.18);
    animation: dilateRing 5200ms ease-in-out infinite alternate;
}

.opening-ring::before,
.opening-ring::after {
    content: "";
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    border: 1px dashed rgba(248, 250, 252, 0.2);
}

.opening-ring::after {
    inset: 24%;
    border-color: rgba(255, 79, 216, 0.32);
    animation: counterSpin 18s linear infinite;
}

.mirror-text {
    position: absolute;
    font-family: "Instrument Serif", serif;
    font-size: clamp(4rem, 10vw, 9rem);
    letter-spacing: -0.055em;
    color: #F8FAFC;
    text-shadow: -3px 0 #66E7FF, 3px 0 #FF4FD8;
    white-space: nowrap;
}

.mirror-text.reverse {
    transform: scaleX(-1);
    opacity: 0.32;
    filter: blur(1.5px);
    animation: reverseResolve 7200ms ease-in-out infinite;
}

.mirror-text.forward {
    opacity: 0;
    animation: forwardResolve 7200ms ease-in-out infinite;
}

.lens-note {
    position: absolute;
    margin: 0;
    color: rgba(248, 250, 252, 0.74);
    font-family: "Azeret Mono", monospace;
    font-size: clamp(0.62rem, 0.9vw, 0.86rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.note-top {
    left: 11vw;
    top: 18vh;
    color: rgba(102, 231, 255, 0.78);
}

.note-left {
    left: 8vw;
    bottom: 19vh;
    transform: rotate(-90deg);
    transform-origin: left center;
}

.calibration-tick {
    position: absolute;
    width: 1px;
    height: 15vmin;
    background: linear-gradient(to bottom, transparent, #F8FAFC, transparent);
    opacity: 0.55;
}

.tick-a { left: 62vw; top: 14vh; transform: rotate(24deg); }
.tick-b { left: 77vw; bottom: 12vh; transform: rotate(-42deg); }

.focus-ray {
    position: absolute;
    height: 1px;
    width: 70vmax;
    background: linear-gradient(90deg, transparent, rgba(102, 231, 255, 0.72), rgba(255, 79, 216, 0.2), transparent);
    transform-origin: center;
    mix-blend-mode: screen;
    opacity: 0.54;
}

.ray-one { left: 18vw; top: 40vh; transform: rotate(-18deg); }
.ray-two { left: 28vw; top: 58vh; transform: rotate(12deg); background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.68), rgba(124, 255, 178, 0.24), transparent); }
.ray-three { left: 8vw; top: 28vh; transform: rotate(31deg); }
.ray-four { right: -16vw; bottom: 28vh; transform: rotate(-35deg); }
.ray-five { left: 14vw; top: 62vh; transform: rotate(6deg); background: linear-gradient(90deg, transparent, rgba(255, 79, 216, 0.64), transparent); }

.radial-chart {
    position: absolute;
    left: 52vw;
    top: 10vh;
    width: 34vmin;
    height: 76vh;
    display: grid;
    place-items: center;
    color: rgba(248, 250, 252, 0.72);
    font-family: "Instrument Serif", serif;
    font-size: clamp(1rem, 5vw, 4rem);
    transform: rotate(7deg);
    mask-image: radial-gradient(ellipse at center, #000 22%, transparent 73%);
}

.radial-chart span:nth-child(odd) { color: #66E7FF; text-shadow: 2px 0 #8B5CF6; }
.radial-chart span:nth-child(even) { color: #F8FAFC; text-shadow: -2px 0 #FF4FD8; }

.orbit-copy {
    position: absolute;
    max-width: 31rem;
    color: #F8FAFC;
}

.orbit-copy-one {
    left: 8vw;
    top: 25vh;
}

.orbit-copy-two {
    left: 9vw;
    top: 18vh;
}

.mono-label {
    display: block;
    margin-bottom: 1rem;
    color: #7CFFB2;
    font-family: "Azeret Mono", monospace;
    font-size: 0.74rem;
    letter-spacing: 0.24em;
}

h1, h2, .scene-title {
    margin: 0;
    font-family: "Instrument Serif", serif;
    font-weight: 400;
    letter-spacing: -0.055em;
    line-height: 0.88;
}

.orbit-copy h1,
.orbit-copy h2 {
    font-size: clamp(4.5rem, 11vw, 11rem);
    max-width: 10ch;
    text-shadow: -2px 0 rgba(102, 231, 255, 0.8), 3px 0 rgba(255, 79, 216, 0.5);
}

.orbit-copy p {
    margin: 1.4rem 0 0;
    max-width: 28rem;
    color: rgba(248, 250, 252, 0.72);
    font-size: clamp(1rem, 1.35vw, 1.35rem);
    line-height: 1.55;
}

.tangent {
    border-top: 1px solid rgba(102, 231, 255, 0.4);
    padding-top: 0.7rem;
}

.tangent-one { right: 13vw; top: 20vh; transform: rotate(14deg); }
.tangent-two { right: 24vw; bottom: 17vh; transform: rotate(-18deg); color: #FF4FD8; }
.tangent-three { right: 15vw; top: 28vh; color: #7CFFB2; transform: rotate(18deg); }
.tangent-four { right: 9vw; bottom: 18vh; color: #8B5CF6; transform: rotate(-12deg); }

.prism-triangle {
    position: absolute;
    right: 19vw;
    top: 50vh;
    width: 12vmin;
    aspect-ratio: 1;
    clip-path: polygon(50% 0, 100% 90%, 0 90%);
    background: linear-gradient(135deg, rgba(102, 231, 255, 0.4), rgba(139, 92, 246, 0.16), rgba(255, 79, 216, 0.38));
    border: 1px solid rgba(248, 250, 252, 0.3);
    filter: blur(0.2px) drop-shadow(0 0 24px rgba(139, 92, 246, 0.35));
}

.scene-invert {
    background:
        linear-gradient(90deg, rgba(255, 79, 216, 0.08), transparent 42%, rgba(102, 231, 255, 0.08)),
        #05070D;
}

.inverted-field {
    transform: scaleX(-1);
}

.split-mirror {
    position: absolute;
    left: 10vw;
    top: 18vh;
    transform: scaleX(-1);
}

.scene-title {
    font-size: clamp(7rem, 18vw, 18rem);
    color: #F8FAFC;
    text-shadow: -4px 0 #66E7FF, 5px 0 #FF4FD8;
}

.reflection-heading {
    transform: scaleY(-1) translateY(0.18em);
    opacity: 0.18;
    color: #8B5CF6;
    mask-image: linear-gradient(to bottom, #000, transparent 72%);
}

.bent-copy {
    position: absolute;
    right: 8vw;
    top: 28vh;
    width: 32rem;
    transform: scaleX(-1) rotate(8deg);
    color: rgba(248, 250, 252, 0.75);
    font-family: "Azeret Mono", monospace;
    font-size: clamp(0.78rem, 1vw, 1rem);
    line-height: 1.9;
    padding: 2rem;
    border: 1px solid rgba(102, 231, 255, 0.22);
    border-radius: 50%;
    filter: url(#none);
}

.quadrant {
    position: absolute;
    width: 22vmin;
    height: 22vmin;
    display: grid;
    place-items: center;
    border: 1px solid rgba(248, 250, 252, 0.16);
    border-radius: 50% 50% 4% 50%;
    color: rgba(248, 250, 252, 0.22);
    font-family: "Instrument Serif", serif;
    font-size: 4rem;
}

.quadrant-a { right: 12vw; top: 12vh; color: rgba(102, 231, 255, 0.3); }
.quadrant-b { right: 30vw; bottom: 11vh; transform: rotate(90deg); color: rgba(255, 79, 216, 0.28); }
.quadrant-c { left: 44vw; bottom: 24vh; transform: rotate(180deg); color: rgba(124, 255, 178, 0.24); }

.afterimage {
    position: absolute;
    font-family: "Instrument Serif", serif;
    font-style: italic;
    font-size: clamp(5rem, 14vw, 14rem);
    color: rgba(255, 79, 216, 0.12);
    text-shadow: 8px 0 rgba(102, 231, 255, 0.1);
}

.afterimage-one {
    left: 25vw;
    bottom: 7vh;
    transform: scaleX(-1);
}

.clear-lens {
    position: absolute;
    right: 9vw;
    top: 11vh;
    width: min(52vw, 76vh);
    height: min(52vw, 76vh);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 42% 38%, rgba(248, 250, 252, 0.13), transparent 12%),
        radial-gradient(circle at center, rgba(102, 231, 255, 0.08), rgba(5, 7, 13, 0.72) 58%, rgba(5, 7, 13, 0.96));
    box-shadow: inset 0 0 80px rgba(102, 231, 255, 0.14), 0 0 80px rgba(139, 92, 246, 0.18);
}

.clear-lens-rim,
.calibration-halo {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(248, 250, 252, 0.42);
    background: conic-gradient(from 0deg, #66E7FF 0 2deg, transparent 2deg 10deg, #8B5CF6 10deg 12deg, transparent 12deg 24deg, #FF4FD8 24deg 26deg, transparent 26deg 360deg);
    mask-image: radial-gradient(circle, transparent 67%, #000 68% 71%, transparent 72%);
    animation: slowSpin 36s linear infinite;
}

.domain-crisp {
    font-family: "Instrument Serif", serif;
    font-size: clamp(4rem, 10vw, 9.5rem);
    letter-spacing: -0.06em;
    color: #F8FAFC;
    text-shadow: 1px 0 #66E7FF, -1px 0 #FF4FD8;
}

.calibration-scale {
    position: absolute;
    inset: 7%;
    border-radius: 50%;
    animation: counterSpin 42s linear infinite;
}

.calibration-scale span {
    position: absolute;
    left: 50%;
    top: 0;
    transform-origin: 0 calc(min(52vw, 76vh) * 0.43);
    color: rgba(248, 250, 252, 0.48);
    font-family: "Azeret Mono", monospace;
    font-size: 0.62rem;
}

.calibration-scale span:nth-child(1) { transform: rotate(0deg); }
.calibration-scale span:nth-child(2) { transform: rotate(32deg); }
.calibration-scale span:nth-child(3) { transform: rotate(64deg); }
.calibration-scale span:nth-child(4) { transform: rotate(96deg); }
.calibration-scale span:nth-child(5) { transform: rotate(128deg); }
.calibration-scale span:nth-child(6) { transform: rotate(160deg); }
.calibration-scale span:nth-child(7) { transform: rotate(192deg); }

.scene-afterimage {
    background:
        radial-gradient(circle at 66% 50%, rgba(247, 201, 72, 0.08), transparent 16rem),
        radial-gradient(circle at 40% 50%, rgba(124, 255, 178, 0.08), transparent 32rem),
        #05070D;
}

.afterimage-silhouette {
    position: absolute;
    left: 12vw;
    top: 20vh;
    width: 48vmin;
    height: 60vmin;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at center, rgba(255, 79, 216, 0.12), transparent 62%),
        radial-gradient(ellipse at center, rgba(102, 231, 255, 0.12), transparent 58%);
    filter: blur(10px);
    transform: rotate(-18deg);
}

.final-lens {
    position: absolute;
    right: 11vw;
    top: 15vh;
    width: min(46vw, 68vh);
    height: min(46vw, 68vh);
    border-radius: 50%;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 7vmin;
    background: radial-gradient(circle, rgba(248, 250, 252, 0.08), rgba(5, 7, 13, 0.9) 62%);
    border: 1px solid rgba(248, 250, 252, 0.32);
    box-shadow: inset 0 0 60px rgba(124, 255, 178, 0.14), 0 0 90px rgba(247, 201, 72, 0.08);
}

.final-lens h2 {
    font-size: clamp(4.5rem, 10vw, 10rem);
    color: #F8FAFC;
    text-shadow: 1px 0 #66E7FF, -1px 0 #FF4FD8;
}

.final-lens p {
    max-width: 21rem;
    margin: 0;
    color: rgba(248, 250, 252, 0.68);
    font-size: clamp(0.95rem, 1.2vw, 1.2rem);
    line-height: 1.5;
}

.amber-focus {
    right: 20%;
    bottom: 23%;
}

.final-note {
    left: 10vw;
    bottom: 18vh;
    color: #F7C948;
}

.final-note.ghost {
    left: 16vw;
    bottom: 10vh;
    color: rgba(248, 250, 252, 0.38);
}

.scene .orbit-copy,
.scene .lens-note,
.scene .radial-chart,
.scene .clear-lens,
.scene .final-lens,
.scene .split-mirror,
.scene .bent-copy {
    opacity: 0;
    transform: translateY(2.4rem);
    transition: opacity 900ms ease, transform 900ms ease;
}

.scene.is-visible .orbit-copy,
.scene.is-visible .lens-note,
.scene.is-visible .radial-chart,
.scene.is-visible .clear-lens,
.scene.is-visible .final-lens,
.scene.is-visible .split-mirror,
.scene.is-visible .bent-copy {
    opacity: 1;
    transform: translateY(0);
}

.scene.is-visible .split-mirror { transform: scaleX(-1); }
.scene.is-visible .bent-copy { transform: scaleX(-1) rotate(8deg); }
.scene.is-visible .tangent-one { transform: rotate(14deg); }
.scene.is-visible .tangent-two { transform: rotate(-18deg); }
.scene.is-visible .tangent-three { transform: rotate(18deg); }
.scene.is-visible .tangent-four { transform: rotate(-12deg); }
.scene.is-visible .note-left { transform: rotate(-90deg); }

@keyframes dilateRing {
    0% { clip-path: circle(12%); transform: scale(0.72); }
    52% { clip-path: circle(38%); transform: scale(0.94) rotate(8deg); }
    100% { clip-path: circle(50%); transform: scale(1.02) rotate(-5deg); }
}

@keyframes reverseResolve {
    0%, 34% { opacity: 0.34; filter: blur(2px); transform: scaleX(-1) translateX(0.15em); }
    60%, 100% { opacity: 0.04; filter: blur(8px); transform: scaleX(-1) translateX(-0.1em); }
}

@keyframes forwardResolve {
    0%, 36% { opacity: 0; filter: blur(10px); transform: translateX(-0.12em); }
    70%, 100% { opacity: 1; filter: blur(0); transform: translateX(0); }
}

@keyframes slowSpin {
    to { transform: rotate(360deg); }
}

@keyframes counterSpin {
    to { transform: rotate(-360deg); }
}

@media (max-width: 800px) {
    :root {
        --aperture-x: 55vw;
    }

    .persistent-aperture {
        width: 48vmin;
        height: 48vmin;
        left: calc(var(--aperture-x) - 24vmin);
        top: calc(var(--aperture-y) - 24vmin);
    }

    .lens-index {
        right: 1rem;
        gap: 0.45rem;
    }

    .index-dot {
        width: 2rem;
        height: 2rem;
    }

    .opening-aperture,
    .clear-lens,
    .final-lens {
        left: 8vw;
        right: auto;
        top: 30vh;
        width: 82vw;
        height: 82vw;
    }

    .orbit-copy-one,
    .orbit-copy-two,
    .split-mirror,
    .bent-copy {
        left: 7vw;
        right: 7vw;
        top: 12vh;
        width: auto;
    }

    .radial-chart,
    .tangent,
    .note-left {
        display: none;
    }
}