/* Picture-in-picture talking-head bubble.
   Starts top-right during slide 0 (so it doesn't cover the title); GSAP
   animates it down to bottom-right (translateY(714px)) at the slide-0 → 1
   transition. 714 = 1080 - 270 - 48(top) - 48(bottom). */

#bubble-frame {
  position: absolute;
  right: 48px;
  top: 48px;
  width: 480px;   /* 25% of 1920 */
  height: 270px;  /* 25% of 1080 */
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  box-shadow:
    0 0 0 3px #ffffff,
    0 12px 32px rgba(0, 0, 0, 0.55);
  z-index: 100;
  opacity: 0;  /* GSAP fades in at t≈0.5s */
  will-change: opacity, transform;
  pointer-events: none;
}

#bubble-frame video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: opacity;
}

/* Videos B and C start hidden; crossfaded in at each segment boundary. */
#bubble-video-b,
#bubble-video-c { opacity: 0; }

/* Audio elements are invisible but must live in the DOM to be reachable. */
#bubble-audio-a,
#bubble-audio-b,
#bubble-audio-c {
  display: none;
}

/* A "Click anywhere to enable sound" overlay for the first page load —
   browsers gate audio playback behind a user gesture. Hidden once the
   user has clicked. */
#sound-gate {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 22px;
  letter-spacing: 0.02em;
  z-index: 10000;
  cursor: pointer;
  user-select: none;
}
#sound-gate.dismissed { display: none; }
#sound-gate .sg-card {
  background: rgba(20, 20, 24, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 28px 36px;
  text-align: center;
  max-width: 420px;
}
#sound-gate .sg-card h2 { margin: 0 0 6px; font-size: 26px; }
#sound-gate .sg-card p  { margin: 0; font-size: 16px; opacity: 0.8; }