/* ============================================
   DELETE THINGS FROM EARTH — Animations
   Premium polish, neal.fun quality
   ============================================ */

/* ---- Entrances ---- */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes cardIn {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ---- Earth ---- */

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

/* ---- Shake (light) ---- */

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10% { transform: translateX(-5px); }
  20% { transform: translateX(5px); }
  30% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  50% { transform: translateX(-2px); }
  60% { transform: translateX(2px); }
  70% { transform: translateX(-1px); }
  80% { transform: translateX(1px); }
}

/* ---- Shake (heavy, for geo deletions) ---- */

@keyframes shakeHard {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  8% { transform: translate(-10px, 3px) rotate(-0.5deg); }
  16% { transform: translate(10px, -3px) rotate(0.5deg); }
  24% { transform: translate(-8px, -2px) rotate(-0.3deg); }
  32% { transform: translate(8px, 2px) rotate(0.3deg); }
  40% { transform: translate(-5px, 1px) rotate(-0.2deg); }
  50% { transform: translate(5px, -1px) rotate(0.2deg); }
  60% { transform: translate(-3px, 1px); }
  70% { transform: translate(3px, -1px); }
  80% { transform: translate(-1px, 0); }
  90% { transform: translate(1px, 0); }
}

/* ---- GDP pulse (constant heartbeat) ---- */

@keyframes gdpPulse {
  0%, 100% {
    text-shadow: 0 0 0 transparent;
    opacity: 1;
  }
  50% {
    text-shadow: 0 0 18px currentColor;
    opacity: 0.92;
  }
}

/* ---- GDP shake on delete ---- */

@keyframes gdpShake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-6px) scale(1.03); }
  30% { transform: translateX(6px) scale(1.03); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
  90% { transform: translateX(1px); }
}

/* ---- Card hover: emoji bounce ---- */

@keyframes emojiBounce {
  0%, 100% { transform: translateY(0); }
  35% { transform: translateY(-7px) scale(1.08); }
  55% { transform: translateY(-2px) scale(1.02); }
  75% { transform: translateY(-4px) scale(1.04); }
}

/* ---- DELETE button tremble ---- */

@keyframes tremble {
  0%, 100% { transform: translate(0, 0) scale(1.02); }
  20% { transform: translate(-1.2px, 0.6px) scale(1.02); }
  40% { transform: translate(1.2px, -0.6px) scale(1.025); }
  60% { transform: translate(-0.8px, -0.4px) scale(1.02); }
  80% { transform: translate(0.8px, 0.4px) scale(1.015); }
}

/* ---- Adjacent cards "scared" jump ---- */

@keyframes scaredJump {
  0% { transform: translateY(0) scale(1); }
  25% { transform: translateY(-7px) scale(1.02); }
  50% { transform: translateY(-2px) scale(1.01); }
  75% { transform: translateY(-4px) scale(1.005); }
  100% { transform: translateY(0) scale(1); }
}

/* ---- Card disintegration particles ---- */

@keyframes particleScatter {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(var(--px), var(--py)) scale(0) rotate(var(--pr, 180deg));
  }
}

/* ---- Soul float (emoji rising from card) ---- */

@keyframes soulFloat {
  0% {
    opacity: 0.85;
    transform: translate(-50%, 0) scale(1) rotate(0deg);
    filter: blur(0);
  }
  40% {
    opacity: 0.6;
    transform: translate(-50%, -50px) scale(1.15) rotate(8deg);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -140px) scale(0.4) rotate(-12deg);
    filter: blur(4px);
  }
}

/* ---- Soul fly TO Earth (from card → globe) ---- */

@keyframes soulFlyToEarth {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  65% {
    transform: translate(var(--tx), var(--ty)) scale(0.6);
    opacity: 0.85;
  }
  100% {
    transform: translate(var(--tx), var(--ty)) scale(0);
    opacity: 0;
  }
}

/* ---- Emoji particles (from earth, float + scatter) ---- */

@keyframes floatUp {
  0% {
    opacity: 1;
    transform: translate(var(--fx, 0px), 0) scale(1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(var(--fx, 0px), -90px) scale(0.2) rotate(var(--fr, 30deg));
  }
}

/* ---- Modal emoji disintegrate ---- */

@keyframes disintegrate {
  0% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    filter: blur(0) saturate(1);
  }
  30% {
    opacity: 0.8;
    transform: scale(1.15) rotate(3deg);
    filter: blur(0) saturate(1.2);
  }
  60% {
    opacity: 0.4;
    transform: scale(0.9) rotate(-5deg);
    filter: blur(2px) saturate(0.5);
  }
  100% {
    opacity: 0;
    transform: scale(0.2) rotate(-20deg);
    filter: blur(10px) saturate(0);
  }
}

/* ---- Screen red flash ---- */

@keyframes screenFlashPulse {
  0% { opacity: var(--flash-intensity, 0.12); }
  100% { opacity: 0; }
}

/* ---- Tier reveal: fullscreen ---- */

@keyframes tierRevealBgIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes tierRevealBgOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes tierTextIn {
  0% {
    opacity: 0;
    transform: scale(0.7) translateY(30px);
    filter: blur(12px);
  }
  60% {
    opacity: 1;
    transform: scale(1.04) translateY(-4px);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
}

@keyframes tierLabelIn {
  from {
    opacity: 0;
    letter-spacing: 0.5em;
  }
  to {
    opacity: 1;
    letter-spacing: 0.25em;
  }
}

@keyframes tierEmojiPulse {
  0%, 100% { opacity: 0.06; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.1; transform: translate(-50%, -50%) scale(1.05); }
}

/* ---- Glitch text (tier reveal) ---- */

@keyframes glitchText {
  0%, 100% {
    text-shadow: 0 0 0 transparent;
    transform: translate(0);
  }
  20% {
    text-shadow: -3px 0 #ff3366, 3px 0 #00ff88;
    transform: translate(3px, -1px);
  }
  40% {
    text-shadow: 3px 0 #ff3366, -3px 0 #00ff88;
    transform: translate(-3px, 1px);
  }
  60% {
    text-shadow: -1px 0 #ff3366, 1px 0 #00ff88;
    transform: translate(1px, 0);
  }
  80% {
    text-shadow: 2px 0 #ff3366, -2px 0 #00ff88;
    transform: translate(-2px, -1px);
  }
}

/* ---- Scan lines overlay ---- */

@keyframes scanDrift {
  0% { background-position: 0 0; }
  100% { background-position: 0 8px; }
}

/* ---- Destruction bar pulse ---- */

@keyframes barGlow {
  0%, 100% { box-shadow: 0 0 0 transparent; }
  50% { box-shadow: 0 0 8px var(--accent-red); }
}

/* ---- Pulse glow (generic) ---- */

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 24px 6px var(--accent-green-dim); }
}

/* ---- Red flash (card background) ---- */

@keyframes redFlash {
  0% { background-color: rgba(255, 51, 102, 0.18); }
  100% { background-color: transparent; }
}

/* ---- World reaction (floating text over Earth) ---- */

@keyframes worldReactionFloat {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(0.8); filter: blur(4px); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); filter: blur(0); }
  25% { transform: translate(-50%, -52%) scale(1); }
  65% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -75%) scale(0.85); filter: blur(2px); }
}

/* ---- Cockpit animations ---- */

@keyframes ledPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@keyframes barFlicker {
  0% { opacity: 0.8; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}

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

@keyframes waveScroll {
  from { transform: translateX(-20px); }
  to { transform: translateX(20px); }
}

@keyframes newsSlideIn {
  from { transform: translateX(-30px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes newsSlideOut {
  to { transform: translateX(30px); opacity: 0; }
}

@keyframes bubbleFloat {
  0% { opacity: 0; transform: translateY(10px) scale(0.8); }
  15% { opacity: 1; transform: translateY(0) scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-40px) scale(0.7); }
}

@keyframes sirenPulse {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0.6; transform: scale(1.08); }
}

@keyframes drunkWobble {
  0%, 100% { transform: rotate(0deg) translateX(0); }
  20% { transform: rotate(0.8deg) translateX(4px); }
  40% { transform: rotate(-0.6deg) translateX(-3px); }
  60% { transform: rotate(0.5deg) translateX(2px); }
  80% { transform: rotate(-0.9deg) translateX(-5px); }
}

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

@keyframes charIdle {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-3px); }
}

@keyframes charReact {
  0% { transform: translateX(-50%) translateY(0); }
  30% { transform: translateX(-50%) translateY(-12px); }
  60% { transform: translateX(-50%) translateY(-2px); }
  100% { transform: translateX(-50%) translateY(0); }
}

/* ---- CRT power off (TV shutting down) ---- */

@keyframes crtOff {
  0% { transform: scale(1,1); filter: brightness(1); opacity:1; }
  40% { transform: scale(1.02,0.006); filter: brightness(3); opacity:1; }
  70% { transform: scale(0.8,0.004); filter: brightness(2); opacity:0.8; }
  100% { transform: scale(0,0); filter: brightness(0); opacity:0; }
}

/* ---- Typewriter cursor blink ---- */

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ---- Companion bubble pop in ---- */

@keyframes bubblePopIn {
  0% { opacity:0; transform:translateX(-50%) scale(0.5) translateY(10px); }
  60% { opacity:1; transform:translateX(-50%) scale(1.05) translateY(-2px); }
  100% { opacity:1; transform:translateX(-50%) scale(1) translateY(0); }
}

/* =============================================
   Utility classes
   ============================================= */

.anim-fade-in       { animation: fadeIn 0.3s ease both; }
.anim-fade-in-up    { animation: fadeInUp 0.45s var(--ease-out) both; }
.anim-scale-in      { animation: scaleIn 0.35s var(--ease-bounce) both; }
.anim-card-in       { animation: cardIn 0.35s var(--ease-out) both; }
.anim-slide-up      { animation: slideUp 0.4s var(--ease-out) both; }
.anim-shake         { animation: shake 0.5s ease both; }
.anim-shake-hard    { animation: shakeHard 0.7s ease both; }
.anim-disintegrate  { animation: disintegrate 0.7s ease-in both; }
.anim-earth-float   { animation: earthFloat 6s ease-in-out infinite; }
.anim-gdp-shake     { animation: gdpShake 0.5s ease both; }
.anim-scared        { animation: scaredJump 0.35s var(--ease-bounce) both; }