/* =====================================================================
   Grupo Marfre · LAB hero cinematográfico — PÁGINA A (vídeo escrubado)
   Mesma técnica do Scroll World (oso95): o scroll dirige o currentTime
   de um MP4 carregado como blob. Aqui escopado a um hero limpo, que
   entrega no papel claro da home. Estrutura espelha a Página B pra o
   teste ser justo (só muda o motor do hero). Herda tokens de home.css.
   ===================================================================== */

.cine{position:relative;height:260vh;background:#060f1f}
.cine-stage{position:sticky;top:0;height:100vh;overflow:hidden;background:#060f1f;isolation:isolate}

/* ---------- vídeo escrubado ---------- */
.cine-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 44%;
  will-change:transform;
}
/* leve empurrão de câmera acompanhando o scrub, dá mais profundidade */
.cine-stage{--p:0}
.cine-video{transform:scale(calc(1.02 + var(--p) * .06))}

/* scrim pra legibilidade da copy sobre o vídeo */
.cine-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(6,15,31,.72) 0%, rgba(6,15,31,.34) 42%, transparent 72%),
    linear-gradient(0deg, rgba(6,15,31,.5) 0%, transparent 34%);
}

/* ---------- véu de handoff pro papel claro ---------- */
.cine-veil{position:absolute;inset:0;pointer-events:none;background:var(--paper);opacity:var(--veil-op,0)}

/* ---------- copy fixada (igual à Página B) ---------- */
.cine-copy{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;justify-content:center;
  max-width:var(--maxw);margin-inline:auto;padding:0 var(--pad);
  color:#EAF1F8;opacity:var(--copy-op,1);transform:translateY(var(--copy-y,0));
  will-change:opacity,transform;
}
.cine-copy .eyebrow{color:var(--blue-soft)}
.cine-title{
  font-weight:900;font-size:clamp(2.6rem,8.4vw,7rem);line-height:.98;
  letter-spacing:-.04em;max-width:15ch;margin:.3em 0 0;text-shadow:0 8px 40px rgba(6,15,31,.6);
}
.cine-title em{font-style:normal;color:var(--blue-soft)}
.cine-sub{margin-top:clamp(22px,3vw,32px);max-width:46ch;font-size:clamp(1.05rem,1.7vw,1.28rem);color:rgba(234,241,248,.84)}
.cine-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:clamp(26px,3.5vw,40px)}
.cine .btn-ghost{border:1.5px solid rgba(234,241,248,.4);color:#EAF1F8}
.cine .btn-ghost:hover{border-color:#fff;transform:translateY(-2px)}

@media (prefers-reduced-motion:no-preference){
  .cine-line{opacity:0;transform:translateY(14px);animation:cine-rise .9s var(--ease) forwards}
  .cine-line--1{animation-delay:.15s}.cine-line--2{animation-delay:.32s}
  .cine-line--3{animation-delay:.52s}.cine-line--4{animation-delay:.7s}
}
@keyframes cine-rise{to{opacity:1;transform:none}}

/* ---------- dica de scroll ---------- */
.cine-hint{
  position:absolute;left:50%;bottom:28px;translate:-50% 0;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(234,241,248,.6);
  opacity:var(--hint-op,1);
}
.cine-hint i{width:22px;height:34px;border-radius:12px;border:2px solid rgba(234,241,248,.35);position:relative}
.cine-hint i::after{content:'';position:absolute;left:50%;top:7px;width:4px;height:7px;border-radius:2px;
  background:var(--blue-soft);translate:-50% 0;animation:cine-wheel 1.7s ease-in-out infinite}
@keyframes cine-wheel{0%{opacity:0;top:6px}40%{opacity:1}100%{opacity:0;top:17px}}

/* ---------- header transparente sobre o hero ---------- */
body.over-hero .head{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-color:transparent!important}
body.over-hero .head-brand img{filter:brightness(0) invert(1)}
body.over-hero .head-nav a{color:#EAF1F8}
body.over-hero .head-burger span{background:#EAF1F8}

/* ---------- mobile ---------- */
@media (max-width:820px){
  .cine{height:230vh}
  .cine-copy{justify-content:flex-end;padding-bottom:22vh}
  .cine-video{object-position:center 46%}
}

/* ---------- sem movimento: poster estático + copy legível ---------- */
@media (prefers-reduced-motion:reduce){
  .cine{height:100vh}
  .cine-stage{position:relative}
  .cine-hint{display:none}
  .cine-line{opacity:1;transform:none;animation:none}
}