/* GP | Arquitetura — protótipo do topo: a cena que se monta na primeira dobra (sala ou fachada).
   Do traço à chave em uns 5 segundos: linhas de perspectiva → desenho a lápis → as peças do render
   entram no lugar → a luz acende → a câmera avança devagar. Depois de montada, a cena acompanha o
   mouse (o que está perto da câmera anda mais).

   Imagens e geometria das peças: ferramentas/preparar_topo.py (escreve as peças no HTML).
   Aqui fica a coreografia de cada cena: tipo de movimento, atraso e duração (por data-peca).
   --luz de cada cena marca o fim da montagem; o fim do papel, das linhas, a câmera e a barra de
   progresso são contados a partir dele. As etapas da legenda estão no HTML (data-etapas, data-fim). */

@property --raio {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

/* ---------- Topo com a cena ---------- */
@media (min-width: 981px) {
  .hero--cena .hero__grade {
    grid-template-areas:
      "rot rot rot rot rot cen cen cen cen cen cen cen"
      "tit tit tit tit tit cen cen cen cen cen cen cen"
      "txt txt txt txt txt cen cen cen cen cen cen cen"
      "pro pro pro pro pro cen cen cen cen cen cen cen";
  }

  .hero--cena .hero__titulo {
    font-size: clamp(3.4rem, 0.6rem + 6.4vw, 7.3rem);
  }
}

.hero__cena {
  grid-area: cen;
  align-self: center;
  position: relative;
  margin: 0;
}

.hero__cena.entra {
  animation-name: gp-aparece;
  animation-duration: 0.8s;
}

/* Cada cena: proporção do quadro do render, ponto de fuga, escala do desenho das linhas
   (largura do viewBox / 1024), fim da montagem e o quanto as peças andam com o mouse. */
.cena {
  --quadro: 2;
  --pf-x: 50%;
  --pf-y: 50%;
  --vb: 1;
  --luz: 4s;
  --px: -7px;
  --py: -4px;
}

.cena__cota {
  margin-bottom: 10px;
}

.cena__palco {
  --proporcao: var(--quadro);
  position: relative;
  aspect-ratio: var(--proporcao);
  overflow: hidden;
  background: var(--branco);
  box-shadow: 0 0 0 1px var(--traco-forte);
  isolation: isolate;
}

/* A "lona" tem sempre a proporção do render. Num palco de outra proporção, ela cobre e corta. */
.cena__lona {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 100% * var(--quadro) / var(--proporcao));
  height: max(100%, 100% * var(--proporcao) / var(--quadro));
  translate: -50% -50%;
  transform-origin: var(--pf-x) var(--pf-y);
}

.cena__base,
.cena__papel,
.cena__pecas,
.cena__escuro,
.cena__luzes,
.cena__linhas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cena__base {
  display: block;
}

/* papel quadriculado: 32 colunas, quadradinhos em qualquer proporção */
.cena__papel {
  background-color: var(--branco);
  background-image:
    linear-gradient(to right, rgba(27, 26, 24, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(27, 26, 24, 0.045) 1px, transparent 1px);
  background-size: 3.125% calc(3.125% * var(--quadro));
}

.cena__traco {
  position: absolute;
  inset: 0;
  background: no-repeat 0 0 / 100% 100%;
}

.cena__pecas {
  perspective: 1800px;
  perspective-origin: var(--pf-x) var(--pf-y);
}

.cena__peca {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform-origin: var(--ox) var(--oy);
  translate: calc(var(--mx, 0) * var(--prof, 0) * var(--px)) calc(var(--my, 0) * var(--prof, 0) * var(--py));
}

/* ---------- Estados ----------
   sem JS ou .pronta (movimento reduzido, imagens que não chegaram): só o render, com a luz acesa.
   com JS, antes de .montando: papel em branco, esperando as imagens.
   .montando: a sequência roda (e as animações ficam paradas no fim).
   .montada: acabou; libera o mouse e o "Montar de novo". */
html:not(.js) .cena__papel,
html:not(.js) .cena__pecas,
html:not(.js) .cena__escuro,
html:not(.js) .cena__linhas,
html:not(.js) .cena__marca,
html:not(.js) .cena__progresso,
.cena.pronta .cena__papel,
.cena.pronta .cena__pecas,
.cena.pronta .cena__escuro,
.cena.pronta .cena__linhas,
.cena.pronta .cena__marca,
.cena.pronta .cena__progresso {
  display: none;
}

html.js .cena:not(.montando) .cena__traco,
html.js .cena:not(.montando) .cena__peca,
html.js .cena:not(.montando) .cena__marca,
html.js .cena:not(.montando):not(.pronta) .cena__luzes i {
  opacity: 0;
}

/* rede de segurança: se o script não começar, o papel some sozinho e fica o render */
html.js .cena:not(.montando):not(.pronta) .cena__papel {
  animation: cena-some 0.6s ease 6s forwards;
}

/* ---------- 1. Traço: linhas de perspectiva e desenho a lápis ---------- */
.cena__linhas {
  --esp: 1.35;
  overflow: visible;
  fill: none;
  stroke: var(--latao-escuro);
  stroke-width: calc(var(--esp) * var(--vb) * 1px);
  pointer-events: none;
}

.cena__lh {
  stroke-dasharray: calc(4px * var(--vb)) calc(6px * var(--vb));
  opacity: 0.75;
  transform-origin: 0 0;
}

html.js .cena__lh {
  transform: scaleX(0);
}

html.js .cena__raio,
html.js .cena__guia {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.cena__guia {
  opacity: 0.7;
}

.cena__pf {
  fill: var(--branco);
  stroke-width: calc(1.6px * var(--vb));
  transform-box: fill-box;
  transform-origin: center;
}

html.js .cena__pf {
  transform: scale(0);
}

.cena.montando .cena__lh {
  animation: cena-lh 1s var(--ease) 0.1s forwards;
}

.cena.montando .cena__pf {
  animation: cena-pf 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) 0.25s forwards;
}

.cena.montando .cena__raio {
  animation: cena-traca 0.85s var(--ease-io) calc(0.3s + var(--k) * 90ms) forwards;
}

.cena.montando .cena__guia {
  animation: cena-traca var(--t, 1s) var(--ease-io) calc(0.6s + var(--k, 0) * 80ms) forwards;
}

.cena.montando .cena__linhas {
  animation: cena-some 0.7s ease calc(var(--luz) - 0.35s) forwards;
}

.cena__marca {
  position: absolute;
  z-index: 2;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--latao-escuro);
  pointer-events: none;
}

.cena__marca--pf {
  left: var(--pf-x);
  top: var(--pf-y);
  transform: translate(9px, -17px);
}

.cena__marca--lh {
  left: 1.2%;
  top: var(--pf-y);
  transform: translateY(-15px);
}

.cena.montando .cena__marca {
  animation: cena-marca calc(var(--luz) + 0.35s) linear forwards;
}

/* o lápis se espalha a partir do ponto de fuga */
html.js .cena__traco {
  -webkit-mask-image: radial-gradient(circle farthest-corner at var(--pf-x) var(--pf-y), #000 var(--raio), transparent calc(var(--raio) + 16%));
  mask-image: radial-gradient(circle farthest-corner at var(--pf-x) var(--pf-y), #000 var(--raio), transparent calc(var(--raio) + 16%));
}

.cena.montando .cena__traco {
  animation: cena-traco 1.5s cubic-bezier(0.45, 0, 0.2, 1) 0.45s both;
}

/* ---------- 2. Montagem: cada peça entra do seu jeito ---------- */
.cena.montando .cena__peca {
  animation: var(--anim, cena-longe) var(--dur, 0.9s) var(--curva, cubic-bezier(0.2, 0.7, 0.1, 1)) var(--d, 1.5s) both;
}

/* o papel some no fim: as frestas entre as peças passam a mostrar o render inteiro, que está embaixo */
.cena.montando .cena__papel {
  animation: cena-some 0.9s ease calc(var(--luz) - 0.2s) forwards;
}

/* ---------- 3. Luz ---------- */
.cena__luzes {
  mix-blend-mode: screen;
  pointer-events: none;
}

.cena__luzes i {
  position: absolute;
  display: block;
}

.cena.montando .cena__luzes i {
  animation: cena-acende 1.3s ease-out calc(var(--luz) + var(--a, 0s)) both;
}

/* ---------- Câmera e progresso ---------- */
.cena.montando .cena__lona {
  animation: cena-camera 20s cubic-bezier(0.33, 0, 0.2, 1) calc(var(--luz) + 0.15s) both;
}

.cena__progresso {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--latao);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

.cena.montando .cena__progresso {
  animation:
    cena-progresso calc(var(--luz) + 0.55s) linear both,
    cena-some 0.5s ease calc(var(--luz) + 0.75s) forwards;
}

/* =====================================================================================
   Sala (1024 x 512, perspectiva de um ponto): as peças do fundo vêm do ponto de fuga,
   as da frente vêm da câmera, o ripado entra ripa por ripa.
   ===================================================================================== */
.cena[data-cena="sala"] {
  --quadro: 2;
  --pf-x: 47.852%; /* (490, 314) */
  --pf-y: 61.328%;
  --vb: 1;
  --luz: 4.05s;
}

[data-cena="sala"] [data-peca="casca"] {
  --anim: cena-casca;
  --d: 1.2s;
  --dur: 1.1s;
}

[data-cena="sala"] [data-peca="janela"] {
  --d: 1.55s;
}

[data-cena="sala"] [data-peca="ripa"] {
  --anim: cena-ripa;
  --d: calc(1.65s + var(--n) * 32ms);
  --dur: 0.7s;
  --curva: cubic-bezier(0.3, 0.8, 0.2, 1);
}

[data-cena="sala"] [data-peca="ar"] {
  --anim: cena-desce;
  --d: 1.95s;
}

[data-cena="sala"] [data-peca="tv"] {
  --anim: cena-desce;
  --d: 2.05s;
  --dur: 1s;
}

[data-cena="sala"] [data-peca="rack"] {
  --anim: cena-desliza;
  --d: 2.25s;
  --dur: 1s;
}

[data-cena="sala"] [data-peca="nicho"] {
  --d: 2.35s;
}

/* a porta chega aberta e fecha (dobradiça à direita) */
[data-cena="sala"] [data-peca="porta"] {
  --anim: cena-porta;
  --d: 2.45s;
  --dur: 1.3s;
  --curva: cubic-bezier(0.3, 0.75, 0.2, 1);
  transform-origin: 100% 50%;
  backface-visibility: hidden;
}

[data-cena="sala"] [data-peca="quadro"],
[data-cena="sala"] [data-peca="som"],
[data-cena="sala"] [data-peca="vaso"],
[data-cena="sala"] [data-peca="caixa"] {
  --anim: cena-pousa;
  --dur: 0.7s;
  transform-origin: 50% 100%;
}

[data-cena="sala"] [data-peca="quadro"] {
  --d: 2.62s;
}

[data-cena="sala"] [data-peca="som"] {
  --d: 2.7s;
}

[data-cena="sala"] [data-peca="vaso"] {
  --d: 2.78s;
}

[data-cena="sala"] [data-peca="caixa"] {
  --d: 2.86s;
}

[data-cena="sala"] [data-peca="planta"] {
  --anim: cena-cresce;
  --d: 2.9s;
  --dur: 1s;
  transform-origin: 30% 70%;
}

[data-cena="sala"] [data-peca="almofada"] {
  --anim: cena-desce;
  --d: 3s;
}

[data-cena="sala"] [data-peca="sofa"] {
  --anim: cena-perto;
  --d: 3.05s;
  --dur: 1.15s;
}

[data-cena="sala"] [data-peca="almofadas"] {
  --anim: cena-perto;
  --d: 3.25s;
  --dur: 1.15s;
}

/* a sala escurece um pouco enquanto se monta e a luz acende no fim */
.cena__escuro {
  background: #1a1612;
  opacity: 0;
  pointer-events: none;
}

.cena.montando .cena__escuro {
  animation: cena-escuro 3.3s ease 1.15s both;
}

.cena__spot {
  left: var(--x);
  top: 8.4%;
  width: 7%;
  height: 9%;
  translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(255, 252, 244, 0.95), rgba(255, 238, 212, 0.4) 40%, transparent);
}

.cena__spot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150%;
  height: 300%;
  translate: -50% 0;
  background: radial-gradient(ellipse 50% 100% at 50% 0, rgba(255, 236, 205, 0.16), transparent 80%);
}

.cena__arandela {
  left: var(--x);
  top: 15%;
  width: 10%;
  height: 58%;
  translate: -50% 0;
  background: radial-gradient(ellipse 50% 100% at 50% 0, rgba(255, 214, 160, 0.3), rgba(255, 214, 160, 0.07) 55%, transparent 80%);
}

.cena__led {
  left: 73.4%;
  top: 15.6%;
  width: 6.9%;
  height: 73%;
  background: linear-gradient(90deg, transparent, rgba(255, 233, 200, 0.2) 30%, rgba(255, 233, 200, 0.2) 70%, transparent);
}

/* =====================================================================================
   Fachada (1600 x 945 medido, gravada a 1280 x 756; fuga da profundidade à direita):
   a casa se constrói como numa obra. O terreno aparece, as paredes do térreo sobem, a faixa
   preta corre, o cobogó é assentado fiada por fiada, a laje desce, o jardim cresce, os degraus
   pousam um a um. Tudo entra com as luzes apagadas; na etapa "Luz" a casa acende.
   ===================================================================================== */
.cena[data-cena="fachada"] {
  --quadro: 1.6931;
  --pf-x: 90.625%; /* (1450, 615) */
  --pf-y: 65.079%;
  --vb: 1.5625;
  --luz: 4.35s;
  --px: -4px;
  --py: -2.5px;
}

[data-cena="fachada"] .cena__peca {
  --anim: cena-ergue;
  --dur: 0.8s;
  --curva: cubic-bezier(0.25, 0.75, 0.2, 1);
}

[data-cena="fachada"] [data-peca="casca"] {
  --anim: cena-surge;
  --d: 1.2s;
  --dur: 1s;
  --curva: ease-out;
}

[data-cena="fachada"] [data-peca="garagem"] {
  --anim: cena-sobe;
  --d: 1.35s;
  --dur: 0.9s;
}

[data-cena="fachada"] [data-peca="madeira"] {
  --d: 1.5s;
}

[data-cena="fachada"] [data-peca="vidro"] {
  --d: 1.58s;
}

[data-cena="fachada"] [data-peca="vidro-alto"] {
  --d: 1.64s;
  --dur: 0.95s;
}

[data-cena="fachada"] [data-peca="pedra"] {
  --d: 1.74s;
}

/* porta pivotante: chega aberta e gira até fechar (pivô perto do lado direito) */
[data-cena="fachada"] [data-peca="porta"] {
  --anim: cena-porta;
  --d: 1.86s;
  --dur: 1.25s;
  --curva: cubic-bezier(0.3, 0.75, 0.2, 1);
  transform-origin: 80% 50%;
  backface-visibility: hidden;
}

[data-cena="fachada"] [data-peca="marquise"] {
  --anim: cena-desliza;
  --dx: -70px;
  --d: 2.05s;
  --dur: 0.95s;
}

/* cobogó: as fiadas são assentadas de baixo para cima */
[data-cena="fachada"] [data-peca="fiada"] {
  --anim: cena-assenta;
  --d: calc(2.2s + var(--n) * 68ms);
  --dur: 0.34s;
  --curva: cubic-bezier(0.3, 0.8, 0.25, 1);
}

[data-cena="fachada"] [data-peca="pedra-alta"] {
  --d: 2.3s;
  --dur: 0.95s;
}

[data-cena="fachada"] [data-peca="jardineira"] {
  --d: 2.62s;
  --dur: 0.7s;
}

[data-cena="fachada"] [data-peca="laje"],
[data-cena="fachada"] [data-peca="parapeito"] {
  --anim: cena-desce;
  --dy: -54px;
  --dur: 1.05s;
  --curva: cubic-bezier(0.22, 0.9, 0.3, 1);
}

[data-cena="fachada"] [data-peca="laje"] {
  --d: 2.88s;
}

[data-cena="fachada"] [data-peca="parapeito"] {
  --d: 2.98s;
}

[data-cena="fachada"] [data-peca="plantas"],
[data-cena="fachada"] [data-peca="jardim"],
[data-cena="fachada"] [data-peca="arbustos"] {
  --anim: cena-cresce;
  --de: 0.45;
  --dur: 0.9s;
  transform-origin: 50% 100%;
}

[data-cena="fachada"] [data-peca="plantas"] {
  --d: 2.95s;
}

[data-cena="fachada"] [data-peca="patamar"],
[data-cena="fachada"] [data-peca^="degrau"] {
  --anim: cena-pousa;
  --dur: 0.6s;
  transform-origin: 50% 100%;
}

[data-cena="fachada"] [data-peca="patamar"] {
  --d: 3.05s;
}

[data-cena="fachada"] [data-peca="degrau-1"] {
  --d: 3.13s;
}

[data-cena="fachada"] [data-peca="degrau-2"] {
  --d: 3.2s;
}

[data-cena="fachada"] [data-peca="degrau-3"] {
  --d: 3.27s;
}

[data-cena="fachada"] [data-peca="degrau-4"] {
  --d: 3.34s;
}

[data-cena="fachada"] [data-peca="degrau-5"] {
  --d: 3.41s;
}

[data-cena="fachada"] [data-peca="degrau-6"] {
  --d: 3.48s;
}

[data-cena="fachada"] [data-peca="jardim"] {
  --d: 3.18s;
}

[data-cena="fachada"] [data-peca="arbustos"] {
  --d: 3.2s;
}

/* a árvore cresce do pé do tronco */
[data-cena="fachada"] [data-peca="arvore"] {
  --anim: cena-cresce;
  --de: 0.18;
  --d: 3s;
  --dur: 1.1s;
  --curva: cubic-bezier(0.25, 0.8, 0.3, 1);
  transform-origin: var(--bx) var(--by);
}

/* luzes apagadas durante a obra; na etapa "Luz" a casa acende (com uma piscada) */
[data-cena="fachada"].montando .cena__pecas {
  animation: cena-casa-acende 1.5s ease-out var(--luz) both;
}

/* spots do forro: ponto de luz e o facho que lava a parede embaixo */
.cena__ponto {
  left: var(--x);
  top: var(--y);
  width: 3.4%;
  height: 5.8%;
  translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(255, 250, 238, 0.95), rgba(255, 228, 186, 0.38) 42%, transparent);
}

.cena__ponto::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 190%;
  height: var(--queda, 420%);
  translate: -50% 0;
  background: radial-gradient(ellipse 50% 100% at 50% 0, rgba(255, 222, 170, 0.2), transparent 80%);
}

/* luz de baixo para cima (pedra, árvore) */
.cena__facho {
  left: var(--x);
  top: var(--y);
  width: var(--w, 6%);
  height: var(--h, 24%);
  translate: -50% -100%;
  background: radial-gradient(ellipse 50% 100% at 50% 100%, rgba(255, 216, 160, 0.36), rgba(255, 216, 160, 0.09) 55%, transparent 80%);
}

/* fita de LED embaixo de cada degrau */
.cena__fita {
  left: var(--x);
  top: var(--y);
  width: var(--w, 12%);
  height: var(--h, 3.2%);
  translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(255, 230, 168, 0.55), rgba(255, 230, 168, 0.12) 60%, transparent);
}

/* brilho difuso (garagem) */
.cena__brilho {
  left: var(--x);
  top: var(--y);
  width: var(--w, 8%);
  height: var(--h, 8%);
  translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(255, 236, 200, 0.4), transparent);
}

/* ---------- Legenda: etapas e "Montar de novo" ---------- */
.cena__legenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  margin-top: 14px;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.cena__etapas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cena__etapas li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.5s var(--ease);
}

.cena__etapas li::before {
  content: "";
  width: 7px;
  height: 7px;
  border: 1px solid currentColor;
  transition:
    background-color 0.5s var(--ease),
    border-color 0.5s var(--ease);
}

.cena__etapas span {
  color: var(--latao-escuro);
}

.cena__etapas .atual {
  color: var(--tinta);
}

.cena__etapas .atual::before {
  border-color: var(--latao);
  background-color: var(--latao);
}

.cena__etapas .feita,
html:not(.js) .cena__etapas li {
  color: var(--texto-2);
}

.cena__etapas .feita::before,
html:not(.js) .cena__etapas li::before {
  background-color: currentColor;
}

.cena__repetir {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--texto-2);
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 0.5s var(--ease),
    color 0.3s,
    visibility 0s 0.5s;
}

.cena.montada .cena__repetir {
  visibility: visible;
  opacity: 1;
  transition:
    opacity 0.5s var(--ease),
    color 0.3s;
}

.cena__repetir:hover {
  color: var(--tinta);
}

.cena__repetir:focus-visible {
  outline: 2px solid var(--latao-escuro);
  outline-offset: 3px;
}

.cena__repetir svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

/* ---------- Animações ---------- */
@keyframes cena-some {
  to {
    opacity: 0;
  }
}

@keyframes cena-traca {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes cena-lh {
  to {
    transform: scaleX(1);
  }
}

@keyframes cena-pf {
  to {
    transform: scale(1);
  }
}

@keyframes cena-marca {
  0% {
    opacity: 0;
  }
  8%,
  86% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes cena-traco {
  from {
    --raio: -16%;
  }
  to {
    --raio: 100%;
  }
}

@keyframes cena-casca {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
}

@keyframes cena-surge {
  from {
    opacity: 0;
    transform: scale(1.03);
  }
}

/* do fundo: vem do ponto de fuga (encolhida = longe) */
@keyframes cena-longe {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
}

/* da frente: vem da câmera (maior = perto) */
@keyframes cena-perto {
  from {
    opacity: 0;
    transform: scale(1.25);
  }
}

@keyframes cena-desce {
  from {
    opacity: 0;
    transform: translateY(var(--dy, -24px));
  }
}

@keyframes cena-sobe {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
}

@keyframes cena-desliza {
  from {
    opacity: 0;
    transform: translateX(var(--dx, -36px));
  }
}

@keyframes cena-pousa {
  0% {
    opacity: 0;
    transform: translateY(-18px) scale(0.9);
  }
  60% {
    opacity: 1;
  }
}

@keyframes cena-cresce {
  from {
    opacity: 0;
    transform: scale(var(--de, 0.55));
  }
}

@keyframes cena-ripa {
  from {
    transform: scaleY(0);
  }
}

/* parede subindo do chão */
@keyframes cena-ergue {
  0% {
    opacity: 0;
    transform: scaleY(0.04);
    transform-origin: 50% 100%;
  }
  35% {
    opacity: 1;
  }
  100% {
    transform-origin: 50% 100%;
  }
}

/* fiada assentada: desce um pouco e encaixa */
@keyframes cena-assenta {
  from {
    opacity: 0;
    transform: translateY(-14px);
  }
}

@keyframes cena-porta {
  0% {
    opacity: 0;
    transform: rotateY(84deg);
  }
  25% {
    opacity: 1;
  }
}

@keyframes cena-escuro {
  0% {
    opacity: 0;
  }
  25%,
  82% {
    opacity: 0.13;
  }
  100% {
    opacity: 0;
  }
}

@keyframes cena-acende {
  0% {
    opacity: 0;
  }
  14% {
    opacity: 0.85;
  }
  22% {
    opacity: 0.3;
  }
  40%,
  100% {
    opacity: 1;
  }
}

@keyframes cena-casa-acende {
  0% {
    filter: brightness(0.58) saturate(0.5);
  }
  12% {
    filter: brightness(0.92) saturate(0.85);
  }
  20% {
    filter: brightness(0.7) saturate(0.65);
  }
  50%,
  100% {
    filter: none;
  }
}

@keyframes cena-camera {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.06);
  }
}

@keyframes cena-progresso {
  to {
    transform: scaleX(1);
  }
}

/* ---------- Celular e tablet ---------- */
@media (max-width: 980px) {
  .hero--cena .hero__grade {
    grid-template-areas:
      "rot"
      "tit"
      "txt"
      "cen"
      "pro";
  }

  .cena__palco {
    --proporcao: 1.6;
  }

  .cena__linhas {
    --esp: 2.4;
  }
}

/* No celular: rótulo numa linha só ("/ SP" sai), espaços menores, texto e botão antes da cena.
   Num celular comum (375 x 812) cabem na primeira tela o título, o texto, o botão e a cena inteira,
   que vai de borda a borda, sem a cota. */
@media (max-width: 760px) {
  .hero--cena {
    padding-top: 18px;
  }

  .hero--cena .hero__grade {
    row-gap: 20px;
  }

  .hero--cena .hero__texto {
    gap: 20px;
  }

  .hero--cena .hero__rotulo {
    flex-wrap: nowrap;
    gap: 0 0.55em;
    font-size: min(0.75rem, calc((100vw - 2 * var(--margem)) / 30.8)); /* cabe na largura de qualquer celular */
    letter-spacing: 0.04em;
    white-space: nowrap;
  }

  .hero--cena .hero__local {
    gap: 0.55em;
  }

  .hero--cena .hero__local::before {
    content: "·";
    width: auto;
    height: auto;
    background: none;
    color: var(--texto-sec);
  }

  .hero--cena .hero__uf {
    display: none;
  }

  .hero__cena {
    margin-inline: calc(-1 * var(--margem));
  }

  .cena__cota {
    display: none;
  }

  .cena__palco {
    --proporcao: var(--quadro);
    box-shadow:
      0 1px 0 var(--traco-forte),
      0 -1px 0 var(--traco-forte);
  }

  .cena__linhas {
    --esp: 2.6;
  }

  .cena__legenda {
    flex-wrap: nowrap;
    margin-top: 6px;
    padding-inline: var(--margem) calc(var(--margem) - 12px);
    font-size: 0.66rem;
  }

  .cena__etapas {
    gap: 6px 14px;
  }

  /* só o ícone; o texto continua para leitores de tela */
  .cena__repetir {
    flex: none;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  .cena__repetir svg {
    width: 17px;
    height: 17px;
  }

  .cena__repetir-txt {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}