/* ==================================================================
   12 — a montagem da landing

   Antes, a landing era seção atrás de seção no mesmo pergaminho, com
   movimento só na entrada. Três camadas resolvem isso:

   1. RITMO DE FUNDOS — a página é uma pilha de papéis. Cada seção é uma
      folha, com emenda visível entre elas, e uma única folha de NOITE no
      meio, onde o livro abre à meia-noite. O céu continua em dois lugares
      só — hero e fecho (09 §3).
   2. GRAMÁTICA DE REVELAÇÃO — toda seção revela na mesma ordem: aba →
      título palavra a palavra → lede → conteúdo. Sempre a mesma, para o
      movimento virar linguagem em vez de enfeite.
   3. MONTAGEM POR ROLAGEM — onde o navegador tem `animation-timeline`,
      a revelação é ligada à rolagem: a página se monta no ritmo da pessoa.
      Sem suporte, cai no `.play` do js/motion.js.

   O estado de repouso continua sendo o FINAL (regra do 01-base): sem JS,
   sem rolagem e sem suporte, a página está inteira e correta.
   ================================================================== */

/* ---------- 1. a pilha de papéis ----------
   Cada seção é um PAINEL, como o hero e o `.painel-noite` já são no brand
   book: margem nos quatro lados e canto de 24. O fundo da página — o
   pergaminho quadriculado do 01-base — vira a mesa em que as folhas pousam,
   e o vão entre elas é o que separa as seções. Sem faixa de sangramento. */

.lp-sec{position:relative; overflow:clip;
  margin-inline:clamp(8px,1.4vw,20px);
  margin-block:clamp(10px,1.4vw,18px);
  border-radius:24px;
  padding-block:clamp(48px,7vw,92px);
  box-shadow:var(--sombra-borda)}
.lp-sec > .wrap{position:relative; z-index:1}

/* o hero entra no mesmo ritmo: ele já era painel, faltava a margem de cima */
.hero{margin-block:clamp(10px,1.4vw,18px)}

/* os papéis. A mesa é pergaminho, então a folha padrão é a superfície — um
   tom acima — e as outras variam a partir dela. Tudo dentro dos neutros do
   09 §3: nenhuma cor nova entra aqui. */
.lp-papel{background-color:var(--superficie)}
.lp-areia{background-image:linear-gradient(180deg,#F4F1EA,#E9E5DD)}
.lp-linho{background-color:var(--linho)}
.lp-quadro{background-color:var(--superficie);
  background-image:linear-gradient(rgb(29 29 28/.06) 1px,transparent 1px),linear-gradient(90deg,rgb(29 29 28/.06) 1px,transparent 1px);
  background-size:24px 24px; background-position:center top}
/* papel de linha, na escala do painel: só as pautas, sem a margem coral —
   ela é do cartão (.pautado), e num painel inteiro vira listra solta */
.lp-pauta{background-color:var(--superficie);
  background-image:repeating-linear-gradient(180deg,transparent 0 23px,rgb(29 29 28/.07) 23px 24px)}

/* a última seção não é painel: quem é painel ali é o `.lp-final`, que leva o
   céu. Sem isto, o céu ficaria com moldura dupla. */
.lp-vazado{margin:0; padding:0; border-radius:0; box-shadow:none; overflow:visible; background:none}

/* ---------- 2. a folha de noite ----------
   Uma só na página, e ela é narrativa, não decorativa: é a seção do lacre,
   onde o livro "abre à meia-noite do dia de vocês". */
.lp-noite{color:#FDFDFA; box-shadow:0 18px 40px -24px rgb(26 16 36/.55);
  background:
    radial-gradient(90% 60% at 80% 110%,rgb(242 115 95/.26),transparent 60%),
    radial-gradient(70% 50% at 10% -10%,rgb(185 162 240/.18),transparent 60%),
    #1A1024}
.lp-noite .titulo,.lp-noite h3{color:#FDFDFA}
.lp-noite .lede{color:rgb(253 253 250/.78)}
.lp-noite .nota{color:rgb(253 253 250/.62)}
.lp-noite .btn-branco{background:rgb(255 255 255/.1); color:#FDFDFA; box-shadow:inset 0 0 0 1px rgb(255 255 255/.22)}
/* os cartões viram papel sobre a noite, e é isso que dá profundidade */
.lp-noite .lp-modo{background:rgb(253 253 250/.06); box-shadow:inset 0 0 0 1px rgb(255 255 255/.12)}
.lp-noite .lp-modo p{color:rgb(253 253 250/.8)}
.lp-noite .lp-palco-cartao{background:rgb(255 255 255/.07)}
.lp-noite .lp-cartao{background:var(--pergaminho)}
.lp-noite .lp-cartao b{color:var(--tinta)}

/* o brilho que respira: o único loop desta seção, lento o bastante para
   não competir com nada (09 §6.3 — um momento orquestrado por seção) */
.lp-noite::after{content:""; position:absolute; z-index:0; inset:0; pointer-events:none;
  background:radial-gradient(42% 34% at 22% 82%,rgb(255 176 112/.2),transparent 70%);
  animation:lp-respira 19s ease-in-out infinite alternate}
@keyframes lp-respira{from{opacity:.45; scale:1} to{opacity:1; scale:1.14}}

/* ---------- 3. a faixa de capítulos ----------
   Movimento contínuo que também é conteúdo: são os oito marcos do catálogo
   (amorama/lib/marcos.ts). Responde "o que é um capítulo?" enquanto anda. */
.lp-faixa{background:var(--tinta); padding-block:24px; box-shadow:0 14px 32px -22px rgb(26 16 36/.5)}
.lp-faixa .marquee{overflow:hidden; width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.lp-faixa .marquee-trilho{display:flex; gap:10px; width:max-content; animation:marquee 46s linear infinite}
.lp-faixa .marquee:hover .marquee-trilho,.lp-faixa .marquee:focus-within .marquee-trilho{animation-play-state:paused}
.lp-faixa .marquee-trilho span{display:inline-flex; align-items:center; gap:9px; height:40px; padding:0 17px; border-radius:999px;
  background:#2C2B29; color:#FDFDFA; font-weight:600; font-size:15px; white-space:nowrap}
.lp-faixa .marquee-trilho span i{width:9px; height:9px; border-radius:50%; background:var(--damasco)}
.lp-faixa-rot{display:block; text-align:center; margin-bottom:14px; font-size:13px; font-weight:700; color:rgb(253 253 250/.6)}

/* ---------- 4. o sol que respira no hero ----------
   `nasce` mexe em transform e opacity; este só mexe em filter, então os
   dois convivem na mesma lista sem disputar propriedade. */
.play .sol-hero{animation:nasce 1.8s var(--ease-saida) both .1s, lp-sol 16s ease-in-out 2s infinite alternate}
@keyframes lp-sol{from{filter:brightness(1)} to{filter:brightness(1.18)}}

/* ---------- 5. gramática de revelação ----------
   A ordem é sempre a mesma, e os atrasos saem daqui, não de cada seção:
   aba 0ms → título 120ms (palavra a palavra) → lede 340ms → conteúdo 460ms. */
.lp-sec .titulo .palavra{--base:120ms}
.lp-sec .secao-head .lede{--d:340ms}
.lp-sec [data-atraso]{--d:460ms}
.play.lp-entra,.play .lp-entra{animation:sobe .7s var(--ease-saida) both; animation-delay:var(--d,460ms)}

/* ---------- 6. montagem por rolagem ----------
   Onde há `animation-timeline`, a revelação deixa de ser um gatilho só e
   passa a seguir a rolagem. Fora do @supports nada disto existe, e o
   `.play` do motion.js continua mandando. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* `view()` mede contra o scrollport mais próximo, e `overflow:hidden` cria
       um. Com o hero e a mesa como scrollport, o progresso congela num valor
       fixo e a cena nunca acompanha a rolagem. `clip` recorta igual e NÃO cria
       scrollport, então a linha do tempo volta a ser a da página. */
    .hero,.lp-mesa{overflow:clip}

    /* o título se escreve conforme a seção sobe. O hero fica de fora: ele
       precisa estar legível no primeiro quadro, não no primeiro scroll. */
    .lp-sec .titulo .palavra{
      animation:palavra linear both;
      animation-timeline:view();
      animation-range:entry calc(12% + var(--i,0) * 3%) entry calc(58% + var(--i,0) * 3%);
    }
    .lp-sec .secao-head .lede,
    .lp-sec .lp-entra{
      animation:sobe linear both;
      animation-timeline:view();
      animation-range:entry 22% entry 76%;
    }

    /* A MESA: as cópias se recolhem na pilha no ritmo de quem rola, e a
       capa fecha no fim do percurso. É o "site se montando" — a pessoa é
       quem encaderna o livro. */
    /* o `.play` entra nos dois seletores de propósito: sem ele, a regra
       `.lp-mesa.play .lp-copia` do 11 tem especificidade maior, ganha, e a
       cena volta a rodar por tempo em vez de por rolagem. */
    .lp-mesa .lp-copia,
    .lp-mesa.play .lp-copia{
      animation:lp-recolhe-rolagem linear both;
      animation-timeline:view();
      animation-range:entry calc(28% + var(--i,0) * 2%) cover calc(54% + var(--i,0) * 2%);
    }
    .lp-mesa .lp-capa,
    .lp-mesa.play .lp-capa{
      animation:lp-fecha-rolagem linear both;
      animation-timeline:view();
      animation-range:entry 28% cover 76%;
    }
    .lp-mesa.play .lp-sol-mesa{animation:nasce 1.6s var(--ease-saida) both}
    /* quem reencena a mesa é a rolagem, então o botão não tem o que fazer */
    .lp-mesa [data-rever]{display:none}

    /* as cópias do hero derivam mais devagar que a rolagem: profundidade
       sem parallax de biblioteca, só transform */
    .espalhadas{animation:lp-deriva-fundo linear both; animation-timeline:view(); animation-range:cover 30% cover 100%}
  }
}
@keyframes lp-recolhe-rolagem{
  from{translate:var(--dx) var(--dy); rotate:var(--dr); scale:1.02}
  to{translate:var(--fx,0px) var(--fy,0px); rotate:var(--fr,0deg); scale:1}
}
@keyframes lp-fecha-rolagem{
  0%,58%{opacity:0; translate:0 -34px; rotate:-5deg; scale:1.06}
  100%{opacity:1; translate:0 0; rotate:0deg; scale:1}
}
@keyframes lp-deriva-fundo{from{translate:0 0} to{translate:0 -42px}}

@media (max-width:760px){
  .lp-faixa .marquee-trilho span{font-size:14px; height:36px; padding:0 14px}
  /* na tela pequena a cena da mesa tem menos curso de rolagem: encurta o
     percurso para ela terminar de montar dentro da tela */
  @supports (animation-timeline: view()) {
    .lp-mesa .lp-copia{animation-range:entry 24% cover 52%}
    .lp-mesa .lp-capa{animation-range:entry 24% cover 60%}
  }
}