/* ---------- cenas ----------
   Cada seção da página é uma cena. Ela rola normalmente até a base encostar na base da tela
   e fica presa ali; a cena seguinte sobe por cima como um cartão, enquanto o conteúdo da cena
   presa sobe mais devagar (parallax). É o mesmo efeito em toda troca de seção.
   O JS (main.js) mede cada cena e define --cena-topo. Sem JS as cenas rolam uma depois da outra. */
.scene {
  position: sticky;
  top: var(--cena-topo, auto);
  z-index: var(--z-content);
  min-height: 100vh;
  min-height: 100svh;
  background: var(--cena-fundo);
  color: var(--cena-texto);
  transition: background-color var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out);
}

/* cores da cena: os componentes de dentro usam só --cena-*, e a cena decide de onde elas vêm */
.scene--theme {
  --cena-fundo: var(--tema-fundo);
  --cena-texto: var(--tema-texto);
  --cena-apoio: var(--tema-texto-apoio);
  --cena-borda: var(--tema-borda);
}
.scene--inverted {
  --cena-fundo: var(--cartao-fundo);
  --cena-texto: var(--cartao-texto);
  --cena-apoio: var(--cartao-apoio);
  --cena-borda: var(--cartao-borda);
  --focus-ring: var(--cartao-foco);
}

.scene--accent {
  --cena-fundo: var(--tema-destaque);
  --cena-texto: var(--texto-sobre-destaque);
  --cena-apoio: var(--texto-sobre-destaque);
  --cena-borda: var(--texto-sobre-destaque);
  --focus-ring: var(--texto-sobre-destaque);
}

/* cartão: margem lateral e cantos de cima arredondados */
.scene--card {
  margin: 0 var(--card-inset);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  /* moldura na cor do fundo, da largura da margem, em volta do cartão inteiro.
     Ela cobre as margens laterais (a cena de trás não aparece ao lado do cartão) e separa a
     borda do cartão do que passa por trás: sem ela, o cartão claro se fundia com as letras
     claras do logo, e sobravam pedaços do logo nas margens, perto dos cantos. */
  box-shadow: 0 0 0 var(--card-inset) var(--tema-fundo);
  transition: background-color var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
}

/* a seção recebe o foco quando um link leva até ela (para o teclado continuar dali),
   mas não é um controle: não precisa de contorno */
.scene:focus { outline: none; }

/* o conteúdo que sobe mais devagar enquanto a cena é coberta */
[data-scene-inner] { will-change: transform; }

/* cena totalmente coberta: pausa o que estiver em loop */
.scene.is-covered * { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  [data-scene-inner] { transform: none !important; }
}