/* ======================================================
   KEYFRAMES (GLOBAL SAFE)
====================================================== */
/* ======================================================
   UNDERLINE – ULTRA SEAMLESS FLOW
====================================================== */
@keyframes underline-gradient {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

@keyframes text-gradient {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 100% 50%;
  }
}

@keyframes title-reveal {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  40% {
    opacity: 0;
    transform: translateY(-6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes border-flow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 300% 50%;
  }
}

/* ======================================================
   GRADIENT ANIMATION
====================================================== */
@keyframes glowingGradient {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 400% 0%;
  }
  100% {
    background-position: 0% 0%;
  }
}

@keyframes glowFloat {
  0% {
    transform: translate(-50%, -50%) scale(0.98);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.04);
  }
  100% {
    transform: translate(-50%, -50%) scale(0.98);
  }
}

@keyframes breathe {
  0% {
    transform: scale(0.9);
    opacity: 0.9;
    filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
  }
  50% {
    transform: scale(1.045);
    opacity: 1;
    filter: drop-shadow(0 0 22px rgba(255, 255, 255, 0.65));
  }
  100% {
    transform: scale(0.9);
    opacity: 0.9;
    filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
  }
}

@keyframes scaleShakeReturn {
  0% {
    transform: scale(1) translateX(0) rotate(0deg);
  }

  10% {
    transform: scale(1.03) translateX(-1px) rotate(-0.5deg);
  }

  20% {
    transform: scale(1.05) translateX(1px) rotate(1deg);
  }

  30% {
    transform: scale(1.07) translateX(-1px) rotate(-0.8deg);
  }

  40% {
    transform: scale(1.08) translateX(1px) rotate(1deg);
  }

  50% {
    transform: scale(1.08) translateX(-0.8px) rotate(-0.6deg);
  }

  60% {
    transform: scale(1.07) translateX(0) rotate(0deg);
  }

  100% {
    transform: scale(1) translateX(0) rotate(0deg);
  }
}