/* =====================================================
   ECOMWORLD PAY — GLOBAL ANIMATION SYSTEM
   Hero: CSS keyframes on page load
   Scroll: [data-anim] + IntersectionObserver (JS)
===================================================== */

/* ---- Keyframes ---- */
@keyframes anim-fade-up {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0);    }
}

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

@keyframes anim-fade-left {
  from { opacity: 0; transform: translateX(-36px); }
  to   { opacity: 1; transform: translateX(0);     }
}

@keyframes anim-fade-right {
  from { opacity: 0; transform: translateX(36px); }
  to   { opacity: 1; transform: translateX(0);    }
}

@keyframes anim-fade-scale {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1);    }
}

@keyframes anim-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes anim-word-clip {
  from { clip-path: inset(0 100% 0 0); opacity: 0; }
  to   { clip-path: inset(0 0% 0 0);   opacity: 1; }
}

/* =====================================================
   HOME PAGE HERO — plays on page load
===================================================== */
.homeBanner_content h6 {
  animation: anim-fade-down 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.2s;
}

.homeBanner_content h4 {
  animation: anim-fade-up 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.45s;
}

.homeBanner_content > p {
  animation: anim-fade-in 0.7s ease both;
  animation-delay: 0.75s;
}

.homeBanner_content ul li:nth-child(1) {
  animation: anim-fade-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.9s;
}
.homeBanner_content ul li:nth-child(2) {
  animation: anim-fade-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 1.0s;
}
.homeBanner_content ul li:nth-child(3) {
  animation: anim-fade-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 1.1s;
}
.homeBanner_content ul li:nth-child(4) {
  animation: anim-fade-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 1.2s;
}
.homeBanner_content ul li:nth-child(5) {
  animation: anim-fade-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 1.3s;
}

/* Scroll down icon */
.scrolldown {
  animation: anim-fade-in 0.6s ease both;
  animation-delay: 1.6s;
}

/* =====================================================
   COMPANY / ABOUT PAGE HERO — plays on page load
===================================================== */
.about-eyebrow {
  animation: anim-fade-down 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.25s;
}

.about-headline {
  animation: anim-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.45s;
}

.about-sub {
  animation: anim-fade-in 0.7s ease both;
  animation-delay: 0.7s;
}

.about-hero-actions {
  animation: anim-fade-up 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.9s;
}

.ahp-visual-frame {
  animation: anim-fade-scale 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.35s;
}

.ahp-badge-1 {
  animation: anim-fade-right 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.9s;
}

.ahp-badge-2 {
  animation: anim-fade-left 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 1.05s;
}

.ahp-badge-3 {
  animation: anim-fade-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 1.15s;
}

/* Stats bar items */
.ahsb-item:nth-child(1) { animation: anim-fade-up 0.5s ease both; animation-delay: 0.3s; }
.ahsb-item:nth-child(2) { animation: anim-fade-up 0.5s ease both; animation-delay: 0.45s; }
.ahsb-item:nth-child(3) { animation: anim-fade-up 0.5s ease both; animation-delay: 0.6s; }
.ahsb-item:nth-child(4) { animation: anim-fade-up 0.5s ease both; animation-delay: 0.75s; }

/* =====================================================
   COMING SOON PAGE — plays on page load
===================================================== */
.cs-icon-wrap {
  animation: anim-fade-scale 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.2s;
}

.cs-eyebrow {
  animation: anim-fade-down 0.6s ease both;
  animation-delay: 0.45s;
}

.cs-headline {
  animation: anim-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.65s;
}

.cs-divider {
  animation: anim-fade-scale 0.5s ease both;
  animation-delay: 0.85s;
}

.cs-sub {
  animation: anim-fade-in 0.7s ease both;
  animation-delay: 1.0s;
}

.cs-countdown {
  animation: anim-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 1.15s;
}

.cs-actions {
  animation: anim-fade-up 0.6s ease both;
  animation-delay: 1.35s;
}

.cs-notify-row {
  animation: anim-fade-in 0.6s ease both;
  animation-delay: 1.55s;
}

/* =====================================================
   SCROLL ANIMATION — [data-anim] system
   JS adds .is-visible when element enters viewport
===================================================== */
[data-anim] {
  opacity: 0;
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-duration: 0.65s;
}

[data-anim].is-visible {
  opacity: 1 !important;
  transform: none !important;
}

[data-anim="fade-up"]    { transform: translateY(32px); }
[data-anim="fade-down"]  { transform: translateY(-20px); }
[data-anim="fade-left"]  { transform: translateX(-36px); }
[data-anim="fade-right"] { transform: translateX(36px); }
[data-anim="fade-scale"] { transform: scale(0.93); }
[data-anim="fade"]       { /* opacity only */ }

/* Stagger delays */
[data-delay="100"]  { transition-delay: 0.10s; }
[data-delay="150"]  { transition-delay: 0.15s; }
[data-delay="200"]  { transition-delay: 0.20s; }
[data-delay="250"]  { transition-delay: 0.25s; }
[data-delay="300"]  { transition-delay: 0.30s; }
[data-delay="350"]  { transition-delay: 0.35s; }
[data-delay="400"]  { transition-delay: 0.40s; }
[data-delay="500"]  { transition-delay: 0.50s; }

/* =====================================================
   REDUCED MOTION — respect user preference
===================================================== */
@media (prefers-reduced-motion: reduce) {
  [data-anim],
  .homeBanner_content h6,
  .homeBanner_content h4,
  .homeBanner_content > p,
  .homeBanner_content ul li,
  .scrolldown,
  .about-eyebrow,
  .about-headline,
  .about-sub,
  .about-hero-actions,
  .ahp-visual-frame,
  .ahp-badge-1,
  .ahp-badge-2,
  .ahp-badge-3,
  .ahsb-item,
  .cs-icon-wrap,
  .cs-eyebrow,
  .cs-headline,
  .cs-divider,
  .cs-sub,
  .cs-countdown,
  .cs-actions,
  .cs-notify-row {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}