/* ============================================================
   BOOKATOON — Cenários, abertura e navegação viva
   "Atravessando o livro": cada seção é um ambiente do
   arquipélago em até 3 planos (fundo / meio / próximo).
   Etapa 4 da migração de @layer (docs/layer-proposal.md).

   ───────────────── AJUSTES RÁPIDOS ─────────────────
   Intensidade do parallax  → atributo data-depth no HTML
                              (0.02 fundo · 0.05 meio · 0.08+ próximo)
   Duração da abertura      → --abertura-* abaixo + tempos em js/opening.js
   Opacidade dos cenários   → --cena-opacidade abaixo
   Velocidade dos loops     → durações nos @keyframes de popup.css
   ============================================================ */
@layer sections {

:root {
  --abertura-cortina: 0.6s;   /* páginas se abrindo */
  --abertura-saida: 0.4s;     /* fade final do overlay */
  --cena-opacidade: 0.55;     /* força geral dos cenários de fundo */
}

/* ============================================================
   ABERTURA — capa do livro (uma vez por sessão; pulável)
   Sem JavaScript o overlay nem aparece (fica [hidden]).
   ============================================================ */

.abertura {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
}

.abertura[hidden] {
  display: none;
}

.abertura__pagina {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 52%;
  background: var(--roxo-profundo);
  transition: translate var(--abertura-cortina) var(--ease-suave);
}

.abertura__pagina--esq {
  left: 0;
  /* borda interna rasgada, como papel */
  clip-path: polygon(0 0, 100% 0, 97% 6%, 99% 13%, 96% 22%, 99% 30%, 97% 39%, 100% 47%, 97% 56%, 99% 64%, 96% 73%, 99% 81%, 97% 90%, 100% 100%, 0 100%);
}

.abertura__pagina--dir {
  right: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 3% 94%, 1% 86%, 4% 77%, 1% 69%, 3% 60%, 0 52%, 3% 43%, 1% 35%, 4% 26%, 1% 17%, 3% 8%);
}

.abertura.is-opening .abertura__pagina--esq { translate: -102% 0; }
.abertura.is-opening .abertura__pagina--dir { translate: 102% 0; }

.abertura__centro {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 1.2rem;
  opacity: 0;
  transition: opacity 0.3s linear;
}

.abertura.is-on .abertura__centro {
  opacity: 1;
}

.abertura.is-opening .abertura__centro {
  opacity: 0;
}

.abertura__nota {
  width: 52px;
}

.abertura.is-on .abertura__nota {
  animation: abertura-pulso 0.5s var(--ease-energy) both;
}

@keyframes abertura-pulso {
  0%   { opacity: 0; transform: scale(0.3); }
  60%  { opacity: 1; transform: scale(1.18); }
  100% { opacity: 1; transform: scale(1); }
}

.abertura__logo {
  width: min(58vw, 340px);
  height: auto;
}

.abertura.is-on .abertura__logo {
  animation: abertura-logo 0.5s var(--ease-suave) 0.25s both;
}

@keyframes abertura-logo {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

.abertura__pular {
  position: absolute;
  z-index: 2;
  right: calc(1.2rem + env(safe-area-inset-right, 0px));
  bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px));
  min-height: var(--tap-min);
  padding: 0.5rem 1.1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--papel-sobre-escuro);
  background: var(--roxo-ink);
  border: 2.5px solid var(--ambar);
  border-radius: var(--r-pill);
  cursor: var(--cursor-hand);
}

/* Sobre --roxo-profundo o outline violeta padrão (--focus-ring) cai para
   ~2.3:1 de contraste, abaixo do mínimo de 3:1 do WCAG 2.2 1.4.11.
   --ambar já é o acento visual deste botão (borda) e resolve para ~7.4:1. */
.abertura__pular:focus-visible {
  outline-color: var(--ambar);
}

.abertura.is-done {
  opacity: 0;
  transition: opacity var(--abertura-saida) linear;
  pointer-events: none;
}

/* ".intro-hold .hero" com animation-play-state:paused !important
   mudou para css/overrides.css / @layer overrides na Etapa 4. */

/* ============================================================
   NAVEGAÇÃO VIVA — sublinhado desenhado + seção atual + progresso
   ============================================================ */

.nav-desktop a {
  position: relative;
}

.nav-desktop a::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.45rem;
  height: 3px;
  border-radius: 999px;
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-micro) var(--ease-energy);
}

.nav-desktop a:hover::after,
.nav-desktop a:focus-visible::after,
.nav-desktop a.is-current::after {
  transform: scaleX(1);
}

.nav-desktop a.is-current {
  color: var(--roxo-profundo);
}

/* Fita de progresso de leitura (js/main.js define --scroll-progress) */
.progresso {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  z-index: 110;
  pointer-events: none;
}

.progresso i {
  display: block;
  height: 100%;
  width: calc(var(--scroll-progress, 0) * 100%);
  background: var(--ambar);
  border-radius: 0 999px 999px 0;
}

/* ============================================================
   CENÁRIOS POR SEÇÃO (todos decorativos, aria-hidden, z 0)
   ============================================================ */

.cena {
  position: absolute;
  z-index: var(--z-decor);
  pointer-events: none;
  opacity: var(--cena-opacidade);
}

@media (max-width: 55.99rem) {
  .cena--desktop {
    display: none;
  }
}

/* ---- HERO: colina distante (plano de fundo) ---- */
.scenery--hill2 {
  left: 0;
  right: 0;
  bottom: 40px;
  width: 100%;
  height: clamp(70px, 12vw, 160px);
  opacity: 0.6;
}

/* ---- O QUE É: páginas de caderno ---- */
.cena--paginas {
  inset: 0;
  overflow: hidden;
}

.cena--paginas svg {
  position: absolute;
  opacity: 0.5;
}

/* ---- JORNADA: skyline de Bookatown ao fundo ----
   Novo arquivo (background-silhueta-environment.jpg) já vem com o
   roxo pintado por trás (sem transparência) e é um recorte alto
   (1920×2000, bastante céu roxo vazio acima do skyline) — por isso
   "cover" + "object-position:bottom" corta a sobra de cima com
   segurança: mesmo cortando demais, nunca some com nada (o "fundo"
   cortado também é o roxo da imagem, não transparência). */
.cena--vale {
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: clamp(180px, 26vw, 420px);
  object-fit: cover;
  object-position: bottom;
  opacity: 0.8;
}

/* ---- PERSONAGENS: palco de papel ---- */
.cena--holofote {
  top: 0;
  width: clamp(180px, 26vw, 380px);
  opacity: 0.5;
}

.cena--holofote--esq { left: 6%; }
.cena--holofote--dir { right: 6%; }

.cena--caixa {
  bottom: 24px;
  width: clamp(60px, 7vw, 100px);
  opacity: 0.5;
}

.cena--caixa--esq { left: 2%; }
.cena--caixa--dir { right: 2.5%; }

/* ---- UNIVERSO: ilha distante + névoa ---- */
.cena--ilha-longe {
  top: 7%;
  right: 4%;
  width: clamp(110px, 14vw, 200px);
  opacity: 0.5;
}

.cena--nevoa {
  left: 0;
  right: 0;
  bottom: -6px;
  width: 100%;
  height: clamp(50px, 8vw, 110px);
  opacity: 0.7;
}

/* Mapa fixo no desktop enquanto as informações avançam ao lado */
@media (min-width: 56rem) {
  .universo__grid {
    align-items: start;
  }

  .universo__mapa {
    position: sticky;
    top: clamp(90px, 14vh, 130px);
  }
}

/* ---- CORO: holofote central + notas de encerramento ---- */
.cena--luz {
  left: 50%;
  bottom: 0;
  translate: -50% 0;
  width: min(70%, 780px);
  height: 70%;
  opacity: 0.5;
}

/* ---- CONTATO: ambientação calma (sem loops atrás dos campos) ---- */
.contato {
  position: relative;
}

.cena--contato-nuvem {
  top: 4%;
  right: 6%;
  width: clamp(80px, 9vw, 130px);
  opacity: 0.7;
}

/* DJ N escrevendo a mensagem: corpo, papel e lápis vêm no mesmo
   canvas (1120×1400), já alinhados — por isso cada camada é só um
   <img>/<div> cobrindo 100% do wrapper, sem posição individual.
   Agora vive DENTRO de .contato__form-wrap (não mais na coluna de
   texto), como último filho, depois do <form> e do .form-sucesso —
   assim dá pra ancorar direto no canto do card do formulário
   (.contato__form-wrap ganha position:relative logo abaixo), sem
   depender da altura da coluna esquerda ao lado. No mobile (<60rem,
   1 coluna só) fica no fluxo normal, centralizado. */
.contato__form-wrap {
  position: relative;
}

.contato__mensageiro {
  width: clamp(90px, 11vw, 130px);
  aspect-ratio: 1120 / 1400;
  margin: -1.5rem 1.25rem 0 auto;
  filter: drop-shadow(0.25rem 0.3rem 0 rgba(36, 21, 51, 0.14));
}

.contato-droid__body,
.contato-droid__paper,
.contato-droid__lapis {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Olhos: recorte redondo (overflow:hidden + border-radius), não
   mask-image — carregar uma imagem como máscara CSS é bloqueado
   pelo Chrome quando o site é aberto direto como arquivo (file://).
   Posições medidas em droid-escrevendo-masc.png (soquetes). */
.contato-droid__eye {
  position: absolute;
  overflow: hidden;
  border-radius: 50%;
  pointer-events: none;
}

.contato-droid__eye--esq {
  left: 30.357%;
  top: 39.286%;
  width: 11.161%;
  height: 10.5%;
}

.contato-droid__eye--dir {
  left: 48.75%;
  top: 41.714%;
  width: 11.518%;
  height: 10.286%;
}

.contato-droid__pupil {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 368%; /* recorte (460px) / largura do soquete esquerdo, em % */
  max-width: none; /* sem isto, o reset global "img{max-width:100%}" vence */
  height: auto;
  translate: -50% -50%;
}

.contato-droid__pupil--dir {
  width: 356.59%; /* recorte (460px) / largura do soquete direito, em % */
}

/* Lápis "escrevendo": um pequeno vaivém contínuo, girando perto da
   ponta que seria segurada — a ponta que toca o papel balança mais.
   Olho acompanha no mesmo ritmo, como se seguisse a própria mão. */
@keyframes lapis-escreve {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25%      { transform: translate(5px, 3px) rotate(-3deg); }
  50%      { transform: translate(-4px, -1px) rotate(2deg); }
  75%      { transform: translate(4px, 4px) rotate(-2deg); }
}

@keyframes olho-acompanha {
  0%, 100% { translate: -50% -50%; }
  25%      { translate: -44% -47%; }
  50%      { translate: -56% -51%; }
  75%      { translate: -45% -46%; }
}

.motion-on:not([data-decor-paused="true"]) .contato-droid__lapis {
  transform-origin: 20% 43%;
  animation: lapis-escreve 1.6s ease-in-out infinite;
}

.motion-on:not([data-decor-paused="true"]) .contato-droid__pupil {
  animation: olho-acompanha 1.6s ease-in-out infinite;
}

/* ============================================================
   CAPÍTULOS ("O que é" como páginas de uma história)
   ============================================================ */

.capitulo {
  position: absolute;
  z-index: 2; /* acima do ícone-adesivo (que cria stacking via filter) */
  top: -14px;
  left: 18px;
  display: inline-block;
  padding: 0.1em 0.6em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--ink);
  background: var(--branco);
  border: 2.5px solid var(--ink);
  border-radius: 10px;
  rotate: -2deg;
  box-shadow: 0.12rem 0.16rem 0 rgba(36, 21, 51, 0.18);
}

/* ============================================================
   PORTAIS ("Para você": arco de portal atrás do ícone)
   ============================================================ */

.porta {
  position: relative;
  overflow: hidden;
}

.porta::before {
  content: "";
  position: absolute;
  top: 26px;
  left: 26px;
  width: 104px;
  height: 120px;
  background: var(--porta-cor);
  opacity: 0.16;
  border-radius: 999px 999px 12px 12px;
  pointer-events: none;
}

.porta > * {
  position: relative;
}

/* ============================================================
   MÁSCARAS DE RECORTE — imagens reveladas como janelas de papel
   ============================================================ */

@keyframes mascara-abrir {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

.motion-on .quadro[data-reveal].is-in img {
  animation: mascara-abrir 0.9s var(--ease-suave) 0.15s both;
}

.motion-on .polaroid[data-reveal].is-in img,
.motion-on .polaroid[data-reveal].is-in video {
  animation: mascara-abrir 0.7s var(--ease-suave) 0.2s both;
}

} /* fim de @layer sections */