@import './custom-properties.css';

/* Complex gradient animations */
.gradient-shift {
  background: var(--ff-grad-05);
  position: relative;
  overflow: hidden;
}

.gradient-shift::after {
  content: '';
  position: absolute;
  inset: -20%;
  background: var(--ff-grad-04);
  animation: orbit 18s linear infinite;
  opacity: 0.35;
}

.holographic {
  background: var(--ff-grad-holo);
  background-size: 200% 200%;
  animation: holographic 12s ease-in-out infinite;
  box-shadow: var(--ff-shadow-glow);
}

.neon-glow {
  color: var(--ff-text-strong);
  text-shadow: 0 0 12px rgba(124, 245, 255, 0.85), 0 0 32px rgba(27, 130, 255, 0.55);
}

.aurora-bg {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 20% 20%, rgba(27, 130, 255, 0.2), transparent 40%),
    radial-gradient(circle at 80% 0%, rgba(255, 122, 217, 0.15), transparent 35%),
    #050a13;
}

.aurora-bg::before,
.aurora-bg::after {
  content: '';
  position: absolute;
  inset: -50% -10% auto;
  height: 60%;
  background: linear-gradient(120deg, rgba(124, 245, 255, 0.35), rgba(255, 122, 217, 0.35));
  filter: blur(60px);
  animation: aurora 16s ease-in-out infinite;
}

.aurora-bg::after {
  animation-duration: 22s;
  animation-delay: -4s;
  opacity: 0.55;
}

.mesh-gradient {
  background: radial-gradient(circle at 25% 25%, #1b82ff, transparent 35%),
    radial-gradient(circle at 70% 10%, #ff7ad9, transparent 30%),
    radial-gradient(circle at 60% 70%, #7cf5ff, transparent 45%),
    #0a1729;
  filter: var(--ff-blur-strong);
}

.noise-overlay {
  position: relative;
}

.noise-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--ff-noise);
  pointer-events: none;
  mix-blend-mode: soft-light;
}

.frosted {
  backdrop-filter: var(--ff-blur-heavy);
  background: rgba(10, 23, 41, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--ff-shadow-soft);
}

.reflection {
  position: relative;
  overflow: hidden;
}

.reflection::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0));
  transform: skewX(-15deg) translateX(-120%);
  animation: shimmer 6s ease-in-out infinite;
}

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

@keyframes holographic {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes aurora {
  0% {
    transform: translateX(-10%) translateY(0%);
  }
  50% {
    transform: translateX(10%) translateY(10%);
  }
  100% {
    transform: translateX(-10%) translateY(0%);
  }
}

@keyframes shimmer {
  0% {
    transform: skewX(-15deg) translateX(-120%);
  }
  50% {
    transform: skewX(-15deg) translateX(120%);
  }
  100% {
    transform: skewX(-15deg) translateX(120%);
  }
}