/* =====================================================================
   Little Readers — theme-animations.css
   Lightweight, child-friendly theme animations + confetti. All heavy motion is
   disabled under prefers-reduced-motion. Loaded on every themed page.
   ===================================================================== */

/* ---- per-answer + feedback motion ---- */
@keyframes lrBounce { 0%{transform:translateY(0);} 30%{transform:translateY(-14px);} 55%{transform:translateY(0);} 75%{transform:translateY(-6px);} 100%{transform:translateY(0);} }
@keyframes lrShake  { 0%,100%{transform:translateX(0);} 20%{transform:translateX(-7px);} 40%{transform:translateX(6px);} 60%{transform:translateX(-4px);} 80%{transform:translateX(3px);} }
@keyframes lrPulse  { 0%{transform:scale(1);} 50%{transform:scale(1.04);} 100%{transform:scale(1);} }
@keyframes lrSparkle{ 0%{transform:scale(.4);opacity:0;} 50%{transform:scale(1.2);opacity:1;} 100%{transform:scale(.8);opacity:0;} }
@keyframes lrFloat  { 0%{transform:translate(-50%,0);opacity:0;} 15%{opacity:1;} 100%{transform:translate(-50%,-70px);opacity:0;} }

.lr-bounce { animation:lrBounce .6s ease; }
.lr-shake  { animation:lrShake .5s ease; }
.lr-pulse  { animation:lrPulse .5s ease; }

/* floating "+1 Pearl" feedback near the top of the screen */
.lr-float {
  position:fixed; left:50%; top:84px; transform:translate(-50%,0);
  background:var(--theme-primary,#ff6b5e); color:#fff; font-weight:800;
  padding:8px 16px; border-radius:999px; z-index:9998; box-shadow:0 8px 22px rgba(27,42,74,.25);
  animation:lrFloat 1.05s ease forwards; pointer-events:none; font-size:1.05rem;
}

/* sparkle dot used by star/sparkle animations */
.lr-sparkle-dot { position:fixed; z-index:9998; font-size:1.4rem; animation:lrSparkle .7s ease forwards; pointer-events:none; }

/* ---- confetti ---- */
.lr-confetti-layer { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:9990; }
.lr-confetti-piece {
  position:absolute; top:-24px; display:inline-block; line-height:1;
  animation-name:lrFall; animation-timing-function:linear; animation-fill-mode:forwards;
  will-change:transform,opacity;
}
@keyframes lrFall {
  0%   { transform:translateY(-24px) rotate(0); opacity:0; }
  10%  { opacity:1; }
  100% { transform:translateY(105vh) rotate(var(--rx,360deg)); opacity:.95; }
}

/* ---- firework burst (National Day completion) ---- */
.lr-firework { position:fixed; z-index:9991; width:8px; height:8px; border-radius:50%; pointer-events:none; }
@keyframes lrBurst { 0%{transform:translate(0,0) scale(1);opacity:1;} 100%{transform:translate(var(--dx),var(--dy)) scale(.3);opacity:0;} }
.lr-firework { animation:lrBurst .9s ease-out forwards; }

/* ---- reduced motion: keep it calm ---- */
@media (prefers-reduced-motion: reduce) {
  .lr-bounce, .lr-shake, .lr-pulse, .lr-sparkle-dot, .lr-confetti-piece, .lr-firework { animation:none !important; }
  .lr-float { animation:none !important; opacity:1; transform:translate(-50%,0); }
  .lr-confetti-layer { display:none !important; }
}

/* ---- optional per-theme body-class accents (vars come from theme_css) ---- */
body.theme-national-day .reward-card { box-shadow:0 20px 50px rgba(239,68,68,.30); }
body.theme-ocean-adventure .reward-card { box-shadow:0 20px 50px rgba(14,165,233,.28); }