/* ========== ✨ Animations (Keyframes) ========== */

/* Animations */
@keyframes pulseGlow {
  0% {
    filter: drop-shadow(0 0 10px #00fcff);
    text-shadow: 0 0 10px #00f6ff;
    transform: scale(1);
  }
  100% {
    filter: drop-shadow(0 0 25px #00fcff);
    text-shadow: 0 0 25px #00f6ff;
    transform: scale(1.08);
  }
}

@keyframes fadeOut {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 1;
    transform: translate(-50%, calc(-50% + 30px));
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

@keyframes tabFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.96) translateY(15px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

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

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

@keyframes zoomIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes zoomFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

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



@keyframes softPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
  }
}

@keyframes pulseBackground {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); opacity: 0.8; }
  100% { transform: scale(1); }
}


@keyframes notifShake {
  0% { transform: translate(0); }
  25% { transform: translate(1px, -1px); }
  50% { transform: translate(-1px, 1px); }
  75% { transform: translate(1px, 1px); }
  100% { transform: translate(0); }
}

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

@keyframes glowPulse {
  0% { box-shadow: 0 0 6px rgba(0, 246, 255, 0.3); }
  50% { box-shadow: 0 0 12px rgba(0, 246, 255, 0.7); }
  100% { box-shadow: 0 0 6px rgba(0, 246, 255, 0.3); }
}