/* cena 08 — ordem 046 (24/09): dono único, a frente desta cena. */
/* "A PRAÇA ACESA" (cena08.js desenha). A luz é a do capítulo (Duque, --luz) e as tinturas são as do cânone: noite, marfim, ouro, folha.
   Uma coisa se move — o cupom % pela rua; o resto ACENDE quando ele passa (toldo, janela, etiqueta, fio, cliente) e a luz volta. */
.plano[data-cena="8"] { row-gap: clamp(8px, 1.5vh, 16px); padding-top: max(96px, env(safe-area-inset-top) + 88px); }

/* o % mora num CUPOM de ouro no alto do eixo (recortes de meia-lua, costura, canhoto picotado): a letra do index por cima, o cupom por
   baixo; o % não corre mais (quem anda é o cupom pequeno, na rua); só assenta com o foco do plano */
/* o % assenta no MEIO do cupom (ordem do Criador 25/09: estava encostado à esquerda). O cupom tem o canhoto picotado à direita
   (x190 de 240): um respiro pequeno à direita centra o % no corpo do ticket sem invadir o picote — centro óptico, elegante. */
.plano[data-cena="8"] > .glifo { position: relative; display: grid; place-items: center; width: clamp(172px, 14vw, 208px); aspect-ratio: 240 / 150;
  padding-right: 4%; font-size: clamp(60px, 5vw, 76px); line-height: 1; color: var(--noite); text-shadow: 0 1px 0 rgba(239, 228, 204, .4); isolation: isolate; }
.plano[data-cena="8"] > .glifo.e1 { transform: rotate(-4deg) scale(calc(.955 + .045 * var(--e, 1))); }
.c8-cupom { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; overflow: visible; filter: drop-shadow(0 0 calc(12px + 18px * var(--c8-cupom, 1)) var(--brilho)); }
.c8-cupom .c8-cupom-corpo { fill: var(--folha); stroke: var(--ouro); stroke-width: 2; }
.c8-cupom .c8-costura { fill: none; stroke: rgba(5, 4, 8, .5); stroke-width: 1.4; stroke-dasharray: 3 5; }
.c8-cupom .c8-picote { fill: none; stroke: rgba(5, 4, 8, .6); stroke-width: 2.2; stroke-dasharray: 1 6; stroke-linecap: round; }
.c8-cupom .c8-brilho-cupom { fill: none; stroke: rgba(255, 250, 235, .55); stroke-width: 2; stroke-linecap: round; }

/* a legenda: cada parte da frase leva o desenho que ela é no quadro (a vitrine = membros; a pessoa = clientes) */
.plano[data-cena="8"] > .oferta { max-width: 46ch; line-height: 1.4; }
.oferta .leg { width: .95em; height: .95em; margin: 0 .22em 0 .08em; vertical-align: -.1em; fill: none; stroke: var(--traco-luz); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.oferta .onda.aceso .leg { stroke: var(--folha); filter: drop-shadow(0 0 5px var(--brilho)); }

/* ——— a praça ——— */
.praca { width: min(92vw, 960px); max-width: none !important; }
.praca-svg { display: block; width: 100%; height: auto; overflow: visible; }
.praca .c8-rua { fill: none; stroke: var(--ouro); stroke-width: 1.4; opacity: .7; }
/* a trilha do cupom: o fio se desenha atrás dele, ponta a ponta (cena08.js escreve --traco) */
.praca .c8-salto { fill: none; stroke: var(--folha); stroke-width: 1.4; opacity: .6; stroke-linecap: round; stroke-dasharray: var(--comp); stroke-dashoffset: var(--traco, 0); }

/* os outros membros, ao fundo: silhuetas na névoa (só contorno baixo), que ganham um fio de luz quando a praça inteira acende */
.c8-fundo path, .c8-fundo rect { fill: rgba(5, 4, 8, .6); stroke: rgba(184, 146, 63, .4); stroke-width: 1.7; transition: stroke 1.2s var(--curva); }
.c8-praca-cheia .c8-fundo path { stroke: rgba(205, 181, 120, .5); }
.c8-praca-cheia .c8-fundo rect { fill: color-mix(in srgb, var(--luz) 30%, var(--noite)); stroke: rgba(205, 181, 120, .45); }
/* o carimbo: quando o cupom toca a ponta do arco, uma onda de luz nasce ali, uma vez (o brilho só no impacto) */
.c8-loja .c8-toque { fill: none; stroke: var(--folha); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.c8-loja.c8-acesa .c8-toque { animation: c8-toque 1.1s cubic-bezier(.2, .7, .3, 1) 1; }
@keyframes c8-toque { 0% { opacity: .95; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.9); } }

/* a vitrine (apagada: só o contorno em ouro baixo; acesa: arco em folha, toldo na luz, janela iluminada, etiqueta balança) */
.c8-loja .c8-arco { fill: rgba(5, 4, 8, .82); stroke: rgba(184, 146, 63, .55); stroke-width: 2.1; transition: stroke .5s var(--curva); }
.c8-loja .c8-janela { opacity: .08; stroke: rgba(184, 146, 63, .4); stroke-width: 1; transition: opacity .6s var(--curva); }
.praca .c8-lume-0 { stop-color: var(--folha); stop-opacity: .9; }
.praca .c8-lume-1 { stop-color: var(--luz); stop-opacity: .25; }
.praca .c8-poca-0 { stop-color: var(--folha); stop-opacity: .55; }
.praca .c8-poca-1 { stop-color: var(--luz); stop-opacity: 0; }
.c8-loja .c8-poca { opacity: 0; transition: opacity .8s var(--curva); }
.c8-loja.c8-acesa .c8-poca { opacity: 1; }
.c8-loja .c8-toldo { fill: rgba(5, 4, 8, .9); stroke: rgba(184, 146, 63, .5); stroke-width: 1.4; stroke-linejoin: round; transition: fill .5s var(--curva), stroke .5s; }
.c8-loja .c8-medalhao { fill: rgba(5, 4, 8, .92); stroke: rgba(184, 146, 63, .6); stroke-width: 1.4; }
.c8-loja .c8-negocio { fill: none; stroke: rgba(205, 181, 120, .55); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .5s; }
.c8-loja .c8-etiqueta { opacity: .18; transition: opacity .4s; }
.c8-loja .c8-cordao { fill: none; stroke: var(--ouro); stroke-width: 1.2; }
.c8-loja .c8-tag { fill: var(--marfim); stroke: var(--ouro); stroke-width: 1.2; stroke-linejoin: round; }
.c8-loja .c8-furo { fill: var(--noite); }
.c8-loja .c8-pct { fill: none; stroke: var(--noite); stroke-width: 2.2; stroke-linecap: round; }
.c8-loja.c8-acesa .c8-arco { stroke: var(--folha); filter: drop-shadow(0 0 10px var(--brilho)); }
.c8-loja.c8-acesa .c8-janela { opacity: 1; }
.c8-loja.c8-acesa .c8-toldo { fill: var(--luz); stroke: var(--folha); }
.c8-loja.c8-acesa .c8-medalhao { stroke: var(--folha); }
.c8-loja.c8-acesa .c8-negocio { stroke: var(--marfim); }
.c8-loja.c8-acesa .c8-etiqueta { opacity: 1; animation: c8-balanca 1.8s cubic-bezier(.3, 1.6, .5, 1) 1; }
@keyframes c8-balanca { 0% { transform: rotate(-16deg); } 35% { transform: rotate(9deg); } 65% { transform: rotate(-4deg); } 100% { transform: none; } }

/* o cliente da plataforma: apagado, um vulto; aceso, marfim com o fio que desce da porta; e a luz que SOBE pelo fio (o valor que volta) */
.c8-cliente .c8-cabeca, .c8-cliente .c8-ombro { fill: rgba(5, 4, 8, .9); stroke: rgba(184, 146, 63, .45); stroke-width: 1.6; transition: stroke .4s, fill .4s; }
.c8-cliente .c8-desce { fill: none; stroke: var(--traco-luz); stroke-width: 1.4; stroke-dasharray: var(--comp); stroke-dashoffset: calc(var(--comp) * (1 - var(--desce, 0))); }
.c8-cliente .c8-volta { fill: none; stroke: var(--folha); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 6 calc(var(--comp) * 2); stroke-dashoffset: -80; opacity: 0; filter: drop-shadow(0 0 5px var(--folha)); }
.c8-cliente .c8-braco { fill: none; stroke: rgba(184, 146, 63, .45); stroke-width: 2.4; stroke-linecap: round; transition: stroke .4s; }
.c8-cliente .c8-mao-cupom { fill: none; stroke: rgba(184, 146, 63, .35); stroke-width: 1.2; transition: fill .4s, stroke .4s; }
.c8-cliente.c8-acesa .c8-braco { stroke: var(--marfim); }
.c8-cliente.c8-acesa .c8-mao-cupom { fill: var(--folha); stroke: var(--ouro); filter: drop-shadow(0 0 4px var(--folha)); }
.c8-cliente.c8-acesa .c8-cabeca, .c8-cliente.c8-acesa .c8-ombro { stroke: var(--marfim); fill: color-mix(in srgb, var(--luz) 28%, var(--noite)); }
.praca-svg.c8-retorno .c8-cliente .c8-volta { animation: c8-volta 2.6s cubic-bezier(.4, 0, .2, 1) var(--atraso, 0s) infinite; }
@keyframes c8-volta { 0% { stroke-dashoffset: calc(var(--comp) * -1); opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { stroke-dashoffset: 6; opacity: 0; } }

/* o cupom que anda: a cópia pequena do cupom do alto */
.c8-selo .c8-selo-corpo { fill: var(--folha); stroke: var(--ouro); stroke-width: 1.2; filter: drop-shadow(0 0 7px var(--folha)) drop-shadow(0 0 16px var(--brilho)); }
.c8-selo .c8-selo-picote { fill: none; stroke: rgba(5, 4, 8, .6); stroke-width: 1.4; stroke-dasharray: 1 3.5; stroke-linecap: round; }
.c8-selo .c8-selo-pct { fill: none; stroke: var(--noite); stroke-width: 2.2; stroke-linecap: round; }

@media (max-width: 720px) {
  .plano[data-cena="8"] { row-gap: 12px; padding-top: max(96px, env(safe-area-inset-top) + 88px); }
  .plano[data-cena="8"] > .glifo { width: 132px; font-size: 48px; }
  .praca { width: auto; justify-self: stretch; margin-inline: -8px; }   /* o plano tem 24 px de margem: 94vw vazava 22 px à direita (medido: 24→428 em 430) */
  .plano[data-cena="8"] > .oferta { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .c8-loja.c8-acesa .c8-etiqueta, .c8-loja.c8-acesa .c8-toque, .praca-svg.c8-retorno .c8-cliente .c8-volta { animation: none; }
  .praca-svg.c8-retorno .c8-cliente .c8-volta { opacity: .8; stroke-dasharray: none; }
}