/* =====================================================================
   CENARIO.CSS — KIT ENGENHARIA VEXYON PROSPECÇÃO SITES
   Estrutura visual dos MÓDULOS B (costura) e C (câmera) do
   SPEC-MOTOR-cenario-camera-degradacao.md. Estende base.css — carregar
   DEPOIS dele. ENGENHARIA PURA: zero cor/imagem/tipografia de cliente
   aqui (invariante 7). Cor usada é sempre neutra de chrome estrutural
   (preto translúcido) OU lida de um token já existente do kit
   (`--cor-destaque`) — nunca um hex de marca específica.

   =====================================================================
   1. COSTURA (Módulo B) — âncora fixa + crossfade + HUD
   ===================================================================== */

/* Âncora: fica atrás de TODAS as seções que a usam, fixa no viewport —
   é o "fundo contínuo que não reseta" do spec. z-index abaixo do
   conteúdo (.content-section/.panel já usam z-index:2 no base.css) e
   acima do gradiente do body (que é só cor, sem z-index próprio). */
.cenario-ancora {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Cada frame é uma imagem full-bleed. Crossfade 100% CSS (transition de
   opacity) — nunca GSAP/ScrollTrigger: fica barato em qualquer tier e
   herda de graça a neutralização de prefers-reduced-motion já definida
   em base.css (§9 — transition-duration:.001ms!important), sem precisar
   de nenhum guard extra aqui (invariante 4). */
.cenario-frame {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.1s ease;
  will-change: opacity;
}
.cenario-frame.is-active { opacity: 1; }

/* HUD — indicador de jornada persistente. Chrome estrutural neutro
   (preto translúcido + blur), igual precedente já usado em
   `.nav.scrolled` no base.css ("placeholder genérico funcional
   enquanto o conceito não é preenchido"). O preenchimento da barra usa
   --cor-destaque (token do kit) com fallback em currentColor — nunca um
   hex fixo de cliente. */
.cenario-hud {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  z-index: 400;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 100px;
  background: rgba(0, 0, 0, .38);
  backdrop-filter: blur(10px) saturate(140%);
  /* var(--cor-texto): token do kit, preenchido por cliente; #fff é só o
     fallback neutro pro caso raríssimo do token não existir ainda. */
  color: var(--cor-texto, #fff);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
}
.cenario-hud.is-visible { opacity: 1; transform: translateY(0); }
.cenario-hud-bar {
  width: 46px; height: 3px; border-radius: 2px;
  background: rgba(255, 255, 255, .28);
  overflow: hidden;
}
.cenario-hud-fill {
  display: block; width: 100%; height: 100%;
  background: var(--cor-destaque, currentColor);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform .5s ease;
}

/* =====================================================================
   2. CÂMERA (Módulo C) — palco de imagem estática com movimento
   ===================================================================== */

/* O stage reserva seu próprio espaço (aspect-ratio/height fixos no HTML
   de cada cliente) — imagem nunca causa salto de layout ao carregar
   (invariante 6). perspective: dá profundidade real ao `tilt` (rotateX). */
.camera-stage {
  position: relative;
  overflow: hidden;
  perspective: 1000px;
}

/* Cada camada é OVERSIZED em relação ao container (inset negativo,
   >100% de largura/altura): é a "sobra" física que garante que zoom/pan/
   tilt NUNCA revele borda vazia/gap — decisão de engenharia central do
   módulo (sem isso, um pan de alguns % já mostraria o fundo do body). */
.camera-layer {
  position: absolute;
  inset: -10% -8%;
  width: 120%;
  height: 120%;
  background-size: cover;
  background-position: center;
  transform-origin: center center;
  will-change: transform;
}

/* =====================================================================
   3. DEFESA EM CSS (reforço do Módulo D — cinto e suspensório)
   Mesmo que o JS falhe silenciosamente por algum motivo, o CSS já
   garante que, no tier BAIXO, nenhuma camada extra de profundidade
   apareça deslocada e nenhum canvas WebGL apareça — reforça a
   invariante 2 ("degradação só desce qualidade, jamais quebra") num
   segundo nível independente do JS.
   ===================================================================== */
[data-tier="baixo"] .camera-layer:not(:first-child) {
  transform: none !important;
}
[data-tier="baixo"] .webgl-canvas {
  display: none !important;
}

/* =====================================================================
   4. REDUCED-MOTION — reforço explícito (documental; base.css §9 já
   zera toda transition/animation-duration globalmente — esta regra
   deixa best-effort visual redundante caso algum efeito futuro do
   motor use propriedades fora de transition/animation, ex.: scroll-
   linked via requestAnimationFrame direto).
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .camera-layer { transform: none !important; }
}