/* Dom Pedro TV. Cor e fonte: dom-pedro-brand. Movimento: sem-cara-de-ia
   (entrada no máximo 300 ms, nunca ease-in, nada de transition: all).
   O que dura a tela inteira (foto andando, palavra balançando) é movimento
   de ambiente, não de interface: é linear e lento de propósito. */

@font-face { font-family: "Young Serif"; src: url("assets/fontes/YoungSerif.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "Karla"; src: url("assets/fontes/Karla.ttf") format("truetype"); font-weight: 200 800; font-display: block; }

:root {
  --royal: #201d7f;
  --ouro: #fcdf7c;
  --branco: #ffffff;
  --noite: #0a0c28;
  --saida: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; cursor: none; }

/* O palco tem o tamanho de desenho (1080x1920 ou 1920x1080) e é escalado
   pra caber em qualquer TV. ?girar=90 vira tudo pra TV em pé que não gira sozinha. */
#palco { position: absolute; left: 50%; top: 50%; transform-origin: center center; overflow: hidden; background: var(--royal); }

.tela { position: absolute; inset: 0; opacity: 0; transition: opacity 300ms var(--saida); }
.tela.viva { opacity: 1; }

/* ---------- foto que anda (Ken Burns) ---------- */
.foto { position: absolute; overflow: hidden; }
.foto img { width: 100%; height: 100%; object-fit: cover; display: block;
  animation: anda var(--dur) linear forwards; transform-origin: var(--ox) var(--oy); }
.foto.inteira { background: var(--branco); }
.foto.inteira img { object-fit: contain; padding: 6%; }
@keyframes anda {
  from { transform: scale(var(--z0)) translate(0, 0); }
  to   { transform: scale(var(--z1)) translate(var(--dx), var(--dy)); }
}
.noite .foto img { filter: brightness(0.45) saturate(0.7); }

/* ---------- FACHADA (em pé) ---------- */
.fachada .foto { inset: 0; }
.fachada .tarja { position: absolute; left: 0; right: 0; background: var(--royal);
  padding: 36px 14px 34px; text-align: center; }
.fachada .tarja.topo { top: 0; padding-top: 70px; }
.fachada .tarja.meio { top: 50%; transform: translateY(-50%); }
.fachada .tarja.base { bottom: 0; padding-bottom: 70px; }
.fachada .tarja.faixa-ouro { box-shadow: 0 10px 0 var(--ouro), 0 -10px 0 var(--ouro); }
.fachada .grande { font-family: "Young Serif", serif; color: var(--branco); line-height: 0.96;
  letter-spacing: -0.025em; white-space: nowrap; display: block; }
.fachada .pequeno { font-family: "Karla", sans-serif; font-weight: 700; color: var(--ouro);
  font-size: 84px; line-height: 1.1; margin-top: 18px; display: block; }

/* ---------- SALÃO (deitada) ---------- */
.salao .foto { top: 0; bottom: 0; width: 1100px; }
.salao .painel { position: absolute; top: 0; bottom: 0; width: 820px; background: var(--royal);
  padding: 110px 72px 80px; display: flex; flex-direction: column; }
.salao.dir .foto { left: 0; }   .salao.dir .painel { right: 0; }
.salao.esq .foto { right: 0; }  .salao.esq .painel { left: 0; }
.salao.baixo .foto { left: 0; width: 1920px; height: 660px; }
.salao.baixo .painel { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 420px;
  padding: 50px 90px 40px; display: grid; grid-template-columns: 720px 1fr; grid-template-rows: 1fr auto; column-gap: 70px; }
.salao.baixo .titulo { grid-row: 1 / 3; align-self: center; font-size: 92px; }
.salao.baixo .corpo { align-self: center; }
.salao.baixo .corpo.muitas { column-count: 2; column-gap: 50px; }
.salao.baixo .linha { font-size: 38px; break-inside: avoid; }
.salao.baixo .rodape { margin-top: 12px; font-size: 30px; }
.salao .titulo { font-family: "Young Serif", serif; color: var(--branco); font-size: 104px; line-height: 1.04; }
.salao .risco { width: 120px; height: 6px; background: var(--ouro); margin: 36px 0 40px; }
.salao.baixo .risco { display: none; }
.salao .linha { font-family: "Karla", sans-serif; font-weight: 500; color: var(--branco); font-size: 48px; line-height: 1.42; }
.salao .linha.destaque { color: var(--ouro); font-weight: 700; }
.salao .linha.com-preco { display: flex; justify-content: space-between; gap: 24px; }
.salao .linha.com-preco b { font-weight: 700; white-space: nowrap; }
.salao .rodape { margin-top: auto; font-family: "Karla", sans-serif; font-size: 34px; color: #c9c8ee; }
.salao .qr { position: absolute; width: 400px; height: 400px; background: var(--branco); padding: 18px;
  box-shadow: 12px 12px 0 var(--ouro); }
.salao.dir .qr { left: 350px; top: 340px; }
.salao.esq .qr { right: 350px; top: 340px; }
.salao .qr img { width: 100%; height: 100%; display: block; }

/* ---------- entradas (até 300 ms, saída suave) ---------- */
/* "both": se a TV box não rodar animação, o texto aparece do mesmo jeito. */
.tela.viva .entra { animation: var(--entrada) 280ms var(--saida) both; animation-delay: var(--atraso, 0ms); }
@keyframes sobe   { from { opacity: 0; transform: translateY(40px); }  to { opacity: 1; transform: none; } }
@keyframes desce  { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: none; } }
@keyframes lado   { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: none; } }
@keyframes lado2  { from { opacity: 0; transform: translateX(60px); }  to { opacity: 1; transform: none; } }
@keyframes cresce { from { opacity: 0; transform: scale(0.94); }        to { opacity: 1; transform: none; } }

/* ---------- a palavra que se mexe depois de entrar ---------- */
.mexe { display: inline-block; animation: var(--mexe) var(--mexeDur) ease-in-out infinite alternate; }
@keyframes balanca { from { transform: translateX(-10px); } to { transform: translateX(10px); } }
@keyframes respira { from { transform: scale(1); } to { transform: scale(1.035); } }
@keyframes flutua  { from { transform: translateY(-6px); } to { transform: translateY(6px); } }
@keyframes sobe-desce { from { transform: translateY(8px); } to { transform: translateY(-8px); } }
@keyframes parado  { from { transform: none; } to { transform: none; } }

/* ---------- ajuda pra conferir (só com ?ver=1) ---------- */
#info { position: fixed; left: 8px; bottom: 8px; z-index: 9; font: 14px/1.3 monospace; color: #0f0;
  background: rgba(0,0,0,.75); padding: 6px 8px; white-space: pre; }