:root {
  color-scheme: dark;
  --ink: #fff8fd;
  --muted: rgba(255, 248, 253, .72);
  --pink: #ff3fd7;
  --cyan: #20e7ff;
  --lime: #c8ff35;
  --yellow: #ffd447;
  --orange: #ff7b2f;
  --black: #05050a;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overflow-x: hidden; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #05050a;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    radial-gradient(circle at 50% 42%, rgba(255,63,215,.28), transparent 20rem),
    radial-gradient(circle at 18% 74%, rgba(32,231,255,.18), transparent 24rem),
    radial-gradient(circle at 82% 18%, rgba(200,255,53,.14), transparent 22rem),
    linear-gradient(135deg, #05050a 0%, #110816 43%, #07191e 100%);
  background-size: 42px 42px, 42px 42px, auto, auto, auto, auto;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .26;
  background: repeating-linear-gradient(0deg, transparent 0 5px, rgba(255,255,255,.08) 6px 7px);
  mix-blend-mode: overlay;
}

#vibe-field, .cursor-glow { position: fixed; inset: 0; pointer-events: none; }
#vibe-field { z-index: 1; }
.cursor-glow {
  z-index: 2;
  background: radial-gradient(circle 230px at var(--mx, 50%) var(--my, 50%), rgba(255,63,215,.27), transparent 66%);
  mix-blend-mode: screen;
}

.stage {
  position: relative;
  z-index: 3;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.4vw, 24px);
  padding: clamp(14px, 3vw, 36px);
  overflow: hidden;
}

.kinetic-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ticker {
  position: absolute;
  left: -8vw;
  width: 116vw;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.14);
  font-size: clamp(54px, 10vw, 158px);
  font-weight: 1000;
  line-height: .86;
  white-space: nowrap;
  letter-spacing: 0;
  animation: drift 16s linear infinite;
}
.ticker-a { top: 5%; rotate: -8deg; }
.ticker-b { top: 43%; rotate: 7deg; animation-direction: reverse; color: rgba(255,63,215,.07); }
.ticker-c { bottom: 5%; rotate: -5deg; animation-duration: 20s; }

.video-zone {
  position: relative;
  width: min(1120px, 100%);
  min-height: clamp(420px, 56vh, 680px);
  margin: 0 auto;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  flex: 0 0 auto;
}

.video-card {
  position: relative;
  z-index: 8;
  width: min(920px, 92vw);
  border: 2px solid rgba(255,255,255,.2);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(0,0,0,.8);
  box-shadow:
    0 0 0 1px rgba(32,231,255,.36),
    0 26px 90px rgba(0,0,0,.72),
    0 0 52px rgba(255,63,215,.35),
    0 0 90px rgba(32,231,255,.18);
}
.video-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,63,215,.5), transparent 34%, rgba(32,231,255,.48));
  opacity: .54;
  mix-blend-mode: screen;
  z-index: 2;
}
.screen-header {
  position: relative;
  z-index: 3;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  background: rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.14);
  text-transform: uppercase;
  font-size: clamp(10px, 1.9vw, 12px);
  font-weight: 1000;
  color: rgba(255,255,255,.78);
}
.dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 14px currentColor; }
.pink { color: var(--pink); background: currentColor; }
.cyan { color: var(--cyan); background: currentColor; }
.lime { color: var(--lime); background: currentColor; }
.screen { position: relative; background: #000; }
video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: min(66vh, 520px);
  background: #000;
  object-fit: cover;
}
.play-button {
  position: absolute;
  z-index: 30;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: clamp(74px, 16vw, 104px);
  aspect-ratio: 1;
  border: 2px solid rgba(255,255,255,.72);
  border-radius: 50%;
  cursor: pointer;
  touch-action: manipulation;
  background: radial-gradient(circle at 36% 30%, rgba(255,255,255,.9), rgba(255,63,215,.78) 34%, rgba(32,231,255,.75));
  box-shadow: 0 0 26px rgba(255,63,215,.68), 0 0 58px rgba(32,231,255,.42);
  transition: transform .18s ease, opacity .18s ease;
}
.play-button * { pointer-events: none; }
.play-button span {
  position: absolute;
  left: 39%; top: 32%;
  width: 0; height: 0;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-left: 28px solid #071014;
}
.play-button:hover { transform: scale(1.07); }
.video-card.is-playing .play-button { opacity: 0; pointer-events: none; }

body.video-active #vibe-field,
body.video-active .cursor-glow {
  display: none;
}

body.video-active .ticker,
body.video-active .orbit-ring {
  animation-play-state: paused;
}

body.video-active .video-zone,
body.video-active [data-float] {
  transform: none !important;
}

body.video-active .video-card::before {
  opacity: .16;
}

body.video-active .hero-badge,
body.video-active .orbit-ring {
  opacity: .38;
  filter: none;
}

body.video-active .play-button,
body.video-active .message-strip button {
  transition: none;
}


.orbit-ring {
  position: absolute;
  z-index: 4;
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: 50%;
  animation: spin 18s linear infinite;
}
.orbit-ring span {
  position: absolute;
  min-width: 78px;
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(5,5,10,.68);
  color: var(--ink);
  text-align: center;
  font-size: 13px;
  font-weight: 1000;
  text-shadow: 0 0 12px var(--cyan);
  box-shadow: 0 0 20px rgba(32,231,255,.22);
}
.ring-one { width: min(650px, 92vw); aspect-ratio: 1; }
.ring-two { width: min(850px, 112vw); aspect-ratio: 1; animation-duration: 26s; animation-direction: reverse; }
.orbit-ring span:nth-child(1) { left: 50%; top: 0; translate: -50% -50%; }
.orbit-ring span:nth-child(2) { right: 2%; top: 70%; translate: 50% -50%; }
.orbit-ring span:nth-child(3) { left: 4%; top: 72%; translate: -50% -50%; }

.hero-badge {
  position: absolute;
  z-index: 7;
  min-width: clamp(86px, 13vw, 138px);
  padding: 12px 14px;
  border: 2px solid currentColor;
  border-radius: 10px;
  background: rgba(5,5,10,.74);
  color: var(--pink);
  text-align: center;
  font-size: clamp(20px, 3.3vw, 42px);
  line-height: .92;
  font-weight: 1000;
  text-shadow: 0 0 13px currentColor;
  box-shadow: 0 0 30px currentColor, inset 0 0 18px rgba(255,255,255,.08);
  user-select: none;
}
.top-left { left: 6%; top: 9%; rotate: -7deg; }
.top-right { right: 8%; top: 11%; color: var(--lime); rotate: 8deg; }
.bottom-left { left: 10%; bottom: 10%; color: var(--cyan); rotate: 6deg; }
.bottom-right { right: 9%; bottom: 12%; color: var(--yellow); rotate: -5deg; }

.birthday-note {
  position: relative;
  z-index: 9;
  width: min(920px, 100%);
  margin: 0 auto;
  padding: clamp(16px, 3vw, 24px);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255,63,215,.22), rgba(32,231,255,.12) 52%, rgba(200,255,53,.12)),
    rgba(5,5,10,.72);
  box-shadow: 0 18px 60px rgba(0,0,0,.42), 0 0 34px rgba(255,63,215,.2);
  backdrop-filter: blur(18px);
  overflow: hidden;
}
.birthday-note::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(90deg, var(--pink), transparent 30%, var(--cyan), transparent 70%, var(--lime));
  opacity: .46;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  padding: 1px;
  mask-composite: exclude;
  -webkit-mask-composite: xor;
}
.note-kicker {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #071014;
  background: var(--lime);
  font-size: 12px;
  font-weight: 1000;
  text-transform: uppercase;
  box-shadow: 0 0 18px rgba(200,255,53,.44);
}
.birthday-note h1 {
  margin: 0 0 8px;
  font-size: clamp(28px, 6vw, 62px);
  line-height: .95;
  font-weight: 1000;
  color: var(--ink);
  text-shadow: 0 0 16px rgba(255,63,215,.62), 0 0 28px rgba(32,231,255,.34);
}
.birthday-note p {
  margin: 0;
  max-width: 72ch;
  color: rgba(255,248,253,.86);
  font-size: clamp(15px, 2.1vw, 19px);
  line-height: 1.48;
  font-weight: 750;
}
.birthday-note strong {
  display: block;
  margin-top: 12px;
  color: var(--yellow);
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.35;
  text-shadow: 0 0 14px rgba(255,212,71,.38);
}

.message-strip {
  position: relative;
  z-index: 9;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: min(900px, 100%);
  margin: 0 auto;
}
.message-strip button {
  cursor: pointer;
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
  font: inherit;
  font-size: 14px;
  font-weight: 1000;
  box-shadow: 0 0 20px rgba(255,63,215,.16);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.message-strip button:hover { transform: translateY(-4px) scale(1.05); background: rgba(255,63,215,.22); box-shadow: 0 0 28px rgba(255,63,215,.34); }

.burst-word {
  position: fixed;
  z-index: 20;
  pointer-events: none;
  color: var(--ink);
  font-weight: 1000;
  text-shadow: 0 0 12px var(--pink), 0 0 22px var(--cyan);
  animation: wordPop .85s ease-out forwards;
}

@keyframes spin { to { rotate: 360deg; } }
@keyframes drift { to { transform: translateX(10vw); } }
@keyframes wordPop { to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.7) rotate(var(--rot)); } }

@media (max-width: 760px) {
  body::before {
    background-size: 30px 30px, 30px 30px, auto, auto, auto, auto;
  }

  .stage {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: max(10px, env(safe-area-inset-top)) 10px max(12px, env(safe-area-inset-bottom));
    overflow: visible;
  }

  .ticker {
    left: -18vw;
    width: 136vw;
    font-size: clamp(38px, 15vw, 82px);
    -webkit-text-stroke-color: rgba(255,255,255,.11);
  }
  .ticker-a { top: 3%; }
  .ticker-b { top: 46%; }
  .ticker-c { bottom: 12%; }

  .video-zone {
    width: 100%;
    min-height: auto;
    padding: 58px 0 38px;
  }

  .video-card {
    width: min(100%, 680px);
    border-radius: 14px;
    box-shadow:
      0 0 0 1px rgba(32,231,255,.34),
      0 18px 58px rgba(0,0,0,.7),
      0 0 34px rgba(255,63,215,.3);
  }

  .screen-header {
    min-height: 34px;
    padding: 0 10px;
    gap: 7px;
  }
  .screen-header strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dot { width: 8px; height: 8px; flex: 0 0 auto; }

  video {
    aspect-ratio: 16 / 9;
    max-height: none;
    object-fit: contain;
  }

  .play-button { width: clamp(62px, 18vw, 82px); }
  .play-button span {
    border-top-width: 14px;
    border-bottom-width: 14px;
    border-left-width: 22px;
  }

  .ring-one { width: min(96vw, 420px); }
  .ring-two { width: min(122vw, 540px); opacity: .55; }
  .orbit-ring span {
    min-width: 62px;
    padding: 7px 9px;
    font-size: 11px;
  }

  .hero-badge {
    min-width: 58px;
    padding: 7px 8px;
    border-radius: 8px;
    font-size: clamp(13px, 4.5vw, 18px);
    line-height: .94;
    box-shadow: 0 0 18px currentColor, inset 0 0 12px rgba(255,255,255,.08);
  }
  .top-left { left: 2px; top: 8px; rotate: -5deg; }
  .top-right { right: 2px; top: 10px; rotate: 6deg; }
  .bottom-left { left: 6px; bottom: 8px; rotate: 5deg; }
  .bottom-right { right: 6px; bottom: 8px; rotate: -4deg; }

  .birthday-note {
    width: 100%;
    margin-top: 0;
    padding: 15px 14px;
    border-radius: 14px;
  }
  .birthday-note h1 {
    font-size: clamp(26px, 9vw, 40px);
  }
  .birthday-note p {
    font-size: 14px;
    line-height: 1.42;
  }
  .birthday-note strong {
    font-size: 14px;
  }
  .note-kicker {
    margin-bottom: 7px;
    padding: 5px 9px;
    font-size: 10px;
  }

  .message-strip {
    width: 100%;
    gap: 7px;
    padding: 0 2px;
  }
  .message-strip button {
    min-height: 36px;
    padding: 0 11px;
    font-size: 12px;
    flex: 1 1 calc(33.333% - 8px);
    min-width: 96px;
  }
}

@media (max-width: 420px) {
  .stage { justify-content: flex-start; }
  .video-zone { padding: 54px 0 34px; }
  .screen-header strong { font-size: 10px; }
  .ring-two { display: none; }
  .hero-badge { font-size: 13px; min-width: 54px; padding: 6px 7px; }
  .message-strip button { flex-basis: calc(50% - 8px); min-width: 0; }
}

@media (max-width: 360px) {
  .video-zone { padding-top: 48px; padding-bottom: 38px; }
  .ring-one { width: 108vw; opacity: .65; }
  .orbit-ring span { font-size: 10px; min-width: 56px; }
  .hero-badge { transform: scale(.88); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}