/* ==========================================================================
   Esgomil Design System — Movimento
   Três ideias guiam as animações da marca:
     1. Gota: as coisas caem e quicam de leve (ease-drip).
     2. Sucção: transições lentas no início e no fim (ease-suck).
     3. Mangote: linhas que se desenham, como a mangueira sendo puxada.

   Uso: as entradas só tocam dentro de um ancestral com .anim-run.
   Para repetir, remova e devolva .anim-run (veja main.js → replay).
   Atraso: --i (ordem no stagger) e/ou --delay (ms).
   ========================================================================== */

/* seção ainda não revelada (main.js → data-reveal): esconde só o que vai animar */
.js-reveal:not(.anim-run) [data-anim], .js-reveal:not(.anim-run) .truck, .js-reveal:not(.anim-run) .water__overlay { opacity: 0; }

/* ---- Entradas -------------------------------------------------------------- */
.anim-run [data-anim] {
  animation-duration: var(--dur-slow);
  animation-timing-function: var(--ease-out);
  animation-fill-mode: both;
  animation-delay: calc(var(--delay, 0ms) + var(--i, 0) * var(--stagger));
}

/* sobe e aparece */
.anim-run [data-anim="rise"] { animation-name: rise; }
@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* cai como gota e quica */
.anim-run [data-anim="drop"] {
  animation-name: drop;
  animation-timing-function: var(--ease-drip);
  animation-duration: calc(var(--dur-slow) + 150ms);
  transform-origin: 50% 100%;
}
@keyframes drop {
  0%   { opacity: 0; transform: translateY(-70%) scaleY(1.25) scaleX(0.7); }
  55%  { opacity: 1; transform: translateY(4%) scaleY(0.9) scaleX(1.06); }
  100% { opacity: 1; transform: none; }
}

/* aparece crescendo (selos, chips, ícones) */
.anim-run [data-anim="pop"] { animation-name: pop; animation-timing-function: var(--ease-drip); }
@keyframes pop {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: none; }
}

/* sobe de baixo com recorte (mascote, imagens) */
.anim-run [data-anim="emerge"] { animation-name: emerge; animation-duration: calc(var(--dur-slow) * 1.5); }
@keyframes emerge {
  /* inset negativo no fim: o recorte não corta a sombra do elemento */
  from { opacity: 0; transform: translateY(18%); clip-path: inset(-40% -40% 100% -40%); }
  to   { opacity: 1; transform: none; clip-path: inset(-40% -40% -40% -40%); }
}

/* faixa que entra da esquerda */
.anim-run [data-anim="wipe"] { animation-name: wipe; animation-timing-function: var(--ease-suck); transform-origin: left; }
@keyframes wipe {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ---- Marca-texto + gotas ----------------------------------------------------- */
.anim-run .highlight::before {
  animation: wipe var(--dur-slow) var(--ease-suck) both;
  animation-delay: var(--hl-delay, 400ms);
}
.anim-run .highlight .drop {
  animation: drip 3.6s var(--ease-suck) infinite;
  animation-delay: calc(var(--hl-delay, 400ms) + var(--dur-slow) + var(--d, 0ms));
}
@keyframes drip {
  0%   { height: 0; transform: translateY(0); opacity: 1; }
  35%  { height: 0.14em; transform: translateY(0); opacity: 1; }
  55%  { height: 0.2em; transform: translateY(0); opacity: 1; }
  75%  { height: 0.1em; transform: translateY(0.18em); opacity: 0; }
  100% { height: 0; transform: translateY(0); opacity: 0; }
}

/* ---- Mangote se desenhando ---------------------------------------------------- */
.anim-run .hose__reveal {
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1;
  animation: hose-draw var(--dur-xslow) var(--ease-suck) both;
  animation-delay: var(--delay, 300ms);
}
@keyframes hose-draw { to { stroke-dashoffset: 0; } }

/* ---- Caminhão chegando ------------------------------------------------------
   Entra pela esquerda desacelerando, as rodas giram no mesmo ritmo e a
   suspensão quica quando ele para. Depois fica com o motor "ligado".        */
.anim-run .truck {
  animation: truck-drive var(--truck-dur, 1.8s) cubic-bezier(0.16, 0.7, 0.2, 1) both;
  animation-delay: var(--delay, 0ms);
}
.anim-run .truck__wheel {
  animation: wheel-spin var(--truck-dur, 1.8s) cubic-bezier(0.16, 0.7, 0.2, 1) both;
  animation-delay: var(--delay, 0ms);
}
.anim-run .truck__chassis {
  animation: truck-brake 700ms var(--ease-drip) both, truck-idle 180ms linear infinite;
  animation-delay: calc(var(--delay, 0ms) + var(--truck-dur, 1.8s) - 250ms), calc(var(--delay, 0ms) + var(--truck-dur, 1.8s) + 450ms);
}
@keyframes truck-drive { from { transform: translateX(-120vw); } to { transform: none; } }
@keyframes wheel-spin  { from { transform: rotate(-16turn); } to { transform: none; } }
@keyframes truck-brake {
  0%   { transform: none; }
  35%  { transform: rotate(0.9deg); }
  70%  { transform: rotate(-0.35deg); }
  100% { transform: none; }
}
@keyframes truck-idle { 0%, 100% { translate: 0 0; } 50% { translate: 0 0.6px; } }

/* ---- Mil na fossa + sucção ---------------------------------------------------
   O Mil aparece antes do mangote chegar; quando o mangote termina de se
   desenhar, os anéis correm em direção ao caminhão (está sugando).          */
.anim-run .road-mil {
  transform-box: fill-box;
  animation: rise var(--dur-slow) var(--ease-out) both;
  animation-delay: var(--mil-delay, 1.9s);
}
.anim-run .road-nozzle {
  animation: rise var(--dur-base) var(--ease-out) both;
  animation-delay: var(--nozzle-delay, 3.3s);
}
.anim-run .hose--flow .hose__ribs {
  animation: hose-flow 0.45s linear infinite;
  animation-delay: var(--flow-delay, 3.4s);
}
@keyframes hose-flow { to { stroke-dashoffset: 3.4; } } /* = soma do dasharray dos anéis */
/* .hose--out: o fluxo sai do caminhão (água potável), ao contrário da sucção */
.anim-run .hose--out .hose__ribs { animation-name: hose-flow-out; }
@keyframes hose-flow-out { to { stroke-dashoffset: -3.4; } }
/* com JS, a rolagem passa a comandar o fluxo e o bombeamento (main.js → scrollWork) */
.js-work .hose__ribs { animation: none !important; }

/* ---- Loops ambientes ------------------------------------------------------------ */
.float { animation: float 5s ease-in-out infinite; animation-delay: var(--float-delay, 0s); }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes live-ping {
  0%   { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(3); opacity: 0; }
}
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Movimento reduzido: tudo parado e visível ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .float, .seal-spin, .marquee__track, .live-dot::after, .anim-run .highlight .drop, .anim-run .truck, .anim-run .truck__wheel, .anim-run .truck__chassis, .anim-run .road-mil, .anim-run .road-nozzle, .anim-run .hose--flow .hose__ribs { animation: none !important; }
  .anim-run [data-anim], .anim-run .highlight::before, .anim-run .hose__reveal { animation: none !important; opacity: 1; transform: none; clip-path: none; stroke-dashoffset: 0; }
}