/* Palco, cena 16:9, titas, 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 é sempre 16:9 e cobre o palco (object-fit: cover feito à mão),
   pra que titãs, lajes e partículas 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%}
/* As partículas ficam numa camada própria, acima da vinheta e do escurecimento
   do chão — senão as faíscas nasceriam já apagadas na parte baixa da cena. */
.camada-fx{pointer-events:none}
.cena > *{position:absolute}
.fundo,.moldura{inset:0;width:100%;height:100%}
.moldura{will-change:opacity}

.titas{inset:0;transform-origin:36% 62%}
.tita{position:absolute;opacity:0;will-change:transform,opacity;transform-origin:50% 100%}
.tita img{width:100%;height:100%}
.tita[data-t="a"]{left:10.167%;top:18.963%;width:9.625%;height:45.037%}
.tita[data-t="b"]{left:31.083%;top:16.815%;width:10.792%;height:48%}
.tita[data-t="c"]{left:52.208%;top:21.185%;width:8.792%;height:42%}
.tita[data-t="d"]{left:22.042%;top:28.37%;width:6.708%;height:32%}
.tita[data-t="e"]{left:43.792%;top:29.778%;width:6.417%;height:30%}

/* ---------- emblema da marca, acima da muralha ---------- */
/* Fica centrado no que está VISÍVEL, não no centro da imagem: em telas estreitas
   a cena é cortada nas laterais, então o centro dela sai de quadro. */
.emblema{--ey:24.5%;--eh:18%;--ar:387/560;
  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 céu, pra marca branca não 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 */
.marca-emblema{width:100%;height:100%;object-fit:contain;
  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))}

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

/* faixa recortada da muralha: y de 28,963% a 92,963% da cena */
.muralha{left:0;width:100%;top:28.963%;height:64%;cursor:pointer}
.laje{position:absolute;top:0;height:100%;background-image:url(../assets/muralha.webp);
  background-repeat:no-repeat;will-change:transform,opacity;backface-visibility:hidden}
.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}