/* hero.css (celular) — a abertura (#hero, js/m/hero.js). A tela inteira é o totem: a faixa preta da barra do topo,
   a janela do vídeo em pé (canto de cima à direita cortado a 45°) e a base verde com a legenda; o título SKNA MALLS
   com as letras do logo, o rótulo e o subtítulo sobre o vídeo.
   Altura: 100svh (nunca vh), com um mínimo para telas baixas (paisagem, Safari com as barras no iPhone SE); se
   passar da tela, o sticky prende pelo pé (top negativo).
   Sticky: o hero fica parado embaixo e o manifesto (z 2) sobe por cima; coberto, ele some (.is-coberto). */
#hero{--cab:calc(60 * var(--u) + var(--safe-t));--base:calc(74 * var(--u) + var(--safe-b));--k:calc(44 * var(--u));
  --min:calc(560 * var(--u));
  position:sticky;top:min(0px, calc(100svh - var(--min)));z-index:0;height:max(100svh, var(--min));
  background:var(--c-ink);color:#fff;overflow:hidden}
#hero.is-coberto{visibility:hidden}
/* o palco recua com a rolagem (escala, hero.js): o preto do fundo aparece em volta, como o grupo do desktop */
.mh__palco{position:absolute;inset:0;transform-origin:50% 42%}

/* ===== a janela (o totem) =====
   .mh__tela tem o canto cortado (fixo); .mh__abre recebe o corte diagonal da intro; .mh__img assenta a escala
   a partir do canto de baixo à esquerda. Pôster e vídeo no mesmo enquadramento (cover), então a troca não pula. */
.mh__tela{position:absolute;left:0;right:0;top:var(--cab);bottom:var(--base);z-index:1;
  clip-path:polygon(0 0,calc(100% - var(--k)) 0,100% var(--k),100% 100%,0 100%)}
.mh__abre{position:absolute;inset:0;overflow:hidden;background:#151515}
.mh__img{position:absolute;inset:0;transform-origin:0 100%}
.mh__poster,.mh__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.mh__video{opacity:0}
/* sombra para o texto: medida em u a partir de baixo (acompanha o bloco de texto, não a altura da tela) */
.mh__sombra{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(12,12,12,.9) 0,rgba(12,12,12,.78) calc(150 * var(--u)),rgba(12,12,12,.64) calc(270 * var(--u)),
    rgba(12,12,12,.3) calc(380 * var(--u)),rgba(12,12,12,0) calc(480 * var(--u)))}

/* ===== texto sobre o vídeo ===== */
.mh__txt{position:absolute;left:var(--pad);right:var(--pad);bottom:calc(var(--base) + 24 * var(--u));z-index:2}
/* no tablet o título para de crescer (a unidade tem teto de 1,4 e a caixa, de 440u) */
.mh__caixa{max-width:calc(440 * var(--u))}
.mh__rot,.mh__sub{font-size:calc(17 * var(--u));line-height:1.08;letter-spacing:-.02em;color:#fff;
  text-shadow:0 0 calc(14 * var(--u)) rgba(12,12,12,.45)}
.mh__rot{display:flex;align-items:center}
/* o quadrado verde da sinalética, na altura das maiúsculas */
.mh__sq{flex:none;width:calc(7 * var(--u));height:calc(7 * var(--u));margin:0 calc(9 * var(--u)) calc(1.5 * var(--u)) 0;background:var(--c-limao)}
.mh__tit{display:block;margin-top:calc(10 * var(--u));color:#fff}
/* cada palavra é uma linha na largura toda; a caixa da linha é o recorte da rolagem das letras */
.mh__ln{display:block;position:relative;width:100%;overflow:hidden}
.mh__ln + .mh__ln{margin-top:calc(5 * var(--u))}
.mh__lt{position:absolute;will-change:transform}
.mh__lt svg{display:block;width:100%;height:100%}
.mh__sub{margin-top:calc(12 * var(--u));text-align:right}

/* ===== a base verde do totem: três traços (o do trecho que passa enche), nome, lugar e o contador ===== */
.mh__base{position:absolute;left:0;right:0;bottom:0;height:var(--base);z-index:3;background:var(--c-limao);color:var(--c-ink);
  transform-origin:0 50%}
.mh__barras{position:absolute;left:var(--pad);right:var(--pad);top:calc(14 * var(--u));height:calc(2 * var(--u));display:flex;gap:calc(6 * var(--u))}
.mh__barras i{position:relative;flex:1;overflow:hidden;background:rgba(12,12,12,.2)}
.mh__barras b{position:absolute;inset:0;background:var(--c-ink);transform-origin:0 50%;transform:scaleX(0)}
/* cada linha da legenda é um recorte e o texto sobe de dentro dele */
.mh__leg>span{position:absolute;overflow:hidden;white-space:nowrap;font-family:var(--f-texto);letter-spacing:-.01em;
  font-size:calc(14 * var(--u));line-height:calc(19 * var(--u));height:calc(19 * var(--u))}
.mh__leg>span>span{display:block}
.mh__nome{left:var(--pad);top:calc(27 * var(--u));font-weight:700}
.mh__lugar{left:var(--pad);top:calc(46 * var(--u));font-weight:500;color:rgba(12,12,12,.7)}
.mh__num{right:var(--pad);top:calc(27 * var(--u));font-weight:500;font-variant-numeric:tabular-nums;color:rgba(12,12,12,.7)}
.mh__num b{font-weight:700;color:var(--c-ink)}

/* véu da passagem: escurece o palco inteiro enquanto o manifesto sobe (opacidade ligada à rolagem) */
.mh__veu{position:absolute;inset:0;z-index:4;background:var(--c-ink);opacity:0;pointer-events:none}

/* movimento reduzido: sem cortina (o hero rola como uma seção comum) */
@media (prefers-reduced-motion:reduce){
  #hero{position:relative;top:auto}
}