@font-face{font-family:"Booton";src:url("../assets/fonts/Booton-TRIAL-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Booton";src:url("../assets/fonts/Booton-TRIAL-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Booton";src:url("../assets/fonts/Booton-TRIAL-Medium.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  --bg:#000;--fg:#fff;--muted:rgba(255,255,255,.5);--line:rgba(255,255,255,.2);--ph:#232323;
  --pad:16px;--gap:16px;
}
*{box-sizing:border-box;margin:0;padding:0;letter-spacing:-.01em}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font-family:"Booton",Helvetica,Arial,sans-serif;font-size:12px;letter-spacing:-.01em;line-height:1.4;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.page{padding:0 var(--pad)}

/* placeholders / images */
.ph{background:var(--ph);position:relative;overflow:hidden}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* header */
.header{display:grid;grid-template-columns:1fr 1fr;padding-top:16px;white-space:nowrap}
.header nav{display:flex;gap:24px}
.header .right{display:flex;justify-content:space-between;gap:24px}
.header .role{color:var(--muted);text-align:right}
.header a{transition:opacity .2s}
.header .nav-soon{cursor:default;user-select:none}
.header a:hover{opacity:.5}

/* section row */
.row{display:flex;justify-content:space-between;align-items:center;padding:24px 0;border-top:.5px solid var(--line)}
.row>*{flex:1}
.row>*:last-child{text-align:right}
.row.split>*:last-child{text-align:left}
.section{display:flex;flex-direction:column;gap:150px}
.stack{display:flex;flex-direction:column;gap:351px}
.muted-hidden{color:transparent}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:end}
.grid2.work-grid{row-gap:150px;align-items:start}
.card{display:flex;flex-direction:column;gap:27px}
.card .ph{aspect-ratio:2880/1800;width:100%}
.card .ph img{transition:transform .6s ease}
.card:hover .ph img{transform:scale(1.03)}
.card.soon{cursor:default}
.card.soon:hover .ph img{transform:none}
.card-info{display:flex;flex-direction:column;gap:2px}
.card-tags{opacity:.5}
.soon-badge{position:absolute;top:12px;right:12px;height:24px;padding:0 10px;display:flex;align-items:center;border-radius:70px;background:rgba(255,255,255,.1);font-weight:600;font-size:10px;letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap}

/* handle */
.handle{font-weight:600;font-size:15.81vw;letter-spacing:-.01em;white-space:nowrap;line-height:normal;margin-left:-.02em}

/* ===== home ===== */
.home{display:flex;flex-direction:column;gap:150px;padding-bottom:16px}
.home-intro{display:grid;grid-template-columns:1fr 1fr}
.home-intro p{font-size:16px;padding-right:117px}
.home-main{display:flex;flex-direction:column;gap:150px}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.slider{width:100%;aspect-ratio:16/9}
.slider .slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease;background:var(--ph)}
.slider .slide.active{opacity:1}
.slider .slide img,.slider .slide video{width:100%;height:100%;object-fit:cover;display:block}

.services{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.services .ph{height:692px}
.services-image .layer{position:absolute;inset:0;opacity:0;transition:opacity .35s ease;background:var(--ph)}
.services-image .layer.active{opacity:1}
.services-image .layer img,.services-image .layer video{width:100%;height:100%;object-fit:cover;display:block}
.services ul{list-style:none}
.services li{display:flex;justify-content:space-between;align-items:center;padding:24px 0;border-bottom:.5px solid var(--line);transition:padding .3s ease,opacity .3s}
.services li span:first-child{font-size:24px;letter-spacing:-.01em}
.services ul:hover li{opacity:.4}
.services ul li:hover{opacity:1;padding-left:12px}

.feed{margin:0 calc(var(--pad)*-1);overflow:hidden;display:flex;align-items:flex-start}
.feed-track{display:flex;align-items:flex-start;gap:16px;padding-right:16px;flex:0 0 auto;animation:feed-scroll var(--feed-duration,60s) linear infinite;will-change:transform}
.feed:hover .feed-track{animation-play-state:paused}
.feed .ph{width:240px;flex:0 0 auto;display:block}
.feed .ph video,.feed .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@keyframes feed-scroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.feed-track{animation:none}.slider .slide{transition:none}}

.about-row{display:flex;padding:24px 0;border-top:.5px solid var(--line);min-height:552px}
.about-row>p{flex:1}
.about-row{min-height:0}
.about-row .text{width:50%;padding:150px 148px 0 0;display:flex;flex-direction:column;gap:36px;letter-spacing:-.01em}
.about-row .lead{font-size:44px}
.about-row .body{font-size:16px}
.about-row .body p+p{margin-top:1.4em}
.about-row .body a{text-decoration:underline}
.proj-top .home-footer{width:100%}
.home-footer{display:flex;justify-content:space-between;padding:24px 0;border-top:.5px solid var(--line)}
.home-footer>p{flex:0 0 50%}
.home-footer div{flex:1;display:flex;justify-content:space-between}
.home-footer div a:last-child{margin-left:auto}

/* ===== project ===== */
.proj-top{margin-top:20px;padding-bottom:16px;display:flex;flex-direction:column;gap:150px;align-items:flex-end}
.proj-title{width:50%;padding-right:235px;display:flex;flex-direction:column;gap:36px}
.proj-title h1{font-family:"Booton",Helvetica,Arial,sans-serif;font-weight:400;font-size:16px}
.proj-title p{font-size:16px}
.proj-hero{width:100%;aspect-ratio:16/10;align-self:stretch;view-transition-name:proj-hero}
.proj-hero.r169{aspect-ratio:16/9}
.proj-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.proj-top .row{width:100%;border-top:0;border-bottom:.5px solid var(--line)}
.proj-top .row>*:last-child{text-align:left}
.proj-body{width:100%;display:flex;flex-direction:column;gap:200px}
.shots{display:flex;flex-direction:column;gap:16px}
.shots .wide{aspect-ratio:2880/1800;width:100%}
.shots.r169 .wide{aspect-ratio:16/9}
.shots video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.shots .duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.shots .duo .ph{aspect-ratio:1/1}
.info{display:flex;padding:24px 0;border-top:.5px solid var(--line)}
.info>p{flex:1}
.info .col{flex:1;font-size:16px;letter-spacing:-.01em}
.info .col.text{width:50%;flex:0 0 50%;padding-right:148px}
.info .col p+p{margin-top:1.2em}
.info a{text-decoration:underline}
.info strong{font-weight:600}
.credits p{margin:0}
.others{display:flex;justify-content:space-between;padding:24px 0;border-top:.5px solid var(--line)}
.others>p{flex:0 0 50%}
.others .grid2{flex:1}
.others .card .ph{aspect-ratio:692/433}

@media (max-width:900px){
  :root{--pad:12px}
  .header{grid-template-columns:1fr;gap:12px}
  .header .right{justify-content:space-between}
  .header .role{display:none}
    .home,.home-main{gap:64px}
  .home-intro{grid-template-columns:1fr}
  .home-intro p{padding-right:0}
  .home-intro span{display:none}
  .about-row .text{width:100%;padding:48px 0 0}
  .about-row .lead{font-size:30px}
  .home-footer>p{flex:none}
  .home-footer{gap:24px}
  .section{gap:64px}
  .grid2{grid-template-columns:1fr}
  .grid2.work-grid{row-gap:64px}
  .services{grid-template-columns:1fr}
  .services .ph{height:320px}
  .feed .ph{width:160px}
  .about-row,.info,.others{flex-direction:column;gap:24px;min-height:0}
  .about-row .text,.info .col.text{width:100%;padding-right:0;flex:none}
  .proj-top{margin-top:96px;gap:64px}
  .proj-title{width:100%;padding-right:0}
  .proj-body{gap:96px}
  .shots .duo{grid-template-columns:1fr}
  .others>p{flex:none}
  .row.split>*{flex:1}
}

/* ===== password gate ===== */
html.locked .page{display:none}
#gate{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:var(--pad);z-index:10}
.gate-back{position:absolute;top:16px;left:var(--pad)}
.gate-form{width:min(360px,100%);display:flex;flex-direction:column;gap:16px}
.gate-form label{font-size:16px}
.gate-row{display:flex;border-bottom:.5px solid var(--fg)}
.gate-row input{flex:1;background:none;border:0;outline:0;color:var(--fg);font:inherit;font-size:16px;padding:12px 0;letter-spacing:-.01em}
.gate-row input::placeholder{color:var(--muted)}
.gate-row button{background:none;border:0;color:var(--fg);font:inherit;cursor:pointer;padding:0 0 0 16px}
.gate-row button:hover{opacity:.5}
.gate-error{color:var(--muted)}

[hidden]{display:none!important}

/* ===== transição entre páginas ===== */
@view-transition{navigation:auto}
::view-transition-group(root){animation-duration:.5s}
::view-transition-group(proj-hero){animation-duration:.7s;animation-timing-function:cubic-bezier(.65,0,.2,1)}
::view-transition-old(proj-hero),::view-transition-new(proj-hero){height:100%;object-fit:cover}
body{animation:page-in .6s cubic-bezier(.2,.7,.2,1) backwards}
@supports (view-transition-name:none){body{animation:none}}
body.leaving{opacity:0;transform:translateY(-8px);transition:opacity .35s ease,transform .35s ease;pointer-events:none}
@keyframes page-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){body{animation:none}body.leaving{transition:none}}

/* ===== reveal on scroll ===== */
html.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--reveal-delay,0s);will-change:opacity,transform}
html.js .reveal.in{opacity:1;transform:none}
/* imagens surgem suavemente quando terminam de carregar */
html.js .ph img{opacity:0;transition:opacity .8s ease,transform .6s ease}
html.js .ph img.loaded{opacity:1}
@media (prefers-reduced-motion:reduce){html.js .reveal,html.js .ph img{opacity:1;transform:none;transition:none}}

/* ===== scrollbar discreta ===== */
html{color-scheme:dark}
@supports selector(::-webkit-scrollbar){
  ::-webkit-scrollbar{width:6px;height:6px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:6px;transition:background .2s}
  ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.4)}
  ::-webkit-scrollbar-corner{background:transparent}
}
@supports not selector(::-webkit-scrollbar){
  html{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}
}