/**
 * animations.css
 * ─────────────────────────────────────────────────────────────────────────────
 * Scroll-reveal animations and shared transition utilities.
 *
 * HOW IT WORKS:
 *   1. Elements start with a "hidden" state (opacity: 0, translated/scaled).
 *   2. animations.js uses IntersectionObserver to detect when elements
 *      enter the viewport.
 *   3. When visible, the class "revealed" is added, triggering the transition
 *      to the "visible" state.
 *
 * REVEAL VARIANTS:
 *   .reveal-up    — fade in + slide up
 *   .reveal-left  — fade in + slide from left
 *   .reveal-right — fade in + slide from right
 *   .reveal-scale — fade in + scale up
 *   .reveal-fade  — fade in only
 *
 * STAGGER:
 *   Add data-delay="N" (N = 0-5) to stagger children animations.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── BASE REVEAL STATE ──────────────────────────────────────────
   All reveal elements start hidden.
──────────────────────────────────────────────────────────────── */
.reveal-up,
.reveal-left,
.reveal-right,
.reveal-scale,
.reveal-fade {
  opacity: 0;
  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}

/* ── INITIAL POSITIONS ──────────────────────────────────────────
   Each variant starts in a different position.
──────────────────────────────────────────────────────────────── */
.reveal-up {
  transform: translateY(40px);
}
.reveal-left {
  transform: translateX(-40px);
}
.reveal-right {
  transform: translateX(40px);
}
.reveal-scale {
  transform: scale(0.92);
}
.reveal-fade {
  transform: none;
}

/* ── REVEALED STATE ─────────────────────────────────────────────
   Added by animations.js when element enters viewport.
──────────────────────────────────────────────────────────────── */
.reveal-up.revealed,
.reveal-left.revealed,
.reveal-right.revealed,
.reveal-scale.revealed,
.reveal-fade.revealed {
  opacity: 1;
  transform: none;
}

/* ── STAGGER DELAYS ─────────────────────────────────────────────
   Add data-delay="N" to stagger sibling animations.
   animations.js reads this attribute and applies the delay.
──────────────────────────────────────────────────────────────── */
[data-delay='1'] {
  transition-delay: 0.1s;
}
[data-delay='2'] {
  transition-delay: 0.2s;
}
[data-delay='3'] {
  transition-delay: 0.3s;
}
[data-delay='4'] {
  transition-delay: 0.4s;
}
[data-delay='5'] {
  transition-delay: 0.5s;
}
[data-delay='6'] {
  transition-delay: 0.6s;
}
[data-delay='7'] {
  transition-delay: 0.7s;
}
[data-delay='8'] {
  transition-delay: 0.8s;
}

/* ── HERO ENTRANCE ANIMATIONS ───────────────────────────────────
   Special animations for the hero section that play on page load.
──────────────────────────────────────────────────────────────── */
.hero-content {
  animation: hero-enter-left 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}

.hero-image-wrapper {
  animation: hero-enter-right 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both;
}

@keyframes hero-enter-left {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes hero-enter-right {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ── GRADIENT ANIMATION ─────────────────────────────────────────
   Animated gradient shift for accent elements.
──────────────────────────────────────────────────────────────── */
@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.gradient-animated {
  background-size: 200% 200%;
  animation: gradient-shift 4s ease infinite;
}

/* ── FLOAT ANIMATION ────────────────────────────────────────────
   Gentle floating effect for decorative elements.
──────────────────────────────────────────────────────────────── */
@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-12px);
  }
}

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

/* ── SPIN ANIMATION ─────────────────────────────────────────────
   Slow rotation for decorative rings.
──────────────────────────────────────────────────────────────── */
@keyframes spin-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ── FADE IN ────────────────────────────────────────────────────
   Simple fade-in utility.
──────────────────────────────────────────────────────────────── */
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in {
  animation: fade-in 0.5s ease both;
}

/* ── SLIDE UP ───────────────────────────────────────────────────
   Slide up + fade in utility.
──────────────────────────────────────────────────────────────── */
@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-up {
  animation: slide-up 0.5s ease both;
}

/* ── NAVBAR SCROLL ANIMATION ────────────────────────────────────
   Navbar slides down on page load.
──────────────────────────────────────────────────────────────── */
.navbar {
  animation: navbar-enter 0.6s ease 0.1s both;
}

@keyframes navbar-enter {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ── CARD HOVER LIFT ────────────────────────────────────────────
   Reusable hover lift effect.
──────────────────────────────────────────────────────────────── */
.hover-lift {
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* ── PULSE GLOW ─────────────────────────────────────────────────
   Pulsing glow effect for accent elements.
──────────────────────────────────────────────────────────────── */
@keyframes pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(0, 212, 170, 0.4);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(0, 212, 170, 0);
  }
}

.pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* ── COUNTER ANIMATION ──────────────────────────────────────────
   Number counting animation for stats.
   Actual counting is done by JS; this just ensures smooth rendering.
──────────────────────────────────────────────────────────────── */
.stat-value {
  transition: opacity 0.3s ease;
}

/* ── REDUCED MOTION OVERRIDES ───────────────────────────────────
   Disable all animations for users who prefer reduced motion.
   (Also handled in reset.css, but reinforced here for animation-specific rules.)
──────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal-up,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .reveal-fade {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero-content,
  .hero-image-wrapper {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .hero-cursor {
    animation: none;
  }

  .hero-image-frame::before {
    animation: none;
  }

  .hero-image-glow {
    animation: none;
  }

  .chatbot-fab-pulse {
    animation: none;
  }

  .loading-logo {
    animation: none;
  }

  .loading-bar-fill {
    animation: none;
    width: 100%;
  }
}