/* =============================================================
   ANIMATIONS.CSS — All keyframes and animation utilities
   قدها وقدود — Arabic RTL Game Show Platform
   ============================================================= */

/* ══════════════════════════════════════════════════════════════
   ENTRANCE ANIMATIONS
   ══════════════════════════════════════════════════════════════ */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-down {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-scale {
  from { opacity: 0; transform: scale(0.90); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes zoom-in {
  from { opacity: 0; transform: scale(0.75); }
  to   { opacity: 1; transform: scale(1); }
}

/* ══════════════════════════════════════════════════════════════
   CARD FLIP ANIMATION
   ══════════════════════════════════════════════════════════════ */
@keyframes card-flip-front {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(-180deg); }
}
@keyframes card-flip-back {
  0%   { transform: rotateY(180deg); }
  100% { transform: rotateY(0deg); }
}

/* ══════════════════════════════════════════════════════════════
   PULSE / GLOW
   ══════════════════════════════════════════════════════════════ */
@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.72; }
}

@keyframes pulse-scale {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.04); }
}

@keyframes glow-gold {
  0%, 100% { box-shadow: 0 0 12px rgba(200,164,40,0.35), 0 0 24px rgba(200,164,40,0.18); }
  50%       { box-shadow: 0 0 22px rgba(200,164,40,0.60), 0 0 44px rgba(200,164,40,0.30); }
}

@keyframes glow-red {
  0%, 100% { box-shadow: 0 0 12px rgba(220,40,20,0.35), 0 0 24px rgba(220,40,20,0.18); }
  50%       { box-shadow: 0 0 28px rgba(220,40,20,0.65), 0 0 52px rgba(220,40,20,0.35); }
}

@keyframes glow-purple {
  0%, 100% { box-shadow: 0 0 14px rgba(124,80,216,0.30), 0 0 28px rgba(124,80,216,0.15); }
  50%       { box-shadow: 0 0 28px rgba(124,80,216,0.55), 0 0 56px rgba(124,80,216,0.28); }
}

/* ══════════════════════════════════════════════════════════════
   STREAK BAR FILL
   ══════════════════════════════════════════════════════════════ */
@keyframes streak-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes streak-pulse-full {
  0%, 100% {
    box-shadow: 0 0 8px rgba(180,40,8,0.50);
    filter: brightness(1);
  }
  50% {
    box-shadow: 0 0 20px rgba(220,60,10,0.80), 0 0 40px rgba(220,60,10,0.40);
    filter: brightness(1.15);
  }
}

/* ══════════════════════════════════════════════════════════════
   TIMER
   ══════════════════════════════════════════════════════════════ */
@keyframes timer-tick {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.06); }
}

@keyframes timer-warning {
  0%, 100% { color: #D84C18; transform: scale(1); }
  50%       { color: #B82808; transform: scale(1.10); }
}

@keyframes bell-ring {
  0%  { transform: rotate(0deg); }
  10% { transform: rotate(-15deg); }
  20% { transform: rotate(15deg); }
  30% { transform: rotate(-15deg); }
  40% { transform: rotate(15deg); }
  50% { transform: rotate(-10deg); }
  60% { transform: rotate(10deg); }
  70% { transform: rotate(-5deg); }
  80% { transform: rotate(5deg); }
  100%{ transform: rotate(0deg); }
}

/* ══════════════════════════════════════════════════════════════
   CELEBRATION / WINNER
   ══════════════════════════════════════════════════════════════ */
@keyframes winner-reveal {
  0%  { opacity: 0; transform: scale(0.60) translateY(40px); }
  60% { transform: scale(1.06) translateY(-8px); }
  100%{ opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes confetti-fall {
  0%   { transform: translateY(-100px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

@keyframes light-ray {
  0%   { opacity: 0; transform: scaleY(0); }
  30%  { opacity: 0.5; }
  100% { opacity: 0; transform: scaleY(1); }
}

@keyframes crown-bounce {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50%       { transform: translateY(-12px) rotate(5deg); }
}

@keyframes trophy-shine {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ══════════════════════════════════════════════════════════════
   MODAL
   ══════════════════════════════════════════════════════════════ */
@keyframes modal-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes modal-card-in {
  from { opacity: 0; transform: scale(0.88) translateY(30px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes modal-overlay-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes modal-card-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.92) translateY(20px); }
}

/* ══════════════════════════════════════════════════════════════
   TOAST
   ══════════════════════════════════════════════════════════════ */
@keyframes toast-in {
  from { opacity: 0; transform: translateX(120%); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateX(0); max-height: 80px; }
  to   { opacity: 0; transform: translateX(120%); max-height: 0; }
}

/* ══════════════════════════════════════════════════════════════
   BUTTON / INTERACTIVE
   ══════════════════════════════════════════════════════════════ */
@keyframes btn-press {
  0%   { transform: scale(1); }
  50%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

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

/* ══════════════════════════════════════════════════════════════
   QUESTION SCORE BADGE POP
   ══════════════════════════════════════════════════════════════ */
@keyframes score-pop {
  0%   { transform: scale(0.5) translateY(10px); opacity: 0; }
  70%  { transform: scale(1.15) translateY(-6px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes score-fly-up {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-60px) scale(0.8); }
}

/* ══════════════════════════════════════════════════════════════
   ANIMATION UTILITY CLASSES
   ══════════════════════════════════════════════════════════════ */
.animate-fade-in    { animation: fade-in    var(--t-normal) var(--ease-smooth) both; }
.animate-fade-up    { animation: fade-up    var(--t-slow)   var(--ease-out) both; }
.animate-fade-down  { animation: fade-down  var(--t-slow)   var(--ease-out) both; }
.animate-fade-scale { animation: fade-scale var(--t-slow)   var(--ease-spring) both; }
.animate-zoom-in    { animation: zoom-in    var(--t-slow)   var(--ease-spring) both; }
.animate-float      { animation: float 4s ease-in-out infinite; }
.animate-pulse-soft { animation: pulse-soft 2.5s ease-in-out infinite; }
.animate-glow-gold  { animation: glow-gold  2s ease-in-out infinite; }
.animate-spin       { animation: spin 1s linear infinite; }

/* Stagger helpers */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-50  { animation-delay:  50ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-600 { animation-delay: 600ms; }
.delay-700 { animation-delay: 700ms; }
.delay-800 { animation-delay: 800ms; }

/* ══════════════════════════════════════════════════════════════
   ON-FIRE / STREAK-FULL EFFECT
   ══════════════════════════════════════════════════════════════ */
@keyframes fire-glow {
  0%, 100% {
    box-shadow:
      0 0 12px 3px rgba(255,100,0,0.55),
      0 0 28px 8px rgba(255,50,0,0.30),
      inset 0 0 20px rgba(255,120,0,0.10);
    border-color: rgba(255,120,0,0.75);
  }
  33% {
    box-shadow:
      0 0 20px 6px rgba(255,160,0,0.70),
      0 0 44px 14px rgba(255,80,0,0.35),
      inset 0 0 28px rgba(255,180,0,0.15);
    border-color: rgba(255,200,0,0.90);
  }
  66% {
    box-shadow:
      0 0 16px 5px rgba(255,50,0,0.60),
      0 0 36px 10px rgba(200,40,0,0.30),
      inset 0 0 24px rgba(255,100,0,0.12);
    border-color: rgba(255,80,0,0.80);
  }
}

@keyframes fire-text {
  0%, 100% { text-shadow: 0 0 6px rgba(255,120,0,0.80), 0 0 14px rgba(255,60,0,0.50); }
  50%       { text-shadow: 0 0 10px rgba(255,200,0,0.90), 0 0 22px rgba(255,100,0,0.60); }
}

@keyframes fire-score {
  0%, 100% { color: var(--gold-300); text-shadow: 0 0 8px rgba(255,140,0,0.70); }
  50%       { color: #FFD700;        text-shadow: 0 0 16px rgba(255,200,0,0.90); }
}

/* ══════════════════════════════════════════════════════════════
   SCORE-POP — floats up and fades
   ══════════════════════════════════════════════════════════════ */
@keyframes score-fly-up {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.2); }
  60%  { opacity: 1; transform: translateX(-50%) translateY(-28px) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-48px) scale(0.8); }
}