/* ============================================================
   CENAS DA ESTEIRA — um desenho grande por etapa, à direita do texto.

   Pedido do titular (28/09): «SVG grandes com desenho dentro do contexto e animados em
   sincronia com o texto». O palco tinha a metade direita vazia.

   Sincronia (mesmos atrasos no texto e no desenho, reiniciam quando a etapa entra):
     fase 1 · 0,2 s  → .impacto   + o cenário (.f1 / .d1)
     fase 2 · 1,6 s  → .detalhe   + a ação principal (.f2 / .d2)
     fase 3 · 3,4 s  → .faixa     + o destaque do diferencial (.f3 / .d3 / .pulso)
   As animações só existem sob [data-ativa]: quando a etapa volta a ser a ativa, o seletor
   passa a valer de novo e o navegador reinicia a animação — sem JavaScript de relógio.

   Movimento reduzido: nenhuma animação; o estado-base de cada peça é o FINAL (tudo visível).
   ⚠ A classe é `.cena-etapa`, e NÃO `.cena`: `.cena` já existe no movimento.css (fundo
   absoluto, z-index -1) e jogava o desenho por cima do texto no celular.
   Cores só por variável do site (--rosa, --azul, --fg…), então claro e escuro saem juntos.
   ============================================================ */

[data-cenas] { --cz-1: .2s; --cz-2: 1.6s; --cz-3: 3.4s; }

/* ---------- layout: texto à esquerda, cena à direita ---------- */
.etapa-palco.com-cena {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(1.2rem, 3vw, 2.6rem); align-items: start;
}
.etapa-palco.com-cena > * { grid-column: 1; }
.etapa-palco.com-cena > .cena-etapa { grid-column: 2; grid-row: 1 / span 8; align-self: center; margin: 0; }
.cena-etapa svg { display: block; width: 100%; height: auto; max-height: 21rem; overflow: visible; }

@media (max-width: 860px) {
  .etapa-palco.com-cena { display: block; }
  .etapa-palco.com-cena > .cena-etapa { margin: 1.1rem auto 0; max-width: 26rem; }
  .cena-etapa svg { max-height: 13rem; }
}

/* ---------- a paleta do desenho ---------- */
.cena-etapa .ln   { fill: none; stroke: var(--fg-soft); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cena-etapa .fino { fill: none; stroke: var(--fg-faint); stroke-width: 1.6; stroke-linecap: round; }
.cena-etapa .pl   { fill: var(--bg); stroke: var(--line); stroke-width: 1.6; }
.cena-etapa .pl2  { fill: var(--bg-inset); stroke: var(--line); stroke-width: 1.4; }
.cena-etapa .ac   { fill: none; stroke: var(--rosa-texto); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cena-etapa .az   { fill: none; stroke: var(--azul-texto); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cena-etapa .fac  { fill: var(--rosa); }
.cena-etapa .faz  { fill: var(--azul); }
.cena-etapa .ffg  { fill: var(--fg-soft); }
.cena-etapa .fsu  { fill: color-mix(in srgb, var(--rosa) 16%, transparent); }
.cena-etapa .fsa  { fill: color-mix(in srgb, var(--azul) 18%, transparent); }
.cena-etapa .txt  { fill: var(--fg-soft); font: 700 13px/1 var(--mono, monospace); letter-spacing: .06em; }
.cena-etapa .txa  { fill: var(--rosa-texto); font: 700 13px/1 var(--mono, monospace); letter-spacing: .06em; }
.cena-etapa .chao { fill: none; stroke: var(--line); stroke-width: 1.4; stroke-dasharray: 3 6; }

/* ---------- as fases ---------- */
@media (prefers-reduced-motion: no-preference) {
  [data-cenas] .etapa-palco[data-ativa] > .impacto { animation: cz-texto .55s ease-out var(--cz-1) both; }
  [data-cenas] .etapa-palco[data-ativa] > .detalhe { animation: cz-texto .55s ease-out var(--cz-2) both; }
  [data-cenas] .etapa-palco[data-ativa] > .faixa   { animation: cz-texto .55s ease-out var(--cz-3) both; }

  [data-ativa] .cena-etapa .f1 { animation: cz-in .6s cubic-bezier(.2,.7,.3,1) var(--cz-1) both; }
  [data-ativa] .cena-etapa .f2 { animation: cz-in .6s cubic-bezier(.2,.7,.3,1) var(--cz-2) both; }
  [data-ativa] .cena-etapa .f3 { animation: cz-in .6s cubic-bezier(.2,.7,.3,1) var(--cz-3) both; }
  [data-ativa] .cena-etapa .f2b { animation: cz-in .6s cubic-bezier(.2,.7,.3,1) calc(var(--cz-2) + .5s) both; }
  [data-ativa] .cena-etapa .f2c { animation: cz-in .6s cubic-bezier(.2,.7,.3,1) calc(var(--cz-2) + 1s) both; }

  [data-ativa] .cena-etapa .d1 { animation: cz-traco 1.1s ease-in-out var(--cz-1) both; }
  [data-ativa] .cena-etapa .d2 { animation: cz-traco 1.2s ease-in-out var(--cz-2) both; }
  [data-ativa] .cena-etapa .d3 { animation: cz-traco 1s ease-in-out var(--cz-3) both; }

  /* movimentos específicos (sempre terminam na posição do desenho) */
  [data-ativa] .cena-etapa .mv-dir { animation: cz-dir 1.1s cubic-bezier(.2,.7,.3,1) var(--cz-2) both; }
  [data-ativa] .cena-etapa .mv-esq { animation: cz-esq 1.1s cubic-bezier(.2,.7,.3,1) var(--cz-1) both; }
  [data-ativa] .cena-etapa .mv-cai { animation: cz-cai .7s cubic-bezier(.3,1.4,.5,1) var(--cz-2) both; }
  [data-ativa] .cena-etapa .mv-cai2 { animation: cz-cai .7s cubic-bezier(.3,1.4,.5,1) calc(var(--cz-2) + .35s) both; }
  [data-ativa] .cena-etapa .mv-cai3 { animation: cz-cai .7s cubic-bezier(.3,1.4,.5,1) calc(var(--cz-2) + .7s) both; }
  [data-ativa] .cena-etapa .mv-sobe { animation: cz-sobe .5s ease-out var(--cz-3) both; }
  [data-ativa] .cena-etapa .mv-cresce { transform-box: fill-box; transform-origin: 50% 100%; animation: cz-cresce .9s cubic-bezier(.2,.7,.3,1) var(--cz-2) both; }
  [data-ativa] .cena-etapa .mv-apaga { animation: cz-apaga 1.4s ease-in var(--cz-2) both; }
  [data-ativa] .cena-etapa .mv-varre { animation: cz-varre 1.8s ease-in-out var(--cz-2) both; }
  [data-ativa] .cena-etapa .mv-cursor { animation: cz-cursor 2.4s ease-in-out var(--cz-2) both; }
  [data-ativa] .cena-etapa .mv-lupa { animation: cz-lupa 2.2s ease-in-out var(--cz-2) both; }
  [data-ativa] .cena-etapa .mv-carimbo { transform-box: fill-box; transform-origin: center; animation: cz-carimbo .45s cubic-bezier(.3,1.6,.5,1) var(--cz-3) both; }
  [data-ativa] .cena-etapa .mv-gira { transform-box: view-box; transform-origin: 200px 150px; animation: cz-gira 1.6s cubic-bezier(.2,.7,.3,1) var(--cz-3) both; }

  /* o destaque do diferencial: pulsa depois de aparecer */
  [data-ativa] .cena-etapa .pulso { transform-box: fill-box; transform-origin: center;
    animation: cz-in .5s ease-out var(--cz-3) both, cz-pulso 1.8s ease-in-out calc(var(--cz-3) + .5s) infinite; }
}

@keyframes cz-texto { from { opacity: 0; transform: translateY(8px); } }
@keyframes cz-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes cz-traco { from { stroke-dasharray: 1 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1 1; stroke-dashoffset: 0; } }
@keyframes cz-dir { from { transform: translateX(-120px); opacity: 0; } 20% { opacity: 1; } }
@keyframes cz-esq { from { transform: translateX(120px); opacity: 0; } 20% { opacity: 1; } }
@keyframes cz-cai { from { transform: translateY(-60px); opacity: 0; } }
@keyframes cz-sobe { from { transform: translateY(12px); } }
@keyframes cz-cresce { from { transform: scaleY(0); } }
@keyframes cz-apaga { from { opacity: 1; } to { opacity: .08; } }
@keyframes cz-varre { from { transform: translateX(-150px); } to { transform: translateX(0); } }
@keyframes cz-cursor { 0% { transform: translate(-70px, 40px); } 60% { transform: translate(8px, -6px); } 100% { transform: none; } }
@keyframes cz-lupa { 0% { transform: translate(-60px, 10px); } 50% { transform: translate(20px, -8px); } 100% { transform: none; } }
@keyframes cz-carimbo { from { opacity: 0; transform: scale(1.8) rotate(-18deg); } }
@keyframes cz-gira { from { transform: rotate(-120deg); opacity: 0; } }
@keyframes cz-pulso { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* estado final do que é apagado (vale também com movimento reduzido) */
.cena-etapa .apagado { opacity: .08; }