/* ---------------------------------------------------------------------------
   Fumo em movimento por tras do menu da capa (variante J2).

   Duas camadas do mesmo video, em "screen": o preto do video desaparece e
   so o fumo fica. A de cima nasce no canto direito e atravessa a capa; a de
   baixo alarga a base para a esquerda, ate ao icone do catalogo.

   Fica em z-index 4: por cima do video/foto de fundo e por baixo do menu,
   do logotipo e da barra de topo - o menu corre sempre a frente do fumo.
--------------------------------------------------------------------------- */
#blp-fumo,
#blp-fumo .blp-fumo-c {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}
#blp-fumo { z-index: 4; }
#blp-fumo .blp-fumo-c { z-index: auto; mix-blend-mode: screen; }

#blp-fumo video {
  position: absolute;
  display: block;
  object-fit: cover;
}

/* camada de cima: do canto direito para o centro */
#blp-fumo .blp-fumo-a {
  opacity: 1;
  -webkit-mask-image:
    radial-gradient(96% 104% at 44% 112%, #000 46%, transparent 90%),
    linear-gradient(to left, transparent 0, #000 7%, #000 100%),
    linear-gradient(to top,  transparent 0, #000 5%, #000 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    radial-gradient(96% 104% at 44% 112%, #000 46%, transparent 90%),
    linear-gradient(to left, transparent 0, #000 7%, #000 100%),
    linear-gradient(to top,  transparent 0, #000 5%, #000 100%);
          mask-composite: intersect;
}
#blp-fumo .blp-fumo-a video {
  right: -26%; bottom: -26%; width: 152%; height: 152%;
  filter: brightness(1.28) contrast(1.1);
}

/* camada de baixo: alarga a base para a esquerda */
#blp-fumo .blp-fumo-b {
  opacity: .66;
  -webkit-mask-image:
    radial-gradient(66% 50% at 32% 106%, #000 34%, transparent 88%),
    linear-gradient(to bottom, transparent 32%, #000 56%, #000 100%),
    linear-gradient(to top,    transparent 0,   #000 4%,  #000 100%),
    linear-gradient(to right,  transparent 0,   #000 6%,  #000 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    radial-gradient(66% 50% at 32% 106%, #000 34%, transparent 88%),
    linear-gradient(to bottom, transparent 32%, #000 56%, #000 100%),
    linear-gradient(to top,    transparent 0,   #000 4%,  #000 100%),
    linear-gradient(to right,  transparent 0,   #000 6%,  #000 100%);
          mask-composite: intersect;
}
#blp-fumo .blp-fumo-b video {
  right: 20%; bottom: -22%; width: 146%; height: 146%;
  filter: brightness(1.26) contrast(1.08);
}

/* quem pediu menos movimento no sistema nao leva fumo nenhum */
@media (prefers-reduced-motion: reduce) {
  #blp-fumo { display: none !important; }
}