/* =====================================================
   Color Splashh — Animations
   Scroll reveals, dot-cluster, stat counters, preloader
   ===================================================== */

/* ==================================================
   SCROLL REVEAL
   Elements start invisible and slide up on entering viewport.
   JS adds .is-visible when element enters viewport.
   ================================================== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 500ms ease-out, transform 500ms ease-out;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delay variants */
.reveal-delay-1 { transition-delay: 80ms; }
.reveal-delay-2 { transition-delay: 160ms; }
.reveal-delay-3 { transition-delay: 240ms; }
.reveal-delay-4 { transition-delay: 320ms; }
.reveal-delay-5 { transition-delay: 400ms; }
.reveal-delay-6 { transition-delay: 480ms; }

/* Fade only (no translate) */
.reveal-fade {
  opacity: 0;
  transition: opacity 600ms ease-out;
}

.reveal-fade.is-visible {
  opacity: 1;
}

/* Slide from left */
.reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 550ms ease-out, transform 550ms ease-out;
}

.reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Slide from right */
.reveal-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 550ms ease-out, transform 550ms ease-out;
}

.reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Scale in */
.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 500ms ease-out, transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* ==================================================
   HERO ENTRANCE ANIMATIONS
   ================================================== */
.hero-headline-anim {
  opacity: 0;
  transform: translateY(30px);
  animation: hero-enter 700ms cubic-bezier(0.22, 1, 0.36, 1) 600ms forwards;
}

.hero-sub-anim {
  opacity: 0;
  transform: translateY(20px);
  animation: hero-enter 600ms ease-out 900ms forwards;
}

.hero-cta-anim {
  opacity: 0;
  transform: translateY(16px);
  animation: hero-enter 600ms ease-out 1100ms forwards;
}

@keyframes hero-enter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==================================================
   DOT CLUSTER MOTION (section transitions)
   ================================================== */
.dot-scatter-wrap {
  position: relative;
}

.dot-scatter-wrap .scatter-dot {
  position: absolute;
  border-radius: 50%;
  background: var(--color-bubble);
  opacity: 0;
  transition: opacity 400ms, transform 400ms;
}

.dot-scatter-wrap:hover .scatter-dot {
  opacity: 0.5;
  transform: translate(var(--tx, 0), var(--ty, 0)) scale(1.2);
}

/* ==================================================
   MARQUEE PAUSE ON HOVER (defined in components)
   Extra animation declarations here
   ================================================== */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ==================================================
   FLOAT / PULSE (WhatsApp floating button ping)
   ================================================== */
.wa-float::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: #25D366;
  opacity: 0;
  animation: wa-ping 2.5s ease-out 3s infinite;
}

@keyframes wa-ping {
  0%   { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ==================================================
   SMOOTH PAGE ENTRANCE (body appears after preloader)
   ================================================== */
body.page-ready .site-nav,
body.page-ready main,
body.page-ready .site-footer {
  animation: page-reveal 600ms ease-out both;
}

@keyframes page-reveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ==================================================
   HOVER LIFT (generic)
   ================================================== */
.hover-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

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

/* ==================================================
   REDUCED MOTION SUPPORT
   Honour prefers-reduced-motion by disabling all
   non-essential animations.
   ================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal,
  .reveal-fade,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1;
    transform: none;
  }

  .hero-headline-anim,
  .hero-sub-anim,
  .hero-cta-anim {
    opacity: 1;
    transform: none;
    animation: none;
  }
}