/* ============================================================
   DBSteel — camada imersiva 3D do site institucional
   (aplicada sobre style.css + fabrica.css). O canvas WebGL fica
   fixo atrás de tudo; as seções viram painéis translúcidos para
   o pátio da fábrica 3D aparecer entre elas.
   Fallback: html.no3d (sem WebGL / reduced-motion) restaura os
   fundos sólidos e o hero estático original.
   ============================================================ */

/* ---------- palco 3D ---------- */
#stage3d{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;display:block;pointer-events:none;
}
.stage-vignette{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(6,7,9,.55) 100%),
    linear-gradient(180deg, rgba(14,16,20,.35), transparent 22%, transparent 78%, rgba(14,16,20,.6));
}
html.no3d #stage3d, html.no3d .stage-vignette{display:none}

/* conteúdo acima do palco */
.utility-bar,.site-header,main,.site-footer,.wa-float,.scroll-progress{position:relative;z-index:1}
.site-header{position:sticky}
.wa-float{position:fixed;z-index:90}

/* ---------- barra de progresso de leitura ---------- */
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:120;pointer-events:none;
}
.scroll-progress span{
  display:block;height:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--gold-3),var(--gold-1));
  box-shadow:0 0 12px rgba(212,171,90,.55);
}
html.no3d .scroll-progress{display:none}

/* ---------- translucidez das seções (só com 3D ativo) ---------- */
html.has3d .site-header{background:rgba(21,24,29,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
html.has3d .utility-bar{background:rgba(11,13,16,.9)}
html.has3d .hero{background:transparent}
html.has3d .hero__bg{display:none}
html.has3d .trust{background:rgba(11,13,16,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
html.has3d .section{background:rgba(14,16,20,.55)}
html.has3d .section--tint{background:rgba(18,21,27,.78)}
html.has3d .section--brand{background:rgba(21,24,29,.85)}
html.has3d .site-footer{background:rgba(11,13,16,.92)}
html.has3d .line-card,
html.has3d .contact-card,
html.has3d .step,
html.has3d .spec{
  background:rgba(25,29,36,.82);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
html.has3d .specs{background:rgba(42,48,58,.5)}

/* ---------- hero imersivo ---------- */
html.has3d .hero{min-height:calc(100svh - 110px);display:flex;align-items:center}
html.has3d .hero .inner{width:100%;min-width:0;max-width:var(--maxw)}
/* o 3D ocupa o lado direito — o logo redundante sai de cena */
html.has3d .hero__mark{visibility:hidden}
html.has3d .hero__copy{max-width:600px}
.hero-hint{
  display:flex;align-items:center;gap:.55rem;margin-top:2.2rem;
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
}
.hero-hint svg{color:var(--gold-2);animation:hint-bounce 2.2s var(--ease) infinite}
@keyframes hint-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
html.no3d .hero-hint{display:none}
@media (prefers-reduced-motion:reduce){.hero-hint svg{animation:none}}

/* ---------- banda-vitrine 3D (passarela treliçada) ---------- */
.showcase3d{
  position:relative;min-height:88svh;
  display:flex;align-items:flex-end;justify-content:flex-start;
  background:transparent;
}
.showcase3d .container{width:100%;padding-bottom:4rem}
.showcase3d__panel{
  max-width:430px;
  background:rgba(17,20,25,.72);
  border:1px solid var(--hair);
  border-radius:var(--r);
  padding:1.6rem 1.8rem;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:var(--shadow);
}
.showcase3d__panel h2{font-size:clamp(1.45rem,2.6vw,2rem);margin:.55rem 0 .7rem}
.showcase3d__panel p{color:var(--ink-2);font-size:.95rem}
.showcase3d__badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
.showcase3d__badges span{
  font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold-1);border:1px solid var(--hair);border-radius:999px;
  padding:.35rem .75rem;background:rgba(212,171,90,.08);
}
/* sem 3D a banda vira uma seção comum e compacta */
html.no3d .showcase3d{min-height:0;background:var(--bg-tint);padding:4rem 0}
html.no3d .showcase3d .container{padding-bottom:0}
html.no3d .showcase3d__panel{max-width:640px;margin:0 auto}

/* ---------- ajustes mobile ---------- */
@media (max-width:720px){
  html.has3d .hero{min-height:calc(100svh - 90px)}
  .showcase3d{min-height:72svh}
  html.has3d .section{background:rgba(14,16,20,.68)}
  /* blur é caro em GPU fraca — remove nos cards */
  html.has3d .line-card,
  html.has3d .contact-card,
  html.has3d .step,
  html.has3d .spec{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(25,29,36,.94)}
}