/* ==========================================================================
   ARTE VIVA (arte-viva.js): o vídeo do dragão e um efeito próprio em cada
   lugar fora do topo da home. Usado pela home (Invasões) e pelas páginas
   internas do site (topo e login). O vídeo só aparece quando começa a tocar;
   até lá (e para quem pediu menos movimento) fica a imagem parada.
   ========================================================================== */
.arte-viva-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease;pointer-events:none}
.arte-viva-video.is-pronto{opacity:1}
.arte-viva-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* --- Topo das páginas internas: poeira ao vento + feixe de luz atravessando --- */
.dvn-topo[data-arte-viva] .dvn-topo-arte{background-position:66% 15%}
.dvn-topo-arte .arte-viva-video{object-position:66% 15%}
.dvn-topo .arte-viva-canvas{-webkit-mask-image:linear-gradient(90deg,transparent 15%,#000 55%);mask-image:linear-gradient(90deg,transparent 15%,#000 55%)}
.arte-feixe{position:absolute;inset:0;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 25%,#000 60%);mask-image:linear-gradient(90deg,transparent 25%,#000 60%)}
.arte-feixe::before{content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:26%;background:linear-gradient(100deg,rgba(255,214,140,0),rgba(255,214,140,.12) 42%,rgba(255,240,210,.22) 50%,rgba(255,214,140,.12) 58%,rgba(255,214,140,0));mix-blend-mode:screen;transform:translateX(-130%) skewX(-18deg);animation:arteFeixe 11s cubic-bezier(.45,0,.25,1) infinite}
@keyframes arteFeixe{0%,60%{transform:translateX(-130%) skewX(-18deg)}100%{transform:translateX(440%) skewX(-18deg)}}

/* --- Login: cinzas caindo + calor pulsando de baixo --- */
.dvn-cad-lado[data-arte-viva]{isolation:isolate;background-position:66% 22%}
.dvn-cad-lado .arte-viva-video{z-index:-1;object-position:66% 22%}
.arte-calor{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 85% 42% at 50% 100%,rgba(255,150,60,.24),rgba(255,120,40,0) 70%);mix-blend-mode:screen;animation:arteCalor 5.5s ease-in-out infinite}
@keyframes arteCalor{0%,100%{opacity:.4}50%{opacity:1}}

/* --- Invasões (home): faíscas de batalha + clarões distantes no céu ---
   O véu da seção deixou de ser chapado (94%): escuro à esquerda, onde ficam os textos,
   e mais aberto à direita, para a arte aparecer atrás dos cards. */
.events-section[data-arte-viva]{isolation:isolate}
.events-section[data-arte-viva]:before{background:linear-gradient(90deg,rgba(6,8,11,.95) 0%,rgba(6,8,11,.88) 42%,rgba(6,8,11,.7) 100%),linear-gradient(0deg,rgba(6,8,11,.75),rgba(6,8,11,0) 28%,rgba(6,8,11,0) 72%,rgba(6,8,11,.75))}
.events-section .arte-viva-fundo{position:absolute;inset:0;z-index:-1;overflow:hidden}
.events-section .arte-viva-video{object-position:66% 40%}
.events-section .arte-viva-canvas{-webkit-mask-image:linear-gradient(90deg,transparent 20%,#000 55%);mask-image:linear-gradient(90deg,transparent 20%,#000 55%)}
.arte-relampago{position:absolute;inset:0;overflow:hidden;pointer-events:none;mix-blend-mode:screen}
.arte-relampago::before,.arte-relampago::after{content:"";position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse 30% 26% at 78% 18%,rgba(255,206,130,.32),rgba(255,170,80,0) 70%);animation:arteClarao 9.7s linear infinite}
.arte-relampago::after{background:radial-gradient(ellipse 24% 22% at 58% 32%,rgba(255,220,160,.26),rgba(255,170,80,0) 70%);animation-duration:13.3s;animation-delay:-5s}
@keyframes arteClarao{0%,88%,100%{opacity:0}89%{opacity:1}90%{opacity:.25}91.5%{opacity:.85}94%{opacity:0}}

/* Fora da tela, aba escondida ou menos movimento: tudo parado. */
.is-parada .arte-feixe::before,.is-parada .arte-calor,.is-parada .arte-relampago::before,.is-parada .arte-relampago::after{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){html:not(.force-motion) .arte-feixe::before,html:not(.force-motion) .arte-relampago::before,html:not(.force-motion) .arte-relampago::after{animation:none;opacity:0}html:not(.force-motion) .arte-calor{animation:none}}