/* ═══════════════════════════════════════════════════════════════
   Protótipo 3D — Percurso de Câmera
═══════════════════════════════════════════════════════════════ */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  background: #020408;
  overflow-x: hidden;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 52% 42%, transparent 42%, rgba(1, 7, 7, .18) 100%),
    linear-gradient(90deg, rgba(2, 8, 5, .20), transparent 34%, transparent 76%, rgba(2, 8, 5, .12));
}

/* Canvas fixo — ocupa toda a viewport */
#bg-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: block;
  z-index: 0;
  background: #06100f url('./assets-optimized/floresta-fundo-1920.webp') center / cover no-repeat;
}

.logo-wordmark { color: #fffdf7; font: 500 1.2rem/1 'Spectral', serif; letter-spacing: -.02em; }
.logo-wordmark em { color: #b77a4c; font-weight: 500; }
.experience-static #bg-canvas { filter: saturate(.86) contrast(1.03); }
.experience-static #journey-stage { display: none; }

/* Motorista de scroll — define o comprimento da página
   Altere o valor de height para mais ou menos lentidão
   600vh = 6x a altura da janela                        */
#scroll-driver {
  height: 600vh;
  pointer-events: none;
  position: relative;
  z-index: 1;
}

/* Indicação inicial de rolagem */
#scroll-hint {
  position: absolute;
  bottom: 42px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.55);
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s ease;
  white-space: nowrap;
}

#scroll-hint.hidden {
  opacity: 0 !important;
  pointer-events: none;
}

/* Seta animada abaixo do hint */
#scroll-hint::after {
  content: '';
  display: block;
  margin: 10px auto 0;
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.35);
  animation: hint-line 1.8s ease-in-out infinite;
}

@keyframes hint-line {
  0%, 100% { opacity: 0.2; transform: scaleY(0.5); transform-origin: top; }
  50%       { opacity: 0.7; transform: scaleY(1.0); transform-origin: top; }
}

/* Painel de debug (visível somente com DEBUG=true em main.js) */
#debug-panel {
  position: fixed;
  top: 16px;
  left: 16px;
  background: rgba(0, 0, 0, 0.75);
  color: #00ff99;
  font-family: 'Courier New', Courier, monospace;
  font-size: 11.5px;
  line-height: 1.9;
  padding: 10px 16px;
  border-radius: 4px;
  border: 1px solid rgba(0, 255, 153, 0.3);
  z-index: 20;
  pointer-events: none;
  white-space: pre;
}

/* ═══════════════════════════════════════════════════════════════
   Conteúdo do site — flutuando sobre o canvas 3D
   O canvas é position:fixed z-index:0.
   Todos os elementos de conteúdo precisam de z-index > 0
   para aparecer acima dele.
═══════════════════════════════════════════════════════════════ */

/* .topbar (z-index:110), nav (z-index:109), .side-nav e .cursor
   já são position:fixed no styles.css original — não sobrescrever.
   Apenas os elementos de fluxo normal (section, footer) precisam
   de position:relative para aparecer acima do canvas fixed z-index:0. */
section, footer, .btt {
  position: relative;
  z-index: 5;
}

/* Uma única paisagem contínua: nenhuma seção desenha uma placa própria. */
section, footer, .hero, .sec-full, .sec-dark, .sec-areia, .sec-center {
  background: transparent !important;
  background-image: none !important;
}

.sec-full::before, .sec-problema::before, .sec-sobre::before,
.sec-contato::before, .sec-dark::before, .sec-areia::before, footer::before {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background: transparent !important;
}

.sec-h2, .sec-sub, .sec-fecho, .hero-copy, footer {
  text-shadow: 0 2px 24px rgba(0, 5, 5, .42);
}

.sec-full > .w, .hero > .w {
  position: relative;
  isolation: isolate;
}

.sec-full > .w::before, .hero > .w::before {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: -10vh -7vw;
  background: radial-gradient(ellipse at 38% 48%, rgba(2, 8, 7, .42) 0%, rgba(2, 8, 7, .24) 38%, transparent 73%);
  filter: blur(12px);
}

.side-nav {
  position: fixed !important;
  top: 50vh !important;
  left: 18px !important;
  right: auto !important;
  width: auto !important;
  height: auto !important;
  transform: translateY(-50%) !important;
  display: flex;
  flex-direction: column;
  gap: 16px !important;
  z-index: 200;
}
.side-dot.active::after {
  opacity: 1 !important;
  transform: translateX(0) !important;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(2,10,9,.54);
  backdrop-filter: blur(10px);
  white-space: nowrap;
}
.side-dot:hover::after { opacity: 1 !important; transform: translateX(0) !important; }

/* O conteúdo agora vive sempre sobre fotografia, portanto usa a paleta clara. */
.sec-full {
  --ink: #f6f2e9;
  --muted: rgba(246, 242, 233, .72);
  --rule: rgba(246, 242, 233, .18);
  --green: #f6f2e9;
  color: #f6f2e9;
}

.sec-full p,
.sec-full li,
.sec-full blockquote,
.sec-full h2,
.sec-full h3,
.sec-full h4,
.sec-full a {
  text-shadow: 0 2px 18px rgba(0, 5, 5, .62);
}

.sec-full h2,
.sec-full h3,
.sec-full h4,
.sec-full p,
.sec-full li,
.sec-full blockquote,
.sec-full a:not(.btn) {
  color: #fffdf7 !important;
  text-shadow: 0 2px 3px rgba(0, 4, 4, .88), 0 0 22px rgba(0, 5, 5, .78) !important;
}

.sec-full h2 em,
.sec-full h3 em { color: #b77a4c !important; }

.sec-full a.btn-dark,
.hero a.btn-dark { color: #07110f !important; text-shadow: none !important; }

@media (min-width: 901px) {
  .sec-full > .w { padding-left: 138px !important; }
}

/* O hero já tem fundo transparente — a cena 3D serve como background */
.hero {
  background: transparent;
}

/* A seção hero ocupa toda a primeira viewport */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Garantir que o hint de scroll fique acima do conteúdo */
#scroll-hint {
  z-index: 15;
}

/* ═══════════════════════════════════════════════════════════════
   Overlays — ajuste fino para o contexto 3D
   No site original os overlays cobrem uma imagem estática.
   Aqui a cena 3D JÁ fornece a atmosfera, então reduzimos.
═══════════════════════════════════════════════════════════════ */

/* Hero: remover gradiente opaco — a cena 3D (pés no chão, floresta escura)
   já cria a atmosfera. Manter apenas sombra suave na base para legibilidade. */
.hero-overlay {
  background: radial-gradient(ellipse at 42% 54%, transparent 20%, rgba(3, 9, 7, .20) 100%) !important;
}

#journey-stage {
  position: fixed;
  right: clamp(24px, 4vw, 72px);
  bottom: clamp(26px, 5vh, 58px);
  z-index: 18;
  display: grid;
  grid-template-columns: auto;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,.9);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
}

#journey-stage.visible { opacity: 1; transform: none; }
#journey-stage b { font: 500 11px/1 'Archivo', sans-serif; letter-spacing: .16em; text-transform: uppercase; }

/* A referência usa tipografia contida e muito espaço para o cenário. */
.hero-copy { max-width: 610px !important; }
.hero h1 { font-size: clamp(2.7rem, 5vw, 5.3rem) !important; line-height: .98 !important; }
.hero-actions { margin-top: 28px !important; }

@media (max-width: 767px) {
  #journey-stage { left: 22px; right: auto; }
  .hero h1 { font-size: clamp(2.35rem, 12vw, 4.2rem) !important; }
}

/* Seções com sec-full: reduzir de 68% para 50% — a cena 3D precisa respirar */
.sec-full::before { background: transparent !important; }

/* Seção problema (floresta densa, câmera subindo): um pouco mais densa */
.sec-problema::before { background: transparent !important; }

/* Seção sobre e contato (nuvens/estrelas, fundo mais claro): mais leve */
.sec-sobre::before, .sec-contato::before { background: transparent !important; }

/* Esconder o scroll-cue original do hero — usamos #scroll-hint do 3D
   Sem styles.css carregando, esse elemento ficava como bloco flutuante
   (o "retângulo preto" visível na screenshot anterior). */
.hero-scroll-cue {
  display: none !important;
}

/* Cada seção permanece em cena enquanto suas ideias entram, uma por vez. */
.story-section {
  min-height: calc(100vh + (var(--story-steps) * 42vh)) !important;
  display: block !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: visible !important;
}

.story-section > .w {
  position: sticky !important;
  top: 7vh;
  min-height: 86vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

nav:not(.side-nav).nav-hidden,
.topbar.nav-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-110%) !important;
}

/* Retorno ao topo: discreto, mas inequívoco sobre qualquer cenário. */
.btt {
  position: fixed !important;
  right: clamp(18px, 2.5vw, 38px) !important;
  bottom: clamp(18px, 3vw, 34px) !important;
  width: 48px !important;
  height: 48px !important;
  z-index: 40 !important;
  color: #fffdf7 !important;
  border: 1px solid rgba(255,255,255,.32) !important;
  background: rgba(2,10,9,.62) !important;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 30px rgba(0,0,0,.24);
}

.btt svg { width: 19px; height: 19px; }

@media (max-width: 900px) {
  #bg-canvas { background-image: url('./assets-optimized/floresta-fundo-960.webp'); }
  html.experience-static #bg-canvas { display: none; }
  html.experience-static #hero {
    background: #06100f url('./assets-optimized/floresta-fundo-960.webp') center / cover no-repeat !important;
  }
  html.experience-static #problema {
    background:
      linear-gradient(rgba(2,10,9,.18), rgba(2,10,9,.30)),
      url('./assets-optimized/araucaria-lateral-960.webp') center / cover no-repeat !important;
  }
  html.experience-static #atuacao {
    background: #08110f url('./assets-optimized/transicao-copa-cidade-960.webp') center / cover no-repeat !important;
  }
  html.experience-static #metodo {
    background: #101918 url('./assets-optimized/cidade-960.webp') center / cover no-repeat !important;
  }
  html.experience-static #cases {
    background:
      linear-gradient(rgba(4,12,13,.16), rgba(4,12,13,.28)),
      url('./assets-optimized/layer-montanhas-960.webp') center / cover no-repeat !important;
  }
  html.experience-static #sobre {
    background: #091117 url('./assets-optimized/transicao-ceu-estrelas-960.webp') center / cover no-repeat !important;
  }
  html.experience-static #contato,
  html.experience-static footer {
    background: #020408 url('./assets-optimized/estrelas-960.webp') center / cover no-repeat !important;
  }
  .side-nav { display: none !important; }
  .side-dot.active::after { display: none !important; }
  .story-section { min-height: calc(100vh + (var(--story-steps) * 36vh)) !important; }
  .story-section > .w { top: 5vh; min-height: 90vh; }
}