/* cena 09 — ordem 046 (24/09): dono único, a frente desta cena.
   "O mapa vira feed." · A CASCATA DAS CIDADES (pedido de 24/09: "mais visual e hipnotizante"). O Brasil das 5.570 cidades nasce
   de frente no meio do palco, DEITA como um chão de luz e desliza para o lado enquanto o celular se forma; cada cidade que acende
   sobe num fio de luz até o topo do feed e ali desabrocha no post de uma empresa de lá. O feed desce em cascata sem fim e a luz
   do capítulo (imperador) passa pelos cartões a cada chegada. Nenhuma cor é digitada fora do cânone (imperio.css): noite, marfim,
   ouro, folha e a luz do capítulo (--luz, --traco-luz, --brilho de estilo.css). O canvas .chao e os cartões são de cena09.js. */
.plano[data-cena="9"] { row-gap: clamp(10px, 1.8vh, 20px); }
.plano[data-cena="9"] > .cascata { position: relative; width: min(92vw, 1060px); max-width: none; height: clamp(330px, 50vh, 470px); }
.cascata > .chao { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }

/* o celular: a moldura do REINO (marfim fino, ouro no aro), opaco — o chão passa POR TRÁS dele; nasce com --forma (0 → 1) */
.plano[data-cena="9"] .cascata .celular { position: absolute; top: 0; right: 7%; height: 100%; width: auto; aspect-ratio: .66; display: block; padding: 0;
  border: 1.5px solid rgba(239, 228, 204, .42); border-radius: 30px; outline: none; overflow: hidden;
  background: linear-gradient(180deg, rgba(14, 10, 18, .97), rgba(5, 4, 8, .98));
  box-shadow: 0 0 0 4px rgba(5, 4, 8, .9), 0 0 0 5px rgba(184, 146, 63, .32), 0 18px 60px rgba(5, 4, 8, .8), 0 0 46px color-mix(in srgb, var(--luz) 22%, transparent);
  opacity: calc(var(--forma, 1)); transform: translateY(calc((1 - var(--forma, 1)) * 26px)) scale(calc(.94 + .06 * var(--forma, 1))); transform-origin: 50% 100%; }
/* o aro de cima acende quando um post chega (a cidade entrou no feed) */
.cascata .celular::after { content: ''; position: absolute; left: 12%; right: 12%; top: 0; height: 2px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--traco-luz), var(--marfim), var(--traco-luz), transparent); opacity: var(--chega, 0); box-shadow: 0 0 14px var(--brilho); }
.cascata .barra-app { position: absolute; top: 0; left: 0; right: 0; height: 44px; display: flex; align-items: center; justify-content: center; gap: 7px;
  border-bottom: 1px solid rgba(184, 146, 63, .22); }
.cascata .sigilo-app { width: 22px; height: 22px; fill: none; stroke: var(--ouro); stroke-width: 3; margin-right: auto; margin-left: 16px; }
.cascata .sigilo-app .s5 { fill: var(--folha); stroke: none; }
.cascata .barra-app i { width: 7px; height: 7px; border-radius: 50%; background: rgba(239, 228, 204, .22); }
.cascata .barra-app i:first-of-type { background: var(--traco-luz); box-shadow: 0 0 8px var(--brilho); }
.cascata .barra-app i:last-of-type { margin-right: 16px; }
.cascata .tela { position: absolute; top: 44px; left: 0; right: 0; bottom: 0; overflow: hidden; padding: 10px 10px 0; }
.cascata .fluxo { list-style: none; margin: 0; padding: 0; display: grid; row-gap: 10px; will-change: transform; }

/* o post: avatar (a inicial da empresa, em folha), quem e onde, o que diz, e o tipo (notícia, oferta, conquista) */
.plano[data-cena="9"] .celular .post { position: relative; display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto; column-gap: 10px; row-gap: 3px;
  padding: 10px 12px 11px; border-radius: 14px; text-align: left; text-shadow: none;
  background: linear-gradient(180deg, rgba(24, 17, 30, .98), rgba(11, 8, 15, .98)); border: 1px solid rgba(184, 146, 63, .26); }
.plano[data-cena="9"] .celular .post::before { display: none; }
.plano[data-cena="9"] .celular .post::after { display: none; }
.cascata .post .av { grid-row: 1 / span 2; grid-column: 1; align-self: start; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font: 600 18px/1 var(--display); color: var(--marfim);   /* a letra clara no disco escuro: legível sobre qualquer noite, até no meio do voo */
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--luz) 34%, var(--noite)), var(--noite) 78%);
  box-shadow: inset 0 0 0 1.5px var(--folha), 0 0 0 2px var(--noite), 0 0 0 3.5px var(--traco-luz), 0 0 16px var(--brilho); }
.cascata .post .quem { font: 700 15px/1.25 var(--corpo); color: var(--marfim); }
.cascata .post .diz { margin: 0; font: 500 15px/1.3 var(--corpo); color: #ddd2bb; }   /* 85% marfim sobre o cartão: a régua de cores não lê color-mix na letra */
/* o tipo (notícia, oferta, conquista) é um selo no pé do avatar; a palavra abre a frase do post */
.cascata .post .tipo { position: absolute; left: 34px; top: 32px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: var(--noite); box-shadow: 0 0 0 1.5px var(--folha), 0 0 10px var(--brilho); }
.cascata .post .tipo svg { width: 13px; height: 13px; fill: none; stroke: var(--folha); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cascata .post .quem, .cascata .post .diz { grid-column: 2; }
/* a luz do capítulo que passa pelos cartões (cena09.js anima a opacidade, um cartão depois do outro) */
.cascata .post .lume { position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0;
  border: 1.5px solid var(--traco-luz); box-shadow: 0 0 26px var(--brilho), 0 0 6px var(--traco-luz), inset 0 0 22px color-mix(in srgb, var(--luz) 38%, transparent); }

/* o selo "exemplo de tela": pedra sob a letra, no pé do chão */
.cascata > .rotulo { position: absolute; left: 0; bottom: 0; margin: 0; padding: 4px 12px; border-radius: 999px; background: rgba(5, 4, 8, .88);
  font: 500 15px/1.2 var(--corpo); color: var(--cinza); font-style: italic; border: 1px solid rgba(184, 146, 63, .22); opacity: var(--forma, 1); }

/* ——— o celular (≤ 720 px): o chão fica no alto, o feed embaixo; nada abaixo de 14 px ——— */
@media (max-width: 720px) {
  .plano[data-cena="9"] > .cascata { height: clamp(400px, 50vh, 470px); }
  .plano[data-cena="9"] .cascata .celular { top: auto; bottom: 0; right: auto; left: 50%; height: 63%; width: min(86vw, 350px); aspect-ratio: auto;
    transform: translateX(-50%) translateY(calc((1 - var(--forma, 1)) * 26px)) scale(calc(.94 + .06 * var(--forma, 1))); border-radius: 26px; }
  .cascata .barra-app { height: 38px; }
  .cascata .tela { top: 38px; }
  .cascata > .rotulo { left: auto; right: 0; bottom: auto; top: 0; }
}
.reduzido .cascata .celular { transition: none; }