/* Mundo TPM · identidade V2 — camada de página
   Carregada depois de tokens.css (de onde vêm --wine, --peri, --sky...). Aplica a V2 nas
   páginas que a usam: o preto sai (textos, linhas e sombras passam a bordô), o fundo
   claro vira o azul --sky e entram os efeitos do letreiro (palavras em contorno,
   entradas com máscara, selo pulsando, moedas flutuando mais soltas). */

:root {
  --bg:          var(--sky);

  --ink:         #4A0021;
  --ink-soft:    rgba(74, 0, 33, .72);
  --ink-faint:   rgba(74, 0, 33, .5);
  --line:        rgba(74, 0, 33, .12);
  --line-strong: rgba(74, 0, 33, .22);
  --shadow-sm:   0 1px 2px rgba(74, 0, 33, .08);
  --shadow-md:   0 8px 24px rgba(74, 0, 33, .10);
  --shadow-card: 0 1px 2px rgba(74, 0, 33, .06), 0 8px 24px rgba(74, 0, 33, .07);

  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- palavras gigantes em contorno, deslizando ao fundo ----------
   O texto vem duplicado dentro do .ol (dois <span> iguais) e anda -50%: o loop fecha
   sem emenda. A seção que recebe precisa de position: relative + overflow: hidden. */
.ol { position: absolute; left: 0; z-index: 0; white-space: nowrap; pointer-events: none; user-select: none;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -.04em; line-height: .8;
  color: transparent; -webkit-text-stroke: 1.5px var(--ol-color, #fff); opacity: var(--ol-opacity, .16);
  will-change: transform; animation: ol-drift var(--ol-speed, 70s) linear infinite; }
.ol span { display: inline-block; padding-right: .3em; }
.ol.rev { animation-direction: reverse; }
@keyframes ol-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- letreiro "MUNDO TPM" ---------- */
/* "MUNDO" em cima, "TPM" + assinatura de 3 linhas embaixo, formando um bloco só:
   a assinatura ocupa o vão entre o fim de "TPM" e o fim de "MUNDO", com o topo da 1ª
   linha na altura das maiúsculas de "TPM" e a base da última na linha de base.
   Contas em cima das métricas da Sora (ascendente .97, descendente .29, maiúscula .736):
   - largura livre ao lado de "TPM" ≈ 1,76em → "BENEFÍCIOS" (7,3em com .1em de espaço) pede .24em;
   - altura: 3 linhas a .24em com line-height 1.16 cobrem exatamente a altura da maiúscula;
   - a linha de base de "TPM" fica .12em acima do pé do .lr; a da assinatura, .06em acima do
     pé dela → sobra .06em (.22em na escala da assinatura, já descontado o respiro do .lr). */
.wordmark { display: inline-block; margin: 0; font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.055em; line-height: .84; text-align: left; }
.wordmark .row { display: flex; align-items: flex-end; }
.wordmark .tag { flex: none; font-family: var(--font-display); font-weight: 400; font-size: .24em; line-height: 1.16;
  letter-spacing: .1em; text-transform: uppercase; margin: 0 0 .22em .5em; text-align: left; }

/* ---------- entradas: linhas subindo de dentro de uma máscara ---------- */
/* a máscara corta na vertical (é dela o efeito de subir); na horizontal ganha uma folga que
   as margens negativas devolvem — sem isso, o espaçamento negativo do letreiro faz a última
   letra (o "O" de MUNDO) vazar a caixa e sair cortada */
.lr { display: block; overflow: hidden; padding: .1em .1em .04em; margin: -.1em -.1em 0; }
.lr > span { display: block; transform: translateY(108%); transition: transform 1.1s var(--ease-out-expo) var(--dl, 0s); }
.in .lr > span, .lr.in > span { transform: none; }
[data-a] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-out-expo) var(--dl, 0s), transform 1.1s var(--ease-out-expo) var(--dl, 0s); }
.in [data-a], [data-a].in { opacity: 1; transform: none; }
/* sem JS os blocos não podem ficar escondidos */
html:not(.js) .lr > span, html:not(.js) [data-a] { transform: none; opacity: 1; }

/* ---------- selo com ponto pulsando ---------- */
.badge-live { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid currentColor; border-radius: 99px;
  padding: 6px 13px 6px 11px; font-family: var(--font-display); font-weight: 700; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; }
.badge-live i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: badge-pulse 2.2s ease-in-out infinite; }
@keyframes badge-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

/* ---------- fio animado de "role para baixo" ---------- */
.scroll-cue { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700;
  font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; text-decoration: none; }
.scroll-cue span { position: relative; width: 1.5px; height: 34px; overflow: hidden; background: currentColor; opacity: .45; }
.scroll-cue span::after { content: ""; position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: currentColor;
  animation: cue-drip 2s var(--ease-out-expo) infinite; }
@keyframes cue-drip { to { top: 100%; } }

/* ---------- botão vinho (substitui o botão dourado) ---------- */
.btn-wine { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: none; cursor: pointer;
  border-radius: var(--radius-pill); background: var(--wine); color: #fff; font-family: var(--font-display); font-weight: 800;
  text-decoration: none; box-shadow: 0 14px 30px rgba(51, 0, 26, .32); transition: transform .15s ease, background .2s ease; }
.btn-wine:hover { transform: translateY(-2px); background: var(--wine-3); }
.btn-wine svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; transition: transform .2s ease; }
.btn-wine:hover svg { transform: translateX(3px); }

:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; border-radius: 6px; }

/* moedas flutuando: a versão do tokens.css sobe só 14px num ciclo de 9–13s e quase não
   se percebe; aqui (carregado depois, mesmo nome → vale este) a moeda sobe mais, balança
   para os lados e gira alguns graus, num percurso de 4 pontos que não parece um vaivém */
@keyframes coin-float {
  0%, 100% { transform: translate(0, 0) rotate(var(--coin-rot, 0deg)); }
  25%      { transform: translate(6px, -22px) rotate(calc(var(--coin-rot, 0deg) + 5deg)); }
  50%      { transform: translate(0, -34px) rotate(calc(var(--coin-rot, 0deg) - 2deg)); }
  75%      { transform: translate(-6px, -16px) rotate(calc(var(--coin-rot, 0deg) - 6deg)); }
}

/* movimento reduzido: tudo aparece parado e visível */
@media (prefers-reduced-motion: reduce) {
  .ol, .badge-live i, .scroll-cue span::after { animation: none !important; }
  .lr > span, [data-a] { transform: none !important; opacity: 1 !important; transition: none !important; }
}