/* animations.css - Keyframes, transitions, GPU hints */

/* ==========================================================================
   KEYFRAMES
   ========================================================================== */

/* Animated gradient background for hero section (cycles every ~10s) */
@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Pulsing dot for status badge (cycles every 2–3s) */
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.4);
  }
}

/* Fade-up reveal for sections entering the viewport */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Floating animation for background geometric shapes */
@keyframes float {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  33% {
    transform: translateY(-15px) rotate(5deg);
  }
  66% {
    transform: translateY(10px) rotate(-3deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}

/* Staggered text reveal for hero headline */
@keyframes text-reveal {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Scale-in reveal for elements */
@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ==========================================================================
   REVEAL ANIMATION UTILITY CLASSES
   ========================================================================== */

/* Fade up reveal */
.reveal-fade-up {
  animation: fade-up var(--duration-normal, 400ms) var(--easing-smooth, cubic-bezier(0.25, 0.1, 0.25, 1)) forwards;
  will-change: transform, opacity;
}

/* Scale in reveal */
.reveal-scale-in {
  animation: scale-in var(--duration-normal, 400ms) var(--easing-smooth, cubic-bezier(0.25, 0.1, 0.25, 1)) forwards;
  will-change: transform, opacity;
}

/* ==========================================================================
   GPU-ACCELERATED ANIMATION CLASSES
   ========================================================================== */

/* Gradient background animation (hero) */
.anim-gradient {
  animation: gradient-shift 10s ease infinite;
  will-change: transform, opacity;
}

/* Pulse animation (status badge dot) */
.anim-pulse {
  animation: pulse 2.5s ease-in-out infinite;
  will-change: transform, opacity;
}

/* Floating shapes animation (hero background elements) */
.anim-float {
  animation: float 8s ease-in-out infinite;
  will-change: transform, opacity;
}

/* Text reveal animation (hero headline) */
.anim-text-reveal {
  animation: text-reveal 0.8s var(--easing-smooth, cubic-bezier(0.25, 0.1, 0.25, 1)) forwards;
  will-change: transform, opacity;
}

/* ==========================================================================
   STAGGER DELAY UTILITIES
   ========================================================================== */

.stagger-1 { animation-delay: 0ms; }
.stagger-2 { animation-delay: 100ms; }
.stagger-3 { animation-delay: 200ms; }
.stagger-4 { animation-delay: 300ms; }
.stagger-5 { animation-delay: 400ms; }
.stagger-6 { animation-delay: 500ms; }

/* ==========================================================================
   ANIMATION-ENABLED SCOPING
   Reveals are hidden by default when JS adds .animations-enabled to <body>.
   Content stays visible if JS fails or reduced-motion is active.
   ========================================================================== */

.animations-enabled [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
}

.animations-enabled [data-reveal].revealed {
  animation: fade-up var(--duration-normal, 400ms) var(--easing-smooth, cubic-bezier(0.25, 0.1, 0.25, 1)) forwards;
  will-change: transform, opacity;
}

.animations-enabled [data-reveal-scale] {
  opacity: 0;
  transform: scale(0.92);
}

.animations-enabled [data-reveal-scale].revealed {
  animation: scale-in var(--duration-normal, 400ms) var(--easing-smooth, cubic-bezier(0.25, 0.1, 0.25, 1)) forwards;
  will-change: transform, opacity;
}

/* ==========================================================================
   TRANSITION UTILITIES (for hover/focus states)
   All use transform and opacity only — GPU-accelerated, no layout thrash.
   ========================================================================== */

.transition-transform {
  transition: transform var(--duration-fast, 200ms) var(--easing-smooth, cubic-bezier(0.25, 0.1, 0.25, 1));
  will-change: transform;
}

.transition-opacity {
  transition: opacity var(--duration-fast, 200ms) var(--easing-smooth, cubic-bezier(0.25, 0.1, 0.25, 1));
  will-change: opacity;
}

.transition-all-gpu {
  transition: transform var(--duration-fast, 200ms) var(--easing-smooth, cubic-bezier(0.25, 0.1, 0.25, 1)),
              opacity var(--duration-fast, 200ms) var(--easing-smooth, cubic-bezier(0.25, 0.1, 0.25, 1)),
              box-shadow var(--duration-fast, 200ms) var(--easing-smooth, cubic-bezier(0.25, 0.1, 0.25, 1)),
              border-color var(--duration-fast, 200ms) var(--easing-smooth, cubic-bezier(0.25, 0.1, 0.25, 1));
  will-change: transform, opacity;
}

/* ==========================================================================
   PREFERS-REDUCED-MOTION
   Disables all animations and transitions when the OS/browser requests it.
   Only static state indicators (focus outlines, color changes) remain.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .animations-enabled [data-reveal],
  .animations-enabled [data-reveal-scale] {
    opacity: 1 !important;
    transform: none !important;
  }

  .reveal-fade-up,
  .reveal-scale-in,
  .anim-gradient,
  .anim-pulse,
  .anim-float,
  .anim-text-reveal {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .transition-transform,
  .transition-opacity,
  .transition-all-gpu {
    transition: none !important;
  }

  [data-reveal],
  [data-reveal-scale] {
    opacity: 1 !important;
    transform: none !important;
  }
}