/* ==========================================================================
   ANIMATIONS & KEYFRAMES — GROK SUPER INTELLIGENCE ($GSI)
   ========================================================================== */

/* Keyframes */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulseGlow {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 0.75;
    transform: scale(1.05);
  }
}

@keyframes floatHero {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes scrollBounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(10px);
  }
  60% {
    transform: translateY(5px);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translate(-50%, 20px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes toastSlideOut {
  from {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  to {
    opacity: 0;
    transform: translate(-50%, 20px);
  }
}

/* Scroll Reveal Utility Classes (Visible by default for progressive enhancement) */
.reveal {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

/* Scroll reveal only active when JS animations are confirmed initialized */
html.has-scroll-anim .reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(28px);
}

html.has-scroll-anim .reveal.reveal-scale:not(.is-visible) {
  transform: scale(0.94);
}

html.has-scroll-anim .reveal.reveal-left:not(.is-visible) {
  transform: translateX(-30px);
}

html.has-scroll-anim .reveal.reveal-right:not(.is-visible) {
  transform: translateX(30px);
}

html.has-scroll-anim .reveal.is-visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* Hero Entrance Animations */
.hero-entrance {
  animation: fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) ease-out;
}

.hero-cover-wrapper {
  animation: zoomIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) ease-out;
}

/* Stagger Delays */
.delay-100 { animation-delay: 100ms; transition-delay: 100ms; }
.delay-200 { animation-delay: 200ms; transition-delay: 200ms; }
.delay-300 { animation-delay: 300ms; transition-delay: 300ms; }
.delay-400 { animation-delay: 400ms; transition-delay: 400ms; }
.delay-500 { animation-delay: 500ms; transition-delay: 500ms; }
.delay-600 { animation-delay: 600ms; transition-delay: 600ms; }

/* Micro-interaction Helper Classes */
.pulse-glow {
  animation: pulseGlow 4s ease-in-out infinite;
}

.float-anim {
  animation: floatHero 6s ease-in-out infinite;
}

.scroll-indicator-bounce {
  animation: scrollBounce 2s infinite;
}

/* Shimmer Button Effect */
.btn-shimmer {
  position: relative;
  overflow: hidden;
}

.btn-shimmer::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    60deg,
    transparent 30%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 70%
  );
  transform: rotate(25deg) translateY(-100%);
  transition: transform 0.8s ease;
}

.btn-shimmer:hover::after {
  transform: rotate(25deg) translateY(100%);
}

/* Particle Canvas Backdrop */
#particles-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Reduced Motion Override */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .pulse-glow,
  .float-anim,
  .scroll-indicator-bounce,
  .btn-shimmer::after {
    animation: none !important;
    transform: none !important;
  }
}