/* ============================================================
   Bruno e David — camada cinematográfica
   Aditiva: não altera nenhuma regra de style-v3.css.

   Travas (as mesmas do padrão que adotamos):
   1. tudo que esconde conteúdo vive sob html.js-fx — se o JS não
      rodar, o site aparece inteiro;
   2. efeito de ponteiro só em (hover:hover) and (pointer:fine);
   3. prefers-reduced-motion desliga movimento e força opacity:1.
   ============================================================ */

/* ---------- barras de cinema na abertura ---------- */
.cine-bars{position:fixed;inset:0;z-index:300;pointer-events:none}
.cine-bars i{position:absolute;left:0;right:0;height:0;background:#000;transition:height 1.05s cubic-bezier(.76,0,.24,1)}
.cine-bars i:first-child{top:0}
.cine-bars i:last-child{bottom:0}
.js-fx .cine-bars i{height:50%}
.js-fx.cine-open .cine-bars i{height:0}

/* ---------- barra de progresso ---------- */
.scroll-progress{position:fixed;z-index:120;top:0;right:0;left:0;height:2px;background:transparent;pointer-events:none}
.scroll-progress i{display:block;height:100%;width:var(--progress,0%);background:linear-gradient(90deg,var(--gold),var(--gold2));box-shadow:0 0 14px rgba(198,161,91,.6)}

/* ---------- grão de filme animado ---------- */
.film-grain{position:fixed;inset:-120px;z-index:110;opacity:.05;pointer-events:none;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  animation:grain 700ms steps(4) infinite}
@keyframes grain{
  0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(0,0)}
}

/* ---------- parallax ---------- */
.js-fx [data-parallax]{will-change:transform}
.js-fx [data-parallax]{transform:translate3d(0,var(--py,0px),0)}
.js-fx [data-drift]{transform:translate3d(var(--dx,0px),0,0);will-change:transform}

/* ---------- título do hero: revelação por linha ---------- */
.hero h1[data-split] .line{display:block;overflow:hidden}
.hero h1[data-split] .line>span{display:block}
.js-fx .hero h1[data-split] .line>span{transform:translateY(105%);opacity:0}
.js-fx .hero h1[data-split].is-in .line>span{transform:none;opacity:1;transition:transform 1.05s cubic-bezier(.16,1,.3,1),opacity .8s ease}
.js-fx .hero h1[data-split].is-in .line:nth-child(2)>span{transition-delay:.13s}

/* ---------- tilt 3D ---------- */
.gallery__grid,.story__grid{perspective:1400px}
[data-tilt]{transform-style:preserve-3d;will-change:transform}
.js-fx [data-tilt].tilting{transition:transform 140ms ease-out}

/* ---------- revelação das figuras da galeria por clip-path ---------- */
.js-fx .gallery__grid figure[data-reveal] img{clip-path:inset(0 0 100% 0);transform:scale(1.14)}
.js-fx .gallery__grid figure[data-reveal].is-visible img{clip-path:inset(0 0 0 0);transform:scale(1);
  transition:clip-path 1.15s cubic-bezier(.16,1,.3,1),transform 1.5s cubic-bezier(.16,1,.3,1)}

/* ---------- header condensa ao rolar ---------- */
.js-fx .site-header{transition:background .4s,backdrop-filter .4s,border-color .4s,padding .4s}
.js-fx .site-header.condensed{background:rgba(5,5,5,.78);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}

/* ---------- brilho dourado varrendo os botões ---------- */
.button--gold{position:relative;overflow:hidden;isolation:isolate}
.button--gold::after{content:"";position:absolute;z-index:-1;inset:0;transform:translateX(-120%) skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent)}
.button--gold:hover::after{transform:translateX(120%) skewX(-18deg);transition:transform .85s cubic-bezier(.4,0,.2,1)}

/* ---------- equalizer acelera quando a seção entra ---------- */
.js-fx .equalizer i{animation-duration:1.4s}
.js-fx .equalizer.hot i{animation-duration:.62s}

/* ---------- foco visível (acessibilidade) ---------- */
:where(a,button,input,select,summary):focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ============================================================
   Menos movimento para quem pediu menos movimento.
   Nada aqui pode deixar conteúdo escondido.
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .cine-bars,.film-grain,.scroll-progress{display:none}
  .js-fx [data-parallax],.js-fx [data-drift]{transform:none!important}
  .js-fx .hero h1[data-split] .line>span{transform:none!important;opacity:1!important;transition:none!important}
  .js-fx .gallery__grid figure[data-reveal] img,
  .js-fx .gallery__grid figure[data-reveal].is-visible img{clip-path:none!important;transform:none!important;transition:none!important}
  .js-fx [data-tilt]{transform:none!important}
  .button--gold::after{display:none}
  .js-fx .site-header.condensed{backdrop-filter:none}
}