/* ============================================================
   Clean Cutz — Animations
   ============================================================ */

/* ── Scroll Reveal Base ── */
.reveal-fade,
.reveal-up,
.reveal-left,
.reveal-right {
  transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
  will-change: opacity, transform;
}

.reveal-fade   { opacity: 0; }
.reveal-up     { opacity: 0; transform: translateY(40px); }
.reveal-left   { opacity: 0; transform: translateX(-40px); }
.reveal-right  { opacity: 0; transform: translateX(40px); }

.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); }

/* Stagger children */
.reveal-stagger > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger > *:nth-child(2) { transition-delay: 0.12s; }
.reveal-stagger > *:nth-child(3) { transition-delay: 0.19s; }
.reveal-stagger > *:nth-child(4) { transition-delay: 0.26s; }
.reveal-stagger > *:nth-child(5) { transition-delay: 0.33s; }

/* ── Hero entrance ── */
.hero-eyebrow {
  animation: fadeSlideUp 0.8s 0.2s var(--ease-out) both;
}
.hero-title .hero-title-line1 {
  display: block;
  animation: fadeSlideUp 0.8s 0.4s var(--ease-out) both;
}
.hero-title .hero-title-line2 {
  display: block;
  animation: fadeSlideUp 0.8s 0.55s var(--ease-out) both;
}
.hero-sub {
  animation: fadeSlideUp 0.8s 0.7s var(--ease-out) both;
}
.hero-ctas {
  animation: fadeSlideUp 0.8s 0.85s var(--ease-out) both;
}

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Counter ── */
@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.stat-number.is-counting {
  animation: countUp 0.4s var(--ease-out) both;
}

/* ── Gallery track transitions ── */
.gallery-track {
  transition: transform 0.5s var(--ease-out);
}

/* Tab panel animation handled by .tab-panel.active in layout.css */

/* ── Shimmer skeleton ── */
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}

/* ── Floating particle in hero ── */
@keyframes floatDot {
  0%   { transform: translateY(0) scale(1); opacity: 0.4; }
  50%  { transform: translateY(-18px) scale(1.1); opacity: 0.8; }
  100% { transform: translateY(0) scale(1); opacity: 0.4; }
}
.particle {
  position: absolute;
  border-radius: 50%;
  background: var(--color-accent);
  animation: floatDot linear infinite;
  pointer-events: none;
}

/* ── Mobile overlay link hover ── */
.mobile-overlay a {
  position: relative;
}
.mobile-overlay a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 0;
  height: 3px;
  background: var(--color-accent);
  border-radius: var(--radius-pill);
  transition: width 0.3s var(--ease-out), left 0.3s var(--ease-out);
}
.mobile-overlay a:hover::after {
  width: 100%;
  left: 0;
}