/* ═══════════════════════════════════════════════════════════
   Copper Top Marine & Upholstery — Animations
   ═══════════════════════════════════════════════════════════ */

/* ─── Scroll Reveal Classes ──────────────────────────────── */
.reveal-fade {
  opacity: 0;
  transition: opacity 0.8s ease;
}

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

.reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

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

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

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

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

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

/* ─── Stagger delays ─────────────────────────────────────── */
.reveal-up[style*="--delay"] {
  transition-delay: var(--delay);
}

.reveal-fade[style*="--delay"] {
  transition-delay: var(--delay);
}

/* ─── Particles ───────────────────────────────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-100px) translateX(20px); opacity: 0; }
}

.hero-particles span {
  display: block;
  width: 4px;
  height: 4px;
  background: var(--particle-color);
  border-radius: 50%;
  position: absolute;
  animation: float 8s ease-in-out infinite;
}

/* ─── Counter animation ───────────────────────────────────── */
.stat-number {
  transition: all 0.01s ease;
}