/* Animations for the inline service-line illustrations.
   Trigger by adding .ill-play to the parent (Illustrations.animate does this). */

[data-illust] svg { overflow: visible; }

/* Wheels — rotate continuously. Mower wheel-spokes use SVG <animateTransform>;
   mixer truck wheels (.ill-wheel) are static circles, no spokes. */
@keyframes ill-spin { to { transform: rotate(360deg); } }

/* (Mower blade now uses SVG <animateTransform> directly in markup) */

/* Mower body — gentle bob */
[data-illust="mower"].ill-play .ill-mower-body {
  animation: ill-bob 0.6s ease-in-out infinite alternate;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes ill-bob { to { transform: translateY(-2px); } }

/* Excavator stick + bucket: animation is in SVG markup (<animateTransform>) */

/* Mixer drum: spiral animation handled by SVG <animateTransform> in markup */

/* Tree canopy — gentle sway; loose leaves drift down */
[data-illust="tree"].ill-play .ill-canopy {
  transform-box: fill-box;
  transform-origin: 50px 60px;
  animation: ill-tree-sway 3.5s ease-in-out infinite;
}
@keyframes ill-tree-sway {
  0%, 100% { transform: rotate(-1.5deg); }
  50%      { transform: rotate(1.5deg); }
}
[data-illust="tree"].ill-play .ill-leaves > * {
  animation: ill-drop 2.5s ease-in infinite;
  transform-box: fill-box;
  transform-origin: center top;
  opacity: 0;
}
[data-illust="tree"].ill-play .ill-leaves > *:nth-child(2) { animation-delay: 0.6s; }
[data-illust="tree"].ill-play .ill-leaves > *:nth-child(3) { animation-delay: 1.2s; }
@keyframes ill-drop {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(4px, 24px) rotate(60deg); }
}

/* Fence slats — pop up in sequence */
[data-illust="fence"].ill-play .ill-slats > * {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: ill-slat-rise 0.5s var(--ease-out, cubic-bezier(.22,1,.36,1)) backwards;
}
[data-illust="fence"].ill-play .ill-slats > *:nth-child(1) { animation-delay: 0.05s; }
[data-illust="fence"].ill-play .ill-slats > *:nth-child(2) { animation-delay: 0.15s; }
[data-illust="fence"].ill-play .ill-slats > *:nth-child(3) { animation-delay: 0.25s; }
[data-illust="fence"].ill-play .ill-slats > *:nth-child(4) { animation-delay: 0.35s; }
[data-illust="fence"].ill-play .ill-slats > *:nth-child(5) { animation-delay: 0.45s; }
[data-illust="fence"].ill-play .ill-slats > *:nth-child(6) { animation-delay: 0.55s; }
@keyframes ill-slat-rise {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}

/* Pavers — fill in like stamping */
[data-illust="paving"].ill-play .ill-pavers > * {
  animation: ill-paver-stamp 0.4s var(--ease-out, cubic-bezier(.22,1,.36,1)) backwards;
  transform-box: fill-box;
  transform-origin: center;
}
[data-illust="paving"].ill-play .ill-pavers > *:nth-child(1)  { animation-delay: 0.05s; }
[data-illust="paving"].ill-play .ill-pavers > *:nth-child(2)  { animation-delay: 0.10s; }
[data-illust="paving"].ill-play .ill-pavers > *:nth-child(3)  { animation-delay: 0.15s; }
[data-illust="paving"].ill-play .ill-pavers > *:nth-child(4)  { animation-delay: 0.20s; }
[data-illust="paving"].ill-play .ill-pavers > *:nth-child(5)  { animation-delay: 0.25s; }
[data-illust="paving"].ill-play .ill-pavers > *:nth-child(6)  { animation-delay: 0.30s; }
[data-illust="paving"].ill-play .ill-pavers > *:nth-child(7)  { animation-delay: 0.35s; }
[data-illust="paving"].ill-play .ill-pavers > *:nth-child(8)  { animation-delay: 0.40s; }
[data-illust="paving"].ill-play .ill-pavers > *:nth-child(9)  { animation-delay: 0.45s; }
[data-illust="paving"].ill-play .ill-pavers > *:nth-child(10) { animation-delay: 0.50s; }
[data-illust="paving"].ill-play .ill-pavers > *:nth-child(11) { animation-delay: 0.55s; }
[data-illust="paving"].ill-play .ill-pavers > *:nth-child(12) { animation-delay: 0.60s; }
@keyframes ill-paver-stamp {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* Drainage drops use native SVG <animateMotion> in the source — no CSS needed.
   Drops are inside .ill-drops; we just make sure they don't get hidden by other rules. */
[data-illust="drainage"] .ill-drops > * { opacity: 1; }