:root {
  --cor: #cac0b7;
  --sobre-cor: #221d18;
  --tinta: #221d18;
  --papel: #efe9de;
  --serifa: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Manrope', system-ui, sans-serif;
  --borda: clamp(20px, 5vw, 72px);
}
* { box-sizing: border-box; margin: 0; }
html { background: var(--papel); color: var(--tinta); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
html { overflow-x: clip; }
html.travado { overflow: hidden; }
body { overflow-x: clip; }
a { color: inherit; }

#cena { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; display: block; }
.veu { display: none; }
.sem3d #cena { display: none; }

/* ---------- abertura ---------- */
/* Duas folhas (::before e ::after) cobrem a tela e se abrem para os lados. */
.abertura {
  --p: 0; position: fixed; inset: 0; z-index: 10; display: grid; place-content: center; justify-items: center; gap: 34px;
  transition: visibility 0s 1.5s;
}
.abertura::before, .abertura::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 50.5%; z-index: -1; background: var(--papel);
  transition: transform 1.3s cubic-bezier(.75, 0, .2, 1) .25s;
}
.abertura::before { left: 0; }
.abertura::after { right: 0; }
.abertura.saiu { visibility: hidden; pointer-events: none; }
.abertura.saiu::before { transform: translateX(-101%); }
.abertura.saiu::after { transform: translateX(101%); }
.abertura > * { transition: opacity .35s, transform .5s; }
.abertura.saiu > * { opacity: 0; transform: scale(.97); }
/* logo fantasma embaixo, logo em tinta por cima revelado da esquerda para a direita */
.abertura__logo { position: relative; width: clamp(240px, 44vw, 520px); }
.abertura__logo img { display: block; width: 100%; height: auto; opacity: .14; }
.abertura__logo .abertura__tinta { position: absolute; inset: 0; opacity: 1; clip-path: inset(0 calc(100% - var(--p) * 100%) 0 0); transition: clip-path .5s ease-out; }
.abertura__pe { display: grid; place-items: center; height: 48px; }
.abertura__pe > * { grid-area: 1 / 1; transition: opacity .5s, transform .6s cubic-bezier(.2, .7, .2, 1); }
.abertura__estado { font-size: 12px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; }
.abertura__pct { display: inline-block; min-width: 2.2em; margin-right: 10px; font: 400 26px/1 var(--serifa); letter-spacing: 0; text-align: right; vertical-align: -3px; font-variant-numeric: tabular-nums; }
.abertura:not(.pronta) .abertura__entrar { opacity: 0; transform: translateY(10px); } /* tem de ganhar de .botao:disabled, que vem depois */
.abertura.pronta .abertura__estado { opacity: 0; transform: translateY(-10px); pointer-events: none; } /* invisível, mas ficava por cima do botão e engolia o clique */
.olho { font-size: 12px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; }

.botao {
  display: inline-block; padding: 14px 30px; border: 1px solid var(--cor); border-radius: 999px; cursor: pointer;
  background: var(--cor); color: var(--sobre-cor); font: 600 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  transition: background .6s, color .6s, border-color .6s, opacity .3s;
}
.botao:disabled { opacity: .45; cursor: default; }
.botao--linha { background: rgb(255 255 255 / .55); border-color: var(--tinta); color: var(--tinta); }
.botao:focus-visible, .amostra:focus-visible, a:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }

/* ---------- topo ---------- */
.topo {
  position: fixed; inset: 0 0 auto; z-index: 5; display: flex; justify-content: space-between; align-items: center;
  padding: 22px var(--borda);
}
.topo__logo { display: block; height: 40px; width: auto; }
.topo__link { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; }

/* ---------- cenas ---------- */
main { position: relative; }
.cena { min-height: 120vh; display: flex; align-items: center; padding: 0 var(--borda); }
.cena--hero, .cena--fim { min-height: 100vh; min-height: 100svh; }
.cena--cor { min-height: 140vh; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.cena--cor.girando { cursor: grabbing; }
.dica { display: flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 12px; letter-spacing: .08em; opacity: .7; max-width: none !important; }
.dica svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.painel { position: relative; isolation: isolate; max-width: 25rem; }
.cena--cor .painel { max-width: 27rem; } /* isolate: o véu fica atrás do texto, não atrás do canvas */
.painel--dir { margin-left: auto; }
.painel--centro { margin: 0 auto; max-width: 40rem; text-align: center; }
/* véu claro atrás do texto, para ler em cima da cena sem virar cartão */
.painel::before {
  content: ''; position: absolute; inset: -70px -90px; z-index: -1;
  background: radial-gradient(closest-side, rgb(239 233 222 / .88), rgb(239 233 222 / 0)); pointer-events: none;
}
.olho { margin-bottom: 18px; }
h1 { font: 400 clamp(52px, 7vw, 118px)/.95 var(--serifa); letter-spacing: -.025em; }
/* cada linha é uma máscara: o texto sobe de dentro dela na entrada */
.linha { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.linha > span { display: block; }
.hero__sub { margin-top: 22px; font-size: 17px; max-width: 26ch !important; }
h2 { font: 400 clamp(40px, 5.6vw, 76px)/1 var(--serifa); letter-spacing: -.015em; margin-bottom: 18px; text-wrap: balance; }
.painel p:not(.olho) { max-width: 30ch; }
.painel--centro p:not(.olho) { margin-inline: auto; }
.cena--hero { align-items: flex-end; padding-bottom: 9vh; }
.cena--hero .painel { max-width: none; }
.cena--hero { position: relative; }
/* convite a rolar: palavra e um fio que escorre, no canto de baixo à direita */
.role { position: absolute; right: var(--borda); bottom: 9vh; font-size: 11px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; writing-mode: vertical-rl; }
.role::after { content: ''; display: block; width: 1px; height: 64px; margin: 14px auto 0; background: var(--tinta); transform-origin: top; animation: fio 2.2s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes fio { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); transform-origin: top; } 56% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

.rotulo { margin-top: 28px; font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; opacity: .7; max-width: none !important; }
.modelo__conta { float: right; letter-spacing: .12em; }
/* seletor de modelo: nome grande entre duas setas finas */
.modelos { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 10px 0; border-block: 1px solid rgb(34 29 24 / .18); }
.modelo__nome { flex: 1; text-align: center; font: 400 clamp(34px, 3.4vw, 46px)/1 var(--serifa); max-width: none !important; }
.seta {
  display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid rgb(34 29 24 / .35); border-radius: 50%;
  background: none; color: var(--tinta); cursor: pointer; transition: background .3s, color .3s, border-color .3s;
}
.seta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.seta:hover { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.seta:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
.cartela { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.amostra {
  width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  box-shadow: 0 0 0 1px rgb(34 29 24 / .2), inset 0 0 0 0 var(--papel); transition: box-shadow .3s, transform .3s;
}
.amostra:hover { transform: scale(1.08); }
.amostra[aria-pressed='true'] { box-shadow: 0 0 0 1px var(--tinta), 0 0 0 4px var(--papel), 0 0 0 5px var(--tinta); }
.cor__nome { margin-top: 18px; font: italic 400 20px/1.2 var(--serifa); max-width: none !important; }

.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; max-width: none !important; }
.endereco { margin-top: 22px; font-size: 13px; opacity: .75; max-width: none !important; }

/* tela em pé: texto embaixo, sofá em cima */
@media (max-aspect-ratio: 1/1) {
  .cena { align-items: flex-end; padding-bottom: 12vh; }
  .cartela { gap: 7px; }
  .amostra { width: 31px; height: 31px; }
  .painel, .painel--dir { margin: 0; max-width: none; width: 100%; }
  /* sem véu por painel (lia como faixa branca passando): um degradê parado na base da tela */
  .painel::before { content: none; }
  .veu { display: block; position: fixed; inset: auto 0 0; height: 58vh; pointer-events: none; background: linear-gradient(rgb(239 233 222 / 0), rgb(239 233 222 / .82) 55%); }
}

@media (prefers-reduced-motion: reduce) {
  .abertura, .abertura *, .abertura::before, .abertura::after, .botao, .amostra { transition: none; }
  .role::after { animation: none; }
}