/**
 * BXL Preloader — overlay logo-sirene.
 * Portado de bxl-theme/assets/css/bxl.css (§preloader), escopado em
 * #bxl-preloader com vars --pl-* (impressas inline pelo render.php).
 *
 * Sirene suave: o halo ambiente são DUAS camadas (.amb-b azul / .amb-r
 * vermelha) com fade de opacity em contratempo — background com
 * radial-gradient não interpola em keyframes (trocava seco); opacity sim.
 */

#bxl-preloader{
  position:fixed;inset:0;z-index:999999;
  opacity:1;transition:opacity .6s ease;
  /* failsafe 100% CSS: se o preloader.js nunca rodar (404, bundle quebrado),
     o overlay se esconde sozinho aos 12s. O pin do Customizer vence (!important).
     IMPORTANTE: não animar opacity aqui — animação ativa de opacity num
     ancestral vira Backdrop Root e mata o backdrop-filter do .stage. */
  animation:bxlPlFailsafe 1ms linear 12s forwards;
}
@keyframes bxlPlFailsafe{to{visibility:hidden;pointer-events:none;}}

/* trava o scroll da página enquanto o preloader está visível (classe aplicada
   por script inline no render; removida no hide). Trava html E body — em vários
   temas o scroller real é o body. O unlock por animação cobre o cenário de JS
   morto, em sincronia com o bxlPlFailsafe acima. */
html.bxl-pl-lock,
html.bxl-pl-lock body{overflow:hidden;animation:bxlPlUnlock 1ms linear 12s forwards;}
@keyframes bxlPlUnlock{to{overflow:visible;}}
#bxl-preloader.is-hidden{opacity:0;visibility:hidden;pointer-events:none;}

#bxl-preloader .stage{
  position:absolute;inset:0;display:grid;place-items:center;
  background:var(--pl-bg,rgba(17,17,17,.95));
  -webkit-backdrop-filter:blur(var(--pl-bg-blur,5px));
  backdrop-filter:blur(var(--pl-bg-blur,5px));
}

/* entrada suave do conteúdo (halo + logo + label): fade de .5s no wrapper.
   NUNCA animar opacity no .stage/#bxl-preloader — mataria o backdrop-filter
   (Backdrop Root). Sem declaração base de opacity: se animações forem
   anuladas por terceiros, o conteúdo simplesmente aparece visível. */
#bxl-preloader .inner{
  position:absolute;inset:0;display:grid;place-items:center;
  animation:bxlPlIn .5s ease-out both;
}
@keyframes bxlPlIn{from{opacity:0;}to{opacity:1;}}

/* halo ambiente — sirene suave (2 camadas, opacity em contratempo) */
#bxl-preloader .amb{
  position:absolute;width:clamp(260px,50vw,720px);aspect-ratio:16/7;
  left:50%;top:50%;transform:translate(-50%,-50%);
  filter:blur(14px);pointer-events:none;
}
#bxl-preloader .amb-b{
  background:radial-gradient(50% 60% at 32% 50%, rgba(42,109,255,var(--pl-ambient,.14)), transparent 70%);
  opacity:1;
  animation:bxlPlAzul var(--pl-anim-speed,1700ms) ease-in-out infinite;
}
#bxl-preloader .amb-r{
  background:radial-gradient(50% 60% at 68% 50%, rgba(255,42,42,var(--pl-ambient,.14)), transparent 70%);
  opacity:.3;
  animation:bxlPlVermelho var(--pl-anim-speed,1700ms) ease-in-out infinite;
}
@keyframes bxlPlAzul{0%,100%{opacity:1;}50%{opacity:.3;}}
@keyframes bxlPlVermelho{0%,100%{opacity:.3;}50%{opacity:1;}}

/* scanlines sutis por cima do stage */
#bxl-preloader .stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;mix-blend-mode:overlay;
  background-image:repeating-linear-gradient(0deg, rgba(255,247,230,.018) 0, rgba(255,247,230,.018) 1px, transparent 1px, transparent 4px);
}

#bxl-preloader .siren{
  position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  gap:var(--pl-label-gap,14px);
}
#bxl-preloader .siren-logo{
  width:var(--pl-logo-width,220px);height:auto;overflow:visible;
  filter:drop-shadow(0 var(--pl-drop-y,55px) var(--pl-drop-blur,191px) rgba(0,0,0,var(--pl-drop-opacity,.95)));
}
#bxl-preloader .bxl-b{fill:url(#bxl-grad-b);}
#bxl-preloader .bxl-l{fill:url(#bxl-grad-l);}

#bxl-preloader .siren-label{
  margin:0;font-family:var(--f-display,"Antonio",sans-serif);font-weight:500;font-style:italic;
  font-size:var(--pl-label-size,18px);letter-spacing:.04em;color:var(--pl-label-color,#fffaef);text-transform:lowercase;
}
#bxl-preloader .siren-label .dot{
  display:inline-block;animation:bxlPlDotBlink 1s steps(3) infinite;
  /* como no mockup: dots a meio-ciclo da sirene, piso de 400ms
     (browsers sem max()/calc() ignoram e ficam no 1s acima) */
  animation-duration:max(400ms, calc(var(--pl-anim-speed,1700ms) / 2));
}
#bxl-preloader .siren-label .dot:nth-of-type(2){animation-delay:.18s;}
#bxl-preloader .siren-label .dot:nth-of-type(3){animation-delay:.36s;}
@keyframes bxlPlDotBlink{0%,33%{opacity:0;} 34%,100%{opacity:1;}}

/* animação pausada via Customizer (o glow JS pausa por conta própria) */
#bxl-preloader.is-paused .amb,
#bxl-preloader.is-paused .siren-label .dot{animation-play-state:paused;}

/* pin do preview do Customizer: fixado visível enquanto a seção está aberta */
#bxl-preloader.bxl-pl-pinned{
  opacity:1 !important;visibility:visible !important;pointer-events:auto !important;
}

/* mobile: halo com largura mínima já cobre o encolhimento; reduz só logo/label/gap
   pra não ficar "grandão" na tela pequena (mesmo fix aplicado no mockup-customizer) */
@media(max-width:620px){
  #bxl-preloader .siren-logo{width:calc(var(--pl-logo-width,220px) * .7);}
  #bxl-preloader .siren-label{font-size:calc(var(--pl-label-size,18px) * .85);}
  #bxl-preloader .siren{gap:calc(var(--pl-label-gap,14px) * .8);}
}

/* prefers-reduced-motion: estado estático, sem flashes */
@media (prefers-reduced-motion: reduce){
  #bxl-preloader{transition:none;}
  #bxl-preloader .amb,
  #bxl-preloader .inner{animation:none;}
  #bxl-preloader .siren-label .dot{animation:none;opacity:1;}
}