/* ==========================================================================
   Base: reset mínimo, utilitários e estados globais da página
   Estados no <html>:
     .intro   → tudo escondido, antes da entrada       (js/sections/hero.js)
     .play    → transições da entrada ativas            (js/sections/hero.js)
     .imersao → navbar some durante o genjutsu do Sobre (js/sections/sobre.js)

   Âncoras: as seções de tela cheia (hero, sobre) param no topo da janela,
   com a navbar por cima, e reservam a altura dela no próprio layout.
   Seção que NÃO for de tela cheia deve usar scroll-margin-top: var(--nav-h).
   ========================================================================== */

html{
  height:100%;
  background:var(--void);
}

body{
  margin:0;
  min-height:100%;
  background:var(--void);
  color:var(--ink);
  font-family:var(--f-ui);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

@media (prefers-reduced-motion:reduce){
  .play *{transition:none!important}
}

/* Desempenho: as seções abaixo do hero só são calculadas e desenhadas quando
   chegam perto da tela. Longe dela o navegador pula estilo, layout e pintura e
   as animações delas param sozinhas. Todas já recortam o que transborda
   (overflow:hidden + isolation), então nada muda na tela. Antes da primeira vez
   na tela a altura estimada é de uma tela; depois o navegador guarda a real (auto).
   :where() deixa a especificidade zero: a seção pode trocar a estimativa no CSS dela. */
/* Abertura do site (html.abrindo, posto por um script inline no <head>): até a entrada
   do hero mostrar os olhos, as seções de baixo nem são montadas (hidden em vez de auto).
   O navegador não pede imagem, fonte nem fundo delas e não disputa a banda com o hero
   (o lazy do próprio navegador baixava o Sobre e o Portfólio logo de cara, por estarem
   "perto"). Seção que chega à tela antes disso ganha .liberada na hora (carrega-perto.js). */
html.abrindo :where(main > section:not(.hero):not(.liberada)){ content-visibility:hidden; }
:where(main > section:not(.hero)){
  content-visibility:auto;
  contain-intrinsic-block-size:auto 100vh;
  contain-intrinsic-block-size:auto 100svh;
}