/* ============================================
   KALIWAY LANDSCAPING LLC — Animations
   ============================================ */

/* ── Keyframes ───────────────────────────────── */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

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

@keyframes float-particle {
  0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 0.4; }
  100% { transform: translateY(-120vh) translateX(var(--dx, 20px)) scale(0.6); opacity: 0; }
}

@keyframes count-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Scroll Reveal: base states ──────────────── */
.reveal-fade {
  opacity: 0;
  transition:
    opacity var(--duration-reveal) var(--ease-out-expo),
    transform var(--duration-reveal) var(--ease-out-expo);
  transition-delay: var(--delay, 0s);
}

.reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity var(--duration-reveal) var(--ease-out-expo),
    transform var(--duration-reveal) var(--ease-out-expo);
  transition-delay: var(--delay, 0s);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition:
    opacity var(--duration-reveal) var(--ease-out-expo),
    transform var(--duration-reveal) var(--ease-out-expo);
  transition-delay: var(--delay, 0s);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition:
    opacity var(--duration-reveal) var(--ease-out-expo),
    transform var(--duration-reveal) var(--ease-out-expo);
  transition-delay: var(--delay, 0s);
}

/* ── Scroll Reveal: visible states ──────────── */
.reveal-fade.is-visible {
  opacity: 1;
}

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

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

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

/* ── Tab Panel Transitions ───────────────────── */
.tab-panel {
  animation: none;
}

.tab-panel.active {
  animation: fade-in-up 0.45s var(--ease-out-expo) forwards;
}

/* ── Particles ───────────────────────────────── */
.particle {
  position: absolute;
  bottom: -10px;
  border-radius: 50%;
  background: var(--color-accent);
  pointer-events: none;
  animation: float-particle var(--dur, 8s) ease-in var(--delay-p, 0s) infinite;
  will-change: transform, opacity;
}

/* ── Stat counter pop-in ─────────────────────── */
.stat-number {
  display: inline-block;
  transition: opacity 0.3s ease;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .reveal-fade,
  .reveal-up,
  .reveal-left,
  .reveal-right {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero-bg {
    animation: none;
  }

  .hero-eyebrow,
  .hero-title-line1,
  .hero-title-line2,
  .hero-sub,
  .hero-ctas,
  .hero-scroll-hint {
    opacity: 1;
    animation: none;
  }

  .scroll-line {
    animation: none;
  }

  .particle {
    display: none;
  }
}