/* ============================================
   MIDNIGHT CINEMATIC ANIMATIONS
   Fluid, Physics-Based Motion
   ============================================ */

/* -----------------------------------
   EASING VARIABLES
   ----------------------------------- */
:root {
  --ease-cinematic: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* -----------------------------------
   ENTRANCE ANIMATIONS (Staggered)
   ----------------------------------- */
.animate-slide-up {
  opacity: 0;
  animation: slide-up-fade 0.8s var(--ease-cinematic) forwards;
}

@keyframes slide-up-fade {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.animate-fade-in {
  opacity: 0;
  animation: fade-in-simple 1s ease-out forwards;
}

@keyframes fade-in-simple {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Stagger Delays */
.stagger-1 {
  animation-delay: 0.1s;
}

.stagger-2 {
  animation-delay: 0.2s;
}

.stagger-3 {
  animation-delay: 0.3s;
}

.stagger-4 {
  animation-delay: 0.4s;
}

.stagger-5 {
  animation-delay: 0.5s;
}

/* -----------------------------------
   RIPPLE EFFECT (Click Feedback)
   ----------------------------------- */
.ripple-effect {
  position: fixed;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  animation: ripple-expand 0.6s ease-out forwards;
  pointer-events: none;
  z-index: 9999;
}

@keyframes ripple-expand {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -50%) scale(15);
    opacity: 0;
  }
}

/* -----------------------------------
   HOVER GLOW (For Text)
   ----------------------------------- */
.hover-glow-text {
  transition: text-shadow 0.3s ease;
}

.hover-glow-text:hover {
  text-shadow: 0 0 15px currentColor;
}

/* -----------------------------------
   MAGNETIC BUTTON RESET
   ----------------------------------- */
/* Ensure transition doesn't fight JS magnetic pull */
.btn-crystal,
.btn-premium {
  transition: transform 0.1s linear, background 0.3s ease, box-shadow 0.3s ease;
}

/* -----------------------------------
   HERO KINETIC ANIMATIONS
   ----------------------------------- */
@keyframes floatUp {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.3;
  }

  50% {
    opacity: 0.8;
  }

  100% {
    transform: translateY(-150px) scale(0.5);
    opacity: 0;
  }
}

@keyframes orbit {
  0% {
    transform: rotate(0deg) translateX(180px) rotate(0deg);
  }

  100% {
    transform: rotate(360deg) translateX(180px) rotate(-360deg);
  }
}

@keyframes pulseGlow {

  0%,
  100% {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 10px rgba(34, 211, 238, 0.08)
  }

  50% {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 10px rgba(34, 211, 238, 0.08)
  }
}

/* -----------------------------------
   NEW ENTRANCE ANIMATIONS
   ----------------------------------- */

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: transform 0.2s, opacity 0.2s, background-color 0.2s, border-color 0.2s;
}

.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}

.scale-in {
  opacity: 0;
  transform: scale(0.9);
  transition: transform 0.2s, opacity 0.2s, background-color 0.2s, border-color 0.2s;
}

.scale-in.revealed {
  opacity: 1;
  transform: scale(1);
}

/* -----------------------------------
   STAGGERED CHILDREN
   ----------------------------------- */
.stagger-container>* {
  opacity: 0;
  transform: translateY(20px);
}

.stagger-container.revealed>* {
  animation: slide-up-fade 0.5s var(--ease-cinematic) forwards;
}

.stagger-container.revealed>*:nth-child(1) {
  animation-delay: 0.1s;
}

.stagger-container.revealed>*:nth-child(2) {
  animation-delay: 0.2s;
}

.stagger-container.revealed>*:nth-child(3) {
  animation-delay: 0.3s;
}

.stagger-container.revealed>*:nth-child(4) {
  animation-delay: 0.4s;
}

.stagger-container.revealed>*:nth-child(5) {
  animation-delay: 0.5s;
}

.stagger-container.revealed>*:nth-child(6) {
  animation-delay: 0.6s;
}