/* =====================================================================
   Y2K BOUNCING SCREENSAVER SCREENS — dvd-style bounce, y2k sparkle
   color cycles on every wall hit · star bursts · seamless 15s loop
   ===================================================================== */
:root{
  --c:#ff8ad8;
  --head:'Archivo Black',system-ui,sans-serif;
  --body:'Poppins',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden}
body{background:transparent;font-family:var(--body)}
.black{position:absolute;inset:0;background:#000}
/* faint ambient y2k stars (only on opaque mp4 version) */
.amb i{position:absolute;color:#fff;opacity:.14;animation:ambtw 3.4s ease-in-out infinite}
@keyframes ambtw{0%,100%{opacity:.05}50%{opacity:.22}}

#fx{position:absolute;inset:0;pointer-events:none;z-index:6}
#stage{position:absolute;inset:0;overflow:hidden}

/* ---------- logo block: y2k die-cut sticker capsule ---------- */
.logo{position:absolute;display:flex;flex-direction:column;align-items:center;
  filter:drop-shadow(0 0 18px color-mix(in srgb, var(--c) 55%, transparent))
         drop-shadow(0 5px 0 rgba(0,0,0,.28));z-index:5}
.logo .stick{position:relative;display:flex;flex-direction:column;align-items:center;gap:.08em;
  padding:.5em .95em .55em;border-radius:999px;
  background:linear-gradient(160deg, color-mix(in srgb, var(--c) 50%, #fff) 0%, var(--c) 55%, color-mix(in srgb, var(--c) 68%, #000) 100%);
  border:.14em solid #fff}
.logo .stick::before{content:'';position:absolute;left:13%;top:8%;width:36%;height:15%;
  border-radius:999px;background:rgba(255,255,255,.6);filter:blur(1.5px)}
.logo .word{font-family:var(--head);font-weight:900;text-transform:uppercase;line-height:.95;
  color:#fff;text-shadow:.045em .045em 0 color-mix(in srgb, var(--c) 50%, #000)}
.logo .word .hb{display:inline-block;transform:translateY(-.03em) rotate(-12deg);margin-right:.16em}
.logo .sub{font-weight:600;letter-spacing:.42em;text-indent:.42em;text-transform:lowercase;color:#fff}
/* pong ball — glossy y2k */
.ball{position:absolute;width:64px;height:64px;border-radius:50%;z-index:4;
  background:radial-gradient(circle at 32% 28%, #fff 0%, color-mix(in srgb, var(--c) 45%, #fff) 22%, var(--c) 60%, color-mix(in srgb, var(--c) 60%, #000) 100%);
  filter:drop-shadow(0 0 14px color-mix(in srgb, var(--c) 60%, transparent))}
.ball::after{content:'';position:absolute;left:16%;top:12%;width:30%;height:20%;
  border-radius:50%;background:rgba(255,255,255,.85)}

/* y2k sparkles hugging the logo */
.logo .sparks i{position:absolute;font-style:normal;color:#fff;font-size:26px;
  animation:sp 1.6s ease-in-out infinite;text-shadow:0 0 8px var(--c)}
@keyframes sp{0%,100%{opacity:.15;transform:scale(.6) rotate(0deg)}50%{opacity:1;transform:scale(1.15) rotate(18deg)}}