/* Gleam of Hope — Chat-bubble send-off (OPTIONAL / removable)
   Paired with js/chat-bubble-parallax.js. On the (paginated) Romantic card the
   three chat-bubble icons live in the front-IMAGE spot at the top of the card.
   When you LAND on the last slide they pop in one after another (a staggered
   scale-in); scroll away and they fade back out together.
   Remove both this <link> and the matching <script> from index.html to revert. */

/* Overlay pinned over the card's front-image band (top padding = 70px, image =
   200px tall). The JS only toggles the `is-active` class (added once the last
   slide is reached); CSS owns the pop-in. It never affects layout or taps. */
.bubble-decor {
  position: absolute;
  top: 70px;
  left: 0;
  right: 0;
  height: 200px;
  pointer-events: none;
  z-index: 5;                  /* above the front image (z-index 4) */
}

.bubble-decor .bubble {
  position: absolute;
  display: block;
  height: auto;
  transform-origin: center;
  opacity: 0;                  /* each bubble pops in on .is-active */
  transform: scale(0.45);
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform, opacity;
}

/* Sequential pop: blue burst first, then red speech bubble, then yellow cloud.
   Delays only live on the active state, so scrolling away dismisses them
   together (no staggered exit). */
.bubble-decor.is-active .bubble {
  opacity: 1;
  transform: scale(1);
}
.bubble-decor.is-active .cb-blue   { transition-delay: 0.00s; }
.bubble-decor.is-active .cb-red    { transition-delay: 0.14s; }
.bubble-decor.is-active .cb-yellow { transition-delay: 0.28s; }

/* Reference arrangement, pulled toward centre: blue burst top-centre, red
   speech bubble lower-left-of-centre, yellow thought-cloud lower-right. */
.bubble-decor .cb-blue   { width: 116px; top: -6px;    left: calc(50% - 58px); }
.bubble-decor .cb-red    { width: 120px; bottom: 8px;  left: 17%; }
.bubble-decor .cb-yellow { width: 108px; bottom: -4px; right: 15%; }

/* Reduced motion: appear in place, no scale/stagger animation. */
@media (prefers-reduced-motion: reduce) {
  .bubble-decor .bubble {
    transition: opacity 0.2s ease;
    transform: none;
  }
  .bubble-decor.is-active .bubble { transform: none; }
  .bubble-decor.is-active .cb-red,
  .bubble-decor.is-active .cb-yellow { transition-delay: 0s; }
}