/* Palco, cena 16:9, figuras, emblema, muralha, poeira e escurecimentos. */

/* ---------- palco ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:34rem;overflow:hidden;background:var(--breu)}
.palco{position:absolute;inset:0;overflow:hidden;container-type:size}

/* A cena e sempre 16:9 e cobre o palco (object-fit: cover feito a mao),
   pra que figuras, lajes e particulas usem o mesmo sistema de coordenadas. */
.cena,.camada-fx{position:absolute;aspect-ratio:16/9;
  --sw:max(100cqw, calc(100cqh * 16 / 9));
  --sh:max(calc(100cqw * 9 / 16), 100cqh);
  width:var(--sw);
  left:calc((100cqw - var(--sw)) * var(--fx));
  top:calc((100cqh - var(--sh)) * var(--fy));
  will-change:transform;transform-origin:50% 45%}
/* A cena so aparece quando as artes estao prontas (as padrao sao desenhadas
   no navegador e levam alguns milesimos): sem isto piscaria a muralha vazia. */
.cena{opacity:0;transition:opacity .7s ease}
.arte-hero-pronta .cena{opacity:1}
/* As particulas ficam numa camada propria, acima da vinheta e do escurecimento
   do chao — senao as faiscas nasceriam ja apagadas na parte baixa da cena. */
.camada-fx{pointer-events:none}
.cena > *{position:absolute}
.fundo,.moldura{inset:0;width:100%;height:100%;object-fit:cover}
.moldura{will-change:opacity}

/* figuras opcionais (artes.heroFiguras no dados.js): posicao em % da cena */
.figuras{inset:0;transform-origin:36% 62%}
.figura{position:absolute;opacity:0;will-change:transform,opacity;transform-origin:50% 100%}
.figura img{width:100%;height:100%;object-fit:contain}

/* ---------- emblema da marca, acima da muralha ---------- */
/* Fica centrado no que esta VISIVEL, nao no centro da imagem: em telas estreitas
   a cena e cortada nas laterais, entao o centro dela sai de quadro. */
.emblema{--ey:24.5%;--eh:18%;--ar:100/140;
  left:calc(50cqw - (100cqw - var(--sw)) * var(--fx));
  top:var(--ey);height:var(--eh);aspect-ratio:var(--ar);
  pointer-events:none;transform:translate(-50%,-50%);will-change:opacity,transform}
.emblema > *{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}

/* escurecimento do ceu, pra marca branca nao se perder nas nuvens */
.sombra{width:270%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(12,8,5,.8),rgba(12,8,5,.46) 48%,transparent 76%)}

/* a marca em branco (logo do cliente ou monograma) */
.marca-emblema{width:100%;height:100%;color:#fff;
  filter:drop-shadow(0 0 2px rgba(12,7,4,.95)) drop-shadow(0 0 5px rgba(12,7,4,.75))
         drop-shadow(0 3px 10px rgba(12,7,4,.6))}
.marca-emblema .monograma .m-borda{stroke-width:2}

/* depois da queda (sem figuras), a marca volta acesa na cor do tema */
.emblema.revelado .marca-emblema{
  filter:drop-shadow(0 0 2px rgba(12,7,4,.95)) drop-shadow(0 3px 10px rgba(12,7,4,.6))
         drop-shadow(0 0 22px rgb(var(--acento-vivo) / .6))}
.emblema.revelado .sombra{opacity:.6}

/* flutuacao leve */
@keyframes boiar{50%{transform:translate(-50%,-50%) translateY(-3.5%)}}
.emblema{animation:boiar 5.6s ease-in-out infinite}

/* faixa da muralha: y de 28,963% a 92,963% da cena */
.muralha{left:0;width:100%;top:28.963%;height:64%;cursor:pointer}
/* Com `will-change` fixo, as lajes seriam ~28 camadas presas na GPU a visita
   inteira — para uma animacao que roda 4,2 s e acaba. Em WebView (o navegador
   do Instagram) isso estoura a memoria de video. A dica so vale enquanto a
   muralha esta caindo; `.caindo` entra e sai no JS. */
.laje{position:absolute;top:0;height:100%;background-image:var(--arte-muralha);
  background-repeat:no-repeat;backface-visibility:hidden}
.hero.caindo .laje{will-change:transform,opacity}
.rachas{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.rachas path{fill:none;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.rachas .brilho{stroke:rgba(255,150,60,.55);stroke-width:4px;filter:blur(2px)}
.rachas .fenda{stroke:rgba(18,12,8,.9);stroke-width:1.6px}

.particulas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

.poeira{inset:-10% -6% 0;opacity:0;pointer-events:none;will-change:transform,opacity;
  background:
    radial-gradient(58% 42% at 22% 88%, rgba(196,166,124,.85), transparent 70%),
    radial-gradient(64% 46% at 55% 94%, rgba(214,186,144,.9), transparent 72%),
    radial-gradient(52% 40% at 82% 86%, rgba(184,152,112,.8), transparent 70%),
    radial-gradient(92% 56% at 50% 100%, rgba(160,128,92,.75), transparent 75%)}

.vinheta{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(130% 105% at 40% 34%, transparent 36%, rgba(14,11,8,.45) 76%, rgba(14,11,8,.9) 100%)}
.chao{position:absolute;left:0;right:0;bottom:0;height:40%;pointer-events:none;opacity:.7;
  background:linear-gradient(transparent, rgba(14,11,8,.55) 45%, rgba(14,11,8,.9));will-change:opacity}