/* /play/ still cards (Slingshot, Iris Beam): slow motion over the key art, no video.
   The poster drifts (scale up to 1.03 over 12 s, there and back), a soft glow breathes
   over the hot spot and, on Slingshot, a few stars twinkle. Transform and opacity only,
   so it all runs on the compositor. Nothing animates until /play/cards.js arms the card
   (is-armed); it runs only while the card is on screen and the tab is visible (is-moving)
   and holds its frame otherwise. Frame 0 of every layer is the plain poster, so arming,
   pausing and the no-JS / reduced-motion / Save-Data card all look the same at rest. */

.sp-card__media--drift {
  /* Clip the scaled layer to the rounded corners; overflow alone leaks in Safari. */
  clip-path: inset(0 round 14px);
  --drift-origin: 50% 50%;
  --drift-to: translate3d(0, 0, 0) scale(1.03);
  --glow-at: 50% 50%;
  --glow: rgba(255, 92, 72, 0.5);
  --glow-size: 18%;
}
/* Slingshot: zoom into Antares (81% 50%) and lean right, the arc's direction of travel.
   Edges stay covered: left gains 81% x 3% = 2.4% while the shift takes back 0.8%. */
.sp-card__media--slingshot {
  --drift-origin: 81% 50%;
  --drift-to: translate3d(0.8%, -0.4%, 0) scale(1.03);
  --glow-at: 81% 50%;
  --glow: rgba(255, 74, 58, 0.55);
  --glow-size: 15%;
}
/* Iris Beam: zoom into the prism and rise toward the beam. */
.sp-card__media--irisbeam {
  --drift-origin: 48% 62%;
  --drift-to: translate3d(-0.5%, -0.5%, 0) scale(1.03);
  --glow-at: 50% 60%;
  --glow: rgba(255, 150, 110, 0.3);
  --glow-size: 26%;
}

.sp-card__media--drift picture { transform-origin: var(--drift-origin); }
.sp-card__glow, .sp-card__stars, .sp-card__stars::before, .sp-card__stars::after {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
}
.sp-card__glow { background: radial-gradient(circle at var(--glow-at), var(--glow), transparent var(--glow-size)); }
.sp-card__stars { opacity: 1; }
.sp-card__stars::before, .sp-card__stars::after { content: ''; }
/* Dots placed in empty sky, clear of the arc and of Antares. */
.sp-card__stars::before {
  background:
    radial-gradient(circle at 14% 72%, rgba(255, 255, 255, 0.85) 0 0.6px, transparent 1.4px),
    radial-gradient(circle at 37% 58%, rgba(220, 230, 255, 0.8) 0 0.5px, transparent 1.2px),
    radial-gradient(circle at 63% 88%, rgba(255, 255, 255, 0.8) 0 0.6px, transparent 1.4px),
    radial-gradient(circle at 92% 30%, rgba(255, 240, 225, 0.85) 0 0.6px, transparent 1.4px);
}
.sp-card__stars::after {
  background:
    radial-gradient(circle at 24% 48%, rgba(255, 255, 255, 0.8) 0 0.5px, transparent 1.2px),
    radial-gradient(circle at 52% 76%, rgba(225, 235, 255, 0.85) 0 0.6px, transparent 1.4px),
    radial-gradient(circle at 74% 14%, rgba(255, 255, 255, 0.75) 0 0.5px, transparent 1.2px),
    radial-gradient(circle at 88% 70%, rgba(255, 245, 235, 0.8) 0 0.6px, transparent 1.4px);
}

@keyframes sp-card-drift { from { transform: none; } to { transform: var(--drift-to); } }
/* The star layer slides a hair the other way: two depths, a little parallax. */
@keyframes sp-card-parallax { from { transform: none; } to { transform: translate3d(-0.6%, 0.3%, 0); } }
@keyframes sp-card-breathe { from { opacity: 0; } to { opacity: 0.85; } }
@keyframes sp-card-twinkle { from { opacity: 0; } to { opacity: 0.9; } }

.sp-card__media--drift.is-armed picture { animation: sp-card-drift 12s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; }
.sp-card__media--drift.is-armed .sp-card__stars { animation: sp-card-parallax 12s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; }
.sp-card__media--drift.is-armed .sp-card__glow { animation: sp-card-breathe 5.2s ease-in-out infinite alternate; }
.sp-card__media--drift.is-armed .sp-card__stars::before { animation: sp-card-twinkle 3.1s ease-in-out 0.8s infinite alternate; }
.sp-card__media--drift.is-armed .sp-card__stars::after { animation: sp-card-twinkle 4.3s ease-in-out 2.2s infinite alternate; }
.sp-card__media--drift.is-armed picture,
.sp-card__media--drift.is-armed .sp-card__glow,
.sp-card__media--drift.is-armed .sp-card__stars,
.sp-card__media--drift.is-armed .sp-card__stars::before,
.sp-card__media--drift.is-armed .sp-card__stars::after { animation-play-state: paused; }
.sp-card__media--drift.is-moving picture,
.sp-card__media--drift.is-moving .sp-card__glow,
.sp-card__media--drift.is-moving .sp-card__stars,
.sp-card__media--drift.is-moving .sp-card__stars::before,
.sp-card__media--drift.is-moving .sp-card__stars::after { animation-play-state: running; }
.sp-card__media--drift.is-moving picture, .sp-card__media--drift.is-moving .sp-card__stars { will-change: transform; }
.sp-card__media--drift.is-moving .sp-card__glow { will-change: opacity; }

@media (prefers-reduced-motion: reduce) {
  .sp-card__media--drift picture,
  .sp-card__media--drift .sp-card__glow,
  .sp-card__media--drift .sp-card__stars,
  .sp-card__media--drift .sp-card__stars::before,
  .sp-card__media--drift .sp-card__stars::after { animation: none !important; will-change: auto; }
}