/* Official Scratch sprite PNGs (Scratch Cat, Ball, Star, Ghost), rasterized
   from the Scratch asset CDN — © Scratch Foundation, CC BY-SA 4.0.

   Three motion layers, kept on separate elements so transforms never collide:
   1. reveal — entrance keyframes play when the sprite scrolls into view
      (IntersectionObserver adds .is-visible on the wrapper)
   2. idle   — per-sprite loop, declared as the --idle custom property
   3. drift  — gentle scroll parallax written by sprites.js to the wrapper
      element's transform
   The wrapper (.sprite) owns placement + drift; the inner img (.sprite-art)
   owns reveal + idle. Entrance animates the independent translate/scale/
   rotate properties, idle animates transform — no property fights.

   Reduced motion: the global base.css rule flattens every CSS animation to
   0.01ms, and sprites.js skips both the observer (adds .is-visible at once)
   and the drift. Sprites sit in section padding bands, never over copy. */

.hero,
.features,
.exhibit-band { position: relative; }

.hero > .wrap,
.features > .wrap,
.exhibit-band > .wrap { position: relative; z-index: 1; }

.sprite {
  position: absolute;
  z-index: 0;
  display: block;
  pointer-events: none;
}

.sprite-art {
  display: block;
  opacity: 0;
  pointer-events: none;
}

.sprite.is-visible > .sprite-art {
  animation:
    var(--enter, s-in-up) .7s var(--ease-back) both,
    var(--idle, none);
}

/* ---------- Placement + idle loops ---------- */

/* Hero: Scratch Cat holds the bottom-right corner */
.s-hero-star  { top: 10px; left: 3%;  --enter: s-in-pop;  --idle-dur: 2.8s; --idle: s-twinkle 2.8s ease-in-out infinite; }
.s-hero-ghost { top: 14px; right: 5%; --enter: s-in-drop; --idle-dur: 3.4s; --idle: s-float 3.4s ease-in-out infinite; }
.s-hero-cat   { right: 3%; bottom: 2px; --enter: s-in-up; --idle-dur: 2.6s; --idle: s-waddle 2.6s ease-in-out infinite; }

/* Features: bouncing Ball + twinkling Star in the top corners */
.s-feat-ball { top: 40px; left: 7%;  --enter: s-in-drop; --idle-dur: 1.8s; --idle: s-bounce 1.8s ease-in-out infinite; }
.s-feat-star { top: 44px; right: 8%; --enter: s-in-pop;  --idle-dur: 3.2s; --idle: s-twinkle 3.2s ease-in-out infinite 1.1s; }

/* Exhibition band: gold Ball, Star in the column gap, Ghost top-right */
.s-band-ball  { left: 2%; bottom: 8px; --enter: s-in-pop;  --idle-dur: 1.8s; --idle: s-bounce 1.8s ease-in-out infinite 300ms; }
.s-band-star  { top: 26px; left: 44%;  --enter: s-in-pop;  --idle-dur: 3s;   --idle: s-twinkle 3s ease-in-out infinite 400ms; }
.s-band-ghost { top: 2px; right: 4%;   --enter: s-in-drop; --idle-dur: 3.8s; --idle: s-float 3.8s ease-in-out infinite 700ms; }

/* ---------- Reveal keyframes (scroll-in entrance) ---------- */

@keyframes s-in-up {
  from { opacity: 0; translate: 0 30px; scale: 0.55; }
  to   { opacity: 1; translate: 0 0;    scale: 1; }
}

@keyframes s-in-drop {
  from { opacity: 0; translate: 0 -36px; scale: 0.55; }
  to   { opacity: 1; translate: 0 0;     scale: 1; }
}

@keyframes s-in-pop {
  from { opacity: 0; scale: 0.3; rotate: -14deg; }
  to   { opacity: 1; scale: 1;   rotate: 0deg; }
}

/* ---------- Idle keyframes ---------- */

@keyframes s-waddle {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-5px) rotate(2deg); }
}

@keyframes s-float {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-11px) rotate(3deg); }
}

@keyframes s-bounce {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  50%      { transform: translateY(-26px) scale(0.96, 1.05); }
  82%      { transform: translateY(0) scale(1, 1); }
  88%      { transform: translateY(0) scale(1.16, 0.8); }
  94%      { transform: translateY(0) scale(1, 1); }
}

@keyframes s-twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(1.16) rotate(14deg); }
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .sprite { scale: 0.62; }
  .s-hero-star,
  .s-feat-star,
  .s-band-star { display: none; }
  .s-hero-cat { right: 1%; bottom: auto; top: 54%; }
  .s-feat-ball { left: auto; right: 4%; top: 28px; }
  .s-band-ghost { top: auto; bottom: 10px; right: 3%; }
}

/* The exhibition demo needs its playful sprites even when the OS reports
   reduced motion — restore the entrance/idle timings that base.css flattens.
   Higher specificity than base.css's * rule, so it wins with !important. */
@media (prefers-reduced-motion: reduce) {
  .sprite.is-visible > .sprite-art {
    animation-duration: 0.7s, var(--idle-dur, 2.6s) !important;
    animation-iteration-count: 1, infinite !important;
  }
}