/* Abertura da landing JFS Solutions: palco fixo (sticky) com filmagens reais e o texto rolando
   por cima. O scroll (cinema.js) controla as variáveis:
   --harvest / --drone  visibilidade de cada filmagem
   --night              escurece e desfoca a colheita no capítulo de dados
   --data               camada de dados (grade, varredura, ondas, rótulos)
   --kb                 zoom lento ("Ken Burns") ao longo da abertura
   --focus              (por capítulo) entrada do texto */
/* overflow-x:hidden no body cria um contêiner de rolagem e desliga o sticky; clip corta igual sem isso. */
body{overflow-x:clip}
/* Lenis (rolagem com inércia): a rolagem nativa suave do site.css brigaria com ela. */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}
.lenis.lenis-stopped{overflow:clip}
.lenis.lenis-smooth iframe{pointer-events:none}
body:has([data-cinema]) .site-header{background:rgba(8,14,10,.88);border-color:rgba(255,255,255,.06);backdrop-filter:blur(14px)}

.cinema{--ink:#f4f7f3;--ink-2:#d5e0d7;--ink-3:#a9b8ad;--accent:#86efac;--line:rgba(255,255,255,.28);--gold:#f0c36b;
  position:relative;background:#0b100d;color:var(--ink)}

.cinema-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;z-index:0;
  background:#0b100d}

.cinema-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;will-change:opacity,transform}
.cinema-film--harvest{opacity:var(--harvest,1);object-position:38% 50%;
  transform:scale(calc(1.04 + var(--kb,0) * .07));
  filter:brightness(calc(1 - var(--night,0) * .62)) saturate(calc(1 - var(--night,0) * .45)) blur(calc(var(--night,0) * 3px))}
.cinema-film--drone{opacity:var(--drone,0);object-position:50% 30%;transform:scale(calc(1.02 + var(--drone,0) * .02))}

/* Véu para leitura: escurece a esquerda (texto) e a base. */
.cinema-shade{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(6,11,8,.9) 0%,rgba(6,11,8,.74) 32%,rgba(6,11,8,.2) 58%,rgba(6,11,8,0) 74%),
    linear-gradient(180deg,rgba(6,11,8,.35) 0,rgba(6,11,8,0) 22%,rgba(6,11,8,0) 72%,rgba(6,11,8,.7) 100%)}

/* Camada de dados: piso holográfico em perspectiva, varredura, ondas e rótulos. */
.cinema-data{position:absolute;inset:0;pointer-events:none;opacity:var(--data,0)}
.cinema-data:before{content:"";position:absolute;left:-20%;right:-20%;bottom:-30%;height:95%;
  background:
    repeating-linear-gradient(90deg,rgba(134,239,172,.16) 0 1px,transparent 1px 80px),
    repeating-linear-gradient(0deg,rgba(134,239,172,.16) 0 1px,transparent 1px 80px);
  transform:perspective(900px) rotateX(62deg);transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(0deg,#000 20%,transparent 85%);mask-image:linear-gradient(0deg,#000 20%,transparent 85%)}
.cinema-scan{position:absolute;top:0;bottom:0;left:0;width:18%;
  background:linear-gradient(90deg,transparent,rgba(134,239,172,.12),transparent);animation:scan 6s linear infinite}
@keyframes scan{from{transform:translateX(-30vw)}to{transform:translateX(110vw)}}
.cinema-ring{position:absolute;left:var(--x);top:var(--y);width:180px;height:180px;margin:-90px 0 0 -90px;border-radius:50%;
  border:1px solid rgba(134,239,172,.55);animation:ring 3.2s ease-out infinite;animation-delay:var(--delay,0s)}
@keyframes ring{from{transform:scale(.15);opacity:1}to{transform:scale(1.6);opacity:0}}
.cinema-tag{position:absolute;left:var(--x);top:var(--y);white-space:nowrap;transform:translate(-.4rem,-3.1rem);
  padding:.45rem .8rem .45rem 1.6rem;border-radius:999px;font-size:.8125rem;font-weight:600;color:#eafff0;
  background:rgba(8,22,16,.62);border:1px solid rgba(134,239,172,.36);backdrop-filter:blur(6px)}
.cinema-tag:before{content:"";position:absolute;left:.65rem;top:50%;width:.45rem;height:.45rem;margin-top:-.225rem;border-radius:50%;background:#6ef0a0;box-shadow:0 0 10px #6ef0a0}
.cinema-tag:after{content:"";position:absolute;left:.85rem;top:100%;width:1px;height:1.2rem;background:linear-gradient(#6ef0a0,rgba(110,240,160,0))}

.cinema-rail{position:absolute;right:clamp(16px,3vw,40px);top:50%;transform:translateY(-50%);z-index:2;display:flex;flex-direction:column;gap:.35rem}
.cinema-rail a{display:flex;align-items:center;justify-content:flex-end;gap:.7rem;padding:.35rem 0;font-size:.8125rem;font-weight:600;color:var(--ink-3);transition:color .3s}
.cinema-rail a span{opacity:0;transform:translateX(6px);transition:opacity .3s,transform .3s;text-shadow:0 0 10px rgba(6,11,8,.9)}
.cinema-rail a:hover span,.cinema-rail a:focus-visible span{opacity:1;transform:none}
.cinema-rail a:after{content:"";width:22px;height:1px;background:currentColor;transition:width .35s ease,background .35s}
.cinema-rail a:hover,.cinema-rail a.is-active{color:var(--ink)}
.cinema-rail a.is-active:after{width:44px;height:2px;background:var(--accent)}
.cinema-rail a:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}

.cinema-content{position:relative;z-index:1;margin-top:-100vh;margin-top:-100svh;pointer-events:none}
.cinema-content a,.cinema-content button{pointer-events:auto}
.cinema .hero{min-height:100vh;min-height:100svh;padding:120px 0 96px;background:transparent;display:flex;align-items:center}
.cinema .hero:before{display:none}
.cinema .hero .container,.cinema-chapter .container{width:min(1180px,calc(100% - 48px))}
.cinema .hero-copy{max-width:40rem;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.cinema .eyebrow{color:var(--accent)}
.cinema .hero h1{color:var(--ink);font-size:clamp(2.6rem,4.4vw,4.25rem)}
.cinema .hero h1 span{color:var(--gold)}
.cinema .hero-lead{color:var(--ink-2);max-width:32rem}
.cinema .microcopy{color:var(--ink-3)}
.cinema .button-ghost{background:rgba(255,255,255,.06);border-color:var(--line);color:var(--ink);backdrop-filter:blur(6px)}
.cinema .button-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5)}
.cinema-cue{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.6rem;font-size:.8125rem;font-weight:600;color:var(--ink-2)}
.cinema-cue:after{content:"";width:1px;height:38px;background:linear-gradient(var(--gold),transparent);transform-origin:top;animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0);opacity:1}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}

.cinema-chapter{min-height:160vh;display:flex;align-items:center}
.cinema-text{max-width:30rem;opacity:var(--focus,1);transform:translateY(calc((1 - var(--focus,1)) * 28px));will-change:opacity,transform;text-shadow:0 2px 26px rgba(0,0,0,.4)}
.cinema-kicker{display:inline-flex;align-items:center;gap:.7rem;margin:0 0 1.1rem;color:var(--gold);font-size:.9375rem;font-weight:700}
.cinema-kicker:before{content:"";width:28px;height:2px;border-radius:2px;background:currentColor}
.cinema-text h2{margin:0;color:var(--ink);font-size:clamp(2.125rem,3.9vw,3.25rem);line-height:1.06;letter-spacing:-.04em;text-wrap:balance}
.cinema-text p:not(.cinema-kicker){margin:1.25rem 0 0;color:var(--ink-2);font-size:1.0625rem;line-height:1.65;max-width:44ch}
.cinema-text .button{margin-top:2rem}

/* Desktop: a colheita é espelhada para a máquina ficar à direita, longe do texto;
   o drone (vertical) ocupa a metade direita em altura total, nítido, como tela dividida. */
@media (min-width:761px){
  .cinema-film--harvest{transform:scaleX(-1) scale(calc(1.04 + var(--kb,0) * .07))}
  .cinema-film--drone{left:auto;width:50%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%);mask-image:linear-gradient(90deg,transparent 0,#000 16%)}
}

@media (max-width:760px){
  .cinema-shade{background:linear-gradient(180deg,rgba(6,11,8,.55) 0%,rgba(6,11,8,.1) 30%,rgba(6,11,8,.15) 46%,rgba(6,11,8,.82) 70%,rgba(6,11,8,.95) 100%)}
  .cinema-rail{display:none}
  .cinema-cue{display:none}
  .cinema .hero{align-items:flex-end;padding:112px 0 56px}
  .cinema .hero .container,.cinema-chapter .container{width:calc(100% - 32px)}
  .cinema-chapter{min-height:150vh;align-items:flex-start;padding-top:56vh;padding-top:56svh}
  .cinema-text h2{font-size:2rem}
  .cinema-text p:not(.cinema-kicker){font-size:1rem}
  .cinema-tag{font-size:.75rem}
  .cinema-tag--2,.cinema-tag--3,.cinema-ring--3{display:none}
}
@media (prefers-reduced-motion:reduce){
  .cinema-film--harvest{transform:none}
  .cinema-scan,.cinema-ring,.cinema-cue:after{animation:none}
  .cinema-ring{opacity:.5}
  .cinema-text{transform:none}
}
@media (prefers-reduced-motion:reduce) and (min-width:761px){
  .cinema-film--harvest{transform:scaleX(-1)}
}