/* ================================================
   Animations CSS - Moat Kras School
   ================================================ */

/* Page transition */
@keyframes page-in { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
body { animation: page-in 0.5s ease forwards; }

/* Pulse */
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(245,166,35,0.5)} 50%{box-shadow:0 0 0 14px rgba(245,166,35,0)} }
.pulse-gold { animation: pulse 2s ease infinite; }

/* Shimmer skeleton */
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.skeleton {
  background: linear-gradient(90deg, var(--bg-alt) 25%, var(--border) 37%, var(--bg-alt) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
}

/* Float */
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.floating { animation: float 3s ease-in-out infinite; }

/* Bounce */
@keyframes bounce-in {
  0%{transform:scale(0.4);opacity:0}
  70%{transform:scale(1.08)}
  100%{transform:scale(1);opacity:1}
}
.bounce-in { animation: bounce-in 0.5s ease forwards; }

/* Ripple on click */
.ripple-effect { position: relative; overflow: hidden; }
.ripple-circle {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transform: scale(0);
  animation: ripple 0.6s linear;
  pointer-events: none;
}
@keyframes ripple { to{transform:scale(4);opacity:0} }

/* Typing cursor */
.typing-cursor::after { content:'|'; animation: blink-cursor 0.8s step-end infinite; }
@keyframes blink-cursor { 50%{opacity:0} }

/* Number counter bounce */
@keyframes num-pop { 0%{transform:scale(1)} 50%{transform:scale(1.2)} 100%{transform:scale(1)} }
.num-pop { animation: num-pop 0.3s ease; }

/* Card flip */
.flip-card { perspective: 1000px; }
.flip-card-inner { transition: transform 0.6s; transform-style: preserve-3d; }
.flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
.flip-front, .flip-back { backface-visibility: hidden; }
.flip-back { transform: rotateY(180deg); }

/* Slide in from sides */
@keyframes slide-left { from{transform:translateX(-60px);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes slide-right { from{transform:translateX(60px);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes slide-up { from{transform:translateY(40px);opacity:0} to{transform:translateY(0);opacity:1} }

/* Progress bar */
.prog-bar-wrap { height: 8px; background: var(--bg-alt); border-radius: 50px; overflow: hidden; }
.prog-bar { height: 100%; border-radius: 50px; background: linear-gradient(90deg,var(--primary),var(--gold)); transition: width 1s ease; }

/* Gradient border */
.grad-border {
  border: 2px solid transparent;
  background: linear-gradient(var(--white),var(--white)) padding-box,
              linear-gradient(135deg,var(--primary),var(--gold)) border-box;
}

/* Glow text */
.glow-text { text-shadow: 0 0 20px rgba(245,166,35,0.5); }

/* Confetti-like decoration */
@keyframes confetti-fall {
  0%{transform:translateY(-10px) rotate(0deg);opacity:1}
  100%{transform:translateY(100px) rotate(360deg);opacity:0}
}