/* ==========================================================================
   CAMADA CINEMATOGRÁFICA — só o index.html cinematográfico carrega este arquivo.
   Soma sobre o style.css, não substitui nada dele.

   A regra da casa continua valendo aqui, e é ela que decide cada escolha
   abaixo: nada esconde conteúdo por CSS. Quem esconde é o gsap em runtime.
   ========================================================================== */

/* ---------- Capa de abertura ------------------------------------------
   Só existe com JS vivo (html.js). Sem JS ela nunca aparece, então não tem
   como prender a página. O premium.js ainda solta por temporizador, além do
   evento de load, porque `load` pode não chegar com aba em segundo plano. */
.capa-abertura { display: none; }

html.js .capa-abertura {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 90;
  /* Campo AREIA, nao navy. A cliente vetou campo azul por audio em 17/09, e
     uma capa de tela cheia e o maior campo do site inteiro. */
  background: var(--surface-1);
  color: var(--ink-1);
  transition: opacity 640ms var(--ease-out), visibility 0s linear 640ms;
}
html.js .capa-abertura.solta {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.capa-marca {
  font-family: var(--face-display);
  font-size: var(--step-3);
  letter-spacing: -0.025em;
  opacity: 0;
  animation: capa-entra 760ms var(--ease-out) 120ms both;
}
.capa-marca em { font-style: italic; color: var(--acento); }

.capa-risco {
  display: block;
  width: min(38vw, 320px);
  height: 2px;
  margin-top: var(--space-3);
  background: var(--acento);
  transform: scaleX(0);
  transform-origin: left center;
  animation: capa-risco 950ms var(--ease-out) 260ms both;
}

@keyframes capa-entra { to { opacity: 1; } }
@keyframes capa-risco { to { transform: scaleX(1); } }

/* ---------- Índice de seção ------------------------------------------
   Informação (onde estou), não decoração. Fora do mobile e fora de
   movimento reduzido. */
.indice { display: none; }

/* O corte é 1240px porque é a largura máxima do .contorno: só acima dela as
   margens laterais começam a abrir e sobra faixa livre pro índice. A 1180 ele
   cabia na tela e caía POR CIMA do h1, do subtítulo e dos CTAs (medido em
   16/09/2026, viewport de 1188). Número herdado do layout, não arbitrado. */
@media (min-width: 1240px) {
  html.gsap .indice {
    display: grid;
    gap: var(--space-2);
    position: fixed;
    /* Canto ESQUERDO por decisão do Marcelo em 16/09/2026: à direita o índice
       caía por cima da foto do hero, que ocupa o terço direito da tela. */
    left: clamp(1rem, 2.4vw, 2.4rem);
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
  }
  .indice a {
    position: relative;
    display: grid;
    grid-template-columns: 26px;
    align-items: center;
    min-height: 44px;   /* alvo de toque, e dá respiro entre as réguas */
    gap: var(--space-2);
    font-size: var(--step--1);
    letter-spacing: 0.05em;
    text-decoration: none;
    color: var(--ink-2);
    /* Sem atenuador por opacidade. Medido em 16/09/2026: a 0.55 o item inativo
       dava 2,44:1 sobre o creme e 2,27:1 sobre a foto do hero, e este texto é
       conteúdo (diz em que seção você está), não enfeite. A 1 dá 6,63:1 e
       5,42:1. O estado corrente continua distinto pela régua que cresce e pela
       cor mais escura (15,05:1), que é distinção suficiente sem apagar o resto. */
    opacity: 1;
    transition: color var(--d-ui) var(--ease-ui);
  }
  /* O rótulo fica em repouso escondido e aparece no hover da barra.
     Medido em 16/09/2026 a 1418px: o .contorno tem teto de 1240px, então sobram
     89px de margem de cada lado, e o rótulo mais longo ("O que eu acompanho")
     pede 150px. Com rótulo sempre visível a barra cruzava o h2 da seção Sobre.
     Em repouso sobra a régua, que já codifica posição por comprimento e cor. */
  .indice a em {
    font-style: normal;
    /* absoluto de propósito: com opacity sozinha o rótulo continuaria OCUPANDO
       largura, a barra ficaria com 193px e interceptaria clique por cima do
       texto da seção mesmo invisível. Fora do fluxo, a barra mede 26px. */
    position: absolute;
    left: calc(26px + var(--space-2));
    top: 50%;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(-50%) translateX(-6px);
    transition: opacity var(--d-ui) var(--ease-ui), transform var(--d-ui) var(--ease-ui);
  }
  .indice:hover a em,
  .indice a:focus-visible em { opacity: 1; transform: translateY(-50%); }

  .indice a span {
    display: block;
    height: 1px;
    background: currentColor;
    transform: scaleX(0.45);
    /* origem à esquerda agora que o índice mora na margem esquerda: a régua
       cresce para DENTRO da página, não para fora dela */
    transform-origin: left center;
    transition: transform var(--d-ui) var(--ease-ui);
  }
  /* fora do alcance: hero na tela, nada a indicar. `visibility` em vez de só
     `opacity` pra sair também da ordem de tabulação. */
  html.gsap .indice.fora { opacity: 0; visibility: hidden; }
  html.gsap .indice { transition: opacity var(--d-ui) var(--ease-ui), visibility var(--d-ui); }

  .indice a:hover { color: var(--ink-1); }
  .indice a.corrente { color: var(--ink-1); }
  .indice a.corrente span { transform: scaleX(1); }

  /* sobre bloco navy o índice inverte, senão some no fundo escuro */
  .indice.sobre-escuro a { color: var(--ink-sobre-navy); }
  .indice.sobre-escuro a.corrente { color: var(--ink-inv); }
}

@media (prefers-reduced-motion: reduce) {
  html.js .capa-abertura { display: none; }
  .veu { display: none; }
  .indice { display: none !important; }
}

/* ---------- Refinos de acabamento da versão cinematográfica ----------- */

/* A moldura da foto abre por clip-path, mas o estado fechado NÃO mora aqui.
   `html.gsap` prova que o GSAP carregou, não que o ScrollTrigger disparou, e
   com o gatilho travado a foto ficaria escondida para sempre. Quem fecha a
   moldura é o gsap.fromTo() em runtime, que a rede de segurança também
   consegue desfazer. */

/* numeral do passo ganha peso na versão cinematográfica */
.premium .passo-n { font-size: var(--step-3); line-height: 0.9; }


/* O conteúdo do hero fica acima do fundo animado; nenhuma camada extra. */
.hero .hero-interno { position: relative; z-index: 1; }