/* ═══════ RODADA 4 · a arte dos planos ═══════ */
.pl-art{position:relative;z-index:2}
.pl-art svg{overflow:visible}
html.js .pl-c{transform-box:fill-box;transform-origin:center;animation:plBoia 6s ease-in-out infinite}
.pl-c2{animation-delay:-2s}.pl-c3{animation-delay:-4s}
@keyframes plBoia{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
html.js .pl-arco{stroke-dasharray:251;stroke-dashoffset:251;animation:plArco 6s ease-in-out infinite}
@keyframes plArco{0%{stroke-dashoffset:251}42%,78%{stroke-dashoffset:0}100%{stroke-dashoffset:251}}
html.js .pl-anel{transform-box:fill-box;transform-origin:center;animation:plBoia 6s ease-in-out infinite;animation-delay:-1s}
html.js .pl-tag{transform-box:fill-box;transform-origin:center;animation:plPulo 3.6s ease-in-out infinite}
@keyframes plPulo{0%,100%{transform:scale(1)}48%{transform:scale(1.09)}}
html.js .pl-ok{transform-box:fill-box;transform-origin:center;animation:plOk 4.4s ease-in-out infinite}
@keyframes plOk{0%,64%,100%{transform:scale(1)}76%{transform:scale(1.14)}}
html.js .pl-fa{transform-box:fill-box;transform-origin:center;animation:plFaisca 3.2s ease-in-out infinite}
.pl-fa2{animation-delay:-1.6s}
@keyframes plFaisca{0%,100%{opacity:.25;transform:scale(.7) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(60deg)}}
@media (prefers-reduced-motion:reduce){
  html.js .pl-c,html.js .pl-anel,html.js .pl-arco,html.js .pl-tag,
  html.js .pl-ok,html.js .pl-fa{animation:none}
  html.js .pl-arco{stroke-dashoffset:0}
}
@media (max-width:920px){.pl-art{margin-top:8px}}