/* =====================================================================
   Regras da página inteira (valem para o hero e para todas as seções)
   ===================================================================== */

/* Até as nuvens do hero (o LCP) chegarem, o céu de fundo e o fio não são pedidos: no 4G eles
   dividiam a banda com elas. O fio sem imagem mostraria a borda sólida, por isso a cor
   transparente. A classe sai do <html> pelo script do <head> (index.html) */
.hero-leve .sky{ background-image:none }
.hero-leve .fio{ border-image-source:none; border-color:transparent }

/* Seção ainda não montada: a caixa existe, com a altura de uma tela (a página tem rolagem e o
   IntersectionObserver a enxerga), mas o conteúdo não é processado. Sem estilo calculado, o
   navegador não busca as imagens (todas loading="lazy"), os fundos em CSS nem as fontes dela.
   O js/pagina.js põe .montada quando ela chega perto da tela (só depois que o hero carregou) ou
   quando o menu a abre, e .solta logo depois, quando o content-visibility sai de vez: ele traz
   contenção de layout, e com ela o aviso em position:fixed do Sobre se posicionaria pela seção,
   não pela tela. A passagem por "auto" não é enfeite: de "hidden" direto para nada, o Chrome
   conta a seção inteira como pulo de layout (CLS 1,0 no PageSpeed), mesmo fora da tela;
   hidden -> auto -> nada não conta nada (testado no Chrome 13x, 11/10/2026) */
.js body > section:not(#hero){ contain-intrinsic-size:auto 100vh }
.js body > section:not(#hero):not(.montada){ content-visibility:hidden }
.js body > section.montada:not(.solta){ content-visibility:auto }

/* Tela fora da vista: as animações em loop param onde estão e voltam de onde pararam.
   Ninguém vê a diferença, mas o navegador deixa de recalcular e repintar a cada quadro o que
   está longe: brilhos em background-position, sombras animadas em filter, a varredura em
   left da Mentoria, as nuvens do hero. No celular é bateria. A classe vem do js/pagina.js */
.fora-da-tela, .fora-da-tela *, .fora-da-tela *::before, .fora-da-tela *::after{
  animation-play-state:paused !important;
}

/* texto só para leitor de tela e buscador (o nome do Dom no h1 do hero, por exemplo) */
.vh{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0 }

/* proporção explícita nas imagens lazy: o Chrome (155+) avisa de imagem lazy "sem dimensões
   explícitas" quando a altura é auto, mesmo com width/height no HTML. É a mesma proporção dos
   atributos (conferido arquivo por arquivo), então nada muda na tela; sem peso (:where) para
   qualquer regra de seção ganhar. As de <picture> ficam de fora: a versão de celular tem outra
   proporção (as que precisam estão no CSS da seção). Navegador sem attr() tipado ignora */
:where(img[loading="lazy"][width][height]:not(picture > img)){
  aspect-ratio:attr(width type(<number>)) / attr(height type(<number>));
}

/* botão de som fora do hero (a trilha toca na página inteira; js/menu.js): o do hero, fixo no
   canto. Aparece quando o hero sai da tela; escondido, sai também da ordem do Tab */
.som-fixo{
  position:fixed; right:max(12px, env(safe-area-inset-right)); bottom:max(12px, env(safe-area-inset-bottom)); z-index:50;
  display:flex; align-items:center; gap:6px; min-height:40px; margin:0; padding:0 12px; cursor:pointer;
  font:600 13px/1 "Chakra Petch",system-ui,sans-serif; letter-spacing:.06em;
  color:#eaf8ff; background:rgba(8,40,78,.78); border:2px solid rgba(160,225,255,.6); border-radius:8px;
  box-shadow:0 4px 12px rgba(0,12,40,.35); -webkit-tap-highlight-color:transparent;
  opacity:0; visibility:hidden; translate:0 10px; transition:opacity .25s, translate .25s, visibility 0s .25s;
}
.som-fixo.visivel{ opacity:1; visibility:visible; translate:0 0; transition:opacity .25s, translate .25s }
.som-fixo svg{ width:18px; height:18px }
.som-fixo[aria-pressed="false"]{ color:#8fb4d2; border-color:rgba(160,225,255,.28) }
.som-fixo[aria-pressed="false"] .wave{ opacity:.25 }
.som-fixo.tocando .wave{ animation:onda 1.4s ease-in-out infinite }
.som-fixo:focus-visible{ outline:2px solid #fff; outline-offset:3px }
/* no celular, só o ícone (o "Som" continua para o leitor de tela) */
@media (max-width:767px){
  .som-fixo{ width:42px; height:42px; padding:0; justify-content:center }
  .som-fixo span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
}
@media (prefers-reduced-motion: reduce){
  .som-fixo{ transition:none }
  .som-fixo.tocando .wave{ animation:none }
}