/* MONSTERIDLE — clipe animado de fundo na tela de login (portão)
   Vídeo: assets/ui/login-fundo.mp4 (loop de 10 s, sem áudio)
   Pôster/reserva: assets/ui/login-fundo.jpg (aparece enquanto o vídeo
   carrega, e fica parado para quem pede "reduzir movimento"). */

.portao{
  /* o vídeo ocupa o lugar da imagem de fundo antiga; a cor fica de reserva */
  background:#020617 url(../assets/ui/login-fundo.jpg) center/cover no-repeat !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.portao-video,
.portao-veu{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}
.portao-video{
  object-fit:cover;
  z-index:0;
}
/* vinheta: o centro fica limpo pra ver a cena, as bordas escurecem e o
   cartão de login continua legível por cima de uma cena bem clara */
.portao-veu{
  z-index:0;
  background:
    radial-gradient(ellipse 60% 70% at 50% 50%, rgba(2,6,23,.30) 0%, rgba(2,6,23,.55) 60%, rgba(2,6,23,.88) 100%),
    linear-gradient(180deg, rgba(2,6,23,.35) 0%, rgba(2,6,23,0) 30%, rgba(2,6,23,0) 70%, rgba(2,6,23,.5) 100%);
}

/* O "tremor" do fundo: o cartão de login e a etiqueta tinham backdrop-filter
   (blur de 20 px e 6 px) POR CIMA do vídeo. A cada quadro do vídeo o navegador
   refaz o desfoque de toda a área do cartão — em GPU integrada isso vira
   quadros perdidos e um cintilar na borda do cartão que parece o vídeo
   tremendo. O cartão já é 92–97% opaco: o desfoque não fazia diferença
   visual, só custava. O vídeo ganha camada própria (translateZ) para o
   compositor não repintar a página inteira a cada quadro. */
.portao-box,
.portao-badge{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.portao-video{
  transform:translateZ(0);
  will-change:transform;
  backface-visibility:hidden;
}

/* o conteúdo do portão fica acima do vídeo */
.portao > .portao-folha{
  position:relative;
  z-index:1;
}

@media (prefers-reduced-motion: reduce){
  .portao-video{ display:none; }
}