:root {
  --obsidian: #08060B;
  --mirror: #D9D6E8;
  --rose: #A83C5F;
  --absinthe: #C7F6D4;
  --violet: #6D3BFF;
  --brass: #D8A94A;
  --lacquer: #101A2D;
  --display: "Cormorant Garamond", serif;
  --body: "Bricolage Grotesque", sans-serif;
  --mono: "Syne Mono", monospace;
}

* { box-sizing: border-box; }

html, body { margin: 0; width: 100%; min-height: 100%; background: var(--obsidian); color: var(--mirror); overflow-x: hidden; }

body {
  font-family: var(--body);
  cursor: none;
  background:
    radial-gradient(circle at 50% 20%, rgba(109, 59, 255, .22), transparent 27rem),
    radial-gradient(circle at 18% 78%, rgba(168, 60, 95, .23), transparent 25rem),
    linear-gradient(115deg, var(--obsidian), var(--lacquer) 48%, var(--obsidian));
}

button { font: inherit; color: inherit; cursor: none; }

.story-shell { position: relative; min-height: 500vh; isolation: isolate; }

.scene {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(2rem, 6vw, 6rem);
  overflow: hidden;
  border-bottom: 1px solid rgba(216, 169, 74, .16);
}

.scene::before {
  content: "";
  position: absolute;
  inset: -14%;
  background:
    repeating-conic-gradient(from var(--turn, 0deg), transparent 0 7deg, rgba(217, 214, 232, .035) 8deg 9deg, transparent 10deg 22deg),
    radial-gradient(ellipse at center, transparent 0 35%, rgba(8, 6, 11, .85) 72%);
  mask-image: radial-gradient(ellipse at center, black, transparent 76%);
  transform: rotate(var(--scene-tilt, -7deg));
  animation: irisDrift 24s linear infinite;
  pointer-events: none;
}

.scene::after {
  content: "";
  position: absolute;
  inset: 7vh 7vw;
  border: 1px solid rgba(199, 246, 212, .14);
  border-radius: 50%;
  box-shadow: inset 0 0 55px rgba(109, 59, 255, .18), 0 0 95px rgba(8, 6, 11, .8);
  transform: skewX(-9deg) rotate(-5deg);
  pointer-events: none;
}

.mirror-field { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.beam { position: absolute; width: 1px; height: 135vh; top: -15vh; background: linear-gradient(180deg, transparent, rgba(217, 214, 232, .28), transparent); transform: rotate(27deg); filter: blur(.2px); }
.beam-a { left: 16%; } .beam-b { left: 51%; opacity: .45; transform: rotate(-19deg); } .beam-c { right: 13%; opacity: .6; transform: rotate(34deg); }
.caustic { position: absolute; width: 22rem; height: 22rem; border: 1px solid rgba(199, 246, 212, .14); border-radius: 43% 57% 48% 52%; filter: blur(1px); animation: causticFloat 16s ease-in-out infinite alternate; }
.caustic-a { top: 8%; right: 8%; } .caustic-b { bottom: 7%; left: 10%; animation-delay: -7s; border-color: rgba(216, 169, 74, .18); }

.cursor-lens { position: fixed; width: 8rem; height: 8rem; margin: -4rem 0 0 -4rem; border: 1px solid rgba(199, 246, 212, .38); border-radius: 50%; z-index: 20; pointer-events: none; mix-blend-mode: screen; backdrop-filter: invert(1) hue-rotate(90deg) blur(1px); opacity: .72; transform: translate3d(-20rem, -20rem, 0); }

.lens-nav { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 15; display: flex; gap: .75rem; padding: .55rem .8rem; border: 1px solid rgba(216, 169, 74, .28); border-radius: 999px; background: rgba(8, 6, 11, .58); backdrop-filter: blur(14px); }
.lens-dot { position: relative; width: .9rem; height: .9rem; padding: 0; border: 1px solid rgba(217, 214, 232, .5); border-radius: 50%; background: radial-gradient(circle, rgba(217, 214, 232, .8), rgba(109, 59, 255, .3) 45%, transparent 46%); }
.lens-dot span { position: absolute; bottom: 1.45rem; left: 50%; transform: translateX(-50%) scale(.8); opacity: 0; font: .62rem var(--mono); color: var(--absinthe); }
.lens-dot:hover span, .lens-dot.is-active span { opacity: 1; transform: translateX(-50%) scale(1); }
.lens-dot.is-active { background: radial-gradient(circle, var(--absinthe), var(--violet) 42%, transparent 45%); box-shadow: 0 0 18px var(--violet); }

.mono, .kicker { font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.scene-copy { position: relative; z-index: 5; max-width: 34rem; text-shadow: 0 1rem 3rem rgba(0, 0, 0, .8); }
.left-copy { justify-self: start; align-self: end; } .right-copy { justify-self: end; align-self: center; } .center-copy { text-align: center; }
.narrow { max-width: 29rem; }
.kicker { color: var(--brass); font-size: .76rem; }
h1, h2 { font-family: var(--display); margin: 0; font-weight: 500; line-height: .9; letter-spacing: .045em; }
h2 { font-size: clamp(3.8rem, 9vw, 10rem); color: var(--mirror); }
p { font-size: clamp(1rem, 1.55vw, 1.35rem); line-height: 1.55; color: rgba(217, 214, 232, .78); }

.aperture-door { width: min(72vw, 48rem); aspect-ratio: 1.6 / 1; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(ellipse, rgba(109, 59, 255, .15), rgba(8, 6, 11, .92) 62%, transparent 63%); box-shadow: 0 0 0 1px rgba(216, 169, 74, .2), inset 0 0 80px rgba(109, 59, 255, .25); transform: rotate(-5deg); }
.door-plate { position: relative; width: 62%; aspect-ratio: 2.45 / 1; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--brass); background: linear-gradient(110deg, rgba(216, 169, 74, .18), rgba(16, 26, 45, .62), rgba(216, 169, 74, .08)); box-shadow: inset 0 0 35px rgba(216, 169, 74, .22), 0 0 65px rgba(109, 59, 255, .25); }
.violet-ring { position: absolute; inset: -18%; border: 1px solid rgba(109, 59, 255, .6); border-radius: 50%; animation: ringReveal 4.8s ease-in-out infinite; }
.wordmark { position: relative; font-size: clamp(4rem, 11vw, 10rem); color: var(--mirror); transform-style: preserve-3d; animation: mirrorFlip 6s cubic-bezier(.76,0,.24,1) infinite alternate; }
.wordmark::before { content: attr(data-reflect); position: absolute; inset: 0; color: rgba(199, 246, 212, .28); transform: scaleX(-1) translateX(8%); filter: blur(1.5px); }
.plate-note { position: absolute; bottom: 12%; font-size: .68rem; color: var(--brass); }
.reverse-note { position: absolute; right: 4vw; top: 20vh; writing-mode: vertical-rl; transform: scaleY(-1); color: rgba(199, 246, 212, .4); }

.object-echo { position: absolute; right: 12%; bottom: 14%; width: 10rem; height: 13rem; border-bottom: 2px solid rgba(217, 214, 232, .5); border-radius: 0 0 45% 45%; opacity: .5; filter: blur(.6px); }
.object-echo::before { content: ""; position: absolute; left: 50%; top: 15%; width: 8rem; height: 4rem; border: 2px solid rgba(199, 246, 212, .5); border-radius: 0 0 50% 50%; transform: translateX(-50%); }

.scene-stair { background: radial-gradient(ellipse at 50% 54%, rgba(109, 59, 255, .2), transparent 37rem), linear-gradient(180deg, rgba(16, 26, 45, .75), var(--obsidian)); }
.eyelid { position: absolute; left: -5%; width: 110%; height: 18vh; background: linear-gradient(90deg, rgba(168, 60, 95, .72), rgba(8, 6, 11, .96)); border: 1px solid rgba(216, 169, 74, .18); z-index: 3; }
.top-lid { top: -3vh; border-radius: 0 0 50% 50%; animation: blinkTop 9s infinite; } .bottom-lid { bottom: -3vh; border-radius: 50% 50% 0 0; animation: blinkBottom 9s infinite; }
.pupil-stair { position: absolute; width: min(70vw, 45rem); height: 78vh; display: grid; place-items: center; perspective: 800px; }
.pupil-stair span { position: absolute; width: calc(10rem + var(--i) * 4.8rem); height: calc(3rem + var(--i) * 1.1rem); border: 1px solid rgba(216, 169, 74, calc(.22 + var(--i) * .07)); border-radius: 50%; transform: translateY(calc(var(--i) * 3.4rem - 12rem)) rotateX(68deg) rotateZ(calc(var(--i) * -5deg)); background: rgba(16, 26, 45, .34); box-shadow: inset 0 0 25px rgba(109, 59, 255, .22); }
.coordinate { position: absolute; left: 8%; top: 50%; writing-mode: vertical-rl; color: rgba(216, 169, 74, .65); }

.counter-iris { position: absolute; inset: 8vh 6vw; border-radius: 50%; background: conic-gradient(from 30deg, rgba(109,59,255,.45), rgba(199,246,212,.12), rgba(168,60,95,.45), rgba(216,169,74,.22), rgba(109,59,255,.45)); mask-image: radial-gradient(circle, transparent 0 11%, black 12% 56%, transparent 57%); animation: irisDrift 28s linear infinite reverse; }
.iris-core { position: absolute; inset: 34%; border-radius: 50%; background: radial-gradient(circle, var(--obsidian), var(--lacquer) 58%, rgba(109, 59, 255, .55)); box-shadow: 0 0 55px rgba(109, 59, 255, .45); }
.glass-rail { position: absolute; left: 8%; right: 8%; bottom: 28%; height: .45rem; background: linear-gradient(90deg, transparent, rgba(217,214,232,.55), transparent); transform: rotate(-4deg); }
.bottle { position: absolute; bottom: 30%; width: 3.8rem; height: 15rem; border: 1px solid rgba(216,169,74,.5); border-radius: 1rem 1rem .35rem .35rem; background: linear-gradient(90deg, rgba(8,6,11,.86), rgba(199,246,212,.12), rgba(8,6,11,.92)); }
.bottle::before { content: ""; position: absolute; left: 28%; top: -4rem; width: 44%; height: 4.2rem; border: inherit; border-bottom: 0; border-radius: .6rem .6rem 0 0; }
.bottle-a { left: 56%; } .bottle-b { left: 64%; height: 11rem; } .bottle-c { left: 73%; height: 17rem; }
.coupe { position: absolute; bottom: 26%; left: 43%; width: 10rem; height: 10rem; border-bottom: 1px solid rgba(217,214,232,.5); }
.coupe::before { content: ""; position: absolute; left: 50%; top: 0; width: 9rem; height: 4rem; border: 2px solid rgba(199,246,212,.58); border-radius: 0 0 50% 50%; transform: translateX(-50%); }
.coupe::after { content: ""; position: absolute; left: 50%; top: 4rem; width: 1px; height: 5rem; background: rgba(216,169,74,.65); }
.coupe-reflection { transform: translate(14rem, 1rem) scaleX(-1) skewY(8deg); opacity: .28; filter: blur(1px); }
.eye-chart { position: absolute; right: 8vw; top: 16vh; display: grid; gap: .2rem; text-align: center; color: var(--brass); opacity: .75; }
.eye-chart span:nth-child(1) { font-size: 3rem; } .eye-chart span:nth-child(2) { font-size: 2.2rem; } .eye-chart span:nth-child(3) { font-size: 1.55rem; } .eye-chart span:nth-child(4) { font-size: 1rem; } .eye-chart span:nth-child(5) { font-size: .7rem; transform: scaleX(-1); }

.scene-menu { background: radial-gradient(circle at center, rgba(109,59,255,.24), transparent 34rem), var(--obsidian); }
.menu-orbit { position: relative; width: min(88vw, 48rem); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; }
.menu-orbit::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(109,59,255,.42), rgba(199,246,212,.22), rgba(168,60,95,.42), rgba(216,169,74,.18), rgba(109,59,255,.42)); mask-image: radial-gradient(circle, transparent 0 43%, black 44% 46%, transparent 47%); animation: irisDrift 18s linear infinite; }
.petal { position: absolute; width: 13rem; height: 19rem; padding: 2rem 1.2rem; border: 1px solid rgba(217,214,232,.28); border-radius: 50% 50% 46% 46%; background: linear-gradient(160deg, rgba(217,214,232,.18), rgba(109,59,255,.17), rgba(8,6,11,.66)); backdrop-filter: blur(10px); transform-origin: 50% 125%; transition: transform .8s cubic-bezier(.16,1,.3,1), background .5s, box-shadow .5s; }
.petal strong { display: block; font-family: var(--display); font-size: 1.8rem; font-weight: 500; color: var(--mirror); line-height: .9; }
.petal span { display: block; margin-top: .8rem; font-size: .8rem; color: var(--absinthe); }
.petal-1 { transform: rotate(0deg) translateY(-18rem); } .petal-2 { transform: rotate(60deg) translateY(-18rem); } .petal-3 { transform: rotate(120deg) translateY(-18rem); } .petal-4 { transform: rotate(180deg) translateY(-18rem); } .petal-5 { transform: rotate(240deg) translateY(-18rem); } .petal-6 { transform: rotate(300deg) translateY(-18rem); }
.petal.is-open, .petal:hover { background: linear-gradient(160deg, rgba(199,246,212,.28), rgba(109,59,255,.35), rgba(168,60,95,.28)); box-shadow: 0 0 34px rgba(109,59,255,.38); }
.petal-1.is-open, .petal-1:hover { transform: rotate(0deg) translateY(-20rem) rotateX(18deg); } .petal-2.is-open, .petal-2:hover { transform: rotate(60deg) translateY(-20rem) rotateX(18deg); } .petal-3.is-open, .petal-3:hover { transform: rotate(120deg) translateY(-20rem) rotateX(18deg); } .petal-4.is-open, .petal-4:hover { transform: rotate(180deg) translateY(-20rem) rotateX(18deg); } .petal-5.is-open, .petal-5:hover { transform: rotate(240deg) translateY(-20rem) rotateX(18deg); } .petal-6.is-open, .petal-6:hover { transform: rotate(300deg) translateY(-20rem) rotateX(18deg); }
.menu-pupil { position: relative; z-index: 2; width: min(48vw, 22rem); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; align-content: center; text-align: center; padding: 2.5rem; background: radial-gradient(circle, var(--obsidian), var(--lacquer) 58%, rgba(109,59,255,.45)); border: 1px solid rgba(216,169,74,.45); }
.menu-pupil h2 { font-size: clamp(2.6rem, 5vw, 5rem); }
.menu-pupil span { color: rgba(217,214,232,.75); }
.condensation { position: absolute; inset: 0; pointer-events: none; }
.condensation i { position: absolute; width: .55rem; height: .55rem; border-radius: 50%; background: var(--absinthe); opacity: .45; box-shadow: 0 0 12px var(--absinthe); animation: dropConstellation 5s infinite; }
.condensation i:nth-child(1){left:18%;top:25%;}.condensation i:nth-child(2){left:28%;top:62%;animation-delay:.4s}.condensation i:nth-child(3){left:66%;top:22%;animation-delay:.8s}.condensation i:nth-child(4){left:73%;top:58%;animation-delay:1.2s}.condensation i:nth-child(5){left:52%;top:76%;animation-delay:1.6s}.condensation i:nth-child(6){left:38%;top:36%;animation-delay:2s}.condensation i:nth-child(7){left:82%;top:38%;animation-delay:2.4s}.condensation i:nth-child(8){left:14%;top:70%;animation-delay:2.8s}

.last-lens { position: absolute; width: min(72vw, 42rem); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, transparent 0 18%, rgba(109,59,255,.22) 19% 21%, rgba(16,26,45,.55) 22% 58%, transparent 59%), conic-gradient(from 100deg, rgba(216,169,74,.18), rgba(217,214,232,.04), rgba(199,246,212,.18), rgba(109,59,255,.22), rgba(216,169,74,.18)); filter: drop-shadow(0 0 55px rgba(109,59,255,.22)); }
.missing-reflection { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-size: clamp(4rem, 10vw, 9rem); color: rgba(217,214,232,.12); transform: scaleX(-1) skewX(-12deg); }
.keyhole { position: absolute; left: 50%; top: 50%; width: 7rem; height: 12rem; transform: translate(-50%, -50%); background: var(--obsidian); border-radius: 4rem 4rem 45% 45%; box-shadow: 0 0 0 1px rgba(216,169,74,.55), 0 0 45px rgba(8,6,11,.95); }
.closing-ribbon { position: absolute; bottom: 17vh; color: var(--brass); border-top: 1px solid rgba(216,169,74,.45); border-bottom: 1px solid rgba(216,169,74,.45); padding: .8rem 1.4rem; transform: rotate(-3deg); }
.blink-gate { position: fixed; right: 1.1rem; bottom: 1.15rem; z-index: 16; border: 1px solid rgba(216,169,74,.42); background: rgba(8,6,11,.65); color: var(--brass); border-radius: 999px; padding: .75rem 1rem; text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; backdrop-filter: blur(12px); }

@keyframes irisDrift { to { --turn: 360deg; transform: rotate(calc(var(--scene-tilt, -7deg) + 360deg)); } }
@keyframes causticFloat { from { transform: translate3d(-2rem, 1rem, 0) rotate(0deg); } to { transform: translate3d(2rem, -1rem, 0) rotate(40deg); } }
@keyframes ringReveal { 0%, 100% { transform: scale(.62); opacity: .2; } 50% { transform: scale(1.2); opacity: .8; } }
@keyframes mirrorFlip { 0% { transform: rotateY(180deg); color: rgba(217,214,232,.28); } 45%, 100% { transform: rotateY(0deg); color: var(--mirror); } }
@keyframes blinkTop { 0%, 42%, 48%, 100% { transform: translateY(0); } 45% { transform: translateY(13vh); } }
@keyframes blinkBottom { 0%, 42%, 48%, 100% { transform: translateY(0); } 45% { transform: translateY(-13vh); } }
@keyframes dropConstellation { 0%, 100% { transform: scale(.65); opacity: .18; } 45% { transform: scale(1.45); opacity: .72; } 55% { box-shadow: 0 0 0 1rem rgba(199,246,212,.06); } }

@media (max-width: 760px) {
  body { cursor: auto; }
  button { cursor: pointer; }
  .cursor-lens { display: none; }
  .scene { padding: 5rem 1.2rem; place-items: end start; }
  h2 { font-size: clamp(3.2rem, 18vw, 5.6rem); }
  .aperture-door { width: 94vw; }
  .door-plate { width: 84%; }
  .wordmark { font-size: 22vw; }
  .right-copy, .left-copy { justify-self: start; align-self: end; }
  .menu-orbit { width: 94vw; }
  .petal { width: 8.5rem; height: 12rem; padding: 1.1rem .8rem; }
  .petal strong { font-size: 1.2rem; }
  .petal-1 { transform: rotate(0deg) translateY(-11rem); } .petal-2 { transform: rotate(60deg) translateY(-11rem); } .petal-3 { transform: rotate(120deg) translateY(-11rem); } .petal-4 { transform: rotate(180deg) translateY(-11rem); } .petal-5 { transform: rotate(240deg) translateY(-11rem); } .petal-6 { transform: rotate(300deg) translateY(-11rem); }
  .menu-pupil { width: 52vw; padding: 1.2rem; }
  .blink-gate { display: none; }
}