/* ==========================================================================
   WIND CAPITALS — ANIMATION STYLESHEET
   Keyframes, micro-interactions and motion utilities.
   AOS (fade/zoom on scroll) ships its own CSS — this file covers everything
   AOS does not: floating elements, counters, ripples, charts, loaders.
   ========================================================================== */

/* ==========================================================================
   KEYFRAMES
   ========================================================================== */
@keyframes floatY {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-16px);
  }
}

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

@keyframes blobMove {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(30px, -20px) scale(1.08);
  }
  66% {
    transform: translate(-20px, 15px) scale(.95);
  }
}

@keyframes pulseRing {
  0% {
    box-shadow: 0 0 0 0 rgba(142, 219, 91, .5);
  }
  100% {
    box-shadow: 0 0 0 16px rgba(142, 219, 91, 0);
  }
}

@keyframes spinSlow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes rippleEffect {
  0% {
    transform: scale(0);
    opacity: .55;
  }
  100% {
    transform: scale(2.8);
    opacity: 0;
  }
}

@keyframes bounceArrow {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}

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

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

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

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

@keyframes drawLine {
  from {
    stroke-dashoffset: 500;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* ==========================================================================
   APPLIED ANIMATIONS
   ========================================================================== */
.floating-badge {
  animation: floatY 4.5s ease-in-out infinite;
}

.floating-badge--1 {
  animation-delay: 0s;
}

.floating-badge--2 {
  animation-delay: .5s;
}

.floating-badge--3 {
  animation-delay: 1s;
}

.floating-badge--4 {
  animation-delay: 1.5s;
}

.hero-blob-1 {
  animation: blobMove 14s ease-in-out infinite;
}

.hero-blob-2 {
  animation: blobMove 18s ease-in-out infinite reverse;
}

.cta-banner-blob,
.page-header-blob,
.contact-info-panel::before {
  animation: blobMove 16s ease-in-out infinite;
}

.experience-badge-card {
  animation: floatYSmall 5s ease-in-out infinite;
}

.chart-live-dot {
  position: relative;
}

.chart-live-dot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--color-success);
  animation: pulseRing 1.8s ease-out infinite;
}

.icon-spin-hover:hover i,
.icon-spin-hover:hover svg {
  animation: spinSlow 1.2s linear infinite;
}

.scroll-hint {
  animation: bounceArrow 1.8s ease-in-out infinite;
}

.dashboard-chart-path {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: drawLine 2s cubic-bezier(.4, 0, .2, 1) forwards;
  animation-play-state: paused;
}

.dashboard-mock.is-in-view .dashboard-chart-path {
  animation-play-state: running;
}

/* ==========================================================================
   RIPPLE EFFECT (buttons)
   ========================================================================== */
.btn-brand,
.btn-outline-brand,
.btn-dark-brand,
.btn-outline-white {
  isolation: isolate;
}

.ripple-el {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  pointer-events: none;
  transform: scale(0);
  animation: rippleEffect .7s ease-out;
  z-index: 0;
}

.btn-dark-brand .ripple-el,
.btn-outline-white .ripple-el {
  background: rgba(255, 255, 255, .35);
}

.btn-brand .ripple-el,
.btn-outline-brand .ripple-el {
  background: rgba(13, 59, 42, .25);
}

/* ==========================================================================
   BUTTON SCALE / LIFT MICRO-INTERACTIONS
   ========================================================================== */
.btn-brand,
.btn-outline-brand,
.btn-dark-brand,
.btn-outline-white,
.btn-icon-circle,
.menu-toggle,
.swiper-btn-custom,
.footer-social a,
.back-to-top {
  will-change: transform;
}

.btn-brand:active,
.btn-outline-brand:active,
.btn-dark-brand:active,
.btn-outline-white:active {
  transform: scale(.97);
}

/* ==========================================================================
   COUNTER NUMBER POP
   ========================================================================== */
.stat-number.is-counted,
.plan-range.is-counted {
  animation: scaleIn .5s ease-out;
}

/* ==========================================================================
   AOS TUNING
   ========================================================================== */
[data-aos] {
  transition-timing-function: cubic-bezier(.4, 0, .2, 1) !important;
}

/* ==========================================================================
   REDUCED MOTION — ACCESSIBILITY
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}