/* ═══════════════════════════════════════════════════════════════════════════
   Fluoretação — desenho "com e sem fluoretação" com as moléculas em movimento

   Usado só em /fluoretacao-de-embalagens.php. O desenho é um SVG escrito à mão
   no WordPress (figure.vp-barreira); aqui NÃO se mexe na marcação, que é
   refeita a cada harvest: a animação entra só por seletor.

     · SEM fluoretação  (2º <g> do SVG): as bolinhas correm da esquerda para a
       direita e atravessam a parede — o solvente passa.
     · COM fluoretação  (3º <g>): as bolinhas vão até a face laranja e voltam —
       o solvente é barrado. A única que está do lado de fora só pisca fraco.

   Só as bolinhas e o tracejado da seta se movem; fundo, parede e textos ficam
   parados. Quem pede "menos movimento" no sistema vê o desenho estático.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── SEM: fluxo contínuo atravessando a parede ── */
.vp-barreira svg > g:nth-of-type(2) circle {
  animation: vp-barreira-passa 3.6s linear infinite;
}
.vp-barreira svg > g:nth-of-type(2) circle:nth-child(3n+1) { animation-delay: -1.2s; }
.vp-barreira svg > g:nth-of-type(2) circle:nth-child(3n+2) { animation-delay: -2.4s; }
.vp-barreira svg > g:nth-of-type(2) circle:nth-child(4n)   { animation-duration: 4.2s; }
@keyframes vp-barreira-passa {
  0%   { transform: translateX(-48px); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(48px);  opacity: 0; }
}
/* o tracejado da seta "anda" no sentido do fluxo */
.vp-barreira svg > line[stroke-dasharray] {
  animation: vp-barreira-seta 1.1s linear infinite;
}
@keyframes vp-barreira-seta { to { stroke-dashoffset: -13; } }

/* ── COM: vai até a face fluoretada e volta ── */
.vp-barreira svg > g:nth-of-type(3) circle {
  --d: 14px;
  animation: vp-barreira-bate 2.8s cubic-bezier(.45, 0, .55, 1) infinite;
}
.vp-barreira svg > g:nth-of-type(3) circle:nth-child(1) { --d: 12px; animation-delay: -.4s; }
.vp-barreira svg > g:nth-of-type(3) circle:nth-child(2) { --d: 18px; animation-delay: -1.5s; }
.vp-barreira svg > g:nth-of-type(3) circle:nth-child(3) { --d: 16px; animation-delay: -2.1s; }
.vp-barreira svg > g:nth-of-type(3) circle:nth-child(4) { --d: 12px; animation-delay: -1s; }
.vp-barreira svg > g:nth-of-type(3) circle:nth-child(5) { --d: 30px; animation-delay: -1.8s; }
.vp-barreira svg > g:nth-of-type(3) circle:nth-child(6) { --d: 21px; animation-delay: -.7s; }
.vp-barreira svg > g:nth-of-type(3) circle:nth-child(7) { --d: 26px; animation-delay: 0s; }
@keyframes vp-barreira-bate {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(var(--d)); }
}
/* a que escapou: fica onde está, só respira */
.vp-barreira svg > g:nth-of-type(3) circle:nth-child(8) {
  animation: vp-barreira-rara 4.5s ease-in-out infinite;
}
@keyframes vp-barreira-rara {
  0%, 100% { opacity: .08; }
  50%      { opacity: .3; }
}

@media (prefers-reduced-motion: reduce) {
  .vp-barreira svg circle,
  .vp-barreira svg line { animation: none !important; }
}