/* Fundos vivos do KV: ondas de luz neon, faixas de vidro canelado com brilho correndo e faíscas. Camada sobre os fundos (.bgs).
   Estrutura (fx.js): .fx > .fx-breath (.bg, .bg, .fx-waves, .fx-sheen-track) + .fx-sparks + .fx-burst.
   Só transform e opacity animam. .fx não cria contexto de empilhamento, para o blend "screen" enxergar as artes.
   Mobile primeiro (mais leve); o modo PC enriquece no fim. Intensidade por tela via data-bg / data-screen em .fx. */

.fx { position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; }
/* O fundo fica parado (o zoom lento custava ~4 fps em GPU fraca); a luz corre por cima. */
.fx-breath { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; }

/* ---------- ondas de luz neon (fitas de luz suaves, no ritmo das ondas pintadas) ---------- */
.fx-waves { position: absolute; left: 0; top: 0; right: 0; bottom: 0; mix-blend-mode: screen; opacity: 0.6; transition: opacity 2.4s ease-in-out; }
.fx-wave { position: absolute; display: block; border-radius: 50%; animation: 29s ease-in-out infinite alternate; }
.fx-w1 {
  left: -40vw; top: 34vh; width: 130vw; height: 24vh;
  background: radial-gradient(closest-side, rgba(255, 43, 214, 0.5), rgba(255, 43, 214, 0.18) 55%, rgba(255, 43, 214, 0) 100%);
  animation-name: fx-w1-m; animation-duration: 25s;
}
.fx-w2 {
  left: -45vw; top: 6vh; width: 110vw; height: 22vh;
  background: radial-gradient(closest-side, rgba(63, 208, 255, 0.42), rgba(63, 208, 255, 0.14) 55%, rgba(63, 208, 255, 0) 100%);
  animation-name: fx-w2-m; animation-duration: 30s; animation-delay: -8s;
}
.fx-w3 {
  left: -20vw; top: 70vh; width: 140vw; height: 26vh;
  background: radial-gradient(closest-side, rgba(161, 0, 255, 0.55), rgba(255, 43, 214, 0.16) 60%, rgba(255, 43, 214, 0) 100%);
  animation-name: fx-w3-m; animation-duration: 35s; animation-delay: -13s;
}
.fx-w4 { display: none; }

@keyframes fx-w1-m { from { transform: translate3d(-10vw, 2vh, 0) rotate(-9deg) scale(0.95, 0.85); } to { transform: translate3d(14vw, -4vh, 0) rotate(-3deg) scale(1.1, 1.1); } }
@keyframes fx-w2-m { from { transform: translate3d(-6vw, 0, 0) rotate(12deg) scale(1, 0.9); } to { transform: translate3d(18vw, 5vh, 0) rotate(18deg) scale(1.15, 1.1); } }
@keyframes fx-w3-m { from { transform: translate3d(8vw, 2vh, 0) rotate(-12deg) scale(1.05, 0.9); } to { transform: translate3d(-12vw, -3vh, 0) rotate(-6deg) scale(0.95, 1.1); } }

/* ---------- vidro canelado: faixa de luz que atravessa as faixas pintadas (linhas fixas, janela móvel) ---------- */
/* Sem máscara na trilha (máscara em camada animada custa caro): a luz já é fraca e fica atrás do conteúdo. */
/* Vidro canelado: só no PC (três camadas com máscara custam caro em GPU de celular). */
.fx-sheen-track {
  display: none; position: absolute; left: 0; top: 0; right: 0; bottom: 0; mix-blend-mode: screen; opacity: 0.5; transition: opacity 2.4s ease-in-out;
}
.fx-sheen {
  position: absolute; left: 0; top: 0; bottom: 0; width: 60vw; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 38%, #000 62%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 38%, #000 62%, transparent 100%);
  animation: fx-sweep 16s cubic-bezier(0.5, 0.05, 0.5, 0.95) infinite;
}
.fx-sheen::before {
  content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(190, 140, 255, 0) 0, rgba(190, 140, 255, 0.1) 50%, rgba(190, 140, 255, 0) 100%);
}
.fx-sheen-lines {
  position: absolute; left: 0; top: 0; bottom: 0; width: 100vw;
  /* faixa tonal suave (rampa de 3 a 4 px), como as caneluras da arte, e não um fio branco */
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.05) 75%, rgba(255, 255, 255, 0.16) calc(100% - 2px), rgba(255, 255, 255, 0) 100%);
  background-size: var(--fp, 25px) 100%; background-position: var(--fo, 0px) 0; background-repeat: repeat-x;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0, #000 30%, #000 70%, rgba(0, 0, 0, 0.35) 100%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0, #000 30%, #000 70%, rgba(0, 0, 0, 0.35) 100%);
  animation: fx-sweep-back 16s cubic-bezier(0.5, 0.05, 0.5, 0.95) infinite;
}
@keyframes fx-sweep { 0% { transform: translate3d(-60vw, 0, 0); } 62%, 100% { transform: translate3d(102vw, 0, 0); } }
@keyframes fx-sweep-back { 0% { transform: translate3d(60vw, 0, 0); } 62%, 100% { transform: translate3d(-102vw, 0, 0); } }

/* ---------- faíscas (poucas, subindo e cintilando) ---------- */
.fx-sparks { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; opacity: 0.7; transition: opacity 2.4s ease-in-out; }
/* cor da marca com núcleo claro discreto: lê como luz do KV, não como poeira sobre o texto */
.fx-spark {
  position: absolute; left: var(--x); bottom: var(--y); width: var(--s); height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0, rgba(var(--c), 0.9) 12%, rgba(var(--c), 0.85) 16%, rgba(var(--c), 0.22) 36%, rgba(var(--c), 0) 64%);
  animation: fx-rise-a var(--d) linear var(--delay) infinite;
}
.fx-spark--b { animation-name: fx-rise-b; }
.fx-spark--c { animation-name: fx-rise-c; }
@keyframes fx-rise-a {
  0% { transform: translate3d(0, 0, 0) scale(0.5); opacity: 0; }
  10% { opacity: 0.9; } 26% { opacity: 0.35; } 42% { opacity: 1; } 60% { opacity: 0.4; } 78% { opacity: 0.85; }
  100% { transform: translate3d(3vw, -34vh, 0) scale(0.8); opacity: 0; }
}
@keyframes fx-rise-b {
  0% { transform: translate3d(0, 0, 0) scale(0.6); opacity: 0; }
  12% { opacity: 0.8; } 30% { opacity: 1; } 48% { opacity: 0.3; } 66% { opacity: 0.9; } 84% { opacity: 0.5; }
  100% { transform: translate3d(-3.5vw, -26vh, 0) scale(1); opacity: 0; }
}
@keyframes fx-rise-c {
  0% { transform: translate3d(0, 0, 0) scale(0.4); opacity: 0; }
  14% { opacity: 1; } 34% { opacity: 0.45; } 52% { opacity: 0.95; } 72% { opacity: 0.3; } 88% { opacity: 0.7; }
  100% { transform: translate3d(1vw, -44vh, 0) scale(0.9); opacity: 0; }
}

/* ---------- feixe de luz das transições (pulseFx): só existe (e só vira camada) enquanto corre ---------- */
.fx-burst {
  display: none; position: absolute; left: 0; top: -10%; height: 120%; width: 70vw; opacity: 0;
  background: linear-gradient(100deg, rgba(255, 43, 214, 0) 8%, rgba(255, 43, 214, 0.42) 34%, rgba(161, 0, 255, 0.5) 47%, rgba(255, 255, 255, 0.32) 50%, rgba(161, 0, 255, 0.5) 53%, rgba(63, 208, 255, 0.42) 66%, rgba(63, 208, 255, 0) 92%);
  transform: translate3d(-75vw, 0, 0) skewX(-12deg);
}
.fx-burst.is-on { display: block; mix-blend-mode: screen; will-change: transform, opacity; animation: fx-burst 2.8s cubic-bezier(0.45, 0, 0.2, 1) both; }
@keyframes fx-burst {
  0% { transform: translate3d(-75vw, 0, 0) skewX(-12deg); opacity: 0; }
  22% { opacity: 1; } 78% { opacity: 0.85; }
  100% { transform: translate3d(108vw, 0, 0) skewX(-12deg); opacity: 0; }
}


/* ---------- intensidade por fundo e por tela ---------- */
.fx[data-bg='login'] .fx-waves, .fx[data-bg='final'] .fx-waves { opacity: 0.85; }
.fx[data-bg='login'] .fx-sparks, .fx[data-bg='final'] .fx-sparks { opacity: 1; }
.fx[data-bg='login'] .fx-sheen-track, .fx[data-bg='final'] .fx-sheen-track { opacity: 0.55; }
.fx[data-bg='values'] .fx-waves { opacity: 0.75; }
.fx[data-bg='values'] .fx-sparks { opacity: 0.9; }
/* geração: o anel da tela é o único movimento; o fundo congela (sem faíscas) para a GPU ficar livre */
.fx[data-screen='generating'] .fx-waves { opacity: 0.9; }
.fx[data-screen='generating'] .fx-sparks { display: none; }
.fx[data-screen='generating'] :is(.fx-wave, .fx-sheen, .fx-sheen-lines) { animation-play-state: paused; }
.fx[data-screen='result'] .fx-waves { opacity: 0.5; }
.fx[data-screen='result'] .fx-sparks { opacity: 0.4; }
/* resultado e final do PC têm o texto à esquerda: as faíscas dessa lateral se escondem (visibility não é animada) */
.fx[data-screen='result'] .fx-spark--l, .fx[data-screen='final'] .fx-spark--l { visibility: hidden; }
/* câmera, contagem e confirmação: fundo calmo para o rosto ficar nítido */
.fx[data-screen='camera'] :is(.fx-waves, .fx-sheen-track, .fx-sparks),
.fx[data-screen='countdown'] :is(.fx-waves, .fx-sheen-track, .fx-sparks),
.fx[data-screen='confirm'] :is(.fx-waves, .fx-sheen-track, .fx-sparks) { display: none; }

/* aba em segundo plano: tudo pausado */
.fx[data-paused], .fx[data-paused] * { animation-play-state: paused !important; }

/* versão leve (composição por software, GPU fraca ou quadros abaixo de 45 fps): sem as camadas grandes, faíscas ficam */
.fx[data-lite] .fx-waves, .fx[data-lite] .fx-sheen-track, .fx[data-lite] .fx-burst { display: none; }
.fx[data-lite] .fx-spark:nth-child(even) { display: none; }

/* ---------- modo PC (1920x1080): mais ondas, faixas moduladas no ritmo do vidro ---------- */
@media (min-width: 1024px) and (min-aspect-ratio: 5/4) {
  .fx-sheen-track { display: block; }
  .fx-waves {
    opacity: 0.7;
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0, #000 72%, rgba(0, 0, 0, 0.75) 100%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0, #000 72%, rgba(0, 0, 0, 0.75) 100%);
    -webkit-mask-size: var(--fp, 41px) 100%; mask-size: var(--fp, 41px) 100%;
    -webkit-mask-position: var(--fo, 0px) 0; mask-position: var(--fo, 0px) 0;
    -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
  }
  .fx-w1 { left: -22vw; top: 22vh; width: 70vw; height: 30vh; animation-name: fx-w1; animation-duration: 27s; }
  .fx-w2 { left: 44vw; top: 4vh; width: 64vw; height: 34vh; animation-name: fx-w2; animation-duration: 32s; }
  .fx-w3 { left: 40vw; top: 60vh; width: 76vw; height: 38vh; animation-name: fx-w3; animation-duration: 37s; }
  .fx-w4 {
    display: block; left: 74vw; top: -10vh; width: 40vw; height: 26vh; animation-name: fx-w4; animation-duration: 22s; animation-delay: -5s;
    background: radial-gradient(closest-side, rgba(249, 233, 18, 0.34), rgba(249, 233, 18, 0.1) 55%, rgba(249, 233, 18, 0) 100%);
  }
  .fx-sheen { width: 36vw; animation-duration: 18s; }
  .fx-sheen-lines { animation-duration: 18s; }
  .fx-burst { width: 55vw; }
  .fx[data-bg='final'] .fx-waves, .fx[data-bg='final'] .fx-sheen-track { animation: fx-drift 16s ease-in-out infinite alternate; }
}
@keyframes fx-w1 { from { transform: translate3d(-6vw, -2vh, 0) rotate(9deg) scale(0.95, 0.85); } to { transform: translate3d(9vw, 4vh, 0) rotate(14deg) scale(1.15, 1.1); } }
@keyframes fx-w2 { from { transform: translate3d(-5vw, 3vh, 0) rotate(-22deg) scale(1, 0.9); } to { transform: translate3d(6vw, -3vh, 0) rotate(-15deg) scale(1.12, 1.1); } }
@keyframes fx-w3 { from { transform: translate3d(6vw, 3vh, 0) rotate(-24deg) scale(1.05, 0.9); } to { transform: translate3d(-7vw, -3vh, 0) rotate(-17deg) scale(0.95, 1.12); } }
@keyframes fx-w4 { from { transform: translate3d(-3vw, 0, 0) rotate(-14deg) scale(0.9); } to { transform: translate3d(3vw, 3vh, 0) rotate(-8deg) scale(1.15); } }
/* acompanha o drift do fundo final do PC (pc.css), para as faixas de luz não desalinharem */
@keyframes fx-drift { from { transform: scale(1.02) translateX(0); } to { transform: scale(1.02) translateX(-1%); } }

/* ---------- movimento reduzido: só um brilho estático, sem nada se movendo ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx-wave, .fx[data-bg] .fx-waves, .fx[data-bg] .fx-sheen-track { animation: none; }
  .fx-sheen-track, .fx-sparks, .fx-burst { display: none; }
  .fx-waves { transition-duration: 0.12s; }
}