/* =====================================================================
   Grupo Marfre · LAB hero cinematográfico — PÁGINA B (código puro)
   Conceito: "voo pela grade de chevrons da marca". Sem vídeo, sem IA.
   Profundidade 3D + parallax dirigidos pelo scroll (var --p, 0..1),
   dissolvendo no papel claro da home. Paleta e motivo do design-guide.
   Herda os tokens de /css/home.css (--ink, --blue, etc.).
   ===================================================================== */

.cine{
  position:relative;
  height:260vh;                 /* runway de scroll: 160vh de scrub */
  background:var(--ink-3);
}
.cine-stage{
  position:sticky;top:0;
  height:100vh;overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 42%, #16345c 0%, var(--ink-3) 58%, #060f1f 100%);
  --p:0;
  isolation:isolate;
}

/* ---------- camadas de profundidade (perspectiva) ---------- */
.cine-grid{position:absolute;inset:0;perspective:1000px;perspective-origin:50% 44%;pointer-events:none}
.cine-field{
  position:absolute;inset:-40%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='94' height='94' viewBox='0 0 94 94'%3E%3Cg fill='none' stroke='%235AB0E0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 22 43 47 24 72'/%3E%3Cpath d='M47 22 66 47 47 72'/%3E%3C/g%3E%3C/svg%3E");
  background-size:94px 94px;
  will-change:transform,opacity;
}
/* fundo: quase parado, tênue */
.cine-field--far{
  opacity:calc(.10 + var(--p) * .06);
  transform:translateZ(-620px) scale(calc(1 + var(--p) * .18));
}
/* meio: avança em direção à câmera */
.cine-field--mid{
  opacity:calc(.16 + var(--p) * .10);
  transform:translateZ(calc(-260px + var(--p) * 420px)) scale(calc(1 + var(--p) * .7));
}
/* frente: passa voando e desfoca (rush) */
.cine-field--near{
  opacity:calc(.12 - var(--p) * .04);
  filter:blur(calc(var(--p) * 3px));
  transform:translateZ(calc(60px + var(--p) * 900px)) scale(calc(1.2 + var(--p) * 2.2));
}

/* ---------- bloom de luz azul (fonte) ---------- */
.cine-glow{
  position:absolute;left:50%;top:44%;
  width:min(120vh,120vw);aspect-ratio:1;translate:-50% -50%;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(0,125,192,.42) 0%, rgba(0,125,192,.14) 32%, transparent 66%);
  opacity:calc(.35 + var(--p) * .5);
  transform:scale(calc(.7 + var(--p) * .8));
  will-change:transform,opacity;
}

/* ---------- símbolo GM (foco que vem em direção à câmera) ---------- */
.cine-symbol{
  position:absolute;left:50%;top:44%;translate:-50% -50%;
  width:clamp(140px,20vw,280px);height:auto;
  filter:drop-shadow(0 24px 60px rgba(0,125,192,.45));
  transform:scale(calc(.82 + var(--p) * 1.05)) rotate(calc(var(--p) * -6deg));
  opacity:var(--symbol-op,1);
  will-change:transform,opacity;
}

/* ---------- grão ---------- */
.cine-grain{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* ---------- 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 ---------- */
.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,.55);
}
.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,.82);
}
.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)}

/* animação de entrada da copy (não depende do home.js) */
@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 enquanto 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-symbol{top:38%}
  .cine-glow{top:38%}
}

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