/* ============================================================
   BOOKATOON — Sistema pop-up
   "Um livro pop-up musical, construído com papéis recortados,
    adesivos e pequenas peças articuladas."
   Etapa 4 da migração de @layer (docs/layer-proposal.md).
   ============================================================ */
@layer sections {
/* ============================================================

   Materiais (papel, adesivo, etiqueta) + coreografia de motion.
   Regras de segurança:
   - loops decorativos: só sob .motion-on:not([data-decor-paused="true"])
   - one-shots narrativos: só sob .motion-on
   - sem motion: tudo visível, estático e legível
   ============================================================ */

/* ---------------- Textura de papel (global, sutil) ---------------- */

body {
  position: relative;
}

body::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 39; /* abaixo de header (60), menu (70) e painel (80) */
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

:root[data-high-contrast="true"] body::after {
  display: none;
}

@media (forced-colors: active), print {
  body::after {
    display: none;
  }
}

/* ---------------- Materiais ---------------- */

/* Recorte de papel: raio irregular + sombra dupla (curta + difusa) */
.paper-cut {
  border: var(--stroke) solid var(--ink);
  border-radius: 42% 58% 54% 46% / 48% 45% 55% 52%;
  box-shadow:
    5px 7px 0 rgba(36, 21, 51, 0.18),
    10px 14px 24px rgba(36, 21, 51, 0.08);
}

/* Tira de papel colada (para palavras em títulos) */
.tira-papel {
  display: inline-block;
  padding: 0.02em 0.18em;
  background: var(--branco);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 0.16em;
  rotate: -1.6deg;
  box-shadow: 0.12em 0.14em 0 rgba(36, 21, 51, 0.28);
}

/* Etiqueta colada (nomes de personagens) */
.etiqueta {
  display: inline-block;
  padding: 0.04em 0.4em;
  background: var(--ambar-suave);
  border: 3px solid var(--ink);
  border-radius: 12px;
  rotate: -1.2deg;
  box-shadow: 0.14rem 0.18rem 0 rgba(36, 21, 51, 0.18);
}

/* Adesivo que ultrapassa a moldura do card */
.card-sticker {
  position: absolute;
  top: -18px;
  right: -12px;
  width: 46px;
  height: 46px;
  rotate: 9deg;
  filter: drop-shadow(2px 3px 0 rgba(36, 21, 51, 0.2));
  pointer-events: none;
}

/* ---------------- Fotos oficiais coladas no álbum ---------------- */

/* Polaroid: foto revelada com borda branca larga e legenda */
.polaroid {
  margin: 0;
  justify-self: center;
  max-width: 26rem;
  background: var(--branco);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--r-sm);
  padding: 0.7rem 0.7rem 0.55rem;
  box-shadow: 0.4rem 0.5rem 0 rgba(0, 0, 0, 0.35);
  rotate: 1.6deg;
  transition: rotate var(--dur-micro) var(--ease-energy), scale var(--dur-micro) var(--ease-energy);
}

.motion-on .polaroid:hover {
  rotate: 0.4deg;
  scale: 1.015;
}

.polaroid img,
.polaroid video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--r-sm) - 4px);
  border: 2px solid var(--ink);
  object-fit: cover;
}

.polaroid figcaption {
  padding: 0.5rem 0.25rem 0.15rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--ink);
  text-align: center;
}

/* Quadro: imagem grande emoldurada como página de álbum */
.quadro {
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  max-width: 62rem;
  color: var(--on-card);
  background: var(--surface-card);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--r-lg);
  padding: clamp(0.7rem, 1.6vw, 1.1rem);
  box-shadow: var(--shadow-sticker);
  rotate: -0.4deg;
}

.quadro img {
  width: 100%;
  height: auto;
  border-radius: calc(var(--r-lg) - 8px);
  border: 2px solid var(--ink);
}

/* Vídeo hospedado no site (não mais iframe do YouTube — ver
   comentário no HTML sobre o Erro 153), com a MESMA moldura e
   proporção 16:9. .quadro__video-thumb (miniatura oficial do
   YouTube + botão de play) troca para um <video> nativo no clique,
   via JS (ver "Vídeo: miniatura → player nativo" em main.js). */
.quadro__video {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: calc(var(--r-lg) - 8px);
  border: 2px solid var(--ink);
  overflow: hidden;
  background: var(--ink);
}

.quadro__video-thumb {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.quadro__video-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  transition: transform var(--dur-micro) var(--ease-energy);
}

.motion-on .quadro__video-thumb:hover img,
.motion-on .quadro__video-thumb:focus-visible img {
  transform: scale(1.04);
}

.quadro__video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  scale: 1;
  display: grid;
  place-items: center;
  width: clamp(56px, 8vw, 76px);
  height: clamp(56px, 8vw, 76px);
  border-radius: 50%;
  background: var(--coral);
  border: var(--stroke) solid var(--ink);
  box-shadow: 0.25rem 0.3rem 0 rgba(36, 21, 51, 0.3);
  color: var(--branco);
  transition: scale var(--dur-micro) var(--ease-energy);
}

.quadro__video-play svg {
  width: 42%;
  height: 42%;
  margin-left: 8%; /* centraliza visualmente o triângulo (assimétrico) */
}

.motion-on .quadro__video-thumb:hover .quadro__video-play,
.motion-on .quadro__video-thumb:focus-visible .quadro__video-play {
  scale: 1.1;
}

/* Player nativo depois do clique: preenche a mesma moldura */
.quadro__video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Botão no padrão do site: quem quiser ver/seguir no YouTube de
   verdade (mesma URL do canal/vídeo — nada de link fake). Usa o
   componente .btn (mesmo estilo do "Fale com a gente"), só com um
   tamanho mais discreto pra não competir com os CTAs principais. */
.quadro__video-yt {
  margin-top: 1.1rem;
  padding: 0.6rem 1.3rem;
  font-size: var(--fs-small);
}

.quadro__video-yt svg {
  color: #FF0000;
}

.quadro figcaption {
  padding: 0.75rem 0.5rem 0.25rem;
  color: var(--on-card);
  text-align: center;
}

.quadro figcaption p {
  /* Todo <p> do site trava em --measure (62ch) pra manter linha de
     leitura curta — bom pra texto corrido, mas aqui sobrava metade
     do quadro vazia do lado. Legenda curta, centralizada: pode usar
     a largura toda. */
  max-width: none;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--text-muted);
}

/* Linha da jornada: regra + polaroid lado a lado no desktop */
.jornada__row {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.jornada__row .jornada__regra {
  margin-bottom: 0;
}

@media (min-width: 56rem) {
  .jornada__row {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

/* ---------------- Três níveis materiais ----------------
   1. Papel de fundo  → textura global (body::after) quase imperceptível
   2. Papel recortado → cards especiais, tiras, etiquetas, divisores
   3. Adesivo         → ícones e destaques com filete branco          */

/* Adesivos ganham filete branco (elementos pequenos apenas — barato) */
.card-sticker,
.intro-card__icone,
.passo__icone,
.porta__icone {
  filter:
    drop-shadow(1.5px 0 0 var(--branco))
    drop-shadow(-1.5px 0 0 var(--branco))
    drop-shadow(0 1.5px 0 var(--branco))
    drop-shadow(0 -1.5px 0 var(--branco));
}

/* Papel recortado: raios levemente irregulares, nunca idênticos */
.dado:nth-child(1) { border-radius: 26px 20px 30px 22px; }
.dado:nth-child(2) { border-radius: 22px 28px 20px 30px; }
.dado:nth-child(3) { border-radius: 30px 22px 26px 20px; }
.dado:nth-child(4) { border-radius: 20px 30px 22px 28px; }
.relato:nth-child(odd)  { border-radius: 24px 30px 22px 32px; rotate: 0.35deg; }
.relato:nth-child(even) { border-radius: 30px 22px 32px 24px; rotate: -0.4deg; }
.intro-card .intro-card__icone { border-radius: var(--r-blob); }

/* Sombras diferenciadas por material: portas mais curtas, quadros difusos */
.porta {
  box-shadow: 0.3rem 0.3rem 0 rgba(36, 21, 51, 0.14);
}

.quadro,
.polaroid {
  box-shadow:
    0.35rem 0.45rem 0 rgba(36, 21, 51, 0.22),
    0.8rem 1.1rem 1.6rem rgba(36, 21, 51, 0.08);
}

/* ---------------- Nível 3 fora do viewport: pausa total ----------------
   main.js marca seções [data-ambient] com .is-off quando saem da tela. */
[data-ambient].is-off :is(
  .capy-eye, .capy-head, .capy-body, .capy-mic,
  .djn-antena, .djn-sp, .equalizer i,
  .decor, .hero__capy-box, .hero__djn-box, .hero__djn-eyelid, .hero-nota,
  .coro__personagens img
) {
  animation-play-state: paused;
}

[data-ambient].is-off .hero__capy-shine::before {
  animation-play-state: paused;
}

/* Inclinações de repouso: peças coladas à mão, nunca perfeitas.
   Usa a propriedade `rotate` para não brigar com animações de transform. */
.intro-card:nth-child(1) { rotate: -0.5deg; }
.intro-card:nth-child(2) { rotate: 0.4deg; }
.intro-card:nth-child(3) { rotate: -0.35deg; }
.dado:nth-child(odd)     { rotate: -0.45deg; }
.dado:nth-child(even)    { rotate: 0.4deg; }
.jornada__regra          { rotate: -0.3deg; }

/* Peças pressionáveis: afundam como papelão */
a.porta:active,
.personagem:active {
  translate: 0 3px;
}

.intro-card,
.personagem,
.porta,
.dado,
.relato {
  transition-property: transform, box-shadow, translate;
  transition-duration: var(--dur-micro);
  transition-timing-function: var(--ease-energy);
}

/* ============================================================
   1. HERO — abertura como capa de livro pop-up (~1,2 s)
   ============================================================ */

/* Cenário recortado (plano 2) */
.hero__scenery {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.scenery {
  position: absolute;
}

.scenery--hill {
  left: 0;
  right: 0;
  bottom: -2px;
  width: 100%;
  height: clamp(90px, 16vw, 220px);
}

.scenery--blob {
  /* posicionado dentro do palco (.hero__stage), atrás da Capy —
     um pouco maior que o grupo capy+droid pra dar profundidade
     (camada de trás "respira" mais que o personagem da frente) */
  top: -11%;
  right: -11%;
  width: 108%;
  opacity: 0.9;
}

.scenery--cloud {
  top: 4%;
  left: 2%;
  width: clamp(70px, 8vw, 110px);
}

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

@keyframes sheet-in {
  from {
    opacity: 0;
    transform: translateY(26px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.motion-on .scenery--hill  { animation: sheet-in 0.55s var(--ease-suave) 0s both; }
.motion-on .scenery--blob  { animation: sheet-in 0.6s var(--ease-suave) 0.08s both; }
.motion-on .scenery--cloud { animation: sheet-in 0.5s var(--ease-suave) 0.9s both; }

/* Peças do título */
@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes pop-piece {
  0% {
    opacity: 0;
    transform: translateY(24px) rotate(var(--pop-rot, -4deg)) scale(0.88);
  }
  65% {
    opacity: 1;
    transform: translateY(-4px) rotate(calc(var(--pop-rot, -4deg) / -3)) scale(1.03);
  }
  100% {
    opacity: 1;
    transform: rotate(var(--pop-rest, 0deg));
  }
}

.palavra-medo    { --pop-rot: -5deg; }
.palavra-coragem { --pop-rot: -2.5deg; }

/* "vira" é uma pequena tira de papel colada meio torta */
.palavra-vira {
  --pop-rot: 6deg;
  --pop-rest: -2deg;
  display: inline-block;
  padding: 0 0.16em;
  background: var(--branco);
  border: 3px solid var(--ink);
  border-radius: 0.14em;
  box-shadow: 0.08em 0.1em 0 rgba(36, 21, 51, 0.25);
  transform: rotate(var(--pop-rest));
}

.motion-on .hero__eyebrow    { animation: rise-in 0.5s var(--ease-suave) 0.04s both; }
.motion-on .palavra-medo     { animation: pop-piece 0.55s var(--ease-energy) 0.12s both; }
.motion-on .palavra-vira     { animation: pop-piece 0.5s var(--ease-energy) 0.28s both; }
.motion-on .palavra-coragem  { animation: pop-piece 0.6s var(--ease-energy) 0.42s both; }
.motion-on .hero__lead       { animation: rise-in 0.55s var(--ease-suave) 0.55s both; }
.motion-on .hero__ctas       { animation: rise-in 0.55s var(--ease-suave) 0.66s both; }
.motion-on .hero__parceiros  { animation: rise-in 0.5s var(--ease-suave) 0.8s both; }

/* Faixa amarela desliza sob "coragem" depois que a palavra assenta */
@keyframes band-in {
  from {
    transform: rotate(-1.2deg) scaleX(0);
  }
  to {
    transform: rotate(-1.2deg) scaleX(1);
  }
}

.motion-on .palavra-coragem::after {
  transform-origin: left center;
  animation: band-in 0.4s var(--ease-energy) 0.78s both;
}

/* Capy BB sobe como figura pop-up; DJ N entra como aba mecânica */
@keyframes capy-pop {
  0% {
    opacity: 0;
    transform: translateY(72px) scale(0.85) rotate(2.5deg);
  }
  65% {
    opacity: 1;
    transform: translateY(-10px) scale(1.02) rotate(-0.6deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes djn-flap {
  0% {
    opacity: 0;
    transform: translateY(22px) rotate(9deg) scaleY(0.55);
  }
  60% {
    opacity: 1;
    transform: translateY(-6px) rotate(-2deg) scaleY(1.06);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.motion-on .hero__capy-box {
  animation: capy-pop 0.7s var(--ease-energy) 0.35s both;
}

.motion-on:not([data-decor-paused="true"]) .hero__capy-box {
  animation:
    capy-pop 0.7s var(--ease-energy) 0.35s both,
    capy-float 3.2s ease-in-out 1.15s infinite alternate;
}

.motion-on .hero__djn-box {
  animation: djn-flap 0.5s var(--ease-energy) 0.88s both;
  transform-origin: 50% 90%;
}

.motion-on:not([data-decor-paused="true"]) .hero__djn-box {
  animation:
    djn-flap 0.5s var(--ease-energy) 0.88s both,
    djn-hover 2.6s ease-in-out 1.45s infinite alternate;
}

/* Pisca de vez em quando: a pálpebra (não o olho) cresce e cobre o
   soquete inteiro. */
.motion-on:not([data-decor-paused="true"]) .hero__djn-eyelid {
  animation: djn-blink 6.4s ease-in-out 3s infinite;
}

/* Reflexo ocasional nos óculos da Capy */
.motion-on:not([data-decor-paused="true"]) .hero__capy-shine::before {
  animation: capy-shine-sweep 7.5s ease-in-out 2s infinite;
}

/* Notinhas: cada uma no seu ritmo, começando em momentos diferentes
   para nunca "piscar" todas juntas — soam como uma melodia solta. */
.motion-on:not([data-decor-paused="true"]) .hero-nota--capy-1 { animation: nota-flutua 6s ease-out 1.6s infinite; }
.motion-on:not([data-decor-paused="true"]) .hero-nota--capy-2 { animation: nota-flutua 6.6s ease-out 3.4s infinite; }
.motion-on:not([data-decor-paused="true"]) .hero-nota--djn-1  { animation: nota-flutua 7.2s ease-out 2.5s infinite; }

/* Notas entram em três batidas */
@keyframes nota-beat {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }
  70% {
    opacity: 1;
    transform: scale(1.25);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.capy-nota {
  transform-box: fill-box;
  transform-origin: center;
}

.motion-on .capy-nota-1 { animation: nota-beat 0.35s var(--ease-energy) 0.95s both; }
.motion-on .capy-nota-2 { animation: nota-beat 0.35s var(--ease-energy) 1.1s both; }
.motion-on .hero .decor--drift path,
.motion-on .hero .decor--drift-2 circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: nota-beat 0.4s var(--ease-energy) 1.2s both;
}

/* Bounce da Capy quando o CTA principal recebe hover (via JS) */
@keyframes capy-cta-bounce {
  0%   { transform: none; }
  35%  { transform: translateY(-9px) scale(1.03) rotate(-1.2deg); }
  70%  { transform: translateY(2px) scale(0.99); }
  100% { transform: none; }
}

.motion-on .hero__capy.do-bounce {
  animation: capy-cta-bounce 0.55s var(--ease-energy);
}

/* ============================================================
   2. PERSONAGENS ARTICULADOS — um gesto de cada vez
   ============================================================ */

.capy-eye,
.capy-head,
.capy-body,
.capy-mic,
.djn-sp,
.djn-antena,
.guard-svg {
  transform-box: fill-box;
  transform-origin: center;
}

.capy-head { transform-origin: 50% 88%; }
.capy-body { transform-origin: 50% 100%; }
.capy-mic  { transform-origin: 8% 92%; }
.djn-antena { transform-origin: 50% 100%; }

/* Piscar ocasional */
@keyframes capy-blink {
  0%, 90.5%, 93.5%, 100% { transform: scaleY(1); }
  91.5%, 92.5%           { transform: scaleY(0.08); }
}

/* Balanço leve de cabeça */
@keyframes head-sway {
  0%, 84%, 100% { transform: rotate(0deg); }
  89%           { transform: rotate(-2.2deg); }
  94%           { transform: rotate(1.5deg); }
}

/* Respiração */
@keyframes capy-breath {
  from { transform: scaleY(1); }
  to   { transform: scaleY(1.013); }
}

/* Microfone marca uma batida de vez em quando */
@keyframes mic-bump {
  0%, 74%, 90%, 100% { transform: rotate(0deg); }
  79%                { transform: rotate(4.5deg); }
  84%                { transform: rotate(-2deg); }
}

/* DJ N: antena baila, alto-falantes pulsam ocasionalmente */
@keyframes antena-bob {
  0%, 76%, 100% { transform: rotate(0deg); }
  84%           { transform: rotate(-7deg); }
  92%           { transform: rotate(4deg); }
}

@keyframes sp-idle {
  0%, 86%, 94%, 100% { transform: scale(1); }
  90%                { transform: scale(1.1); }
}

/* Só no hero (um gesto a cada alguns segundos; nunca tudo junto) */
.motion-on:not([data-decor-paused="true"]) .hero__capy .capy-eye  { animation: capy-blink 5.5s linear infinite; }
.motion-on:not([data-decor-paused="true"]) .hero__capy .capy-head { animation: head-sway 8.5s ease-in-out infinite; }
.motion-on:not([data-decor-paused="true"]) .hero__capy .capy-body { animation: capy-breath 3.8s ease-in-out infinite alternate; }
.motion-on:not([data-decor-paused="true"]) .hero__capy .capy-mic  { animation: mic-bump 7s ease-in-out 2s infinite; }
.motion-on:not([data-decor-paused="true"]) .hero__djn .djn-antena { animation: antena-bob 6.5s ease-in-out infinite; }
.motion-on:not([data-decor-paused="true"]) .hero__djn .djn-sp     { animation: sp-idle 7.5s ease-in-out 3s infinite; }

/* Olhar segue o cursor discretamente (JS define --gaze) */
.hero__capy .capy-eyes {
  translate: var(--gaze-x, 0) var(--gaze-y, 0);
  transition: translate 0.3s var(--ease-suave);
}

/* Verbos de hover dos cards antigos removidos: o gesto agora é o
   salto do recorte, em css/personagens.css. */

/* Balão de fala dos personagens (detalhe, não conteúdo essencial):
   centralizado embaixo, perto do lábio do palco — não mais um balão
   de fala apontando pra boca, e sim uma legenda logo acima da base. */
.personagem__balao {
  position: absolute;
  z-index: 2;
  bottom: 22px;
  left: 50%;
  margin: 0;
  max-width: 80%;
  width: max-content;
  text-align: center;
  background: var(--branco);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 14px;
  padding: 0.3rem 0.7rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.25;
  opacity: 0;
  translate: -50% 8px;
  scale: 0.85;
  transform-origin: bottom center;
  transition:
    opacity var(--dur-micro) linear,
    translate var(--dur-micro) var(--ease-energy),
    scale var(--dur-micro) var(--ease-energy);
  pointer-events: none;
}

.personagem:hover .personagem__balao,
.personagem:focus-within .personagem__balao {
  opacity: 1;
  translate: -50% 0;
  scale: 1;
}

/* ============================================================
   3. JORNADA — caminho desenhado ao vivo
   ============================================================ */

/* A linha se desenha conforme o scroll (JS define --trilha-progress).
   clip-path preserva o tracejado pontilhado original. */
.trilha__linha {
  clip-path: inset(-20px calc((1 - var(--trilha-progress, 1)) * 100%) -20px 0);
}

/* Capy voadora viajante: ver .trilha__voador em sections.css
   (posicionamento) e main.js (cálculo do ponto ao longo do path,
   sem distorção — abandonado o offset-path por causa do stretch
   não-uniforme do viewBox 1200×40 em telas estreitas). */

/* Selo numerado pulsa quando a etapa entra */
@keyframes badge-pop {
  0%   { transform: scale(0); }
  70%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

.motion-on .passo.is-in::before {
  animation: badge-pop 0.5s var(--ease-energy) both;
  animation-delay: calc(var(--reveal-delay, 0ms) + 180ms);
}

/* Ícone clínico "cola" no card logo depois */
@keyframes icon-stick {
  0%   { opacity: 0; transform: translateY(-18px) rotate(-8deg); }
  65%  { opacity: 1; transform: translateY(3px) rotate(2deg); }
  100% { opacity: 1; transform: none; }
}

.motion-on .passo.is-in .passo__icone {
  animation: icon-stick 0.5s var(--ease-energy) both;
  animation-delay: calc(var(--reveal-delay, 0ms) + 260ms);
}

/* Etapa em foco ganha cor; as demais recuam de leve */
.passo {
  transition:
    opacity var(--dur-micro) linear,
    filter var(--dur-micro) linear,
    translate var(--dur-micro) var(--ease-energy);
}

.motion-on .trilha__lista:hover .passo:not(:hover),
.motion-on .trilha__lista:focus-within .passo:not(:focus-within) {
  opacity: 0.78;
  filter: saturate(0.7);
}

.motion-on .passo:hover {
  translate: 0 -4px;
}

/* ============================================================
   4. CARDS COMO RECORTES MONTADOS
   ============================================================ */

/* Entrada com leve rotação (variante do reveal) */
.motion-on [data-reveal][data-tilt] {
  transform: translateY(var(--reveal-y)) scale(0.98) rotate(-2deg);
}

.motion-on [data-reveal][data-tilt].is-in {
  transform: none;
}

/* Ícones dos cards de introdução caem e "colam" */
.motion-on .intro-card.is-in .intro-card__icone {
  animation: icon-stick 0.5s var(--ease-energy) both;
  animation-delay: calc(var(--reveal-delay, 0ms) + 180ms);
}

/* Adesivos surgem por último */
@keyframes sticker-in {
  0%   { opacity: 0; transform: scale(0.3) rotate(-16deg); }
  70%  { opacity: 1; transform: scale(1.14) rotate(2deg); }
  100% { opacity: 1; transform: none; }
}

.motion-on .intro-card.is-in .card-sticker {
  animation: sticker-in 0.45s var(--ease-energy) both;
  animation-delay: calc(var(--reveal-delay, 0ms) + 340ms);
}

/* ============================================================
   7. ARQUIPÉLAGO — mapa aéreo com nuvens sobrevoando
   ============================================================ */

@keyframes map-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.motion-on .universo__mapa .mapa-rise {
  opacity: 0;
}

.motion-on .universo__mapa.is-in .mapa-rise {
  animation: map-rise 0.65s var(--ease-energy) both;
}

/* Palco da imagem: recorta as nuvens nas bordas da arte */
.universo__mapa-cena {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r-xl);
}

.universo__mapa-img {
  display: block;
  width: 100%;
  height: auto;
}

/* Nuvens sobre a arte: sensação de vista aérea (ilha vista de cima,
   nuvens passando entre a "câmera" e o arquipélago). Posição de
   repouso = layout estático (reduced motion / pausado); a deriva
   passa por cima dessa posição sem alterar o layout base. */
.universo__nuvem {
  position: absolute;
  z-index: 2;
  filter: drop-shadow(0.2rem 0.3rem 0 rgba(36, 21, 51, 0.12));
  pointer-events: none;
}

.universo__nuvem--1 { top: 4%;  left: 6%;  width: 42%; opacity: 0.95; }
.universo__nuvem--2 { top: 40%; left: 56%; width: 27%; opacity: 0.85; }
.universo__nuvem--3 { top: 68%; left: 14%; width: 33%; opacity: 0.9; }

@keyframes nuvem-passa {
  from { transform: translateX(-160%); }
  to   { transform: translateX(260%); }
}

.motion-on:not([data-decor-paused="true"]) .universo__nuvem--1 {
  animation: nuvem-passa 24s linear infinite;
}

.motion-on:not([data-decor-paused="true"]) .universo__nuvem--2 {
  animation: nuvem-passa 31s linear infinite -9s;
}

.motion-on:not([data-decor-paused="true"]) .universo__nuvem--3 {
  animation: nuvem-passa 27s linear infinite -17s;
}

/* O mapa inclina até 2° seguindo o cursor (JS define rotate) */
.universo__mapa {
  transition: rotate 0.35s var(--ease-suave);
}

/* ============================================================
   8. CTA FINAL — encerramento de livro
   ============================================================ */

/* Onda sonora atravessa a seção uma única vez */
.coro__onda {
  width: min(100%, 40rem);
  height: 46px;
  margin-inline: auto;
}

.coro__onda path {
  fill: none;
  stroke: var(--ambar);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 100;
}

@keyframes onda-draw {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}

.motion-on .coro__onda.is-in path {
  animation: onda-draw 1.5s var(--ease-suave) 0.2s both;
}

/* Personagens aproximam-se em sequência, desacelerando */
@keyframes approach {
  from {
    opacity: 0;
    transform: translateY(52px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Versão em loop do "approach": os três pipocam em rufo rápido
   (Boo-Ka-Toon, quase um atrás do outro), seguram visíveis juntos
   um tempo, somem e reiniciam juntos — o ciclo é o MESMO (6s) pros
   três, só o início de cada um é levemente adiantado/atrasado
   (delays abaixo), então eles sempre leem juntos, nunca um sozinho. */
@keyframes coro-balao-pop {
  0%   { opacity: 0; transform: translateY(52px) scale(0.92); }
  10%  { opacity: 1; transform: translateY(-6px) scale(1.05); }
  16%  { opacity: 1; transform: translateY(0) scale(1); }
  40%  { opacity: 1; transform: translateY(-8px) scale(1); }
  64%  { opacity: 1; transform: translateY(0) scale(1); }
  86%  { opacity: 1; transform: translateY(0) scale(1); }
  95%  { opacity: 0; transform: translateY(28px) scale(0.94); }
  100% { opacity: 0; transform: translateY(52px) scale(0.92); }
}

.motion-on .coro__personagens img {
  opacity: 0;
}

.motion-on .coro__personagens.is-in img {
  animation: approach 1.5s var(--ease-suave) both;
}

.motion-on .coro__personagens.is-in img:nth-child(1) { animation-delay: 0.1s; }
.motion-on .coro__personagens.is-in img:nth-child(2) { animation-delay: 0.3s; }
.motion-on .coro__personagens.is-in img:nth-child(3) { animation-delay: 0.5s; }

.motion-on:not([data-decor-paused="true"]) .coro__personagens.is-in img {
  animation: coro-balao-pop 6s var(--ease-suave) infinite;
}

.motion-on:not([data-decor-paused="true"]) .coro__personagens.is-in img:nth-child(2) {
  animation-delay: 0.2s;
}

.motion-on:not([data-decor-paused="true"]) .coro__personagens.is-in img:nth-child(3) {
  animation-delay: 0.4s;
}

/* Lombada do livro no topo do footer */
.site-footer {
  position: relative;
}

.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: var(--roxo-profundo);
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0 14px,
    rgba(255, 193, 7, 0.85) 14px 26px
  );
  background-size: 40px 3px;
  background-position: center 12px;
  background-repeat: repeat-x;
}

} /* fim de @layer sections */