/* ============================================================
   למדתי בחיידר - Animations Stylesheet
   ============================================================ */

/* ---- Confetti Fall ---- */
@keyframes confetti-fall {
  0% {
    transform: translateY(-20px) rotate(0deg) scale(1);
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg) scale(0.5);
    opacity: 0;
  }
}

@keyframes confetti-sway {
  0%, 100% { margin-left: 0; }
  25% { margin-left: 30px; }
  75% { margin-left: -30px; }
}

/* ---- XP Float Up ---- */
@keyframes xp-float-up {
  0% {
    transform: translateY(0) scale(0.7);
    opacity: 0;
  }
  15% {
    transform: translateY(-10px) scale(1.15);
    opacity: 1;
  }
  70% {
    transform: translateY(-60px) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-100px) scale(0.9);
    opacity: 0;
  }
}

/* ---- Pulse Glow (Streak Fire) ---- */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 8px rgba(253, 203, 110, 0.3);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 20px rgba(253, 203, 110, 0.6);
    transform: scale(1.05);
  }
}

@keyframes pulse-glow-success {
  0%, 100% { box-shadow: 0 0 10px rgba(0, 184, 148, 0.3); }
  50% { box-shadow: 0 0 25px rgba(0, 184, 148, 0.6); }
}

@keyframes pulse-border {
  0%, 100% { box-shadow: 0 0 10px rgba(225, 112, 85, 0.2); }
  50% { box-shadow: 0 0 30px rgba(225, 112, 85, 0.5); }
}

@keyframes glow-danger {
  0%, 100% { box-shadow: 0 0 15px rgba(225, 112, 85, 0.4); }
  50% { box-shadow: 0 0 35px rgba(225, 112, 85, 0.7); }
}

/* ---- Shake (Wrong Answer) ---- */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10% { transform: translateX(-8px) rotate(-1deg); }
  20% { transform: translateX(8px) rotate(1deg); }
  30% { transform: translateX(-6px) rotate(-0.5deg); }
  40% { transform: translateX(6px) rotate(0.5deg); }
  50% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
  70% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
  90% { transform: translateX(-1px); }
}

.shake { animation: shake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97); }

/* ---- Bounce In (Correct Answer / Modals) ---- */
@keyframes bounce-in {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  40% {
    transform: scale(1.1);
    opacity: 1;
  }
  70% {
    transform: scale(0.95);
  }
  85% {
    transform: scale(1.03);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ---- Sparkle (Achievement) ---- */
@keyframes sparkle-anim {
  0%, 100% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
  }
  25% {
    transform: scale(1.2) rotate(45deg);
    opacity: 1;
  }
  50% {
    transform: scale(0.8) rotate(90deg);
    opacity: 0.7;
  }
  75% {
    transform: scale(1.1) rotate(135deg);
    opacity: 1;
  }
}

/* ---- Level Up Burst ---- */
@keyframes level-up-burst {
  0% {
    transform: scale(0.5) rotate(-10deg);
    opacity: 0;
  }
  30% {
    transform: scale(1.3) rotate(5deg);
    opacity: 1;
  }
  60% {
    transform: scale(0.95) rotate(-2deg);
  }
  80% {
    transform: scale(1.05) rotate(1deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes level-up-overlay {
  0% { opacity: 0; }
  10% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

/* ---- Slide In Right (New Problem) ---- */
@keyframes slide-in-right {
  0% {
    transform: translateX(60px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-out-left {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-60px);
    opacity: 0;
  }
}

.bq-enter, .slide-in { animation: slide-in-right 0.3s ease forwards; }
.bq-exit, .slide-out { animation: slide-out-left 0.3s ease forwards; }

/* ---- Progress Fill Animation ---- */
@keyframes progress-fill {
  from { width: 0%; }
  to { width: var(--target-width, 100%); }
}

.animate-fill { animation: progress-fill 1s cubic-bezier(0.4, 0, 0.2, 1) forwards; }

/* ---- Star Spin (Earned Star) ---- */
@keyframes star-spin {
  0% { transform: scale(0) rotate(-180deg); }
  60% { transform: scale(1.3) rotate(20deg); }
  80% { transform: scale(0.95) rotate(-5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* ---- Fire Pulse (Streak) ---- */
@keyframes fire-pulse {
  0%, 100% {
    transform: scale(1) rotate(-5deg);
    filter: brightness(1);
  }
  25% {
    transform: scale(1.15) rotate(5deg);
    filter: brightness(1.2);
  }
  50% {
    transform: scale(1.1) rotate(-3deg);
    filter: brightness(1.15);
  }
  75% {
    transform: scale(1.12) rotate(4deg);
    filter: brightness(1.1);
  }
}

/* ---- Shimmer (Progress Bars) ---- */
@keyframes shimmer {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}

@keyframes shimmer-right {
  0% { right: 100%; opacity: 0; }
  50% { right: -20%; opacity: 1; }
  100% { right: -100%; opacity: 0; }
}

/* ---- Float Symbol (Auth Background) ---- */
@keyframes float-symbol {
  0%, 100% {
    transform: translateY(0px) rotate(0deg) scale(1);
    opacity: 0.06;
  }
  25% {
    transform: translateY(-20px) rotate(10deg) scale(1.1);
    opacity: 0.1;
  }
  50% {
    transform: translateY(-10px) rotate(-5deg) scale(0.95);
    opacity: 0.08;
  }
  75% {
    transform: translateY(-25px) rotate(8deg) scale(1.05);
    opacity: 0.09;
  }
}

/* ---- Spin Slow (Logo / Trophy) ---- */
@keyframes spin-slow {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.05); }
  100% { transform: rotate(360deg) scale(1); }
}

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

/* ---- Pulse (Timer / Loading) ---- */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ---- Slide In Down (Flash Messages) ---- */
@keyframes slide-in-down {
  0% { transform: translateY(-20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ---- Scale In ---- */
@keyframes scale-in {
  0% { transform: scale(0); opacity: 0; }
  80% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

/* ---- World Card Enter ---- */
@keyframes world-card-enter {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate-enter { animation: world-card-enter 0.4s ease forwards; }

/* ---- Ring Animate ---- */
@keyframes ring-draw {
  from { stroke-dashoffset: 157.08; }
  to { stroke-dashoffset: var(--target-offset, 0); }
}

/* ---- Animate Circle (Goal SVG) ---- */
.animate-circle .goal-fill {
  animation: goal-circle-draw 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes goal-circle-draw {
  from { opacity: 0.3; }
  to { opacity: 1; }
}

/* ---- XP Popup Styling ---- */
.xp-popup {
  position: fixed;
  pointer-events: none;
  z-index: var(--z-popup, 300);
  font-family: var(--font-primary, 'Heebo', sans-serif);
  font-size: 2rem;
  font-weight: 900;
  color: var(--color-accent, #FDCB6E);
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  animation: xp-float-up 1.8s ease forwards;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.xp-popup-levelup {
  font-size: 2.5rem;
  color: #fff;
  text-shadow: 0 0 20px rgba(253, 203, 110, 0.8), 0 2px 8px rgba(0,0,0,0.5);
}

/* ---- Level Up Full Screen ---- */
.level-up-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(26, 26, 46, 0.95);
  animation: level-up-overlay 3s ease forwards;
  pointer-events: none;
}

.level-up-content {
  text-align: center;
  animation: level-up-burst 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.level-up-emoji { font-size: 6rem; display: block; margin-bottom: 1rem; }
.level-up-text {
  font-size: 3rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 30px rgba(253, 203, 110, 0.8);
  margin-bottom: 0.5rem;
}
.level-up-new-level {
  font-size: 5rem;
  font-weight: 900;
  color: var(--color-accent, #FDCB6E);
  text-shadow: 0 0 40px rgba(253, 203, 110, 0.9);
}

/* ---- Confetti Particle (JS-driven, canvas overlay) ---- */
#confetti-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--z-popup, 300);
}

/* ---- HTMX Transition Classes ---- */
.htmx-request .htmx-indicator { display: inline-block; }
.htmx-indicator { display: none; }

.htmx-swapping { opacity: 0; transition: opacity 150ms ease; }
.htmx-settling { opacity: 1; transition: opacity 150ms ease; }

/* Problem card swap transition */
.problem-content.htmx-swapping {
  animation: slide-out-left 0.25s ease forwards;
}
.problem-content.htmx-settling {
  animation: slide-in-right 0.25s ease forwards;
}

/* ---- Alpine.js Transitions ---- */
[x-cloak] { display: none !important; }

/* Dropdown transitions */
.dropdown-enter { transition: opacity 200ms ease, transform 200ms ease; }
.dropdown-enter-start { opacity: 0; transform: scaleY(0.95) translateY(-10px); }
.dropdown-enter-end { opacity: 1; transform: scaleY(1) translateY(0); }
.dropdown-leave { transition: opacity 150ms ease, transform 150ms ease; }
.dropdown-leave-start { opacity: 1; transform: scaleY(1); }
.dropdown-leave-end { opacity: 0; transform: scaleY(0.95); }

/* ---- Diagnostic Slide Transitions ---- */
.slide-in { animation: slide-in-right 0.3s ease forwards; }
.slide-out { animation: slide-out-left 0.3s ease forwards; }

/* ---- Review Card Flip Effect ---- */
@keyframes card-flip {
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(90deg); opacity: 0; }
  51% { transform: rotateY(-90deg); opacity: 0; }
  100% { transform: rotateY(0deg); opacity: 1; }
}

/* ---- Streak Calendar Dot Pop ---- */
@keyframes dot-pop {
  0% { transform: scale(0); }
  60% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.streak-day.streak-active .streak-day-dot {
  animation: dot-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---- Achievement Unlock Popup ---- */
@keyframes achievement-popup {
  0% {
    transform: translateY(80px) scale(0.8);
    opacity: 0;
  }
  50% {
    transform: translateY(-10px) scale(1.02);
    opacity: 1;
  }
  70% {
    transform: translateY(4px) scale(0.99);
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* ---- Score Circle Draw ---- */
@keyframes score-circle-draw {
  from { stroke-dashoffset: 314.16; }
  to { stroke-dashoffset: var(--target-stroke, 0); }
}

.animate-score .score-fill {
  animation: score-circle-draw 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ---- XP Counter Count-Up ---- */
@keyframes number-countup {
  from { opacity: 0.4; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.counting { animation: number-countup 0.1s ease; }

/* ---- World Map Entry ---- */
@keyframes world-fly-in {
  0% { transform: translateX(40px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

/* ---- Topic Node Hover Pulse ---- */
@keyframes node-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(108, 92, 231, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(108, 92, 231, 0); }
}

.topic-node.available:focus,
.topic-node.available:hover {
  animation: node-pulse 1.5s ease infinite;
}

/* ---- Boss Battle Screen Effects ---- */
@keyframes dramatic-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

.boss-battle-intro { animation: dramatic-pulse 3s ease-in-out infinite; }

/* ---- Loading Dots ---- */
@keyframes loading-dots {
  0%, 80%, 100% { transform: scale(0); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}

.loading-dot-1 { animation: loading-dots 1.4s ease infinite 0s; }
.loading-dot-2 { animation: loading-dots 1.4s ease infinite 0.16s; }
.loading-dot-3 { animation: loading-dots 1.4s ease infinite 0.32s; }

/* ---- Correct / Wrong Answer Banner ---- */
@keyframes banner-slide-up {
  0% { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.feedback-overlay { animation: banner-slide-up 0.3s ease; }
.feedback-correct, .feedback-wrong { animation: banner-slide-up 0.3s ease; }

/* ---- Pulsing XP Bar ---- */
@keyframes xp-bar-glow {
  0%, 100% { box-shadow: inset 0 0 0px rgba(108, 92, 231, 0); }
  50% { box-shadow: inset 0 0 12px rgba(108, 92, 231, 0.3); }
}

.xp-progress-fill:not(.animate-fill) { animation: xp-bar-glow 3s ease infinite; }

/* ---- Level Badge Glow Rotate ---- */
@keyframes badge-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.level-badge-ring::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: conic-gradient(
    var(--color-accent, #FDCB6E) 0deg,
    var(--color-primary, #6C5CE7) 120deg,
    var(--color-success, #00B894) 240deg,
    var(--color-accent, #FDCB6E) 360deg
  );
  z-index: -1;
  animation: badge-rotate 4s linear infinite;
  opacity: 0.6;
}

/* ---- Responsive: Reduce Motion ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}