/* ============================================================
   HERO PLATINUM — cenas em sequência (a palavra já vem nos vídeos)
   ============================================================ */
.hero{isolation:isolate}

/* cenas (vídeo ou demo) empilhadas, uma aparece por vez */
.hs{position:absolute;inset:0;opacity:0;transition:opacity 1.6s var(--ease-io)}
.hs.on{opacity:1}
.hs video,.hs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hs.int::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(50,49,47,.55),rgba(50,49,47,.1) 45%)}

.hero-in{transition:opacity 1.2s var(--ease-io)}
.hero.is-int .hero-in,.hero.is-int .hero-side{opacity:0;pointer-events:none}   /* interior: sem nenhum texto */

/* escurecimento só onde tem texto */
.hero-shade{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(50,49,47,.42) 0%,transparent 16%,transparent 52%,rgba(50,49,47,.88) 100%)}
.hero-in,.hero-side{z-index:3;transition:opacity 1.2s var(--ease-io)}

/* progresso das cenas */
.hero-prog{position:absolute;z-index:3;left:calc(var(--gut) + 6px);right:calc(var(--gut) + 6px);bottom:clamp(22px,3.4vh,38px);
  display:flex;align-items:center;gap:10px}
.hp-toggle{width:26px;height:26px;display:flex;align-items:center;justify-content:center;gap:3px;border-radius:50%;border:1px solid rgba(242,239,232,.25)}
.hp-toggle i{width:2px;height:8px;background:var(--creme)}
.hero.paused .hp-toggle i:first-child{width:0;height:0;background:none;border-left:7px solid var(--creme);border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
.hero.paused .hp-toggle i:last-child{display:none}

@media(max-width:820px){
  .hero-prog{justify-content:flex-start}
}
@media(prefers-reduced-motion:reduce){
  .hs{transition:none}
}