:root {
  --obsidian: #070711;
  --blush: #FF7AB8;
  --chrome: #DDE7FF;
  --cyan: #72F6FF;
  --lavender: #A98CFF;
  --pearl: #FFF5E8;
  --lime: #C9FF4A;
  --ring: 0deg;
  --mx: 50vw;
  --my: 50vh;
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  min-height: 100%;
  overflow: hidden;
  background: var(--obsidian);
  color: var(--pearl);
  font-family: "Nunito Sans", "Avenir Next", "Segoe UI", system-ui, sans-serif;
}

button { font: inherit; }

.webcam-stage {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255,122,184,.2), transparent 23vmin),
    radial-gradient(circle at 82% 18%, rgba(114,246,255,.14), transparent 24vmin),
    radial-gradient(ellipse at 25% 90%, rgba(169,140,255,.24), transparent 34vmin),
    linear-gradient(135deg, #070711 0%, #101026 44%, #070711 100%);
}

.mirror-noise,
.scan-bloom,
.sparkle-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mirror-noise {
  opacity: .22;
  mix-blend-mode: screen;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(221,231,255,.04) 6px),
    radial-gradient(circle at 15% 30%, rgba(255,245,232,.18) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 60%, rgba(114,246,255,.16) 0 1px, transparent 2px);
  background-size: auto, 42px 42px, 64px 64px;
}

.scan-bloom {
  background:
    conic-gradient(from 120deg at 50% 50%, transparent, rgba(221,231,255,.08), transparent 16%, rgba(255,122,184,.12), transparent 30%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 18px, rgba(114,246,255,.035) 19px 20px);
  filter: blur(.2px);
  animation: shimmer 14s linear infinite;
}

.scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.05) rotate(.001deg);
  transition: opacity .8s ease, transform .9s cubic-bezier(.2,.8,.15,1);
  pointer-events: none;
}

.scene.is-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.scene-copy {
  position: absolute;
  z-index: 4;
  max-width: min(560px, 78vw);
  text-shadow: 0 0 24px rgba(255,122,184,.24);
}

.micro,
.timestamp,
.chrome-tag,
.curved-title,
.instruction,
.led-rail span,
.rec {
  font-family: "DotGothic16", "SFMono-Regular", "Courier New", monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.wordmark,
h2,
.curved-title {
  font-family: "Orbitron", "Eurostile", "Arial Narrow", sans-serif;
  font-weight: 400;
  letter-spacing: .14em;
}

.serif { font-family: "DM Serif Display", Georgia, serif; letter-spacing: .01em; }

.wordmark {
  margin: .15em 0;
  font-size: clamp(3.1rem, 10vw, 9.4rem);
  line-height: .84;
  background: linear-gradient(105deg, var(--chrome), var(--pearl), var(--blush), var(--lavender), var(--cyan), var(--chrome));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(221,231,255,.36));
}

.wordmark em {
  display: block;
  font-size: .22em;
  font-style: normal;
  color: var(--chrome);
  -webkit-text-fill-color: var(--chrome);
  opacity: .78;
}

.reflected { transform: scaleX(-1) rotate(-7deg); opacity: .52; transition: transform 1.2s ease, opacity 1s ease; }
.stage-awake .reflected { transform: scaleX(1) rotate(0deg); opacity: 1; }

.opener-copy { left: 7vw; top: 14vh; }
.focus-copy { right: 9vw; top: 18vh; text-align: right; }
.vanity-copy { left: 9vw; bottom: 13vh; }
.confession-copy { right: 8vw; bottom: 12vh; text-align: right; }
.gallery-copy { left: 8vw; top: 14vh; }

h2 { margin: .15em 0; font-size: clamp(2rem, 5.3vw, 5.6rem); line-height: .95; }
.serif h2, h2.serif { font-size: clamp(2.4rem, 7vw, 7.8rem); font-weight: 400; }
p { font-size: clamp(1rem, 1.7vw, 1.35rem); line-height: 1.5; }

.lens-system {
  position: absolute;
  z-index: 5;
  width: clamp(330px, 49vmin, 620px);
  aspect-ratio: 1;
  left: 9vw;
  bottom: 7vh;
  transform: rotate(var(--ring));
  transition: left .9s ease, top .9s ease, bottom .9s ease, width .9s ease, transform .7s ease;
}

.webcam-stage[data-scene="1"] .lens-system { left: calc(50vw - min(31vmin, 310px)); bottom: calc(50vh - min(31vmin, 310px)); width: clamp(430px, 62vmin, 720px); }
.webcam-stage[data-scene="2"] .lens-system { left: 53vw; bottom: 9vh; width: clamp(480px, 75vmin, 900px); }
.webcam-stage[data-scene="3"] .lens-system { left: -12vw; bottom: -18vh; width: clamp(640px, 102vmin, 1180px); }
.webcam-stage[data-scene="4"] .lens-system { left: 58vw; bottom: -26vh; width: clamp(560px, 96vmin, 1100px); }

.focus-ticks,
.outer-ring,
.chrome-body,
.iris,
.glass { position: absolute; inset: 0; border-radius: 50%; }

.focus-ticks {
  background: repeating-conic-gradient(from 3deg, rgba(221,231,255,.95) 0 1deg, transparent 1deg 8deg, rgba(255,122,184,.7) 8deg 9deg, transparent 9deg 18deg);
  mask: radial-gradient(circle, transparent 0 44%, #000 45% 49%, transparent 50%);
  opacity: .78;
  animation: tickSpin 18s linear infinite;
}

.outer-ring {
  inset: 7%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,245,232,.95), transparent 10%),
    conic-gradient(from 40deg, var(--chrome), var(--lavender), var(--blush), var(--pearl), var(--cyan), var(--chrome));
  box-shadow: 0 0 44px rgba(169,140,255,.35), inset 0 0 32px rgba(7,7,17,.62);
}

.chrome-body {
  inset: 14%;
  background:
    linear-gradient(135deg, rgba(255,245,232,.7), transparent 22% 70%, rgba(114,246,255,.42)),
    conic-gradient(from 210deg, #7e86ad, var(--chrome), var(--blush), var(--lavender), #9ba8cf, var(--pearl), #717a9f);
  box-shadow: inset 0 9px 26px rgba(255,245,232,.44), inset 0 -22px 44px rgba(7,7,17,.58), 0 26px 76px rgba(0,0,0,.52);
}

.iris {
  inset: 22%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, #05050d 0 18%, #15142f 38%, #03030a 70%);
  box-shadow: inset 0 0 36px #000, 0 0 38px rgba(114,246,255,.26);
}

.iris-blade {
  position: absolute;
  inset: -10%;
  background: linear-gradient(120deg, rgba(7,7,17,.96), rgba(33,33,54,.94));
  transform-origin: 50% 50%;
  clip-path: polygon(50% 50%, 100% 0, 100% 100%);
  transition: transform 1.1s cubic-bezier(.15,.85,.18,1), opacity .8s ease;
}
.b1 { transform: rotate(0deg) scale(1.25); }
.b2 { transform: rotate(90deg) scale(1.25); }
.b3 { transform: rotate(180deg) scale(1.25); }
.b4 { transform: rotate(270deg) scale(1.25); }
.stage-awake .b1 { transform: rotate(28deg) translateX(32%) scale(.72); opacity: .45; }
.stage-awake .b2 { transform: rotate(118deg) translateX(32%) scale(.72); opacity: .45; }
.stage-awake .b3 { transform: rotate(208deg) translateX(32%) scale(.72); opacity: .45; }
.stage-awake .b4 { transform: rotate(298deg) translateX(32%) scale(.72); opacity: .45; }

.glass {
  inset: 15%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,245,232,.72), transparent 12%),
    radial-gradient(circle at 63% 58%, rgba(255,122,184,.35), transparent 21%),
    repeating-linear-gradient(8deg, rgba(114,246,255,.08) 0 1px, transparent 1px 7px),
    radial-gradient(circle, rgba(169,140,255,.48), rgba(7,7,17,.8) 60%);
  opacity: .25;
  transform: scale(.35);
  transition: opacity 1s ease, transform 1s ease;
}
.stage-awake .glass { opacity: 1; transform: scale(1); }

.lens-word {
  position: absolute;
  inset: auto 0 38% 0;
  text-align: center;
  font-family: "Orbitron", sans-serif;
  letter-spacing: .25em;
  color: rgba(255,245,232,.42);
  transform: scaleX(-1) rotate(-9deg);
  font-size: clamp(1.3rem, 5vmin, 4.2rem);
}

.standby-led {
  position: absolute;
  z-index: 7;
  right: 19%;
  top: 26%;
  width: 8%;
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: radial-gradient(circle, var(--pearl), var(--blush) 28%, #8f244f 60%, #210610 100%);
  box-shadow: 0 0 18px 6px rgba(255,122,184,.75), 0 0 48px rgba(255,122,184,.55);
  animation: ledPulse 1.35s ease-in-out infinite;
}

.stage-awake .standby-led { background: radial-gradient(circle, var(--pearl), var(--lime) 38%, #628318 70%); box-shadow: 0 0 20px rgba(201,255,74,.8); }

.decal {
  position: absolute;
  left: 24%;
  top: 22%;
  color: rgba(7,7,17,.44);
  font-family: "Orbitron", sans-serif;
  letter-spacing: .22em;
  transform: rotate(-18deg) scaleX(-1);
}

.webcam-lashes { position: absolute; inset: 4% 25% auto; height: 24%; display: flex; justify-content: space-around; }
.webcam-lashes i { width: 2px; height: 55%; background: linear-gradient(var(--pearl), transparent); transform-origin: top; box-shadow: 0 0 8px var(--cyan); }
.webcam-lashes i:nth-child(2n) { height: 75%; transform: rotate(10deg); }
.webcam-lashes i:nth-child(3n) { transform: rotate(-12deg); }

.autofocus {
  position: absolute;
  width: 20%;
  aspect-ratio: 1;
  left: 40%;
  top: 40%;
  border: 1px solid var(--lime);
  box-shadow: 0 0 18px rgba(201,255,74,.5);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.8);
}
.autofocus.ping { animation: focusPing .45s ease; }

.led-rail {
  position: absolute;
  z-index: 9;
  right: 3vw;
  top: 50%;
  display: grid;
  gap: 13px;
  transform: translateY(-50%);
}
.scene-dot {
  position: relative;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(221,231,255,.48);
  border-radius: 50%;
  background: rgba(221,231,255,.14);
  padding: 0;
  cursor: pointer;
}
.scene-dot.is-active { background: var(--blush); box-shadow: 0 0 18px var(--blush); }
.scene-dot span { position: absolute; right: 24px; top: -4px; color: var(--chrome); font-size: 10px; opacity: 0; transition: opacity .25s ease; white-space: nowrap; }
.scene-dot:hover span, .scene-dot.is-active span { opacity: 1; }

.sticker,
.chrome-tag,
.window-scrap,
.preview-pane,
.after-card {
  border: 1px solid rgba(221,231,255,.35);
  background: linear-gradient(135deg, rgba(221,231,255,.17), rgba(169,140,255,.1), rgba(255,122,184,.09));
  box-shadow: inset 0 1px rgba(255,245,232,.38), 0 20px 54px rgba(0,0,0,.28);
  backdrop-filter: blur(14px);
}

.top-left { position: absolute; left: 4vw; top: 4vh; padding: 9px 12px; border-radius: 16px 16px 16px 3px; }
.chrome-tag { position: absolute; right: 10vw; bottom: 9vh; padding: 12px 18px; border-radius: 999px; transform: rotate(-5deg); color: var(--chrome); }
.curved-title { position: absolute; left: 9vw; top: 12vh; font-size: clamp(2rem, 7vw, 7rem); color: rgba(221,231,255,.18); transform: rotate(-14deg); }

.bead-orbit { position: absolute; inset: 13vh 13vw; animation: tickSpin 16s linear infinite reverse; pointer-events: none; }
.bead-orbit span { position: absolute; width: 14px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--pearl), var(--blush)); box-shadow: 0 0 14px var(--blush); }
.bead-orbit span:nth-child(1) { left: 20%; top: 8%; }
.bead-orbit span:nth-child(2) { right: 12%; top: 18%; background: radial-gradient(circle, var(--pearl), var(--cyan)); }
.bead-orbit span:nth-child(3) { right: 18%; bottom: 16%; }
.bead-orbit span:nth-child(4) { left: 16%; bottom: 12%; background: radial-gradient(circle, var(--pearl), var(--lavender)); }
.bead-orbit span:nth-child(5) { left: 46%; top: 0; background: radial-gradient(circle, var(--pearl), var(--lime)); }
.bead-orbit span:nth-child(6) { left: 48%; bottom: 0; }

.vanity-window { position: absolute; right: 8vw; top: 11vh; width: min(360px, 70vw); padding: 22px; border-radius: 28px 28px 6px 28px; transform: rotate(7deg); }
.vanity-window b { color: var(--cyan); font-family: "DotGothic16", monospace; }
.mini-cd { position: absolute; right: 24vw; bottom: 11vh; width: 18vmin; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--cyan), var(--pearl), var(--blush), var(--lavender), var(--cyan)); opacity: .85; box-shadow: inset 0 0 0 4vmin rgba(7,7,17,.45), 0 0 40px rgba(114,246,255,.26); }
.strap { position: absolute; right: 6vw; bottom: 18vh; display: grid; gap: 10px; transform: rotate(-12deg); }
.strap i { width: 44px; height: 16px; border-radius: 999px; border: 1px solid rgba(255,245,232,.5); background: rgba(255,122,184,.2); }

.preview-pane { position: absolute; width: min(360px, 72vw); min-height: 180px; padding: 20px; border-radius: 16px; overflow: hidden; }
.preview-pane::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 6px, rgba(114,246,255,.08) 7px); animation: scan 3s linear infinite; }
.preview-pane p, .preview-pane span { position: relative; }
.pane-a { left: 12vw; top: 14vh; transform: skew(-5deg) rotate(-3deg); }
.pane-b { right: 20vw; top: 42vh; transform: skew(4deg) rotate(6deg); }
.rec { color: var(--lime); text-shadow: 0 0 12px var(--lime); }

.pixel-heart { position: absolute; width: 12px; height: 12px; background: var(--blush); box-shadow: 12px 0 var(--blush), 24px 0 var(--blush), -12px 12px var(--blush), 0 12px var(--blush), 12px 12px var(--blush), 24px 12px var(--blush), 36px 12px var(--blush), 0 24px var(--blush), 12px 24px var(--blush), 24px 24px var(--blush), 12px 36px var(--blush); image-rendering: pixelated; animation: floatHeart 5s ease-in-out infinite; }
.h1 { left: 48vw; top: 18vh; }
.h2 { left: 16vw; bottom: 18vh; transform: scale(.75); animation-delay: -2s; }

.after-grid { position: absolute; inset: 18vh 8vw 10vh 34vw; display: grid; grid-template-columns: repeat(2, minmax(130px, 1fr)); gap: 18px; transform: rotate(5deg); }
.after-card { border-radius: 30px; display: grid; place-items: center; min-height: 24vh; background-image: radial-gradient(circle at 35% 24%, rgba(255,245,232,.35), transparent 18%), repeating-linear-gradient(90deg, rgba(114,246,255,.08) 0 2px, transparent 2px 12px); }
.after-card span { font-family: "DM Serif Display", Georgia, serif; font-size: clamp(2rem, 5vw, 5rem); opacity: .55; transform: scaleX(-1); color: var(--pearl); }

.spark {
  position: absolute;
  z-index: 10;
  width: 7px;
  height: 7px;
  pointer-events: none;
  background: var(--pearl);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: sparkGone .8s ease forwards;
  filter: drop-shadow(0 0 8px var(--cyan));
}

.instruction { position: absolute; left: 50%; bottom: 4vh; transform: translateX(-50%); color: rgba(255,245,232,.56); font-size: 11px; z-index: 11; }

@keyframes ledPulse { 0%, 100% { transform: scale(.9); opacity: .72; } 50% { transform: scale(1.14); opacity: 1; } }
@keyframes shimmer { to { transform: rotate(360deg) scale(1.05); } }
@keyframes tickSpin { to { transform: rotate(360deg); } }
@keyframes scan { to { transform: translateY(18px); } }
@keyframes focusPing { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.25); } 35% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); } }
@keyframes sparkGone { to { opacity: 0; transform: translateY(-22px) scale(.2) rotate(90deg); } }
@keyframes floatHeart { 0%, 100% { translate: 0 0; } 50% { translate: 0 -24px; } }

@media (max-width: 760px) {
  .lens-system { left: -12vw; bottom: 4vh; width: 78vmin; }
  .webcam-stage[data-scene="1"] .lens-system { left: 8vw; bottom: 19vh; width: 84vmin; }
  .scene-copy { max-width: 84vw; }
  .opener-copy, .focus-copy, .vanity-copy, .confession-copy, .gallery-copy { left: 6vw; right: auto; top: 10vh; bottom: auto; text-align: left; }
  .after-grid { inset: 38vh 6vw 8vh 6vw; }
  .led-rail { right: 5vw; }
}