/* Head Filmes · Portfólio — identidade do Kit Head Filmes (sala escura, letterbox, timecode) */
:root{
  --tela:#0B0A09; --sala:#151311; --linha:#2B2723; --cinza:#8F887D;
  --pelicula:#F2F1E8; --play:#FFC736; --rec:#FB2E01;
  --display:"Oranienbaum","Bodoni Moda","Didot",serif;
  --texto:"Jost","Futura","Century Gothic","Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.1,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--tela);color:var(--pelicula);font:300 17px/1.6 var(--texto);overflow-x:hidden}
body.locked{overflow:hidden}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:.95;margin:0;text-wrap:balance}
h1 em,h2 em{font-style:normal;color:var(--play)}
p{margin:0}
.wrap{max-width:1360px;margin:0 auto;padding-inline:max(16px,4vw)}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--play)}
.tc{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--cinza);font-variant-numeric:tabular-nums;text-transform:uppercase}
.rec{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--rec);margin-right:8px;vertical-align:1px;animation:blink 1.6s steps(1) infinite}
@keyframes blink{50%{opacity:.15}}
.lede{font-size:clamp(17px,1.5vw,20px);color:#D9D4C7;max-width:46ch}

/* grão de filme */
.grain{position:absolute;inset:-50%;pointer-events:none;opacity:.10;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain .9s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* botões */
.btn{display:inline-flex;align-items:center;gap:12px;padding:14px 22px;font:500 14px var(--texto);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;transition:background .3s,color .3s,border-color .3s}
.btn.primary{background:var(--play);color:#000}
.btn.primary:hover{background:var(--pelicula)}
.btn.ghost{border:1px solid rgba(242,241,232,.35)}
.btn.ghost:hover{border-color:var(--play);color:var(--play)}
.tri{width:0;height:0;border-left:11px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent}

/* ABERTURA */
.intro{position:fixed;inset:0;z-index:100;background:#000;display:grid;place-items:center;align-content:center;gap:22px;transition:opacity .9s var(--ease),visibility .9s}
.intro img{width:min(340px,62vw);opacity:0;animation:introIn 1.1s .15s var(--ease) forwards}
.intro .tc{opacity:0;animation:introIn .8s .55s var(--ease) forwards}
@keyframes introIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.intro.out{opacity:0;visibility:hidden}

/* TOPO */
.top{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;gap:32px;padding:18px max(16px,4vw);transition:background .4s,padding .4s}
.top.solid{background:rgba(11,10,9,.86);backdrop-filter:blur(12px);padding-block:12px;border-bottom:1px solid var(--linha)}
.brand img{height:34px;width:auto}
.top nav{display:flex;gap:28px;margin-left:auto}
.top nav a{text-decoration:none;font:400 13px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#D9D4C7}
.top nav a:hover{color:var(--play)}
.top .live{color:var(--pelicula)}
@media (max-width:760px){.top nav{display:none}.top .live{margin-left:auto}.brand img{height:28px}}

/* luz ambiente: o próprio filme, minúsculo e desfocado, vazando para a sala */
.ambient{position:absolute;inset:-12%;width:124%;height:124%;filter:blur(70px) saturate(1.5) brightness(.8);opacity:.75;pointer-events:none;transition:opacity 1.2s}
.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 60% 50%,transparent 35%,rgba(0,0,0,.85) 100%)}
.letterbox{position:absolute;left:0;right:0;height:9vh;background:#000;z-index:4;transition:transform 1.6s var(--ease)}
.letterbox.top-bar{top:0}
.letterbox.bottom-bar{bottom:0}
body:not(.ready) .showcase .letterbox{transform:scaleY(5.6)}
.showcase .letterbox.top-bar{transform-origin:top}
.showcase .letterbox.bottom-bar{transform-origin:bottom}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.hero-meta{position:absolute;z-index:5;left:0;right:0;bottom:0;height:9vh;display:flex;align-items:center;justify-content:space-between;color:var(--cinza)}

/* EM CARTAZ */
.showcase{position:relative;height:100svh;min-height:640px;overflow:hidden;background:#000;isolation:isolate}
.sc-stage{position:absolute;z-index:2;top:9vh;bottom:9vh;right:max(16px,8vw);aspect-ratio:9/16;background:#000;box-shadow:0 40px 120px rgba(0,0,0,.6)}
.sc-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s var(--ease)}
.sc-stage video.on{opacity:1}
.sc-copy{position:absolute;z-index:3;left:0;right:0;top:50%;transform:translateY(-50%);display:grid;gap:18px;pointer-events:none}
.sc-copy>*{max-width:min(620px,52vw);pointer-events:auto}
.sc-tag{color:var(--pelicula)}
.showcase h1{font-size:clamp(56px,8.4vw,136px);text-shadow:0 4px 40px rgba(0,0,0,.5)}
.sc-client{font:400 14px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--play)}
.sc-copy .swap{transition:opacity .6s var(--ease),transform .6s var(--ease)}
.sc-copy.out .swap{opacity:0;transform:translateY(14px)}
body:not(.ready) .sc-copy{opacity:0}
.sc-copy{transition:opacity 1.2s .3s}
.sc-rail{position:absolute;z-index:5;left:0;right:0;bottom:calc(9vh + 20px);display:flex;gap:14px;list-style:none;margin:0 auto;padding-top:0}
.sc-rail li{flex:0 1 220px;display:grid;gap:8px;cursor:pointer;opacity:.55;transition:opacity .3s}
.sc-rail li.on,.sc-rail li:hover{opacity:1}
.sc-rail .bar{height:2px;background:rgba(242,241,232,.25);position:relative;overflow:hidden}
.sc-rail .bar i{position:absolute;inset:0;background:var(--play);transform-origin:left;transform:scaleX(0)}
.sc-rail span{font:400 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:900px){
  .sc-stage{inset:0;right:0;aspect-ratio:auto;box-shadow:none}
  .sc-stage .corner{display:none}
  .showcase .vignette{background:linear-gradient(180deg,rgba(0,0,0,.4) 0%,transparent 30%,transparent 45%,rgba(0,0,0,.92) 88%)}
  .sc-copy{top:auto;bottom:calc(9vh + 64px);transform:none}
  .sc-copy>*{max-width:100%}
  .showcase .lede{display:none}
  .showcase .hero-meta span:first-child{display:none}
}

/* ASSINATURA */
.statement{padding-block:clamp(110px,14vw,200px) clamp(40px,6vw,80px);display:grid;gap:26px}
.statement h2{font-size:clamp(38px,11vw,140px);max-width:14ch}
@media (max-width:600px){.statement h2{max-width:none}}
.reveal{opacity:0;transform:translateY(40px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ESTREIAS: cena presa na tela enquanto a rolagem empurra o filme para tela cheia */
.scene{position:relative;height:260vh}
.scene .sticky{position:sticky;top:0;height:100svh;overflow:hidden;background:#000;isolation:isolate}
.scene .ambient{opacity:calc(.25 + var(--p,0) * .6)}
.scene-stage{position:absolute;z-index:2;left:50%;top:50%;height:calc((58 + var(--p,0) * 42) * 1svh);aspect-ratio:9/16;transform:translate(-50%,-50%);background:#000;box-shadow:0 30px 120px rgba(0,0,0,.7)}
.scene-stage video,.scene-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scene-stage .corner{opacity:calc(1 - var(--p,0) * 1.4)}
.scene-n{position:absolute;z-index:1;left:max(16px,4vw);top:12vh;font:400 clamp(160px,26vw,420px)/.8 var(--display);color:var(--play);opacity:calc(.9 - var(--p,0) * 1.2);transform:translateY(calc(var(--p,0) * -80px))}
.scene-copy{position:absolute;z-index:3;left:max(16px,4vw);bottom:12vh;max-width:min(30vw,440px);display:grid;gap:14px;opacity:calc(1 - var(--p,0) * 2.2);transform:translateY(calc(var(--p,0) * -60px))}
.scene-copy h2{font-size:clamp(46px,5.6vw,92px)}
.scene-copy .lede{color:#D9D4C7}
.scene-spec{position:absolute;z-index:3;right:max(16px,4vw);bottom:12vh;width:260px;margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font:400 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;border-top:1px solid var(--linha);padding-top:16px;opacity:calc(1 - var(--p,0) * 2.2)}
.scene-spec dt{color:var(--cinza)}
.scene-spec dd{margin:0}
.scene-end{position:absolute;z-index:4;left:0;right:0;bottom:6vh;display:flex;justify-content:center;opacity:calc((var(--p,0) - .7) * 4);pointer-events:none}
.scene.full .scene-end{pointer-events:auto}
.scene-sound{position:absolute;z-index:4;right:max(16px,4vw);top:12vh}
@media (max-width:900px){
  .scene{height:220vh}
  .scene-stage{height:calc((62 + var(--p,0) * 38) * 1svh);max-width:calc(60vw + var(--p,0) * 40vw)}
  .scene-copy{max-width:none;right:max(16px,4vw);bottom:8vh}
  .scene-copy .lede{display:none}
  .scene-spec{display:none}
  .scene-n{top:9vh;font-size:clamp(120px,40vw,220px)}
}

/* cursor de projeção */
.cursor{position:fixed;z-index:200;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--play);pointer-events:none;display:grid;place-items:center;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),opacity .3s;opacity:0;mix-blend-mode:normal}
.cursor span{font:500 11px var(--mono);letter-spacing:.14em;color:#000;opacity:0;transition:opacity .2s}
.cursor.on{opacity:1}
.cursor.big{width:84px;height:84px;margin:-42px 0 0 -42px}
.cursor.big span{opacity:1}
@media (hover:none){.cursor{display:none}}

/* acervo */
.acervo-head{padding-top:clamp(96px,12vw,160px);display:grid;gap:18px}
.acervo-head h2{font-size:clamp(56px,8vw,128px)}
.card .new{position:absolute;z-index:2;top:12px;right:12px;font:500 11px var(--mono);letter-spacing:.14em;background:var(--rec);color:#fff;padding:4px 8px}

/* NÚMEROS */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);margin-top:0}
.stats>div{padding:34px 24px 30px 0;display:grid;gap:6px}
.stats>div+div{padding-left:24px;border-left:1px solid var(--linha)}
.stats b{font:400 clamp(40px,5vw,64px)/1 var(--display)}
.stats b small{font-size:.45em;margin-left:4px;color:var(--cinza)}
.stats span{font-size:14px;color:var(--cinza)}
@media (max-width:820px){.stats{grid-template-columns:1fr 1fr}.stats>div:nth-child(3){padding-left:0;border-left:0}.stats>div:nth-child(n+3){border-top:1px solid var(--linha)}}

/* CAPÍTULOS */
.chapter{padding-block:clamp(72px,10vw,128px) 0}
.ch-head{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:16px 40px;align-items:end;margin-bottom:44px}
.ch-n{font:400 clamp(64px,9vw,128px)/.8 var(--display);color:var(--play)}
.ch-head h2{font-size:clamp(40px,5.4vw,76px)}
.ch-head p{color:var(--cinza);max-width:44ch}
@media (max-width:900px){.ch-head{grid-template-columns:auto minmax(0,1fr)}.ch-head p{grid-column:1/-1}}

.grid-h{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid-h .card.wide{grid-column:1/-1}
.grid-h .card.wide .frame{aspect-ratio:2.39/1}
@media (max-width:700px){.grid-h{grid-template-columns:1fr}.grid-h .card.wide .frame{aspect-ratio:16/9}}

.strip{display:flex;gap:16px;margin-top:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:thin;scrollbar-color:var(--linha) transparent}
.strip .card{flex:0 0 clamp(220px,23vw,320px);scroll-snap-align:start}
.strip .note{flex:1 1 260px;min-width:240px;align-self:stretch;border:1px solid var(--linha);padding:28px;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.strip .note q{font:400 clamp(28px,2.6vw,38px)/1.05 var(--display);quotes:none}
.strip .note q em{font-style:normal;color:var(--play)}

/* CARD */
.card{position:relative;display:grid;gap:14px;text-align:left;cursor:pointer;min-width:0}
.card .frame{position:relative;overflow:hidden;background:#000;aspect-ratio:16/9}
.card.v .frame{aspect-ratio:9/16}
.card img,.card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease),opacity .6s}
.card video{opacity:0}
.card.playing video{opacity:1}
.card:hover img,.card:hover video,.card:focus-visible img{transform:scale(1.04)}
.card .frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.65));pointer-events:none}
.card .badge{position:absolute;z-index:2;top:12px;left:12px;font:500 11px var(--mono);letter-spacing:.12em;background:rgba(0,0,0,.6);padding:4px 8px;backdrop-filter:blur(6px)}
.card .dur{position:absolute;z-index:2;right:12px;bottom:12px;font:500 12px var(--mono);font-variant-numeric:tabular-nums}
.card .hint{position:absolute;z-index:2;left:12px;bottom:12px;display:flex;align-items:center;gap:10px;font:500 11px var(--mono);letter-spacing:.14em;color:var(--play);opacity:0;transform:translateY(6px);transition:.4s var(--ease)}
.card:hover .hint,.card:focus-visible .hint{opacity:1;transform:none}
.card .hint .tri{border-left-width:9px;border-top-width:6px;border-bottom-width:6px}
.card .corner{opacity:0;transition:opacity .4s}
.card:hover .corner,.card:focus-visible .corner{opacity:1}
.card .meta{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.card .meta h3{font-size:clamp(24px,2vw,30px)}
.card .meta .tc{white-space:nowrap}
.card .client{font-size:14px;color:var(--cinza);margin-top:-8px}
.card:focus-visible{outline:2px solid var(--play);outline-offset:4px}

/* cantos de visor */
.corner{position:absolute;z-index:3;width:22px;height:22px;border:2px solid var(--play);pointer-events:none}
.corner.tl{top:10px;left:10px;border-width:2px 0 0 2px}
.corner.br{bottom:10px;right:10px;border-width:0 2px 2px 0}

/* O OLHAR */
.manifesto{padding-block:clamp(96px,12vw,160px);display:grid;gap:28px}
.manifesto h2{font-size:clamp(44px,6.4vw,96px);max-width:16ch}
.pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:40px}
.pillars>div{background:var(--sala);padding:28px 24px;display:grid;gap:12px;align-content:start}
.pillars .k{font:400 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--play)}
.pillars h3{font-size:30px}
.pillars p{color:#C9C3B6;font-size:16px}
@media (max-width:980px){.pillars{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pillars{grid-template-columns:1fr}}

/* CONTATO */
.contact{position:relative;background:radial-gradient(90% 120% at 50% 100%,#2a2016 0%,var(--tela) 65%);padding-block:clamp(120px,14vw,200px);text-align:center;overflow:hidden}
.contact .letterbox.static{height:56px}
.contact-in{display:grid;justify-items:center;gap:22px}
.contact h2{font-size:clamp(64px,12vw,180px)}
.contact .hero-cta{justify-content:center}
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-block:40px 56px;border-top:1px solid var(--linha)}
.foot img{height:30px;width:auto}

/* SALA DE PROJEÇÃO */
.theater{position:fixed;inset:0;z-index:50;background:#000;display:grid;grid-template-rows:minmax(0,1fr) auto;opacity:0;transition:opacity .5s var(--ease)}
.theater.on{opacity:1}
.theater[hidden]{display:none}
.th-grain{opacity:.05}
.theater .ambient{opacity:.55}
.theater .th-body,.theater .th-controls{z-index:2}
.th-close{position:absolute;z-index:5;top:18px;right:max(16px,3vw);font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#D9D4C7;display:flex;gap:10px;align-items:center}
.th-close:hover{color:var(--play)}
kbd{font:inherit;border:1px solid var(--linha);padding:2px 6px;color:var(--cinza)}
.th-body{position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(24px,4vw,64px);padding:64px max(16px,3vw) 8px;min-height:0}
.th-stage{position:relative;background:#000;flex:0 1 auto;display:grid;place-items:center;max-height:100%}
.th-stage video{width:100%;height:100%;object-fit:contain;background:#000}
.theater.h .th-stage{width:min(100%,calc((100svh - 160px)*16/9));aspect-ratio:16/9}
.theater.v .th-stage{height:calc(100svh - 160px);aspect-ratio:9/16}
.th-bigplay{position:absolute;z-index:4;width:84px;height:84px;border-radius:50%;background:var(--play);color:#000;display:grid;place-items:center;transition:opacity .3s,transform .3s}
.th-bigplay .tri{border-left-width:24px;border-top-width:15px;border-bottom-width:15px;margin-left:6px}
.th-bigplay:hover{transform:scale(1.06)}
.theater.is-playing .th-bigplay{opacity:0;pointer-events:none;transform:scale(.9)}
.th-buffer{position:absolute;z-index:4;width:44px;height:44px;border:2px solid rgba(242,241,232,.2);border-top-color:var(--play);border-radius:50%;animation:spin .9s linear infinite;opacity:0;pointer-events:none}
.theater.waiting .th-buffer{opacity:1}
@keyframes spin{to{transform:rotate(360deg)}}
.th-info{flex:0 0 300px;display:grid;gap:18px;align-content:center}
.theater.h .th-info{display:none}
.th-info .eyebrow{color:var(--play)}
.th-info h2{font-size:clamp(40px,3.6vw,60px)}
.th-info .client{color:#D9D4C7}
.th-info dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:8px 0 0;font:400 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;border-top:1px solid var(--linha);padding-top:18px}
.th-info dt{color:var(--cinza)}
.th-info dd{margin:0}
.th-title-h{position:absolute;z-index:4;left:max(16px,3vw);top:18px;display:flex;gap:16px;align-items:baseline}
.th-title-h b{font:400 26px var(--display)}
.theater.v .th-title-h{display:none}
@media (max-width:900px){
  .th-info{display:none}
  .theater.v .th-stage{height:auto;width:min(100%,calc((100svh - 150px)*9/16))}
  .theater.v .th-title-h{display:flex}
}
.th-controls{position:relative;z-index:4;display:flex;align-items:center;gap:16px;padding:14px max(16px,3vw) max(18px,env(safe-area-inset-bottom));background:linear-gradient(0deg,#000 40%,transparent)}
.th-controls button{font-size:22px;line-height:1;color:#D9D4C7;padding:6px}
.th-controls button:hover{color:var(--play)}
.th-controls button.tc{font-size:11px;letter-spacing:.12em;border:1px solid var(--linha);padding:7px 10px}
.cplay{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:var(--pelicula);color:#000!important}
.cplay .tri{margin-left:3px}
.theater.is-playing .cplay .tri{width:12px;height:14px;border:0;border-left:4px solid #000;border-right:4px solid #000;margin:0}
#cTime{min-width:118px;color:var(--pelicula)}
.scrub{position:relative;flex:1;height:22px;cursor:pointer;touch-action:none}
.scrub::before,.scrub .buf,.scrub .prog{content:"";position:absolute;left:0;top:10px;height:2px;background:var(--linha);right:0}
.scrub .buf{right:auto;width:0;background:#4a443d}
.scrub .prog{right:auto;width:0;background:var(--play)}
.scrub .knob{position:absolute;top:5px;left:0;width:12px;height:12px;margin-left:-6px;background:var(--play);border-radius:50%;transform:scale(0);transition:transform .2s}
.scrub:hover .knob,.scrub.drag .knob{transform:scale(1)}
.theater.idle{cursor:none}
.theater .th-controls,.theater .th-close,.theater .th-title-h{transition:opacity .5s}
.theater.idle .th-controls,.theater.idle .th-close,.theater.idle .th-title-h{opacity:0}
@media (max-width:600px){#cMute,#cPrev,#cNext{display:none}#cTime{min-width:0;font-size:11px}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}