/* ==========================================================================
   Aurora & Warp Effects
   Gradient animations: animated traveling underline beam & 3D horizon loader
   ========================================================================== */

:root {
  --aurora-c2: #8b5cf6; /* Deep purple */
  --aurora-c4: #ec4899; /* Neon magenta */
  --aurora-c6: #ff6b00; /* Hot fiery orange */
  --aurora-c7: #ffb703; /* Amber gold */

  --aurora-beam-stream: linear-gradient(
    90deg,
    transparent 0%,
    rgba(99, 102, 241, 0.2) 15%,
    var(--aurora-c2) 30%,
    var(--aurora-c4) 52%,
    var(--aurora-c6) 74%,
    var(--aurora-c7) 90%,
    transparent 100%
  );
}

/* --------------------------------------------------------------------------
   1. Animated Gradient Word Underline Beam (Screenshots 1 & 2)
   -------------------------------------------------------------------------- */

.aurora-word {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  vertical-align: baseline;
}

/* The travelling gradient underline beam - crisp, no glow */
.aurora-beam {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2.5px;
  border-radius: 9999px;
  pointer-events: none;
  background-image: var(--aurora-beam-stream);
  background-size: 260% 100%;
  background-repeat: no-repeat;
  animation: aurora-sweep-cycle 5.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  will-change: transform, opacity, background-position;
}

/* Cyclical animation: appear -> beam sweep across -> glowing linger -> fade out -> pause */
@keyframes aurora-sweep-cycle {
  0% {
    opacity: 0;
    transform: scaleX(0.2);
    transform-origin: left center;
    background-position: 100% 0%;
  }
  8% {
    opacity: 1;
    transform: scaleX(1);
    transform-origin: left center;
    background-position: 95% 0%;
  }
  30% {
    opacity: 1;
    background-position: 50% 0%;
  }
  55% {
    opacity: 1;
    background-position: 5% 0%;
  }
  70% {
    opacity: 0.85;
    background-position: 0% 0%;
  }
  82% {
    opacity: 0;
    transform: scaleX(1);
    background-position: 0% 0%;
  }
  100% {
    opacity: 0;
    transform: scaleX(0.2);
    transform-origin: left center;
    background-position: 100% 0%;
  }
}



/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .aurora-beam,
  .aurora-word {
    animation: none !important;
  }
  .aurora-beam {
    opacity: 1 !important;
    background-position: 50% 0% !important;
  }
}