/* ============================================================
   THE WHITE DIGITAL — Animations v2
   Scroll-triggered + CSS keyframe animations
   ============================================================ */

/* ---- Respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================
   SCROLL-TRIGGERED FADE ANIMATIONS
   ============================================================ */

/* Base: all animated elements start hidden */
.fade-in,
.fade-up,
.fade-left,
.fade-right,
.zoom-in,
.slide-up {
  opacity: 0;
  will-change: opacity, transform;
}

/* Fade in (straight) */
.fade-in {
  transform: translateY(24px);
  transition: opacity .55s ease, transform .55s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fade up */
.fade-up {
  transform: translateY(36px);
  transition: opacity .6s ease, transform .6s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fade from left */
.fade-left {
  transform: translateX(-32px);
  transition: opacity .6s ease, transform .6s ease;
}
.fade-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Fade from right */
.fade-right {
  transform: translateX(32px);
  transition: opacity .6s ease, transform .6s ease;
}
.fade-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Zoom in */
.zoom-in {
  transform: scale(0.92);
  transition: opacity .55s ease, transform .55s ease;
}
.zoom-in.visible {
  opacity: 1;
  transform: scale(1);
}

/* Slide up */
.slide-up {
  transform: translateY(48px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.slide-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for grid children */
.fade-in:nth-child(1), .fade-up:nth-child(1) { transition-delay: 0s; }
.fade-in:nth-child(2), .fade-up:nth-child(2) { transition-delay: .08s; }
.fade-in:nth-child(3), .fade-up:nth-child(3) { transition-delay: .16s; }
.fade-in:nth-child(4), .fade-up:nth-child(4) { transition-delay: .24s; }
.fade-in:nth-child(5), .fade-up:nth-child(5) { transition-delay: .32s; }
.fade-in:nth-child(6), .fade-up:nth-child(6) { transition-delay: .40s; }

/* ============================================================
   CSS KEYFRAME ANIMATIONS (always-on, no scroll trigger)
   ============================================================ */

/* Hero label pulse */
@keyframes pulse-badge {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,168,76,.4); }
  50%       { box-shadow: 0 0 0 8px rgba(201,168,76,0); }
}
.hero-label {
  animation: pulse-badge 2.8s ease infinite;
}

/* Floating card in hero */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
.hero-card--main {
  animation: float 4s ease-in-out infinite;
}

/* Spinner (payment loading) */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner {
  width: 32px; height: 32px;
  border: 3px solid rgba(0,0,0,.1);
  border-top-color: var(--black);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

/* Scroll-to-top button reveal */
@keyframes bounceIn {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}
.scroll-top.visible {
  animation: bounceIn .35s ease forwards;
}

/* Page hero gradient shimmer */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

/* Step number count-in pulse */
@keyframes stepPop {
  0%   { transform: scale(0.7); opacity: 0; }
  70%  { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}
.step-number {
  animation: stepPop .5s cubic-bezier(.22,1,.36,1) both;
}
.step:nth-child(1) .step-number { animation-delay: .1s; }
.step:nth-child(2) .step-number { animation-delay: .2s; }
.step:nth-child(3) .step-number { animation-delay: .3s; }
.step:nth-child(4) .step-number { animation-delay: .4s; }

/* Payment success checkmark */
@keyframes checkPop {
  0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
  60%  { transform: scale(1.2) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.payment-success-icon {
  animation: checkPop .5s cubic-bezier(.22,1,.36,1) both;
}

/* Card hover lift — smooth */
.card,
.service-card,
.product-card,
.feature-block,
.testimonial-card {
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover,
.service-card:hover,
.product-card:hover,
.feature-block:hover { 
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.1);
}

/* Button press feedback */
.btn {
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform .12s ease,
              box-shadow .12s ease;
}
.btn:active { transform: scale(.97); }

/* Image zoom on service/product cards */
.service-card .card-img img,
.product-card__img img {
  transition: transform .45s ease;
}
.service-card:hover .card-img img,
.product-card:hover .product-card__img img {
  transform: scale(1.06);
}

/* Navbar link underline slide */
.nav-menu > li > a::after {
  content: '';
  display: block;
  height: 2px;
  background: var(--black);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
  margin-top: 2px;
  border-radius: 2px;
}
.nav-menu > li > a:hover::after,
.nav-menu > li > a.active::after {
  transform: scaleX(1);
}

/* WhatsApp float button pulse */
@keyframes waPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37,211,102,.35); }
  50%       { box-shadow: 0 0 0 10px rgba(37,211,102,0); }
}
.whatsapp-float {
  animation: waPulse 2.5s ease infinite;
}