/* ============================================================
   animations.css — All CSS keyframe animations
   ============================================================ */

/* ===== Float / Bob ===== */
@keyframes floatEmoji {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-14px); }
}

@keyframes floatUp {
  0%   { transform: translateY(100vh) rotate(0deg); opacity: .15; }
  100% { transform: translateY(-20vh) rotate(360deg); opacity: 0; }
}

/* ===== Bounce ===== */
@keyframes bounce {
  0%, 100% { transform: translateY(0); animation-timing-function: cubic-bezier(.8,0,1,1); }
  50%       { transform: translateY(-28px); animation-timing-function: cubic-bezier(0,0,.2,1); }
}

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

/* ===== Pop / Scale ===== */
@keyframes popIn {
  0%   { transform: scale(0) rotate(-10deg); opacity: 0; }
  70%  { transform: scale(1.08) rotate(2deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes popOut {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}

/* ===== Wiggle ===== */
@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  20%       { transform: rotate(-8deg); }
  40%       { transform: rotate(8deg); }
  60%       { transform: rotate(-6deg); }
  80%       { transform: rotate(6deg); }
}

/* ===== Shake (wrong answer) ===== */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-10px); }
  40%       { transform: translateX(10px); }
  60%       { transform: translateX(-8px); }
  80%       { transform: translateX(8px); }
}

/* ===== Correct answer pop ===== */
@keyframes correctPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* ===== Fade In ===== */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ===== Slide In ===== */
@keyframes slideInUp {
  from { transform: translateY(60px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ===== Sparkle ===== */
@keyframes sparkle {
  0%, 100% { transform: scale(0) rotate(0); opacity: 0; }
  50%       { transform: scale(1.2) rotate(180deg); opacity: 1; }
}

/* ===== Spin ===== */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ===== Pulse ===== */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.06); }
}

@keyframes matchedPulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.15); }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

/* ===== Rainbow Gradient ===== */
@keyframes rainbowShift {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

/* ===== Typing cursor ===== */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ===== Number count-up animation ===== */
@keyframes countUp {
  from { transform: scale(0.5) rotate(-15deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}

/* ===== Cloud drift ===== */
@keyframes cloudDrift {
  0%   { transform: translateX(-120px); opacity: 0; }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.6; }
  100% { transform: translateX(calc(100vw + 120px)); opacity: 0; }
}

/* ===== Star twinkle ===== */
@keyframes twinkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.3; transform: scale(0.7); }
}

/* ===== Balloon rise ===== */
@keyframes balloonRise {
  0%   { transform: translateY(0) rotate(0); }
  25%  { transform: translateY(-40px) rotate(5deg); }
  50%  { transform: translateY(-20px) rotate(-5deg); }
  75%  { transform: translateY(-50px) rotate(3deg); }
  100% { transform: translateY(-30px) rotate(0); }
}

/* ===== Page flip ===== */
@keyframes pageFlip {
  0%   { transform: perspective(800px) rotateY(0); }
  100% { transform: perspective(800px) rotateY(-180deg); }
}

/* ===== Utility classes ===== */
.anim-fade-in      { animation: fadeIn .5s ease-out both; }
.anim-fade-in-left { animation: fadeInLeft .5s ease-out both; }
.anim-slide-up     { animation: slideInUp .5s ease-out both; }
.anim-pop-in       { animation: popIn .4s cubic-bezier(.34,1.56,.64,1) both; }
.anim-bounce       { animation: bounce 1.2s infinite; }
.anim-wiggle       { animation: wiggle 1s ease-in-out; }
.anim-pulse        { animation: pulse 1.5s ease-in-out infinite; }
.anim-spin         { animation: spin 2s linear infinite; }
.anim-sparkle      { animation: sparkle 1s ease-in-out infinite; }
.anim-twinkle      { animation: twinkle 2s ease-in-out infinite; }

/* Staggered delays */
.delay-1 { animation-delay: .1s; }
.delay-2 { animation-delay: .2s; }
.delay-3 { animation-delay: .3s; }
.delay-4 { animation-delay: .4s; }
.delay-5 { animation-delay: .5s; }
.delay-6 { animation-delay: .6s; }

/* ===== Background Decorations ===== */
.bg-clouds {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.cloud {
  position: absolute;
  font-size: 3rem;
  opacity: 0.12;
  animation: cloudDrift linear infinite;
}

.bg-stars {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.star-deco {
  position: absolute;
  font-size: 1.2rem;
  animation: twinkle ease-in-out infinite;
  opacity: 0.2;
}