/* =====================================================================
   BERLUTTI — Abertura em scroll-vídeo (canvas)
   Usado só em index-reel.html, carregado depois de berlutti.css
   ===================================================================== */

:root{--film:#0E110C;--cream-70:rgba(240,234,223,.72);--cream-40:rgba(240,234,223,.4)}

/* bloco alto: a altura extra é o "curso" do vídeo */
.reel{position:relative;height:400vh;background:var(--film)}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--film)}
.stage__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block;background:var(--film)}
.stage__wash{position:absolute;inset:0;pointer-events:none;z-index:2;background:var(--film)}
.stage__grade{position:absolute;inset:0;pointer-events:none;z-index:3;
  background:radial-gradient(150% 120% at 50% 40%,rgba(14,17,12,0) 55%,rgba(14,17,12,.34) 100%)}
.stage__scrim{position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(0deg,rgba(14,17,12,.74) 0%,rgba(14,17,12,.16) 42%,rgba(14,17,12,0) 66%)}

/* textos sobre o vídeo — eyebrow no topo, frases no rodapé */
.reel__ui{position:absolute;inset:0;z-index:5;pointer-events:none;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:calc(var(--header-h) + clamp(.8rem,3.5vh,2rem)) var(--gut) clamp(5rem,12vh,8rem)}
.reel__eyebrow{display:flex;align-items:center;gap:.8rem;opacity:0;transform:translateY(10px);will-change:opacity,transform}
.reel__eyebrow i{width:clamp(28px,4vw,54px);height:1.5px;background:var(--green-lt);display:block}
.reel__eyebrow .label{color:var(--cream-70)}

.reel__stack{position:relative;min-height:clamp(160px,30vh,340px)}
.phrase{position:absolute;left:0;bottom:0;opacity:0;transform:translateY(26px);will-change:opacity,transform;
  font-family:var(--f-display);font-weight:300;color:var(--cream);
  font-size:clamp(2.8rem,8.4vw,7rem);line-height:1;letter-spacing:-.03em;max-width:22ch;
  text-shadow:0 2px 44px rgba(0,0,0,.5)}
.phrase em{font-style:italic;color:#C9B896}

.reel__final{position:absolute;left:0;bottom:0;opacity:0;will-change:opacity}
.reel__h{font-family:var(--f-display);font-weight:300;color:var(--cream);
  font-size:clamp(2.6rem,8vw,8.4rem);line-height:.95;letter-spacing:-.03em;max-width:15ch;
  text-shadow:0 2px 44px rgba(0,0,0,.45)}
.reel__h .rl{display:block;overflow:hidden;padding-bottom:.04em}
.reel__h .rl>span{display:block;transform:translateY(110%);will-change:transform}
.reel__h em{font-style:italic;color:#C9B896}
.reel__sub{margin-top:1.4rem;max-width:46ch;color:var(--cream-70);font-size:var(--t-lead);line-height:1.5;
  opacity:0;transform:translateY(12px);will-change:transform,opacity}
.reel__cta{margin-top:2rem;display:flex;gap:.7rem;flex-wrap:wrap;pointer-events:auto;
  opacity:0;transform:translateY(12px);will-change:transform,opacity}

/* botão contorno claro para fundo escuro */
.btn--film{border-color:rgba(240,234,223,.42);color:var(--cream)}
.btn--film::before{background:var(--cream)}
.btn--film:hover{color:var(--ink);border-color:var(--cream)}

/* carregamento dos frames */
.reel__load{position:absolute;right:var(--gut);top:calc(var(--header-h) + 1rem);z-index:6;
  font-family:var(--f-mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cream-40);opacity:0;transition:opacity .4s;text-align:right}

/* HUD estilo player */
.hud{position:absolute;left:var(--gut);right:var(--gut);bottom:1.6rem;z-index:6;pointer-events:none;
  display:flex;align-items:center;gap:1rem;font-family:var(--f-mono);
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-40)}
.hud__bar{flex:1;height:1.5px;background:rgba(240,234,223,.16);position:relative;overflow:hidden}
.hud__bar i{position:absolute;inset:0;background:var(--cream);transform:scaleX(0);transform-origin:0 50%}
.hud__dot{width:5px;height:5px;border-radius:50%;background:var(--green);flex:none}
.hud__frame{font-variant-numeric:tabular-nums;color:var(--cream-70)}
@media(max-width:560px){.hud__txt{display:none}}

.cue{position:absolute;left:50%;bottom:3.4rem;transform:translateX(-50%);z-index:6;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--cream-40);
  font-family:var(--f-mono);font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;will-change:opacity}
.cue i{width:1px;height:34px;background:linear-gradient(var(--cream-40),transparent);
  animation:cueP 1.8s var(--e-out) infinite}
@keyframes cueP{0%{transform:scaleY(0);transform-origin:top;opacity:0}
  40%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);transform-origin:bottom;opacity:0}}

/* header claro enquanto está sobre o vídeo */
body.on-film .hdr,
body.on-film .hdr.is-stuck{background:transparent;backdrop-filter:none;border-bottom-color:transparent}
body.on-film .hdr__logo img{filter:brightness(0) invert(1);opacity:.94}
body.on-film .nav a{color:var(--cream-70)}
body.on-film .nav a:hover,body.on-film .nav a[aria-current]{color:var(--cream)}
body.on-film .hdr__cta .btn--fill{border-color:var(--green)}
body.on-film .hdr__cta .btn--fill::before{background:var(--cream)}
body.on-film .hdr__cta .btn--fill:hover{color:var(--ink);border-color:var(--cream)}
body.on-film .burger span{background:var(--cream)}
.hdr__logo img{transition:filter .45s,opacity .45s}

/* cursor claro sobre o vídeo */
body.on-film .cur{border-color:rgba(240,234,223,.5)}
body.on-film .cur-dot{background:var(--cream)}

/* sem animação: frame final parado + título completo */
.reel.is-static{height:100vh;height:100svh}
.reel.is-static .stage{position:relative}
@media(prefers-reduced-motion:reduce){.cue i{animation:none}}