/* =====================================================================
   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 de jornada "NN / NN" — DEPRECADO E PROIBIDO (2026-07-15).
   Reincidiu: o CEO pediu pra remover na Vanessa e ele voltou na Jéssica
   (band-aid local não propaga; a correção tem que morar no kit).
   Não comunica nada ("04 do quê?") e colidia com o botão WhatsApp.
   Esta regra é a REDE DE SEGURANÇA: mesmo que um HTML legado ainda
   traga o markup `cenario-hud`, ele NUNCA aparece. Não reativar. */
.cenario-hud,
.cenario-hud-bar,
.cenario-hud-fill { display: none !important; }

/* =====================================================================
   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; }
}

/* =====================================================================
   ANEL 3D / 360 — efeito-assinatura Vexyon (motor-anel-3d.js).
   GENÉRICO do kit (2026-07-15): antes vivia só no conceito.css da Vanessa
   → não propagava. Agora mora aqui; usa TOKENS de cor (--cor-fundo-1 /
   --cor-destaque / --font-display), sombras NEUTRAS (nunca o azul de um
   cliente). Liga só em tier médio/alto via classe .trat-anel-on (JS
   decide); fallback sagrado = o grid original nunca sai do DOM.
   O contêiner-alvo recebe [data-anel-3d]; os itens de origem são
   `.trat-cell` > `.trat-img`/h3/p (contrato do motor-anel-3d.js).
   ===================================================================== */
[data-anel-3d].trat-anel-on .trat-grid,
#tratamentos.trat-anel-on .trat-grid { display: none; }

.anel-wrap { position: relative; width: 100vw; margin-left: calc(50% - 50vw); }
.anel-stage {
  position: relative; height: 100svh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.anel-viewport {
  position: relative; width: 100%; height: 100%;
  perspective: var(--anel-perspective, 1400px); perspective-origin: 50% 50%;
}
.anel-ring {
  position: absolute; top: 50%; left: 50%; width: 0; height: 0;
  transform-style: preserve-3d; will-change: transform;
}
.anel-card {
  position: absolute; top: 0; left: 0;
  width: clamp(240px, 46vw, 480px); height: clamp(320px, 58vh, 560px);
  border-radius: 26px; overflow: hidden; backface-visibility: hidden;
  box-shadow: 0 40px 80px -32px rgba(0,0,0,.5);
  background: var(--cor-fundo-1, #f4f4f4);
  transition: opacity .3s ease;
}
.anel-card-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.anel-card-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 42%, rgba(0,0,0,.68) 100%);
}
.anel-card-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: clamp(20px,3.4vw,32px) clamp(20px,3.4vw,32px) clamp(22px,3.6vw,28px);
  color: #FFFFFF;
}
.anel-card-num {
  display: block; font-family: var(--font-display, serif); font-weight: 600;
  font-size: .76rem; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(255,255,255,.76); margin-bottom: 9px;
}
.anel-card-body h3 {
  font-family: var(--font-display, serif); font-weight: 600; color: #FFFFFF;
  font-size: clamp(1.15rem, 2.3vw, 1.6rem); line-height: 1.18; margin-bottom: 8px;
}
.anel-card-body p { color: rgba(255,255,255,.86); font-size: .9rem; line-height: 1.5; max-width: 40ch; }
.anel-badge {
  display: inline-block; margin-bottom: 12px;
  font-size: .64rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: var(--cor-destaque, #b08d57); color: #FFFFFF;
  padding: 6px 13px; border-radius: 100px; box-shadow: 0 6px 16px -6px rgba(0,0,0,.45);
}
.anel-card-destaque .anel-card-body h3 { font-size: clamp(1.35rem, 2.8vw, 1.95rem); }
.anel-counter {
  position: absolute; z-index: 50;
  top: calc(var(--nav-h, 68px) + clamp(12px,2.4vh,24px)); right: clamp(20px,5vw,56px);
  display: flex; align-items: baseline; gap: 6px;
  background: rgba(255,255,255,.92); border-radius: 100px; padding: 10px 18px;
  font-weight: 700; font-size: .82rem; color: var(--cor-texto, #2a2724);
  font-variant-numeric: tabular-nums; box-shadow: 0 12px 26px -16px rgba(0,0,0,.4);
}
.anel-counter-sep { opacity: .45; font-weight: 500; }
@media (max-width: 680px) {
  .anel-card { width: clamp(220px, 74vw, 340px); height: clamp(300px, 62vh, 460px); }
}