/* ============================================================
   animations.css — All animation keyframes and trigger classes
   extracted from main.css for Inventle
   ============================================================ */



/* ------------------------------------------------------------
   @KEYFRAMES — Page & Row Entrance
   ------------------------------------------------------------ */

@keyframes pageIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

@keyframes rowSlideIn { to { opacity: 1; transform: translateY(0); } }


/* ------------------------------------------------------------
   @KEYFRAMES — Era Chip Spin
   ------------------------------------------------------------ */

@keyframes eraSpinAnim {
  0% { transform: translateY(0); }
  100% { transform: translateY(-40px); }
}


/* ------------------------------------------------------------
   @KEYFRAMES — Gold Glow Tiers
   ------------------------------------------------------------ */

@keyframes goldGlowFade {
  0% { border-color: #fbbf24; box-shadow: 0 0 14px rgba(251,191,36,0.5), 0 0 6px rgba(251,191,36,0.3); }
  15% { border-color: #fbbf24; box-shadow: 0 0 20px rgba(251,191,36,0.7), 0 0 10px rgba(251,191,36,0.4); }
  40% { border-color: #fbbf24; box-shadow: 0 0 16px rgba(251,191,36,0.5), 0 0 8px rgba(251,191,36,0.3); }
  70% { border-color: rgba(251,191,36,0.4); box-shadow: 0 0 8px rgba(251,191,36,0.2), 0 0 4px rgba(251,191,36,0.1); }
  100% { border-color: transparent; box-shadow: none; }
}

@keyframes goldBrightFade {
  0% { border-color: #fbbf24; box-shadow: 0 0 18px rgba(253,224,71,0.6), 0 0 8px rgba(251,191,36,0.35); }
  12% { border-color: #fbbf24; box-shadow: 0 0 26px rgba(253,224,71,0.75), 0 0 12px rgba(251,191,36,0.5); }
  35% { border-color: #fbbf24; box-shadow: 0 0 20px rgba(253,224,71,0.55), 0 0 9px rgba(251,191,36,0.3); }
  60% { border-color: #fbbf24; box-shadow: 0 0 10px rgba(253,224,71,0.2), 0 0 5px rgba(251,191,36,0.1); }
  80% { border-color: #fbbf24; box-shadow: 0 0 5px rgba(253,224,71,0.08), 0 0 2px rgba(251,191,36,0.04); }
  100% { border-color: #fbbf24; box-shadow: none; }
}

@keyframes goldSupernovaFade {
  0% { border-color: #fbbf24; box-shadow: 0 0 30px rgba(253,224,71,0.72), 0 0 60px rgba(251,191,36,0.36); }
  10% { border-color: #fbbf24; box-shadow: 0 0 38px rgba(253,224,71,0.765), 0 0 70px rgba(251,191,36,0.45); }
  25% { border-color: #fbbf24; box-shadow: 0 0 28px rgba(253,224,71,0.65), 0 0 14px rgba(251,191,36,0.35); }
  50% { border-color: #fbbf24; box-shadow: 0 0 20px rgba(253,224,71,0.4), 0 0 9px rgba(251,191,36,0.2); }
  75% { border-color: #fbbf24; box-shadow: 0 0 8px rgba(253,224,71,0.12), 0 0 4px rgba(251,191,36,0.06); }
  100% { border-color: #fbbf24; box-shadow: none; }
}


/* ------------------------------------------------------------
   @KEYFRAMES — Shimmer Sweep (supernova overlay)
   ------------------------------------------------------------ */

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


/* ------------------------------------------------------------
   @KEYFRAMES — Slot Spin (digit cells)
   ------------------------------------------------------------ */

@keyframes slotSpin {
  0% { transform: translateY(0); }
  100% { transform: translateY(-40px); }
}


/* ------------------------------------------------------------
   @KEYFRAMES — Input Pop
   ------------------------------------------------------------ */

@keyframes inputPop { 0%{transform:scale(0.9)} 50%{transform:scale(1.06)} 100%{transform:scale(1)} }


/* ------------------------------------------------------------
   @KEYFRAMES — Toast Pop
   ------------------------------------------------------------ */

@keyframes toastPop { from{opacity:0;transform:scale(0.9) translateY(-8px)} to{opacity:1;transform:scale(1) translateY(0)} }


/* ------------------------------------------------------------
   @KEYFRAMES — Green Glow (share button)
   ------------------------------------------------------------ */

@keyframes greenGlow {
  0% { border-color: var(--right); box-shadow: 0 0 10px rgba(94,224,152,0.3), 0 0 4px rgba(94,224,152,0.15); }
  12% { border-color: var(--right); box-shadow: 0 0 14px rgba(94,224,152,0.4), 0 0 6px rgba(94,224,152,0.25); }
  35% { border-color: var(--right); box-shadow: 0 0 10px rgba(94,224,152,0.3), 0 0 5px rgba(94,224,152,0.15); }
  60% { border-color: rgba(94,224,152,0.3); box-shadow: 0 0 5px rgba(94,224,152,0.1), 0 0 3px rgba(94,224,152,0.05); }
  100% { border-color: transparent; box-shadow: none; }
}


/* ------------------------------------------------------------
   @KEYFRAMES — Progress Dot Fade In
   ------------------------------------------------------------ */

@keyframes dotFadeIn {
  0% { background: var(--surface); border-color: var(--border); }
  100% { background: var(--right); border-color: transparent; }
}


/* ------------------------------------------------------------
   @KEYFRAMES — Strike Hit (life box)
   ------------------------------------------------------------ */

@keyframes strikeHit {
  0% { transform: scale(0.6); border-color: #fff; box-shadow: 0 0 24px rgba(239,68,68,0.9), 0 0 48px rgba(239,68,68,0.4); background: color-mix(in srgb, var(--no) 50%, transparent); }
  12% { transform: scale(1.35); box-shadow: 0 0 30px rgba(239,68,68,1), 0 0 60px rgba(239,68,68,0.5); }
  22% { transform: scale(1) rotate(-10deg); }
  32% { transform: rotate(8deg); box-shadow: 0 0 18px rgba(239,68,68,0.6), 0 0 36px rgba(239,68,68,0.25); }
  42% { transform: rotate(-4deg); }
  52% { transform: rotate(2deg); }
  62% { transform: rotate(0); box-shadow: 0 0 8px rgba(239,68,68,0.3); }
  100% { transform: scale(1) rotate(0); border-color: var(--no); box-shadow: none; background: color-mix(in srgb, var(--no) 20%, transparent); }
}

@keyframes strikeXSlash {
  0% { transform: scale(0) rotate(-180deg); opacity: 0; }
  50% { transform: scale(1.3) rotate(0deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes strikeFlash {
  0% { opacity: 1; }
  100% { opacity: 0; }
}


/* ------------------------------------------------------------
   @KEYFRAMES — Shield Gold Glow
   ------------------------------------------------------------ */

@keyframes shieldGoldGlow {
  0% { border-color: #fbbf24; box-shadow: 0 0 14px rgba(251,191,36,0.6), 0 0 6px rgba(251,191,36,0.35); }
  15% { border-color: #fbbf24; box-shadow: 0 0 22px rgba(251,191,36,0.8), 0 0 10px rgba(251,191,36,0.5); }
  40% { border-color: #fbbf24; box-shadow: 0 0 16px rgba(251,191,36,0.5), 0 0 8px rgba(251,191,36,0.3); }
  70% { border-color: rgba(251,191,36,0.4); box-shadow: 0 0 8px rgba(251,191,36,0.2), 0 0 4px rgba(251,191,36,0.1); }
  100% { border-color: var(--right); box-shadow: none; }
}


/* ============================================================
   ANIMATION TRIGGER CLASSES
   ============================================================ */


/* ------------------------------------------------------------
   Gold Glow — Normal
   ------------------------------------------------------------ */

.guess-cell.gold-glow { animation: goldGlowFade 3.5s ease-in-out forwards; will-change: box-shadow, border-color; }
.guess-era-chip.era-gold { animation: goldGlowFade 3.5s ease-in-out forwards; will-change: box-shadow, border-color; }


/* ------------------------------------------------------------
   Gold Bright
   ------------------------------------------------------------ */

.guess-cell.gold-bright { animation: goldBrightFade 4s ease-in-out forwards; will-change: box-shadow, border-color; }
.guess-era-chip.era-gold-bright { animation: goldBrightFade 4s ease-in-out forwards; will-change: box-shadow, border-color; }


/* ------------------------------------------------------------
   Gold Hold — Stays at peak (no animation, static glow)
   ------------------------------------------------------------ */

.guess-cell.gold-hold { border-color: #fbbf24; box-shadow: 0 0 18px rgba(253,224,71,0.6), 0 0 8px rgba(251,191,36,0.35); transition: border-color 0.3s ease, box-shadow 0.3s ease; will-change: box-shadow, border-color; }
.guess-era-chip.era-gold-hold { border-color: #fbbf24; box-shadow: 0 0 18px rgba(253,224,71,0.6), 0 0 8px rgba(251,191,36,0.35); transition: border-color 0.3s ease, box-shadow 0.3s ease; will-change: box-shadow, border-color; }

/* Permanent gold outline on winning row & bonus correct — no glow, just the border */
.guess-cell.gold-border { border-color: #fbbf24; }
.guess-era-chip.gold-border { border-color: #fbbf24; }
.mc-option.gold-border { border-color: #fbbf24; }
.bonus-collapse.gold-border { border-color: #fbbf24; }


/* ------------------------------------------------------------
   Gold Supernova — Big bloom + shimmer
   ------------------------------------------------------------ */

.guess-cell.gold-supernova { animation: goldSupernovaFade 4s ease-in-out forwards; will-change: box-shadow, border-color; }
.guess-era-chip.era-gold-supernova { animation: goldSupernovaFade 4s ease-in-out forwards; will-change: box-shadow, border-color; }

.gold-supernova::after, .era-gold-supernova::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(105deg, transparent 20%, rgba(253,224,71,0.2) 38%, rgba(255,255,255,0.4) 50%, rgba(253,224,71,0.2) 62%, transparent 80%);
  background-size: 200% 100%; background-position: -100% 0;
  animation: shimmerSweep 0.8s 0.05s ease-out forwards;
  pointer-events: none; z-index: 1;
}


/* ------------------------------------------------------------
   Slot Spin Strip (digit cells)
   ------------------------------------------------------------ */

.guess-cell .spin-strip { display: flex; flex-direction: column; align-items: center; animation: slotSpin 0.08s linear infinite; line-height: 40px; }


/* ------------------------------------------------------------
   Input Pop
   ------------------------------------------------------------ */

.input-cell.pop { animation: inputPop 0.12s ease; }


/* ------------------------------------------------------------
   Multiple Choice & Bonus Gold Bright
   ------------------------------------------------------------ */

.mc-option.gold-bright { animation: goldBrightFade 4s ease-in-out forwards; will-change: box-shadow, border-color; }
.bonus-collapse.gold-bright { animation: goldBrightFade 4s ease-in-out forwards; will-change: box-shadow, border-color; }


/* ------------------------------------------------------------
   Strike Hit — Life Box
   ------------------------------------------------------------ */

.life-box.strike-hit { animation: strikeHit 0.7s ease-out forwards; will-change: transform, box-shadow, border-color; position: relative; overflow: hidden; }
.life-box.strike-hit svg { animation: strikeXSlash 0.35s 0.05s ease-out both; }
.life-box.strike-hit::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle, rgba(239,68,68,0.5) 0%, transparent 70%); animation: strikeFlash 0.5s ease-out forwards; pointer-events: none; z-index: 1; }


/* ------------------------------------------------------------
   Shield Glow — Life Box
   ------------------------------------------------------------ */

.life-box.shield-glow { animation: shieldGoldGlow 3.5s ease-in-out forwards; will-change: box-shadow, border-color; position: relative; overflow: hidden; }
.life-box.shield-glow::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(105deg, transparent 20%, rgba(253,224,71,0.3) 38%, rgba(255,255,255,0.55) 50%, rgba(253,224,71,0.3) 62%, transparent 80%); background-size: 200% 100%; background-position: -100% 0; animation: shimmerSweep 0.8s 0.15s ease-out forwards; pointer-events: none; z-index: 1; }


/* ------------------------------------------------------------
   Progress Dot Lighting
   ------------------------------------------------------------ */

.progress-dot.dot-lighting { transition: none; }
.progress-dot.dot-lighting.dot-used { animation: dotFadeIn 0.5s ease-out forwards; }


/* ------------------------------------------------------------
   Share Button Glow
   ------------------------------------------------------------ */

.share-btn { animation: greenGlow 4s ease-in-out forwards; will-change: box-shadow, border-color; }