/* ============================================================
   CULTURE BOX — Animations
   ============================================================ */

/* ---- Keyframes ---- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.7; transform: scale(1.04); }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
@keyframes rotate-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes stamp-appear {
  0%   { opacity: 0; transform: scale(1.8) rotate(-12deg); }
  60%  { opacity: 1; transform: scale(0.9) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes confetti-fall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(60px) rotate(360deg); opacity: 0; }
}
@keyframes xp-gain {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-40px); }
}
@keyframes border-glow {
  0%, 100% { box-shadow: 0 0 0 2px rgba(200, 169, 126, 0.3); }
  50%       { box-shadow: 0 0 0 4px rgba(200, 169, 126, 0.6), 0 0 20px rgba(200, 169, 126, 0.3); }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes wave {
  0%, 100% { transform: scaleY(1); }
  50%       { transform: scaleY(0.4); }
}
@keyframes hero-text-reveal {
  from { opacity: 0; transform: translateY(30px) skewY(2deg); }
  to   { opacity: 1; transform: translateY(0) skewY(0); }
}
@keyframes passport-open {
  from { transform: perspective(1000px) rotateY(-40deg); opacity: 0; }
  to   { transform: perspective(1000px) rotateY(0deg); opacity: 1; }
}
@keyframes tick-check {
  0%   { stroke-dashoffset: 40; }
  100% { stroke-dashoffset: 0; }
}
@keyframes bounce-in {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  80%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}
@keyframes progress-fill {
  from { width: 0%; }
  to   { width: var(--target-width, 70%); }
}

/* ---- Utility animation classes ---- */
.animate-fade-in {
  animation: fadeIn 0.5s ease forwards;
}
.animate-fade-in-up {
  animation: fadeInUp 0.5s ease forwards;
}
.animate-scale-in {
  animation: fadeInScale 0.4s var(--transition-bounce) forwards;
}
.animate-float {
  animation: float 4s ease-in-out infinite;
}
.animate-pulse {
  animation: pulse 2.2s ease-in-out infinite;
}
.animate-spin {
  animation: spin 0.8s linear infinite;
}
.animate-border-glow {
  animation: border-glow 2s ease-in-out infinite;
}
.animate-stamp {
  animation: stamp-appear 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.animate-bounce-in {
  animation: bounce-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ---- Staggered children ---- */
.stagger-children > * {
  opacity: 0;
  animation: fadeInUp 0.5s ease forwards;
}
.stagger-children > *:nth-child(1) { animation-delay: 0.05s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.12s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.19s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.26s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.33s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.40s; }
.stagger-children > *:nth-child(7) { animation-delay: 0.47s; }
.stagger-children > *:nth-child(8) { animation-delay: 0.54s; }

/* ---- Shimmer (loading skeleton) ---- */
.skeleton {
  background: linear-gradient(90deg, var(--sand) 25%, var(--parchment) 50%, var(--sand) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

/* ---- XP float animation ---- */
.xp-float {
  position: fixed;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold-dark);
  pointer-events: none;
  z-index: 9999;
  animation: xp-gain 1.4s ease forwards;
}

/* ---- Confetti particles ---- */
.confetti-particle {
  position: fixed;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 9999;
  animation: confetti-fall 1.2s ease forwards;
}

/* ---- Page transition ---- */
.page-enter {
  animation: fadeIn 0.35s ease forwards;
}