/* animations.css */

/* Aurora Background Keyframes */
@keyframes aurora-drift-1 {
  0% { transform: translate(0%, 0%) scale(1) rotate(0deg); }
  100% { transform: translate(8%, 6%) scale(1.08) rotate(3deg); }
}

@keyframes aurora-drift-2 {
  0% { transform: translate(0%, 0%) scale(1) rotate(0deg); }
  100% { transform: translate(-10%, 4%) scale(1.05) rotate(-2deg); }
}

@keyframes aurora-drift-3 {
  0% { transform: translate(0%, 0%) scale(1) rotate(0deg); }
  100% { transform: translate(5%, -5%) scale(1.1) rotate(2deg); }
}

@keyframes aurora-drift-4 {
  0% { transform: translate(0%, 0%) scale(1); }
  100% { transform: translate(-6%, 3%) scale(1.06); }
}

/* Orb Drifts */
@keyframes orb-drift-1 {
  0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  100% { transform: translate3d(7%, 5%, 0) scale(1.08) rotate(5deg); }
}

@keyframes orb-drift-2 {
  0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  100% { transform: translate3d(-6%, 4%, 0) scale(1.06) rotate(-4deg); }
}

@keyframes orb-drift-3 {
  0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  100% { transform: translate3d(5%, -4%, 0) scale(1.09) rotate(3deg); }
}

@keyframes orb-drift-4 {
  0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  100% { transform: translate3d(-4%, -3%, 0) scale(1.05) rotate(-3deg); }
}

/* Background Grids & Particles */
@keyframes grid-pan {
  0% { background-position: 0 0; }
  100% { background-position: 0 144px; }
}

@keyframes particle-rise {
  0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.08; }
  50% { transform: translate3d(8px, -18px, 0) scale(1.18); opacity: 0.24; }
  100% { transform: translate3d(-6px, -36px, 0) scale(1); opacity: 0.08; }
}

@keyframes particles-float {
  0% { background-position: 0 0; }
  100% { background-position: 0 160px; }
}

@keyframes noise-shift {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-1%, 1%, 0); }
  100% { transform: translate3d(1%, -1%, 0); }
}

/* Scroll Reveal Classes */
.reveal {
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
  transition: all 0.7s cubic-bezier(0.5, 0, 0, 1);
}

.reveal.visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.reveal-up { transform: translateY(40px); }
.reveal-down { transform: translateY(-40px); }
.reveal-left { transform: translateX(40px); }
.reveal-right { transform: translateX(-40px); }

.reveal-scale {
  transform: translateY(40px) scale(0.95);
}
.reveal-scale.visible {
  transform: translateY(0) scale(1);
}

/* Generic Utilities */
.transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; }
.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; }
.transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; }
.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; }

.duration-300 { transition-duration: 300ms; }
.duration-500 { transition-duration: 500ms; }
.ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

/* ===== Loading Screen Aura Vortex ===== */
.loader-vortex-container {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.loader-ring {
  position: absolute;
  border: 1px solid transparent;
  border-radius: 50%;
  mix-blend-mode: screen;
  opacity: 0.8;
}

.loader-ring.ring-1 {
  width: 50vw; height: 50vw; max-width: 450px; max-height: 450px;
  border-top-color: hsl(var(--gradient-start));
  border-left-color: hsl(var(--gradient-start) / 0.5);
  animation: spin-morph 10s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
  filter: blur(2px);
  box-shadow: 0 0 40px hsl(var(--gradient-start) / 0.3), inset 0 0 40px hsl(var(--gradient-start) / 0.2);
}

.loader-ring.ring-2 {
  width: 70vw; height: 70vw; max-width: 650px; max-height: 650px;
  border-bottom-color: hsl(var(--gradient-mid));
  border-right-color: hsl(var(--gradient-mid) / 0.5);
  animation: spin-morph-reverse 15s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
  filter: blur(4px);
  box-shadow: 0 0 60px hsl(var(--gradient-mid) / 0.2), inset 0 0 60px hsl(var(--gradient-mid) / 0.1);
}

.loader-ring.ring-3 {
  width: 90vw; height: 90vw; max-width: 850px; max-height: 850px;
  border-top-color: hsl(var(--gradient-end));
  border-left-color: hsl(var(--gradient-end) / 0.5);
  animation: spin-morph 20s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
  filter: blur(8px);
  opacity: 0.6;
}

@keyframes spin-morph {
  0% { transform: rotate(0deg) scale(0.9); border-radius: 50%; }
  50% { transform: rotate(180deg) scale(1.1); border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
  100% { transform: rotate(360deg) scale(0.95); border-radius: 50%; }
}

@keyframes spin-morph-reverse {
  0% { transform: rotate(360deg) scale(0.9); border-radius: 50%; }
  50% { transform: rotate(180deg) scale(1.05); border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  100% { transform: rotate(0deg) scale(0.95); border-radius: 50%; }
}

/* Pulsing Core */
.loader-core {
  position: absolute;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle, hsl(var(--gradient-start) / 0.8), transparent 70%);
  filter: blur(40px);
  animation: core-pulse 4s ease-in-out infinite alternate;
  z-index: 1;
}

@keyframes core-pulse {
  0% { transform: scale(0.8); opacity: 0.5; }
  100% { transform: scale(1.4); opacity: 1; }
}

/* Orbiting Sparks */
.loader-spark {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 15px 3px #fff, 0 0 30px 10px hsl(var(--gradient-mid));
  z-index: 5;
}

.spark-1 { animation: orbit-spark 3s linear infinite; }
.spark-2 { animation: orbit-spark-2 5s linear infinite reverse; }
.spark-3 { animation: orbit-spark-3 4s linear infinite; }

@keyframes orbit-spark {
  0% { transform: rotate(0deg) translateX(30vw) rotate(0deg); opacity: 0.2; }
  50% { opacity: 1; }
  100% { transform: rotate(360deg) translateX(30vw) rotate(-360deg); opacity: 0.2; }
}
@keyframes orbit-spark-2 {
  0% { transform: rotate(0deg) translateY(25vw) rotate(0deg); opacity: 0.2; }
  50% { opacity: 1; }
  100% { transform: rotate(360deg) translateY(25vw) rotate(-360deg); opacity: 0.2; }
}
@keyframes orbit-spark-3 {
  0% { transform: rotate(0deg) translateX(40vw) translateY(10vw) rotate(0deg); opacity: 0.2; }
  50% { opacity: 1; }
  100% { transform: rotate(360deg) translateX(40vw) translateY(10vw) rotate(-360deg); opacity: 0.2; }
}

/* Floating Stardust */
.loader-stardust {
  position: absolute;
  width: 2px;
  height: 2px;
  background: transparent;
  border-radius: 50%;
  animation: stardust-float 15s linear infinite;
  opacity: 0.6;
}

.dust-1 {
  box-shadow: 
    10vw 20vh hsl(var(--gradient-start)), 
    -20vw -30vh hsl(var(--gradient-end)), 
    40vw 10vh hsl(var(--gradient-mid)),
    -40vw 40vh #fff,
    30vw -40vh hsl(var(--gradient-start));
  animation-duration: 20s;
}
.dust-2 {
  box-shadow: 
    -15vw 25vh hsl(var(--gradient-end)), 
    25vw -15vh hsl(var(--gradient-start)), 
    -30vw -10vh #fff,
    45vw 35vh hsl(var(--gradient-mid)),
    -5vw -45vh hsl(var(--gradient-end));
  animation-duration: 15s;
  animation-delay: -5s;
}
.dust-3 {
  box-shadow: 
    5vw -20vh #fff, 
    -10vw 30vh hsl(var(--gradient-mid)), 
    35vw -25vh hsl(var(--gradient-start)),
    -35vw 15vh hsl(var(--gradient-end)),
    20vw 45vh hsl(var(--gradient-start));
  animation-duration: 25s;
  animation-delay: -10s;
}

@keyframes stardust-float {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  10% { opacity: 0.8; }
  90% { opacity: 0.8; }
  100% { transform: translateY(-30vh) rotate(45deg); opacity: 0; }
}