:root {
  --pink: #FF4FB8;
  --night: #170926;
  --yellow: #FFE84D;
  --cyan: #20E7FF;
  --lime: #9BFF4A;
  --coral: #FF6B5F;
  --cream: #FFF4D6;
  --baloo: "Baloo 2", "Arial Rounded MT Bold", system-ui, sans-serif;
  --nunito: "Nunito", "Trebuchet MS", system-ui, sans-serif;
  --bomb: "Cherry Bomb One", "Cooper Black", fantasy;
}

* { box-sizing: border-box; }

html { background: var(--night); }

body {
  margin: 0;
  color: var(--cream);
  font-family: var(--nunito);
  background:
    radial-gradient(circle at 15% 8%, rgba(255, 79, 184, .28), transparent 28rem),
    radial-gradient(circle at 85% 20%, rgba(32, 231, 255, .2), transparent 24rem),
    linear-gradient(180deg, #170926 0%, #240934 45%, #170926 100%);
  overflow-x: hidden;
  cursor: crosshair;
}

.broadcast-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .36;
  background-image:
    repeating-linear-gradient(0deg, rgba(32, 231, 255, .12) 0 1px, transparent 1px 6px),
    radial-gradient(circle, rgba(255, 244, 214, .18) 0 1px, transparent 1.5px);
  background-size: 100% 7px, 19px 19px;
  mix-blend-mode: screen;
  animation: scanDrift 5s linear infinite;
}

.cursor-light {
  position: fixed;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(155, 255, 74, .28), rgba(255, 79, 184, .16) 35%, transparent 68%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 19;
  mix-blend-mode: screen;
  opacity: .85;
}

.trail-field { position: fixed; inset: 0; pointer-events: none; z-index: 30; }

.drop {
  position: fixed;
  width: 13px;
  height: 13px;
  border-radius: 70% 35% 70% 35%;
  background: var(--lime);
  box-shadow: 0 0 18px currentColor;
  animation: dropFade .75s ease-out forwards;
}

.drop:nth-child(2n) { background: var(--pink); color: var(--pink); }
.drop:nth-child(3n) { background: var(--cyan); color: var(--cyan); }

.signal-strip {
  width: min(100%, 980px);
  margin: 0 auto;
  position: relative;
  isolation: isolate;
  background: linear-gradient(90deg, transparent, rgba(255, 244, 214, .05) 12%, rgba(23, 9, 38, .76) 50%, rgba(255, 244, 214, .05) 88%, transparent);
}

.side-noise {
  position: fixed;
  top: 0;
  bottom: 0;
  width: clamp(24px, 7vw, 94px);
  z-index: 2;
  opacity: .75;
  background:
    repeating-linear-gradient(180deg, rgba(255, 232, 77, .55) 0 7px, transparent 7px 24px),
    repeating-linear-gradient(90deg, rgba(32, 231, 255, .4) 0 2px, transparent 2px 9px);
  filter: blur(.2px);
  animation: sideBuzz 1.4s steps(5) infinite;
}
.side-noise.left { left: 0; clip-path: polygon(0 0, 78% 0, 52% 100%, 0 100%); }
.side-noise.right { right: 0; clip-path: polygon(22% 0, 100% 0, 100% 100%, 48% 100%); }

.channel-dial {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px 15px;
  border: 2px solid rgba(255, 244, 214, .5);
  border-radius: 999px;
  color: var(--cream);
  background: rgba(23, 9, 38, .72);
  box-shadow: 0 0 28px rgba(255, 79, 184, .28), inset 0 0 18px rgba(32, 231, 255, .14);
  font: 800 13px/1 var(--nunito);
  letter-spacing: .08em;
}

.rec-heart, .heart-dot {
  width: 16px;
  height: 16px;
  background: var(--pink);
  transform: rotate(45deg);
  box-shadow: 0 0 18px var(--pink);
  animation: heartBlink .85s infinite alternate;
}
.rec-heart::before, .rec-heart::after, .heart-dot::before, .heart-dot::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: inherit;
}
.rec-heart::before, .heart-dot::before { left: -8px; }
.rec-heart::after, .heart-dot::after { top: -8px; }

.scene {
  min-height: 100vh;
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: clamp(90px, 10vw, 140px) clamp(22px, 6vw, 72px);
  overflow: hidden;
}

.scene::before {
  content: "";
  position: absolute;
  inset: 8% 4%;
  border: 2px solid rgba(255, 244, 214, .14);
  border-radius: 42px;
  pointer-events: none;
  box-shadow: inset 0 0 45px rgba(32, 231, 255, .1);
}

.scan-frame {
  position: relative;
  width: min(100%, 780px);
  min-height: 560px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 44px;
  border-radius: 46px;
  background:
    radial-gradient(circle at 45% 35%, rgba(255, 79, 184, .5), transparent 18rem),
    radial-gradient(circle at 58% 58%, rgba(32, 231, 255, .45), transparent 16rem),
    radial-gradient(circle at 30% 70%, rgba(255, 232, 77, .34), transparent 12rem),
    rgba(23, 9, 38, .68);
  border: 3px solid rgba(255, 244, 214, .32);
  box-shadow: 0 0 90px rgba(255, 79, 184, .36), inset 0 0 70px rgba(23, 9, 38, .5);
  animation: aperturePulse 6s ease-in-out infinite;
}

.timestamp, .episode {
  margin: 0 0 18px;
  color: var(--cream);
  background: rgba(23, 9, 38, .68);
  border: 2px solid rgba(32, 231, 255, .55);
  border-radius: 999px;
  padding: 8px 15px;
  font: 800 13px/1 var(--nunito);
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: 0 0 18px rgba(32, 231, 255, .24);
}

.episode.yellow { border-color: var(--yellow); color: var(--yellow); }
.episode.pink { border-color: var(--pink); color: var(--pink); }

.heart-dot { position: absolute; top: 34px; right: 38px; }

h1, h2 {
  margin: 0;
  font-family: var(--baloo);
  font-weight: 800;
  line-height: .88;
  text-align: center;
  letter-spacing: -.04em;
}

h1 {
  font-size: clamp(86px, 17vw, 198px);
  color: var(--cream);
  text-shadow: 5px 0 var(--pink), -5px 0 var(--cyan), 0 12px 0 rgba(23, 9, 38, .55), 0 0 42px var(--pink);
  animation: titleSwell 2.1s cubic-bezier(.16, 1, .3, 1) both;
}

h2 {
  max-width: 840px;
  font-size: clamp(52px, 9vw, 116px);
  color: var(--cream);
  text-shadow: 4px 4px 0 var(--pink), -3px -2px 0 rgba(32, 231, 255, .85);
}

.subtitle, .story, .cam-glass p {
  max-width: 610px;
  margin: 24px auto 0;
  font-size: clamp(18px, 2.4vw, 26px);
  line-height: 1.35;
  color: var(--cream);
}
.story.narrow { max-width: 520px; text-align: center; }

.test-pattern { display: flex; gap: 8px; margin-top: 32px; transform: rotate(-2deg); }
.test-pattern span { width: 58px; height: 24px; border-radius: 999px; }
.test-pattern span:nth-child(1) { background: var(--pink); }
.test-pattern span:nth-child(2) { background: var(--yellow); }
.test-pattern span:nth-child(3) { background: var(--cyan); }
.test-pattern span:nth-child(4) { background: var(--lime); }
.test-pattern span:nth-child(5) { background: var(--coral); }

.wave-ribbon {
  position: absolute;
  width: min(1180px, 128vw);
  height: auto;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 0 16px rgba(32, 231, 255, .65));
  transform-origin: center;
  transition: transform .28s ease-out;
}
.wave-ribbon path {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 28;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ribbon-a { bottom: 6vh; left: 50%; transform: translateX(-50%) rotate(-4deg); }
.ribbon-b { bottom: 12vh; left: 50%; transform: translateX(-50%) rotate(5deg); }

.mesh {
  position: absolute;
  inset: 7% -8%;
  border-radius: 40%;
  background:
    radial-gradient(circle at 20% 35%, var(--pink), transparent 26%),
    radial-gradient(circle at 55% 20%, var(--cyan), transparent 28%),
    radial-gradient(circle at 70% 62%, var(--yellow), transparent 24%),
    radial-gradient(circle at 35% 78%, var(--coral), transparent 26%);
  filter: blur(24px) saturate(1.4);
  opacity: .45;
  z-index: -1;
  animation: meshFloat 9s ease-in-out infinite alternate;
}

.gum-orbit { position: relative; width: min(640px, 80vw); height: 200px; margin-top: 34px; }
.gum-orbit span {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, var(--cream), var(--pink) 35%, rgba(255,79,184,.22) 70%);
  box-shadow: inset -12px -14px 28px rgba(23, 9, 38, .24), 0 0 34px rgba(255, 79, 184, .5);
  animation: bubbleBob 4s ease-in-out infinite;
}
.gum-orbit span:nth-child(1) { width: 92px; height: 92px; left: 8%; top: 22%; }
.gum-orbit span:nth-child(2) { width: 64px; height: 64px; left: 36%; top: 4%; animation-delay: -.9s; background: radial-gradient(circle at 30% 25%, var(--cream), var(--cyan) 38%, transparent 72%); }
.gum-orbit span:nth-child(3) { width: 118px; height: 118px; right: 8%; top: 30%; animation-delay: -1.5s; background: radial-gradient(circle at 30% 25%, var(--cream), var(--yellow) 38%, transparent 72%); }
.gum-orbit span:nth-child(4) { width: 45px; height: 45px; left: 58%; bottom: 0; animation-delay: -2.3s; background: var(--lime); }

.sticker-wall {
  position: relative;
  width: min(760px, 94vw);
  min-height: 390px;
  margin: 28px auto;
}
.sticker {
  position: absolute;
  display: inline-block;
  padding: 18px 28px;
  border: 4px solid var(--night);
  border-radius: 24px 44px 20px 38px;
  box-shadow: 10px 12px 0 rgba(23, 9, 38, .45), 0 0 30px rgba(255, 244, 214, .16);
  color: var(--night);
  font-family: var(--bomb);
  font-size: clamp(25px, 5vw, 54px);
  transition: transform .35s cubic-bezier(.2, 1.6, .35, 1);
}
.sticker:hover { transform: rotate(0deg) translateY(-14px) scale(1.08); }
.sticker.bomb { left: 7%; top: 10%; background: var(--pink); transform: rotate(-10deg); }
.sticker.lime { right: 12%; top: 2%; background: var(--lime); transform: rotate(8deg); }
.sticker.coral { left: 18%; bottom: 18%; background: var(--coral); transform: rotate(12deg); }
.sticker.cyan { right: 3%; bottom: 22%; background: var(--cyan); transform: rotate(-7deg); font-size: clamp(20px, 3.4vw, 40px); }
.sticker.cream { left: 31%; top: 43%; background: var(--cream); transform: rotate(-2deg); font: 800 clamp(18px, 2.6vw, 28px)/1 var(--nunito); text-decoration: line-through wavy var(--pink) 3px; }

.wrapper-divider {
  width: min(680px, 85vw);
  height: 56px;
  margin-top: 20px;
  background: repeating-linear-gradient(90deg, var(--yellow) 0 32px, var(--pink) 32px 64px, var(--cyan) 64px 96px, var(--lime) 96px 128px);
  clip-path: polygon(0 50%, 6% 0, 12% 50%, 18% 0, 24% 50%, 30% 0, 36% 50%, 42% 0, 48% 50%, 54% 0, 60% 50%, 66% 0, 72% 50%, 78% 0, 84% 50%, 90% 0, 100% 50%, 90% 100%, 84% 50%, 78% 100%, 72% 50%, 66% 100%, 60% 50%, 54% 100%, 48% 50%, 42% 100%, 36% 50%, 30% 100%, 24% 50%, 18% 100%, 12% 50%, 6% 100%);
  filter: drop-shadow(0 0 20px rgba(255, 232, 77, .55));
  animation: wrapperSlide 3s linear infinite;
}

.cam-shell {
  width: min(790px, 94vw);
  padding: 18px;
  border-radius: 56px;
  background: linear-gradient(135deg, var(--cyan), var(--pink), var(--yellow));
  box-shadow: 0 0 80px rgba(32, 231, 255, .36), 0 30px 0 rgba(23, 9, 38, .38);
  transition: transform .2s ease-out, border-radius .2s ease-out;
}
.cam-glass {
  min-height: 520px;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: 44px;
  border-radius: 42px;
  background:
    linear-gradient(rgba(255,255,255,.04), rgba(255,255,255,.02)),
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 244, 214, .28), transparent 18rem),
    rgba(23, 9, 38, .82);
  border: 3px solid rgba(255, 244, 214, .38);
}
.cam-rec { margin-bottom: 18px; color: var(--pink); font-weight: 800; letter-spacing: .12em; }
.cam-rec i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 14px var(--pink); }
.pixel-blush { width: 170px; height: 44px; margin-top: 28px; background: repeating-linear-gradient(90deg, var(--pink) 0 18px, transparent 18px 28px); opacity: .75; }

.confession-line { width: min(1000px, 116vw); margin: 36px 0 20px; filter: drop-shadow(0 0 18px var(--lime)); }
.confession-line path {
  fill: none;
  stroke: var(--lime);
  stroke-width: 18;
  stroke-linecap: round;
  stroke-dasharray: 1280;
  stroke-dashoffset: var(--draw, 1280);
}
.karaoke { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 10px 0 0; }
.karaoke span { padding: 8px 18px; border-radius: 999px; background: var(--cream); color: var(--night); font: 800 22px/1 var(--baloo); animation: lyricWobble 1.8s ease-in-out infinite; }
.karaoke span:nth-child(2) { animation-delay: -.4s; background: var(--cyan); }
.karaoke span:nth-child(3) { animation-delay: -.8s; background: var(--yellow); }
.karaoke span:nth-child(4) { animation-delay: -1.2s; background: var(--pink); }

.scene-fade { background: radial-gradient(circle at 50% 60%, rgba(255, 79, 184, .22), transparent 32rem); }
.heart-cloud { position: relative; width: min(720px, 90vw); height: 240px; margin-top: 28px; }
.heart-cloud span { position: absolute; color: var(--pink); font: 800 56px/1 var(--baloo); text-shadow: 0 0 20px var(--pink); animation: heartFloat 5s ease-in-out infinite; }
.heart-cloud span:nth-child(1) { left: 8%; top: 30%; color: var(--cyan); }
.heart-cloud span:nth-child(2) { left: 23%; top: 3%; animation-delay: -.8s; }
.heart-cloud span:nth-child(3) { left: 44%; top: 40%; color: var(--yellow); animation-delay: -1.4s; }
.heart-cloud span:nth-child(4) { right: 22%; top: 9%; color: var(--lime); animation-delay: -2s; }
.heart-cloud span:nth-child(5) { right: 8%; top: 42%; animation-delay: -2.7s; }
.heart-cloud span:nth-child(6) { left: 52%; bottom: 5%; color: var(--coral); animation-delay: -3.2s; }
.final-stamp { font-family: var(--bomb); font-size: clamp(30px, 6vw, 70px); color: var(--night); background: var(--lime); padding: 12px 28px; border-radius: 20px; transform: rotate(-5deg); box-shadow: 10px 10px 0 var(--pink); }

@keyframes scanDrift { to { background-position: 0 70px, 19px 38px; } }
@keyframes sideBuzz { 50% { transform: translateY(-12px) skewY(3deg); } }
@keyframes heartBlink { from { opacity: .35; } to { opacity: 1; } }
@keyframes titleSwell { from { transform: scale(.72); filter: blur(8px); opacity: .15; } to { transform: scale(1); filter: blur(0); opacity: 1; } }
@keyframes aperturePulse { 50% { border-radius: 28px 70px 34px 68px; transform: scaleX(.95); } }
@keyframes meshFloat { to { transform: translate3d(4%, -3%, 0) rotate(8deg) scale(1.09); } }
@keyframes bubbleBob { 50% { transform: translateY(-28px) scale(1.08); } }
@keyframes wrapperSlide { to { background-position: 128px 0; } }
@keyframes lyricWobble { 50% { transform: translateY(-8px) rotate(4deg); } }
@keyframes heartFloat { 50% { transform: translateY(-38px) rotate(12deg) scale(1.18); } }
@keyframes dropFade { to { transform: translate(var(--dx), var(--dy)) scale(.2) rotate(160deg); opacity: 0; } }

@media (max-width: 640px) {
  .scene { padding-inline: 16px; }
  .scan-frame, .cam-glass { padding: 28px 18px; }
  .sticker-wall { min-height: 470px; }
  .sticker.cyan { right: 0; bottom: 6%; }
  .sticker.cream { left: 9%; top: 56%; }
  .channel-dial { top: 10px; }
}