/* ART8 · effects.css: animações das composições (8 da abertura, gráfico, site animado, laços). */

/* --- 8 deitado da abertura --- */
.st{position:relative;width:600px;height:460px;perspective:1100px;transform-origin:0 0}
.st .lt{position:absolute;left:50%;top:50%;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;background:radial-gradient(circle,rgba(255,201,0,.12),rgba(177,128,0,.04) 45%,transparent 68%);animation:br 13s ease-in-out infinite}
@keyframes br{50%{transform:scale(1.08);opacity:.8}}
.st .sw{position:absolute;left:50%;top:50%;width:520px;height:350px;margin:-185px 0 0 -260px;transform-style:preserve-3d;animation:tl 20s ease-in-out infinite alternate}
@keyframes tl{from{transform:rotateY(-14deg) rotateX(5deg)}to{transform:rotateY(14deg) rotateX(-3deg)}}
.st .lay{position:absolute;left:50%;top:50%;width:350px;height:510px;margin:-255px 0 0 -175px;transform:rotate(90deg)}
.st .lay img{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 0 14px rgba(255,201,0,.16))}
.st .ol,.st .sh{position:absolute;inset:0;-webkit-mask:url(/assets/img/logos/art8-8.svg) center/contain no-repeat;mask:url(/assets/img/logos/art8-8.svg) center/contain no-repeat}
.st .ol svg{width:100%;height:100%}
.st .ln{stroke-dasharray:9 41;animation:ln 20s linear infinite}
@keyframes ln{to{stroke-dashoffset:-100}}
.st .sh{background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%) 200% 0/250% 100%;mix-blend-mode:overlay;animation:sh 13s ease-in-out infinite}
@keyframes sh{to{background-position:-100% 0}}
.st .rf{position:absolute;left:50%;top:50%;width:520px;height:350px;margin:140px 0 0 -260px;transform:scaleY(-1);opacity:.16;-webkit-mask-image:linear-gradient(transparent 55%,#000);mask-image:linear-gradient(transparent 55%,#000)}
.st .pt i{position:absolute;width:3px;height:3px;border-radius:50%;background:#E8C36A;box-shadow:0 0 6px rgba(255,201,0,.6);animation:dr 18s linear infinite;opacity:0}
@keyframes dr{from{transform:translateY(0);opacity:0}15%{opacity:.8}to{transform:translateY(-110px);opacity:0}}
@media (prefers-reduced-motion:reduce){.st *{animation:none!important}}

/* --- gráfico animado de Estratégias --- */
.ev{position:relative;width:600px;height:360px;transform-origin:0 0}
.ev .cl{position:absolute;inset:0;overflow:hidden}
.ev .sc{position:absolute;top:0;bottom:0;left:0;width:110px;background:linear-gradient(90deg,transparent,rgba(255,201,0,.12));border-right:1px solid rgba(255,201,0,.55);animation:scn 8s linear infinite}
@keyframes scn{from{transform:translateX(-110px)}to{transform:translateX(600px)}}
.ev svg{position:absolute;inset:0}
.ev .fl{stroke-dasharray:9 91;animation:fl2 6s linear infinite}
.ev .f3{stroke-dasharray:4 96;animation-duration:9s}
@keyframes fl2{to{stroke-dashoffset:-100}}
.ev .gl{filter:blur(5px)}
.ev .pu,.ev .rg{transform-box:fill-box;transform-origin:center;animation:pu 3.6s ease-out infinite}
@keyframes pu{from{transform:scale(1);opacity:.8}to{transform:scale(3);opacity:0}}
.ev .rg{animation-duration:3.6s}
.ev .hd{position:absolute;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#FFE08A;box-shadow:0 0 18px 6px rgba(255,201,0,.7);offset-path:path("M24,312 C84,312 100,264 150,264 S222,290 270,276 S338,196 382,192 S452,170 482,142 S542,88 566,58");animation:hd 7s ease-in-out infinite}
@keyframes hd{from{offset-distance:0%}to{offset-distance:100%}}
@media (prefers-reduced-motion:reduce){.ev *{animation:none!important}}

/* --- figurinha do site animado --- */
.sk{display:block}
.sk *{transform-box:fill-box;transform-origin:center}
.sk .wf{animation:skf 6s ease-in-out infinite alternate}
@keyframes skf{from{transform:translateY(0)}to{transform:translateY(-6px)}}
.sk .l1{transform-origin:left center;animation:ka 7s ease-out infinite}
.sk .l2{transform-origin:left center;animation:kb 7s ease-out infinite}
@keyframes ka{0%,4%{transform:scaleX(0);opacity:1}14%,90%{transform:scaleX(1);opacity:1}97%,100%{transform:scaleX(1);opacity:0}}
@keyframes kb{0%,10%{transform:scaleX(0);opacity:1}20%,90%{transform:scaleX(1);opacity:1}97%,100%{transform:scaleX(1);opacity:0}}
.sk .bt{animation:kc 7s ease-out infinite}
@keyframes kc{0%,18%{opacity:0;transform:scale(.6)}26%,90%{opacity:1;transform:scale(1)}97%,100%{opacity:0;transform:scale(1)}}
.sk .im{animation:kd 7s ease-out infinite}
@keyframes kd{0%,22%{opacity:0;transform:translateY(14px)}32%,90%{opacity:1;transform:none}97%,100%{opacity:0}}
.sk .c1{animation:ke1 7s ease-out infinite}.sk .c2{animation:ke2 7s ease-out infinite}.sk .c3{animation:ke3 7s ease-out infinite}
@keyframes ke1{0%,34%{opacity:0;transform:scale(.6)}42%,90%{opacity:1;transform:scale(1)}97%,100%{opacity:0}}
@keyframes ke2{0%,40%{opacity:0;transform:scale(.6)}48%,90%{opacity:1;transform:scale(1)}97%,100%{opacity:0}}
@keyframes ke3{0%,46%{opacity:0;transform:scale(.6)}54%,90%{opacity:1;transform:scale(1)}97%,100%{opacity:0}}
.sk .cu{animation:kf 7s ease-in-out infinite}
@keyframes kf{0%,52%{transform:translate(400px,232px);opacity:0}56%{opacity:1}70%,90%{transform:translate(150px,148px);opacity:1}97%,100%{transform:translate(150px,148px);opacity:0}}
.sk .rp{animation:kg 7s ease-out infinite}
@keyframes kg{0%,70%{transform:scale(.2);opacity:0}72%{opacity:.9;transform:scale(.4)}84%,100%{transform:scale(2);opacity:0}}
@media (prefers-reduced-motion:reduce){.sk *{animation:none!important}.sk .rp{display:none}}

/* --- laços de integração --- */
.tr{stroke-dasharray:5 95;animation:mv 6s linear infinite}
@keyframes mv{to{stroke-dashoffset:-100}}
@media (prefers-reduced-motion:reduce){.tr{animation:none}}