/* ========================================
   css/animations.css — Keyframes + Scroll Animations
   DevOps AI by RainTech
   Depends on: css/base.css
   Only animates transform & opacity (compositor-friendly).
   Never uses transition:all.
   All motion disabled under prefers-reduced-motion.
   ======================================== */

/* ═══════════════════════════════════════════════════════════════════════════
   Keyframe Definitions
   ═══════════════════════════════════════════════════════════════════════════ */

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

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

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

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.88);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes meshDrift {
  0%   { transform: translate(0, 0)     rotate(0deg) scale(1); }
  25%  { transform: translate(3%, -2%)  rotate(2deg) scale(1.03); }
  50%  { transform: translate(-2%, 3%)  rotate(-1deg) scale(1.05); }
  75%  { transform: translate(2%, 2%)   rotate(1.5deg) scale(1.02); }
  100% { transform: translate(0, 0)     rotate(0deg) scale(1); }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.55;
    transform: scale(0.90);
  }
}

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

@keyframes countUp {
  from { opacity: 0; transform: translateY(0.4em); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes glowPulse {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.06);
  }
}

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

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

@keyframes shimmer {
  0%   { opacity: 0.3; }
  50%  { opacity: 0.8; }
  100% { opacity: 0.3; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Utility Animation Classes
   ═══════════════════════════════════════════════════════════════════════════ */

.animate-fade-up {
  animation: fadeUp var(--duration-slow) var(--ease-out) both;
}

.animate-fade-in {
  animation: fadeIn var(--duration-normal) var(--ease-out) both;
}

.animate-scale-in {
  animation: scaleIn var(--duration-slow) var(--ease-spring) both;
}

.animate-slide-up {
  animation: slideUp var(--duration-slow) var(--ease-out) both;
}

/* Stagger delays via custom property */
.animate-delay-1  { animation-delay: 100ms; }
.animate-delay-2  { animation-delay: 200ms; }
.animate-delay-3  { animation-delay: 300ms; }
.animate-delay-4  { animation-delay: 400ms; }
.animate-delay-5  { animation-delay: 500ms; }
.animate-delay-6  { animation-delay: 600ms; }

.gradient-ai-bg {
  background: linear-gradient(270deg, #8BDB02, #17E4ED, #C616EA, #2272E0, #8BDB02);
  background-size: 300% 300%;
  animation: gradientShift 8s var(--ease-in-out) infinite;
}

.gradient-ai-text {
  background: linear-gradient(270deg, #8BDB02, #17E4ED, #C616EA, #2272E0, #8BDB02);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 8s var(--ease-in-out) infinite;
}

.animate-float {
  animation: float 5s ease-in-out infinite;
}

.animate-float--slow {
  animation: float 8s ease-in-out infinite;
}

.animate-float--fast {
  animation: float 3s ease-in-out infinite;
}

.animate-glow {
  animation: glowPulse 2.5s ease-in-out infinite;
}

/* Pulse dot */
.pulse-dot {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 1.8s ease-in-out infinite;
}

.mesh-bg {
  animation: meshDrift 18s ease-in-out infinite;
  will-change: transform;
}

.spinner {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 2px solid var(--border-default);
  border-top-color: var(--accent);
  animation: spin 0.7s linear infinite;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Scroll-driven Entry Animations
   [data-animate] attribute triggers entry when .is-visible is added by JS
   ═══════════════════════════════════════════════════════════════════════════ */

[data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity  var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

[data-animate="scale"] {
  transform: scale(0.92);
}

[data-animate="fade"] {
  transform: none;
}

[data-animate="slide-right"] {
  transform: translateX(-32px);
}

[data-animate="slide-left"] {
  transform: translateX(32px);
}

[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0) scale(1) translateX(0);
}

[data-animate-group] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity  0.5s var(--ease-out),
              transform 0.5s var(--ease-out);
}

[data-animate-group].is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

[data-animate-group].is-visible > *:nth-child(1)  { transition-delay: 0ms; }
[data-animate-group].is-visible > *:nth-child(2)  { transition-delay: 80ms; }
[data-animate-group].is-visible > *:nth-child(3)  { transition-delay: 160ms; }
[data-animate-group].is-visible > *:nth-child(4)  { transition-delay: 240ms; }
[data-animate-group].is-visible > *:nth-child(5)  { transition-delay: 320ms; }
[data-animate-group].is-visible > *:nth-child(6)  { transition-delay: 400ms; }
[data-animate-group].is-visible > *:nth-child(7)  { transition-delay: 480ms; }
[data-animate-group].is-visible > *:nth-child(8)  { transition-delay: 560ms; }
[data-animate-group].is-visible > *:nth-child(n+9) { transition-delay: 640ms; }

.card--animated {
  transition: transform        150ms var(--ease-out),
              box-shadow       150ms var(--ease-out),
              border-color     150ms var(--ease-out);
}

.card--animated:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--shadow-lg), 0 0 24px var(--accent-glow);
  border-color: var(--border-glow);
}

.section-entry {
  opacity: 0;
  transform: translateY(32px) scale(0.99);
  transition: opacity   0.6s var(--ease-out),
              transform 0.6s var(--ease-out);
}

.section-entry.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CSS Scroll-Driven Animations
   Progressive enhancement — only where supported (Chrome 115+, Safari 18+)
   ═══════════════════════════════════════════════════════════════════════════ */

@supports (animation-timeline: scroll()) {

  /* Parallax image drift on scroll */
  .parallax-img {
    animation: meshDrift linear both;
    animation-timeline: scroll(root);
    animation-range: 0% 50%;
  }

}

@supports (animation-timeline: view()) {

  /* Auto fade-up when element enters the viewport */
  [data-scroll-reveal] {
    animation: fadeUp var(--duration-slow) var(--ease-out) both;
    animation-timeline: view();
    animation-range: entry 10% entry 40%;
  }

  [data-scroll-reveal="scale"] {
    animation: scaleIn var(--duration-slow) var(--ease-spring) both;
    animation-timeline: view();
    animation-range: entry 10% entry 40%;
  }

}

/* ═══════════════════════════════════════════════════════════════════════════
   prefers-reduced-motion — disable ALL motion
   MUST be last in this file
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {

  /* Kill all keyframe animations */
  .animate-fade-up,
  .animate-fade-in,
  .animate-scale-in,
  .animate-slide-up,
  .gradient-ai-bg,
  .gradient-ai-text,
  .animate-float,
  .animate-float--slow,
  .animate-float--fast,
  .animate-glow,
  .pulse-dot,
  .mesh-bg,
  .spinner {
    animation: none;
  }

  /* Show anything that was hidden by animation state */
  .gradient-ai-text {
    -webkit-text-fill-color: var(--accent);
  }

  /* Stop all transition-based scroll animations */
  [data-animate],
  [data-animate-group] > *,
  .section-entry,
  .card--animated,
  .fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Kill scroll-driven */
  [data-scroll-reveal] {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .parallax-img {
    animation: none;
  }

}