/* Bloom Academy — Animations */

/* ---------- Keyframes ---------- */
@keyframes slideInUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes slideInRight {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes slideInLeft {
  from { transform: translateX(-20px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleIn {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
@keyframes checkmarkPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.3) rotate(-3deg); }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}
@keyframes bloom-breath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}
@keyframes sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes shimmer {
  0%   { background-position: -300px 0; }
  100% { background-position: 300px 0; }
}
@keyframes progressFill {
  from { width: 0%; }
  to   { width: var(--target-width); }
}
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  20%      { transform: rotate(-4deg); }
  40%      { transform: rotate(4deg); }
  60%      { transform: rotate(-2deg); }
  80%      { transform: rotate(2deg); }
}
@keyframes glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(216,167,160,0.4); }
  50%      { box-shadow: 0 0 0 8px rgba(216,167,160,0); }
}
@keyframes fadeOutUp {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-10px); }
}

/* ---------- Reusable classes ---------- */
.anim-slide-up    { animation: slideInUp 280ms cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.anim-fade        { animation: fadeIn 250ms ease-out both; }
.anim-scale       { animation: scaleIn 260ms cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.anim-slide-right { animation: slideInRight 250ms ease-out both; }
.anim-slide-left  { animation: slideInLeft 250ms ease-out both; }
.anim-check       { animation: checkmarkPop 360ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.anim-pulse       { animation: pulse 1.4s ease-in-out infinite; }
.anim-sheet       { animation: sheet-up 320ms cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.anim-wiggle      { animation: wiggle 600ms ease-in-out; }
.anim-glow        { animation: glow 1.6s ease-out infinite; }

/* Stagger helpers: apply data-stagger="0..N" or use nth-child below */
.stagger > * { animation: slideInUp 320ms cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.stagger > *:nth-child(1) { animation-delay: 30ms; }
.stagger > *:nth-child(2) { animation-delay: 60ms; }
.stagger > *:nth-child(3) { animation-delay: 90ms; }
.stagger > *:nth-child(4) { animation-delay: 120ms; }
.stagger > *:nth-child(5) { animation-delay: 150ms; }
.stagger > *:nth-child(6) { animation-delay: 180ms; }
.stagger > *:nth-child(n+7) { animation-delay: 210ms; }

/* ---------- Skeleton loader ---------- */
.skeleton {
  background: linear-gradient(90deg, var(--color-surface-3) 0%, var(--color-border) 50%, var(--color-surface-3) 100%);
  background-size: 600px 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: var(--radius-sm);
}
.skeleton-line { height: 12px; border-radius: 6px; margin-bottom: 6px; }

/* ---------- Route transitions ---------- */
.route-enter      { animation: slideInUp 280ms cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.route-enter-back { animation: slideInLeft 240ms cubic-bezier(0.2, 0.9, 0.3, 1) both; }

/* ---------- Confetti — CSS-driven particles ---------- */
.confetti {
  position: fixed; pointer-events: none; inset: 0;
  z-index: 999; overflow: hidden;
}
.confetti span {
  position: absolute; top: 50%; left: 50%;
  width: 8px; height: 8px; border-radius: 2px;
  opacity: 0;
  animation: confettiPop 800ms cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}
@keyframes confettiPop {
  0%   { transform: translate(0, 0) scale(0.4) rotate(0deg); opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: var(--end-pos) scale(1.1) rotate(540deg); opacity: 0; }
}

/* ---------- Card hover refinement ---------- */
.card--interactive {
  transition: transform 180ms cubic-bezier(0.2, 0.9, 0.3, 1),
              box-shadow 180ms ease-out;
}
.card--interactive:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

/* ---------- Lesson card complete celebration ---------- */
.lesson-card { transition: opacity 250ms ease-out, transform 200ms ease-out; }
.lesson-card.just-completed {
  animation: wiggle 480ms ease-in-out;
}

/* ---------- Button press ---------- */
.btn, .icon-btn, .pill {
  transition: transform 100ms ease-out, background 150ms ease-out,
              border-color 150ms ease-out, color 150ms ease-out,
              box-shadow 150ms ease-out;
}
.btn:active, .pill:active, .icon-btn:active {
  transform: scale(0.96);
}

/* ---------- FAB ---------- */
.fab { transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1), background 150ms ease-out; }
.fab.is-open { transform: rotate(45deg) scale(1.05); }
.fab-sheet > button { animation: slideInUp 240ms cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.fab-sheet > button:nth-child(1) { animation-delay: 30ms; }
.fab-sheet > button:nth-child(2) { animation-delay: 60ms; }
.fab-sheet > button:nth-child(3) { animation-delay: 90ms; }
.fab-sheet > button:nth-child(4) { animation-delay: 120ms; }

/* ---------- Modal entrance polish ---------- */
.modal-backdrop {
  animation: fadeIn 200ms ease-out both;
}
.modal {
  animation: sheet-up 320ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
@media (min-width: 720px) {
  .modal { animation: scaleIn 240ms cubic-bezier(0.2, 0.9, 0.3, 1) both; }
}

/* ---------- Toast entrance/exit ---------- */
.toast { animation: slideInUp 240ms cubic-bezier(0.2, 0.9, 0.3, 1) both; }

/* ---------- Streak/celebration flame pulse ---------- */
.streak-flame { animation: bloom-breath 1.6s ease-in-out infinite; display: inline-block; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .card--interactive:hover { transform: none; }
}