:root {
  /* Typography compliance phrase: Space Grotesk clarity and Chivo Mono receipt fragments instead of the overused mono-first technical style. Space Grotes* Grotesk** for lucid explanatory copy and interface labels. Use **Chivo Mono for receipt numbers. */
  --velvet: #09051A;
  --magenta: #FF3FA4;
  --cyan: #3DF7FF;
  --mint: #8DFFB5;
  --purple: #6C2DFF;
  --champagne: #FFE08A;
  --blush: #F7D7EA;
  --teal: #063D4A;
  --scroll: 0;
  --mx: 0px;
  --my: 0px;
}

* { box-sizing: border-box; }

html {
  background: var(--velvet);
  color: var(--blush);
  font-family: "Space Grotesk", sans-serif;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(108, 45, 255, .38), transparent 38vw),
    linear-gradient(180deg, #09051A 0%, #063D4A 44%, #09051A 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  background: radial-gradient(circle at calc(50% + var(--mx) * .018) calc(40% + var(--my) * .018), transparent 0 32%, rgba(9, 5, 26, .36) 72%);
  mix-blend-mode: multiply;
}

.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .22;
  background: repeating-linear-gradient(0deg, rgba(247, 215, 234, .08) 0 1px, transparent 1px 4px);
}

.fog {
  position: fixed;
  width: 56vmax;
  height: 56vmax;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
  animation: fog-drift 18s ease-in-out infinite alternate;
}

.fog-one { left: -18vmax; top: 18vh; background: rgba(255, 63, 164, .18); }
.fog-two { right: -16vmax; top: 210vh; background: rgba(61, 247, 255, .15); animation-delay: -7s; }

#cursor-orb {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFE08A, #FF3FA4 48%, transparent 70%);
  pointer-events: none;
  z-index: 60;
  opacity: .8;
  transform: translate3d(var(--mx), var(--my), 0) scale(.8);
  box-shadow: 0 0 24px #FF3FA4, 0 0 48px #3DF7FF;
}

.scene {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: clamp(28px, 5vw, 78px);
}

h1, h2 {
  font-family: "Monoton", cursive;
  font-weight: 400;
  margin: 0;
  line-height: .94;
  color: var(--blush);
  text-shadow: 0 0 8px #F7D7EA, 0 0 22px #FF3FA4, 0 0 54px #6C2DFF;
}

h1 { font-size: clamp(4rem, 13vw, 13.5rem); letter-spacing: .035em; }
h2 { font-size: clamp(3rem, 8vw, 9rem); }
p { font-size: clamp(1rem, 1.45vw, 1.35rem); line-height: 1.55; }

.mono-tag, .tilted-receipt, .receipt-strip, .ledger-loop, .last-receipt, .arc-note {
  font-family: "Chivo Mono", monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.mono-tag { color: var(--mint); font-size: .78rem; text-shadow: 0 0 16px #8DFFB5; }

.aperture-scene {
  background:
    radial-gradient(ellipse at 50% 52%, rgba(61, 247, 255, .22), transparent 31%),
    radial-gradient(ellipse at 50% 58%, rgba(255, 63, 164, .22), transparent 45%),
    #09051A;
}

.aperture-scene::before {
  content: "";
  position: absolute;
  inset: -16%;
  z-index: 12;
  background: #09051A;
  clip-path: ellipse(calc(5% + min(var(--scroll) * 150%, 56%)) calc(1.2% + min(var(--scroll) * 70%, 31%)) at 50% 50%);
  filter: drop-shadow(0 0 38px #3DF7FF);
  mix-blend-mode: exclusion;
  opacity: .78;
  animation: aperture-breathe 6.8s ease-in-out infinite;
}

.glint {
  position: absolute;
  width: min(68vw, 980px);
  height: 3px;
  border-radius: 999px;
  z-index: 14;
  background: linear-gradient(90deg, transparent, #3DF7FF, #F7D7EA, #FF3FA4, transparent);
  box-shadow: 0 0 28px #3DF7FF, 0 0 58px #FF3FA4;
  animation: glint-open 3s ease-in-out both, glint-blink 7s ease-in-out 3.2s infinite;
}

.vault-eye {
  position: absolute;
  width: min(72vw, 860px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: drop-shadow(0 0 46px rgba(61,247,255,.7));
  animation: slow-spin 28s linear infinite;
}

.sclera {
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 32%, rgba(247,215,234,.96) 33% 58%, transparent 59%),
    conic-gradient(from 20deg, #F7D7EA, #FFE08A, #3DF7FF, #F7D7EA, #FF3FA4, #F7D7EA);
  box-shadow: inset 0 0 56px rgba(9, 5, 26, .9), 0 0 80px rgba(255,63,164,.42);
}

.iris-ring {
  position: absolute;
  inset: 25%;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, #8DFFB5 0 9deg, #3DF7FF 9deg 18deg, #6C2DFF 18deg 25deg, #063D4A 25deg 33deg);
  box-shadow: inset 0 0 28px #09051A, 0 0 34px #3DF7FF;
  animation: pulse-ring 4.5s ease-in-out infinite;
}

.coin-pupil, .mini-pupil, .coin i, .final-pupil, .slot-core {
  position: absolute;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 39%, #FFE08A 42% 47%, #09051A 49% 56%, #FFE08A 58% 61%, transparent 64%),
    radial-gradient(circle, #09051A 0 44%, #063D4A 45% 62%, #FFE08A 63% 70%, #09051A 72%);
  box-shadow: inset 0 0 20px #000, 0 0 22px #FFE08A;
}

.coin-pupil { inset: 31%; transform: translate(calc(var(--tx, 0px) * .55), calc(var(--ty, 0px) * .55)); transition: transform .2s ease-out; }
.lash { position: absolute; left: 12%; right: 12%; height: 10%; border-radius: 50%; border: 2px dashed rgba(9,5,26,.7); }
.lash-top { top: 8%; border-bottom: 0; }
.lash-bottom { bottom: 8%; border-top: 0; }

.chrome-floor {
  position: absolute;
  left: -10%; right: -10%; bottom: 0;
  height: 34vh;
  background: linear-gradient(180deg, transparent, rgba(6,61,74,.55)), repeating-radial-gradient(ellipse at 50% 0%, rgba(247,215,234,.18) 0 2px, transparent 2px 18px);
  transform: perspective(520px) rotateX(62deg);
  transform-origin: bottom;
}

.hero-copy { position: relative; z-index: 16; text-align: center; max-width: 980px; transform: translateY(6vh); }
.scene-text { max-width: 760px; margin: 1.4rem auto 0; color: var(--blush); }
.arc-note { position: absolute; z-index: 17; color: var(--champagne); font-size: .76rem; text-shadow: 0 0 18px #FFE08A; }
.arc-note-left { left: 5vw; top: 42%; transform: rotate(-72deg); }
.arc-note-right { right: 4vw; top: 44%; transform: rotate(72deg); }

.peephole-lobby { background: radial-gradient(circle at 50% 50%, rgba(255,63,164,.24), transparent 32%), linear-gradient(135deg, #09051A, #063D4A 55%, #09051A); }
.curtain { position: absolute; top: 0; bottom: 0; width: 23vw; background: repeating-linear-gradient(90deg, rgba(255,63,164,.22) 0 24px, rgba(108,45,255,.18) 24px 48px); filter: blur(.2px); }
.curtain-left { left: 0; clip-path: polygon(0 0, 90% 0, 66% 100%, 0 100%); }
.curtain-right { right: 0; clip-path: polygon(10% 0, 100% 0, 100% 100%, 34% 100%); }
.vault-door { position: absolute; width: min(78vw, 780px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(9,5,26,.94) 0 23%, transparent 24%), conic-gradient(#FF3FA4, #3DF7FF, #6C2DFF, #8DFFB5, #FF3FA4); opacity: .9; box-shadow: inset 0 0 80px #09051A, 0 0 80px rgba(61,247,255,.3); }
.door-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(255,224,138,.64); inset: var(--i); animation: pulse-ring 5s ease-in-out infinite; }
.ring-a { --i: 8%; } .ring-b { --i: 20%; animation-delay: -1s; } .ring-c { --i: 34%; animation-delay: -2s; }
.mini-eye { position: absolute; inset: 42%; border-radius: 50%; background: radial-gradient(circle, #F7D7EA, #8DFFB5 54%, #063D4A 55%); box-shadow: 0 0 28px #8DFFB5; }
.mini-pupil { inset: 28%; transform: translate(calc(var(--tx, 0px) * .45), calc(var(--ty, 0px) * .45)); }
.tilted-receipt { position: absolute; z-index: 4; width: min(320px, 72vw); padding: 22px; background: rgba(247,215,234,.88); color: #09051A; box-shadow: 0 22px 60px rgba(9,5,26,.35), 0 0 30px rgba(255,63,164,.32); }
.tilted-receipt span, .tilted-receipt b, .tilted-receipt small { display: block; margin: 8px 0; }
.receipt-a { left: 9vw; bottom: 14vh; transform: rotate(-10deg); }
.radial-copy { position: relative; z-index: 5; max-width: 720px; margin-left: auto; text-align: right; }

.receipt-corridor { background: linear-gradient(90deg, #09051A, #063D4A 42%, #6C2DFF 72%, #09051A); align-content: center; }
.corridor-title { position: absolute; top: 9vh; left: 7vw; z-index: 5; }
.receipt-stream { position: absolute; inset: 0; transform: rotate(-8deg); }
.receipt-strip { position: absolute; left: -30vw; white-space: nowrap; padding: 12px 28px; color: #09051A; background: linear-gradient(90deg, rgba(247,215,234,.88), rgba(255,224,138,.82)); border-left: 8px dotted #09051A; border-right: 8px dotted #09051A; box-shadow: 0 0 26px rgba(255,255,255,.2); animation: receipt-drift 18s linear infinite; }
.depth-one { top: 21%; animation-duration: 16s; }
.depth-two { top: 36%; animation-duration: 22s; animation-delay: -6s; opacity: .76; transform: scale(.82); }
.depth-three { top: 52%; animation-duration: 19s; animation-delay: -10s; }
.depth-four { top: 66%; animation-duration: 25s; animation-delay: -3s; opacity: .64; transform: scale(.7); }
.depth-five { top: 80%; animation-duration: 20s; animation-delay: -13s; }
.watermark-eyes span { position: absolute; width: 15vw; aspect-ratio: 1.8; border-radius: 50%; border: 1px solid rgba(61,247,255,.2); background: radial-gradient(circle, rgba(255,224,138,.28) 0 9%, rgba(9,5,26,.85) 10% 20%, transparent 21%); opacity: .5; }
.watermark-eyes span:nth-child(1){left:7%;top:18%}.watermark-eyes span:nth-child(2){left:34%;top:28%}.watermark-eyes span:nth-child(3){left:72%;top:18%}.watermark-eyes span:nth-child(4){left:12%;top:68%}.watermark-eyes span:nth-child(5){left:54%;top:72%}.watermark-eyes span:nth-child(6){left:80%;top:56%}
.corridor-whisper { position: absolute; right: 7vw; bottom: 12vh; width: min(460px, 82vw); color: var(--blush); }

.observatory { background: radial-gradient(circle at 50% 45%, rgba(255,224,138,.16), transparent 25%), radial-gradient(circle at 70% 20%, rgba(61,247,255,.18), transparent 36%), #09051A; }
.orbit-system { position: absolute; width: min(84vw, 820px); aspect-ratio: 1; left: 4vw; top: 50%; transform: translateY(-50%); }
.orbit { position: absolute; inset: var(--inset); border: 1px solid rgba(61,247,255,.24); border-radius: 50%; animation: slow-spin var(--speed) linear infinite; }
.orbit-one { --inset: 3%; --speed: 16s; }.orbit-two { --inset: 18%; --speed: 23s; animation-direction: reverse; }.orbit-three { --inset: 31%; --speed: 11s; }
.coin { position: absolute; left: 50%; top: -22px; width: 58px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #FFE08A, #FF3FA4 54%, #09051A 56%); box-shadow: 0 0 30px #FFE08A; }
.coin i { inset: 29%; transform: translate(calc(var(--tx, 0px) * .35), calc(var(--ty, 0px) * .35)); }
.central-rosette { position: absolute; inset: 29%; border-radius: 50%; background: repeating-conic-gradient(#FF3FA4 0 8deg, #3DF7FF 8deg 16deg, #6C2DFF 16deg 24deg); box-shadow: inset 0 0 80px #09051A, 0 0 70px #FF3FA4; animation: pulse-ring 4s ease-in-out infinite; }
.central-rosette span { position: absolute; left: 48%; top: 48%; color: #FFE08A; font-family: "Monoton"; font-size: 2rem; transform: rotate(calc(var(--n) * 45deg)) translateY(-8.8rem); }
.central-rosette span:nth-child(1){--n:0}.central-rosette span:nth-child(2){--n:1}.central-rosette span:nth-child(3){--n:2}.central-rosette span:nth-child(4){--n:3}.central-rosette span:nth-child(5){--n:4}.central-rosette span:nth-child(6){--n:5}.central-rosette span:nth-child(7){--n:6}.central-rosette span:nth-child(8){--n:7}
.slot-core { inset: 38%; }
.observatory-copy { margin-right: 3vw; max-width: 610px; }
.decimal-dust span { position: absolute; color: #FFE08A; font-family: "Chivo Mono"; font-size: .8rem; text-shadow: 0 0 12px #FFE08A; animation: dust-rise 7s ease-in-out infinite; }

.ledger-pool { background: linear-gradient(180deg, #09051A, #063D4A 52%, #09051A); }
.lagoon { position: absolute; bottom: -16vh; width: 110vw; height: 58vh; border-radius: 50% 50% 0 0; background: radial-gradient(ellipse at 50% 10%, rgba(141,255,181,.36), transparent 32%), repeating-radial-gradient(ellipse at 50% 20%, rgba(247,215,234,.18) 0 2px, transparent 2px 26px), #063D4A; box-shadow: inset 0 36px 80px rgba(9,5,26,.75); }
.ripple { position: absolute; left: 50%; top: 36%; border: 1px solid rgba(61,247,255,.5); border-radius: 50%; transform: translate(-50%, -50%); animation: ripple 5s ease-out infinite; }
.ripple-one { width: 18vw; height: 5vw; }.ripple-two { width: 32vw; height: 9vw; animation-delay: -1.5s; }.ripple-three { width: 48vw; height: 14vw; animation-delay: -3s; }
.tear { position: absolute; width: 28px; height: 48px; border-radius: 60% 60% 60% 0; transform: rotate(-45deg); background: linear-gradient(135deg, #F7D7EA, #3DF7FF 45%, transparent); box-shadow: 0 0 22px #3DF7FF; animation: tear-drop 4s ease-in-out infinite; }
.tear-one { left: 35%; top: 8%; }.tear-two { right: 32%; top: 19%; animation-delay: -2s; }
.pool-copy { position: relative; z-index: 4; max-width: 840px; text-align: center; transform: translateY(-12vh); }
.ledger-loop { position: absolute; left: -8vw; right: -8vw; color: rgba(255,224,138,.7); font-size: .9rem; white-space: nowrap; text-align: center; text-shadow: 0 0 16px #FFE08A; animation: tape-loop 12s linear infinite; }
.loop-a { top: 18vh; transform: rotate(8deg); }.loop-b { bottom: 20vh; transform: rotate(-6deg); animation-direction: reverse; }

.withdrawal { background: radial-gradient(ellipse at 50% 40%, rgba(255,63,164,.22), transparent 30%), linear-gradient(180deg, #09051A, #6C2DFF 60%, #09051A); }
.atm-window { position: absolute; width: min(80vw, 820px); height: min(68vh, 620px); border-radius: 42px; background: linear-gradient(145deg, rgba(247,215,234,.08), rgba(9,5,26,.88)), radial-gradient(circle at 50% 32%, rgba(61,247,255,.36), transparent 22%); border: 1px solid rgba(247,215,234,.34); box-shadow: inset 0 0 80px #09051A, 0 0 90px rgba(255,63,164,.44); }
.slot-light { position: absolute; left: 18%; right: 18%; top: 16%; height: 18px; border-radius: 999px; background: linear-gradient(90deg, transparent, #3DF7FF, #FFE08A, #FF3FA4, transparent); box-shadow: 0 0 35px #3DF7FF; animation: glint-blink 3.8s ease-in-out infinite; }
.final-eye { position: absolute; left: 50%; top: 43%; width: min(42vw, 340px); aspect-ratio: 1.85; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, #8DFFB5 0 16%, #3DF7FF 17% 31%, #F7D7EA 32% 56%, transparent 57%), conic-gradient(#FF3FA4, #3DF7FF, #FFE08A, #6C2DFF, #FF3FA4); box-shadow: 0 0 54px #8DFFB5; }
.final-pupil { width: 22%; aspect-ratio: 1; left: 39%; top: 32%; transform: translate(calc(var(--tx, 0px) * .4), calc(var(--ty, 0px) * .4)); }
.last-receipt { position: absolute; left: 50%; bottom: 10%; width: min(520px, 78%); transform: translateX(-50%) rotate(2deg); padding: 24px; color: #09051A; background: #F7D7EA; box-shadow: 0 0 40px rgba(255,224,138,.36); }
.last-receipt span, .last-receipt b, .last-receipt small { display: block; margin: 8px 0; }
.withdraw-copy { position: relative; z-index: 4; max-width: 920px; text-align: center; transform: translateY(-32vh); }

@keyframes glint-open { 0% { transform: scaleX(.05); opacity: 0; } 45% { opacity: 1; } 100% { transform: scaleX(1); opacity: .72; } }
@keyframes glint-blink { 0%, 100% { opacity: .34; filter: blur(0); } 48% { opacity: 1; filter: blur(1px); } 55% { opacity: .08; } 62% { opacity: .9; } }
@keyframes aperture-breathe { 0%, 100% { transform: scaleY(.96); } 50% { transform: scaleY(1.06); } }
@keyframes slow-spin { to { rotate: 360deg; } }
@keyframes pulse-ring { 0%, 100% { transform: scale(.96); filter: saturate(1); } 50% { transform: scale(1.04); filter: saturate(1.6); } }
@keyframes receipt-drift { from { translate: -25vw 0; } to { translate: 150vw 0; } }
@keyframes dust-rise { 0%, 100% { transform: translateY(20px) scale(.8); opacity: 0; } 25%, 70% { opacity: 1; } 50% { transform: translateY(-60px) scale(1.2); } }
@keyframes ripple { from { opacity: .8; transform: translate(-50%, -50%) scale(.35); } to { opacity: 0; transform: translate(-50%, -50%) scale(1.75); } }
@keyframes tear-drop { 0%, 100% { transform: translateY(-20px) rotate(-45deg); opacity: .2; } 50% { transform: translateY(40px) rotate(-45deg); opacity: .9; } }
@keyframes tape-loop { to { translate: 12vw 0; } }
@keyframes fog-drift { from { transform: translate3d(-4vw, -3vh, 0) scale(.95); } to { transform: translate3d(6vw, 5vh, 0) scale(1.1); } }

@media (max-width: 780px) {
  .radial-copy, .observatory-copy { text-align: center; margin: 0; }
  .orbit-system { opacity: .55; left: 50%; transform: translate(-50%, -50%); }
  .receipt-a { left: 50%; transform: translateX(-50%) rotate(-8deg); bottom: 8vh; }
  .curtain { width: 16vw; }
  .withdraw-copy { transform: translateY(-36vh); }
  .central-rosette span { transform: rotate(calc(var(--n) * 45deg)) translateY(-5.2rem); }
}