/* ═══════════════════════════════════════════════════════════════════════════
   Coex — "Corte da parede" com o produto batendo na barreira e voltando

   Usado só em /bombona-coex.php. O desenho é um SVG escrito à mão no
   WordPress, sem classe: o seletor pega pelo aria-label. A marcação NÃO é
   alterada (é refeita a cada harvest); a animação entra só por aqui.

   No desenho, a barreira (camada 4, EVOH ou poliamida) termina em x=282 e o
   produto fica à direita dela. Cada bolinha anda até encostar na barreira e
   volta: a distância (--d) é a que falta de cada uma até a parede, e o tempo
   cresce com a distância para todas andarem em velocidade parecida
   (devagar, de propósito: 3 a 7 s por ida e volta — pedido de 06/10/2026).
   A seta tracejada fica parada, embaixo, apontando para a barreira.

   Acelera na ida e desacelera na volta — é o que faz parecer uma batida, e
   não um vai-e-vem de pêndulo. Camadas, textos e fundo ficam parados.
   ═══════════════════════════════════════════════════════════════════════════ */

svg[aria-label^="Corte da parede"] > g:first-of-type circle {
  --d: 40px;
  animation: vp-corte-bate 4.2s infinite;
}
svg[aria-label^="Corte da parede"] > g:first-of-type circle:nth-child(1) { --d: 43px;  animation-duration: 3s; }
svg[aria-label^="Corte da parede"] > g:first-of-type circle:nth-child(2) { --d: 134px; animation-duration: 6.2s; animation-delay: -1.6s; }
svg[aria-label^="Corte da parede"] > g:first-of-type circle:nth-child(3) { --d: 68px;  animation-duration: 4.1s; animation-delay: -2.3s; }
svg[aria-label^="Corte da parede"] > g:first-of-type circle:nth-child(4) { --d: 159px; animation-duration: 7s;   animation-delay: -3.9s; }
svg[aria-label^="Corte da parede"] > g:first-of-type circle:nth-child(5) { --d: 103px; animation-duration: 5.3s; animation-delay: -.7s; }

@keyframes vp-corte-bate {
  0%, 100% { transform: translateX(0);                   animation-timing-function: ease-in; }
  50%      { transform: translateX(calc(var(--d) * -1)); animation-timing-function: ease-out; }
}

/* A seta (linha tracejada + ponta) fica PARADA, na parte de baixo da área do
   produto, apontando para a barreira (pedido de 06/10/2026: só as bolinhas se
   movem). No desenho ela vem no meio (y=160); aqui desce 84 unidades, para
   baixo da faixa por onde as bolinhas passam, e anda 37 para a direita, para
   ficar centralizada na área das bolinhas (que vai de x=282 a x=480; a seta
   ocupa 112 de largura). */
svg[aria-label^="Corte da parede"] > path {
  transform: translate(37px, 84px);
}

@media (prefers-reduced-motion: reduce) {
  svg[aria-label^="Corte da parede"] circle { animation: none !important; }
}