/* Gleam of Hope — Sparkle parallax component styles (OPTIONAL / removable)
   Paired with js/sparkle-parallax.js. Remove both tags from index.html to
   revert. The per-sparkle transform and the set's crossfade opacity are set
   inline by the JS; this file styles the overlay layer and the sparkle icons
   (placement, size, idle twinkle). */

/* Overlay layer pinned over the front-image region, sitting BEHIND the image
   so the sparkles peek out from around it. Handles the open/close fade only;
   never intercepts taps. */
.sparkle-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 280px;             /* covers the front-image region of the open card */
  overflow: hidden;
  pointer-events: none;
  z-index: 3;                /* above the carousel (arrow z-index 2), below the image (z-index 4) */
  opacity: 0;
  transition: opacity .4s ease;
}
.card-container.open .sparkle-layer { opacity: 1; }

/* The swappable set of icons for the current slide. Its opacity is driven by
   the scrub (JS) to crossfade one slide's sparkles out and the next slide's
   freshly-placed set in — no transition here so it tracks the finger 1:1. */
.sparkle-set {
  position: absolute;
  inset: 0;
}

/* Lift the front image above the sparkle layer so the sparkles read as a
   background behind it. */
.card-image {
  position: relative;
  z-index: 4;
}

/* Each sparkle is one of the icon SVGs, centred on its slot point. The base
   centring + rotation lives here; the JS adds the parallax offset + scale on
   top of it inline. The "sparkle" is two synced animations on properties the
   JS does NOT touch — an opacity blink and a pulsing glow halo — so each icon
   keeps twinkling without fighting the inline transform. */
.sparkle {
  position: absolute;
  width: var(--sz, 22px);
  height: auto;
  transform: translate(-50%, -50%) scaleX(var(--flip, 1)) rotate(var(--rot, 0deg));
  animation: sparkle-twinkle 2.2s ease-in-out infinite,
             sparkle-glow 2.2s ease-in-out infinite;
}

/* Dim with a tight halo at rest → a soft gleam at the peak: a gentle twinkle
   every cycle, kept subtle so the sparkles don't overpower the image. */
@keyframes sparkle-twinkle {
  0%, 100% { opacity: 0.3; }
  45%      { opacity: 0.7; }
}
@keyframes sparkle-glow {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.2))  brightness(0.9); }
  45%      { filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.45)) brightness(1.1); }
}