/* ==========================================================================
   Vinicius Araujo — Portfolio
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Syncopate:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@700;800&display=swap");

:root{
  --bg:#fff;--grey:#f7f7f7;--ink:#000;--muted:#767676;
  --gx:clamp(.75rem,1.1vw,1rem);
  --ease:cubic-bezier(.2,.8,.2,1);
  --sans:"Inter Tight","Helvetica Neue",Arial,sans-serif;
  --mono:"DM Mono",ui-monospace,monospace;
  --display:"Archivo Black",Impact,sans-serif;
  --brand:"Syncopate","Archivo Black",sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
html{scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 .75rem/1.45 var(--mono);text-transform:uppercase;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
p,ul,figure{margin:0}
ul{list-style:none;padding:0}
img{display:block;max-width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Skip link */
.skip{position:absolute;left:var(--gx);top:-3rem;z-index:9000;background:var(--ink);color:#fff;padding:.6rem 1rem;border-radius:999px;transition:top .2s}
.skip:focus{top:.75rem}

/* Header ------------------------------------------------------------------ */
.bar{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding:1rem var(--gx) 1.5rem;background:var(--bg);font:500 clamp(1rem,1.45vw,1.45rem)/1.2 var(--sans);letter-spacing:-.01em;text-transform:none}
.bar nav{justify-self:end;text-align:right}

/* Hero -------------------------------------------------------------------- */
.first{min-height:100svh;display:flex;flex-direction:column}
.hero{position:relative;flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--gx) clamp(.25rem,.6vw,.5rem);overflow:hidden;min-height:60vh}
.hero h1{margin:0;flex:none;align-self:flex-start;display:inline-block;font:700 100px/.86 var(--brand);letter-spacing:-.04em;text-transform:uppercase;white-space:nowrap}
.hero h1 .ln{display:inline-block;vertical-align:top;overflow:hidden;padding:.06em 0 .05em;margin:-.06em 0 -.05em}
.hero h1 .c{display:inline-block;transform:translateY(112%);transition:transform 1.15s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i)*55ms + 250ms)}
.hero h1.in .c{transform:none}

/* Subtitle reveal */
.sub{padding:0 var(--gx) clamp(1.8rem,4vw,3.2rem)}
.sub p{text-align:center;font:500 clamp(1.08rem,2.59vw,2.59rem)/1.1 var(--sans);letter-spacing:-.02em;text-transform:none}
.sub .w{display:inline-block;white-space:nowrap;overflow:hidden;vertical-align:top;padding:.1em 0;margin:-.1em 0}
.sub .c{display:inline-block;will-change:transform}
.sub .tm{display:inline-block;vertical-align:top;font-size:.34em;line-height:1.2;margin-left:.15em}

/* Carousel ---------------------------------------------------------------- */
.car{position:relative;flex:1;min-height:240px;margin:0 calc(-1*var(--gx));perspective:1300px;cursor:default;touch-action:pan-y;user-select:none;-webkit-user-select:none;overflow:hidden;outline-offset:-3px}
.car .it{position:absolute;left:0;top:0;background:var(--grey) center/cover no-repeat;will-change:transform;backface-visibility:hidden;-webkit-user-drag:none}
@media (hover:none){.cur{display:none}}
.cur{position:absolute;left:0;top:0;z-index:6000;pointer-events:none;opacity:0;transition:opacity .25s;will-change:transform}
.cur span{display:flex;align-items:center;gap:.8rem;background:#000;color:#fff;padding:.65rem 1.05rem;border-radius:999px;font-size:.72rem;white-space:nowrap;transform:translate(-50%,-50%);transition:gap .4s var(--ease),padding .4s var(--ease)}
.cur em{display:inline-block;max-width:6rem;overflow:hidden;font-style:normal;transition:max-width .4s var(--ease),opacity .25s}
.cur svg{flex:none;display:block}
.car.over .cur{opacity:1}
.car.drag .cur span{gap:.5rem;padding:.65rem .9rem}
.car.drag .cur em{max-width:0;opacity:0}
.prog{display:none;position:absolute;left:50%;bottom:.6rem;transform:translateX(-50%);width:clamp(120px,22vw,300px);height:9px;background:repeating-linear-gradient(90deg,#c4c4c4 0 1px,transparent 1px 6px);pointer-events:none;z-index:5000}
.prog i{position:absolute;left:0;top:0;bottom:0;width:0;background:repeating-linear-gradient(90deg,#000 0 1px,transparent 1px 6px)}

/* Works grid -------------------------------------------------------------- */
.works{position:relative;padding:0 var(--gx);overflow:hidden}
.works+.works{margin-top:clamp(2rem,5vw,4rem)}
.sect{font:inherit;margin:1.1rem 0 .8rem calc(50% + 2.5px)}
.row{display:grid;grid-template-columns:repeat(12,1fr);column-gap:6px;align-items:end;margin-top:6px}
.ph{position:relative;width:100%;overflow:hidden;background:var(--grey);transition:transform .6s var(--ease),opacity .4s,filter .4s}
.ph img{width:100%;height:100%;object-fit:cover}
.ph picture{display:contents}
@media (hover:hover){
  .ph:hover{transform:scale(1.05);z-index:1}
  .works:has(.ph:hover) .ph:not(:hover){opacity:.35;filter:grayscale(1)}
}
.lab{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(1rem,4vw,3.5rem) .6rem 0 .3rem;min-width:0}
.lab h3{margin:0;font:inherit}
.lab em{display:block;font-style:normal;color:var(--muted)}

/* About / contact --------------------------------------------------------- */
.grey{background:var(--grey);padding:clamp(1.5rem,2.2vw,2rem) clamp(1rem,2vw,1.75rem);margin-top:6px}
.cols{display:grid;grid-template-columns:31% 33% 19% 1fr;gap:1rem}
.cols.b{align-items:end}
.cols .end{text-align:right}
.clients{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:0 1rem;margin-top:clamp(1.75rem,3.5vw,3rem)}
.big{margin:clamp(3rem,11vw,10rem) 0;text-align:center;font:400 clamp(9rem,36vw,40rem)/.8 var(--display);letter-spacing:-.03em;text-transform:uppercase}
.foot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1rem var(--gx) 1.25rem;color:var(--muted)}

/* Video in the grid */
.ph video{display:block;width:100%;height:100%;object-fit:cover;background:var(--grey)}
.bar nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:4px}

/* Project cards (home, Works / Art / Lab) ------------------------------------ */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,2.4vw,2.5rem) 6px;padding:0 var(--gx)}
.card{display:block;min-width:0}
.card:hover{text-decoration:none}
.cv{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--grey)}
.cv img,.cv video{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.cv picture{display:contents}
.card-t{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.7rem .1rem 0}
.card-t h2,.card-t h3{margin:0;font:500 clamp(1rem,1.35vw,1.35rem)/1.15 var(--sans);letter-spacing:-.01em;text-transform:none}
.card-t p{color:var(--muted);text-align:right;white-space:nowrap}
.cards .card{transition:opacity .4s}
@media (hover:hover){
  .card:hover .cv img,.card:hover .cv video{transform:scale(1.04)}
  .cards:has(.card:hover) .card:not(:hover){opacity:.45}
}

/* Home: selected works */
.feat{padding-top:clamp(1rem,3vw,2.5rem)}
.feat-h{display:flex;justify-content:space-between;align-items:baseline;padding:0 var(--gx);margin:1.1rem 0 .8rem}
.feat-h .sect{margin:0 0 0 calc(50% + 2.5px)}
.feat .cards{grid-template-columns:repeat(4,minmax(0,1fr))}
.feat+.grey,.feat-grid+.grey{margin-top:clamp(3rem,7vw,6rem)}
.feat-grid .feat-h{padding:0}
.feat-grid .lab h3 a:hover{text-decoration:none;opacity:.6}
.feat-grid .lab .go{display:block;margin-top:.9rem;color:var(--ink)}
.ph[data-href]{cursor:pointer}

/* Category pages ------------------------------------------------------------- */
.cat-head{padding:clamp(2rem,6vw,5rem) var(--gx) clamp(2rem,4vw,3.5rem)}
.cat-title{margin:0;font:400 clamp(5rem,22vw,24rem)/.8 var(--display);letter-spacing:-.04em;text-transform:uppercase;margin-left:-.04em}
.cat-intro{max-width:34ch;margin-top:clamp(1.25rem,2.5vw,2rem);margin-left:calc(50% + 2.5px);font:500 clamp(1.05rem,1.7vw,1.6rem)/1.2 var(--sans);letter-spacing:-.015em;text-transform:none}
.cat .cards{grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(1.25rem,2vw,2rem) 6px;padding-bottom:clamp(3rem,8vw,7rem)}
.cat .card-t h2{font-size:clamp(.95rem,1.1vw,1.15rem)}
.cat .card-t{flex-direction:column;gap:.2rem;padding-top:.55rem}
.cat .card-t p{text-align:left;white-space:normal}
@media (max-width:1400px){.cat .cards{grid-template-columns:repeat(4,minmax(0,1fr))}}
.empty{padding:0 var(--gx) clamp(4rem,10vw,8rem);color:var(--muted)}
.cards:has(.card)~.empty{display:none}

/* Project pages -------------------------------------------------------------- */
.proj-head{padding:clamp(1.5rem,4vw,3.5rem) var(--gx) clamp(2rem,4vw,3.5rem)}
.crumb{margin-bottom:.6rem;color:var(--muted)}
.proj-title{margin:0;font:400 clamp(3rem,11vw,13rem)/.85 var(--display);letter-spacing:-.035em;text-transform:uppercase;margin-left:-.03em;overflow-wrap:anywhere}
.proj-info{display:grid;grid-template-columns:repeat(12,1fr);column-gap:6px;margin-top:clamp(1.5rem,3vw,2.5rem)}
.proj-intro{grid-column:1/8;max-width:38ch;font:500 clamp(1.05rem,1.7vw,1.6rem)/1.2 var(--sans);letter-spacing:-.015em;text-transform:none}
.proj-meta{grid-column:9/13;margin:0;display:grid;grid-template-columns:max-content 1fr;gap:.5rem 1rem;align-content:start}
.proj-meta div{grid-column:1/-1;grid-template-columns:subgrid!important}
.proj-meta div{display:grid;grid-template-columns:minmax(7rem,max-content) 1fr;gap:1rem;border-top:1px solid #e6e6e6;padding-top:.5rem}
.proj-meta dt{color:var(--muted)}
.proj-meta dd{margin:0}
/* Cover + editorial scattered grid. main.js places masked images on 12 columns with white space; this flex rule is the no-JS fallback. */
.proj-cover{padding:0 var(--gx)}
.proj-cover .ph{width:100%;max-height:600px}
.mosaic{display:flex;flex-wrap:wrap;gap:1px;padding:clamp(2.5rem,6vw,6.5rem) var(--gx) 0}
.mosaic>.ph{flex:var(--ar,1.5) 1 calc(var(--ar,1.5)*clamp(160px,24vw,380px));aspect-ratio:var(--ar,1.5);width:auto;min-width:0}
.mosaic.is-laid{display:block;position:relative}
.mosaic.is-laid>.ph{position:absolute;flex:none;aspect-ratio:auto;margin:0}
.mosaic .ph::before,.mosaic .ph::after{position:absolute;bottom:.55rem;z-index:2;color:#fff;font:400 .62rem/1.2 var(--mono);text-transform:uppercase;letter-spacing:.02em;text-shadow:0 0 8px rgba(0,0,0,.35);pointer-events:none}
.mosaic .ph::before{content:attr(data-cap);left:.6rem;right:3rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mosaic .ph::after{content:attr(data-n);right:.6rem}
.mosaic .ph[data-small]::before{display:none}
.mosaic>.ph:last-child{flex-grow:1}
.proj-cover .ph:hover,.mosaic .ph:hover{transform:none}
.gallery .row{margin-top:6px}
.gallery .row:first-child{margin-top:0}
.proj-nav{display:flex;justify-content:space-between;gap:1rem;padding:clamp(3rem,8vw,7rem) var(--gx) clamp(2rem,4vw,3rem)}
.proj-nav a{display:flex;flex-direction:column;gap:.4rem;max-width:48%}
.proj-nav a:hover{text-decoration:none}
.proj-nav .next{text-align:right;margin-left:auto}
.proj-nav span{color:var(--muted)}
.proj-nav strong{font:400 clamp(1.6rem,4vw,4rem)/.9 var(--display);letter-spacing:-.03em;text-transform:uppercase;transition:opacity .3s}
.proj-nav a{position:relative;padding:.7rem .9rem;margin:-.7rem -.9rem;transition:background-color .2s,color .2s}
.proj-nav a:hover{background:#000;color:#fff;z-index:6}
.proj-nav a:hover span{color:#bdbdbd}
.pn-thumb{position:absolute;bottom:calc(100% + 14px);left:.9rem;width:clamp(170px,17vw,300px);aspect-ratio:4/5;overflow:hidden;background:var(--grey);
  pointer-events:none;opacity:0;transform:translate(var(--mx,0px),12px) scale(.9);transform-origin:bottom left;
  transition:opacity .22s ease,transform .6s cubic-bezier(.16,1,.3,1);box-shadow:0 24px 50px -20px rgba(0,0,0,.4)}
.proj-nav .next .pn-thumb{left:auto;right:.9rem;transform-origin:bottom right}
.pn-thumb :is(img,video){display:block;width:100%;height:100%;object-fit:cover}
.proj-nav a:hover .pn-thumb{opacity:1;transform:translate(var(--mx,0px),0) scale(1)}
@media (hover:none){.pn-thumb{display:none}}

/* Project page animations (only when JS adds .js-anim; off for reduced motion and in the editor).
   Hidden states apply instantly; transitions live on the "revealed" selectors. */
:root{--reveal:cubic-bezier(.77,0,.18,1);--soft:cubic-bezier(.16,1,.3,1)}
.js-anim .proj-title .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.06em 0 .04em;margin:-.06em 0 -.04em}
.js-anim .proj-title .c{display:inline-block;transform:translateY(108%)}
.anim-ready .proj-title .c{transform:none;transition:transform 1.1s var(--soft) calc(var(--i)*32ms + .1s)}
.js-anim .crumb,.js-anim .proj-intro,.js-anim .proj-meta>div{opacity:0;transform:translateY(18px)}
.anim-ready .crumb,.anim-ready .proj-intro,.anim-ready .proj-meta>div{opacity:1;transform:none;transition:opacity .9s ease var(--d,0s),transform 1s var(--soft) var(--d,0s)}
/* capa: cortina + zoom out */
.js-anim .proj-cover .ph{clip-path:inset(0 0 100% 0)}
.anim-ready .proj-cover .ph{clip-path:inset(0);transition:clip-path 1.4s var(--reveal) .55s}
.js-anim .proj-cover .ph :is(img,video){scale:1.28;translate:0 var(--py,0px)}
.anim-ready .proj-cover .ph :is(img,video){scale:1.1;transition:scale 2.2s var(--soft) .55s}
/* galeria: máscara em 4 direções, imagem com zoom out, legenda por último */
.js-anim .mosaic>.ph[data-rv="up"]{clip-path:inset(100% 0 0 0)}
.js-anim .mosaic>.ph[data-rv="down"]{clip-path:inset(0 0 100% 0)}
.js-anim .mosaic>.ph[data-rv="left"]{clip-path:inset(0 100% 0 0)}
.js-anim .mosaic>.ph[data-rv="right"]{clip-path:inset(0 0 0 100%)}
.js-anim .mosaic>.ph.in{clip-path:inset(0);transition:clip-path 1.25s var(--reveal) var(--d,0s)}
.js-anim .mosaic>.ph :is(img,video){scale:1.35;translate:var(--mx,0px) calc(var(--py,0px) + var(--my,0px))}
.js-anim .mosaic>.ph.in :is(img,video){scale:1.1;transition:scale 1.9s var(--soft) var(--d,0s)}
.js-anim .mosaic>.ph::before,.js-anim .mosaic>.ph::after{opacity:0;transform:translateY(6px)}
.js-anim .mosaic>.ph.in::before,.js-anim .mosaic>.ph.in::after{opacity:1;transform:none;transition:opacity .6s ease calc(var(--d,0s) + .85s),transform .6s var(--soft) calc(var(--d,0s) + .85s)}
.js-anim .proj-nav{opacity:0;transform:translateY(24px)}
.js-anim .proj-nav.in{opacity:1;transform:none;transition:opacity .9s ease,transform 1s var(--soft)}

/* Home animations after the hero (same language as the project pages) */
.js-anim .feat-grid .ph[data-rv="up"]{clip-path:inset(100% 0 0 0)}
.js-anim .feat-grid .ph[data-rv="down"]{clip-path:inset(0 0 100% 0)}
.js-anim .feat-grid .ph[data-rv="left"]{clip-path:inset(0 100% 0 0)}
.js-anim .feat-grid .ph[data-rv="right"]{clip-path:inset(0 0 0 100%)}
.js-anim .feat-grid .ph.in{clip-path:inset(0);transition:clip-path 1.25s var(--reveal) var(--d,0s),transform .6s var(--ease),opacity .4s,filter .4s}
.js-anim .feat-grid .ph :is(img,video){scale:1.3;translate:var(--mx,0px) calc(var(--py,0px) + var(--my,0px))}
.js-anim .feat-grid .ph.in :is(img,video){scale:1.1;transition:scale 1.9s var(--soft) var(--d,0s)}
/* hover: cartão 3D (home e galerias dos projetos) — gira com o mouse, flutua, conteúdo em profundidade e reflexo */
@keyframes vaFloat{0%,100%{translate:0 0}50%{translate:0 -9px}}
.ph .glare{display:none}
@media (hover:hover){
  .feat-grid .ph:hover,.mosaic .ph:hover{transform:none}
  .js-anim :is(.feat-grid .ph,.mosaic>.ph).in:is(.is-hover,.was-hover){clip-path:none}
  .js-anim :is(.feat-grid .ph,.mosaic>.ph).in.is-hover{z-index:3;transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(40px);
    box-shadow:0 30px 60px -18px rgba(0,0,0,.45);animation:vaFloat 3.4s ease-in-out infinite;
    transition:clip-path 1.25s var(--reveal),transform .45s cubic-bezier(.22,1,.36,1),box-shadow .6s ease,opacity .4s,filter .4s}
  .js-anim :is(.feat-grid .ph,.mosaic>.ph).in.was-hover{transition:clip-path 1.25s var(--reveal),transform 1.1s var(--soft),box-shadow .8s ease,opacity .4s,filter .4s}
  .js-anim :is(.feat-grid .ph,.mosaic>.ph).in.is-hover :is(img,video){scale:1.16;transition:scale .9s var(--soft),translate .5s cubic-bezier(.22,1,.36,1)}
  .js-anim :is(.feat-grid .ph,.mosaic>.ph).in.was-hover :is(img,video){transition:scale 1.1s var(--soft),translate 1.1s var(--soft)}
  .js-anim :is(.feat-grid .ph,.mosaic>.ph) .glare{display:block;position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .5s ease;
    background:radial-gradient(circle at var(--lx,50%) var(--ly,30%),rgba(255,255,255,.38),rgba(255,255,255,0) 55%);mix-blend-mode:soft-light}
  .js-anim :is(.feat-grid .ph,.mosaic>.ph).in.is-hover .glare{opacity:1}
}
.js-anim .feat-grid .lab h3{overflow:hidden}
.js-anim .feat-grid .lab h3>a{display:inline-block}
.js-anim .feat-grid .lab h3>*{transform:translateY(115%)}
.js-anim .feat-grid .lab.in h3>*{transform:none;transition:transform 1s var(--soft) .15s}
.js-anim .feat-grid .lab.in h3>em{transition-delay:.28s}
.js-anim .feat-grid .lab p{opacity:0;transform:translateY(14px)}
.js-anim .feat-grid .lab.in p{opacity:1;transform:none;transition:opacity .9s ease .45s,transform 1s var(--soft) .45s}
.js-anim .feat-grid .lab .go{background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;padding-bottom:2px;width:max-content}
.js-anim .feat-grid .lab.in .go{background-size:100% 1px;transition:background-size .9s var(--soft) 1s}
.js-anim .feat-grid .lab .go:hover{text-decoration:none}
.js-anim .feat-h>*{opacity:0;transform:translateY(12px)}
.js-anim .feat-h.in>*{opacity:1;transform:none;transition:opacity .8s ease,transform .9s var(--soft)}
.js-anim .feat-h.in>*+*{transition-delay:.12s}
.js-anim .grey .cols>*{opacity:0;transform:translateY(16px)}
.js-anim .grey .cols.in>*{opacity:1;transform:none;transition:opacity .9s ease calc(var(--i,0)*110ms),transform 1s var(--soft) calc(var(--i,0)*110ms)}
.js-anim .grey .clients li{opacity:0;transform:translateY(10px)}
.js-anim .grey .clients.in li{opacity:1;transform:none;transition:opacity .6s ease calc(var(--i,0)*28ms + .1s),transform .7s var(--soft) calc(var(--i,0)*28ms + .1s)}
.js-anim .grey .big{overflow:hidden;padding:.06em 0}
.js-anim .grey .big .c{display:inline-block;transform:translateY(105%)}
.js-anim .grey .big.in .c{transform:none;transition:transform 1.3s var(--soft) calc(var(--i,0)*110ms)}

/* Works: typographic index (desktop with a mouse). Hover = black band + two floating thumbnails. */
@media (hover:hover) and (min-width:761px){
  .cards.is-index{display:block;padding:0 0 clamp(3rem,8vw,7rem)}
  .cards.is-index .card{position:relative;display:flex;justify-content:center;padding:0 var(--gx);color:var(--ink);transition:background-color .2s,color .2s}
  .cards.is-index .card:hover{background:#000;color:#fff;z-index:2}
  .cards.is-index:has(.card:hover) .card:not(:hover){opacity:1}
  .cards.is-index .card-t{position:relative;display:block;padding:0}
  .cards.is-index .card-t :is(h2,h3){font:800 clamp(2.4rem,6.2vw,7.2rem)/.86 "Inter Tight",var(--sans);letter-spacing:-.045em;text-transform:uppercase;text-align:center;padding:.05em 0 .02em;color:inherit}
  .cards.is-index .card-t :is(h2,h3){transition:transform .6s var(--soft,cubic-bezier(.16,1,.3,1));transform-origin:50% 55%}
  .cards.is-index .card:hover .card-t :is(h2,h3){transform:scale(1.1)}
  .cards.is-index .card{transition:background-color .2s,color .2s,padding .6s var(--soft,cubic-bezier(.16,1,.3,1))}
  .cards.is-index .card:hover{padding-top:.34vw;padding-bottom:.34vw}
  .cards.is-index .card-t p{position:absolute;right:100%;top:.7em;margin-right:.75rem;font:500 .62rem/1.25 var(--mono);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;text-align:right;color:inherit}
  .cards.is-index .cv,.cards.is-index .thumb2{position:absolute;top:50%;z-index:3;pointer-events:none;opacity:0;transition:opacity .22s ease,transform .6s var(--soft,ease)}
  .cards.is-index .cv{left:calc(10% + var(--mx,0px));width:clamp(140px,13vw,250px);aspect-ratio:4/5;transform:translate(0,-50%) scale(.88)}
  .cards.is-index .thumb2{right:calc(9% - var(--mx,0px));width:clamp(200px,19vw,380px);aspect-ratio:16/10;object-fit:cover;transform:translate(0,-50%) scale(.88);background:var(--grey)}
  .cards.is-index .card:hover .cv,.cards.is-index .card:hover .thumb2:not([hidden]){opacity:1;transform:translate(0,-50%) scale(1)}
  .cards.is-index .card:hover .cv :is(img,video){transform:none}
  .cards.is-index .thumb2[hidden]{display:block;opacity:0!important}
}
.thumb2{display:none}
@media (hover:hover) and (min-width:761px){.cards.is-index .thumb2{display:block}}

/* Category pages entrance */
.js-anim .cat-title .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.05em 0 .02em;margin:-.05em 0 -.02em}
.js-anim .cat-title .c{display:inline-block;transform:translateY(105%)}
.anim-ready .cat-title .c{transform:none;transition:transform 1.1s var(--soft) calc(var(--i)*55ms)}
.js-anim .cat-intro{opacity:0;transform:translateY(16px)}
.anim-ready .cat-intro{opacity:1;transform:none;transition:opacity .9s ease .45s,transform 1s var(--soft) .45s}
/* índice (Works): o nome sobe por trás da máscara, a legenda aparece depois */
.js-anim .cards .card-t :is(h2,h3){overflow:hidden}
.js-anim .cards .card-t .l{display:inline-block;transform:translateY(108%)}
.js-anim .cards .card.in .card-t .l{transform:none;transition:transform 1s var(--soft) var(--d,0s)}
.js-anim .cards .card-t p{opacity:0}
.js-anim .cards .card.in .card-t p{opacity:1;transition:opacity .6s ease calc(var(--d,0s) + .45s)}
/* grid de cards (Art, Lab, celular): a imagem entra subindo */
.js-anim .cards .card .cv{opacity:0;translate:0 26px}
.js-anim .cards .card.in .cv{opacity:1;translate:0 0;transition:opacity .8s ease var(--d,0s),translate 1s var(--soft) var(--d,0s),transform .6s var(--soft)}
@media (hover:hover) and (min-width:761px){
  .js-anim .cards.is-index .card .cv,.js-anim .cards.is-index .card.in .cv{opacity:0;translate:0 0}
  .js-anim .cards.is-index .card.in:hover .cv{opacity:1}
  .js-anim .cards.is-index .card.in .cv{transition:opacity .22s ease,transform .6s var(--soft)}
}

/* Art / Lab: stacked sheets ("paginação"). Hover lifts the sheet and slides the ones below to reveal it. */
.cards.is-stack{--P:clamp(96px,10.5vw,168px);--H:clamp(420px,44vw,760px);--R:clamp(150px,18vw,320px);
  display:block;background:#0b0b0b;padding:clamp(2rem,5vw,4rem) var(--gx) clamp(4rem,10vw,8rem);counter-reset:sheet}
.cards.is-stack .card{counter-increment:sheet;position:relative;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto minmax(0,1fr);
  height:var(--H);width:min(100%,calc(82% + var(--k,0)*2.4%));margin:calc(var(--P) - var(--H)) auto 0;padding:.6rem .9rem 0;overflow:hidden;
  background:#fff;color:#000;box-shadow:0 -16px 36px -8px rgba(0,0,0,.6);
  transition:transform .6s cubic-bezier(.16,1,.3,1),box-shadow .5s ease,opacity .4s}
.cards.is-stack .card:first-child{margin-top:0}
.cards.is-stack:has(.card:hover) .card:not(:hover){opacity:1}
.cards.is-stack .card::before{content:counter(sheet);grid-area:1/1;font:400 .62rem/1.3 var(--mono)}
.cards.is-stack .card-t{display:contents}
.cards.is-stack .card-t p{grid-area:1/2;justify-self:center;margin:0;font:400 .62rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;color:#000;text-align:center}
.cards.is-stack[data-cat="art"] .card-t p:empty::before{content:"Art"}
.cards.is-stack[data-cat="lab"] .card-t p:empty::before{content:"Lab"}
.cards.is-stack .card-t :is(h2,h3){grid-area:2/1/3/4;margin:.3rem 0 0;font:500 clamp(2.6rem,6.6vw,7rem)/.9 var(--sans);letter-spacing:-.04em;text-transform:uppercase;color:#000}
.cards.is-stack .cv{grid-area:3/1/4/4;margin:clamp(.8rem,1.6vw,1.4rem) -.9rem 0;aspect-ratio:auto;min-height:0;height:auto}
.cards.is-stack .cv :is(img,video){width:100%;height:100%;object-fit:cover}
.cards.is-stack .card:hover .cv :is(img,video){transform:none}
@media (hover:hover) and (min-width:761px){
  .cards.is-stack .card:hover{transform:translateY(-16px);box-shadow:0 -26px 54px -8px rgba(0,0,0,.75)}
  .cards.is-stack .card:hover~.card{transform:translateY(var(--R))}
}
.cards.is-stack .card[data-n]::before{content:attr(data-n)}
/* Art: duas pilhas lado a lado */
.cards.is-stack.two{--P:clamp(70px,6.4vw,112px);--H:clamp(300px,25vw,470px);--R:clamp(110px,10vw,190px);display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(1rem,3vw,3rem);align-items:start}
.cards.is-stack.two .stack-col{min-width:0}
.cards.is-stack.two .card{width:min(100%,calc(84% + var(--k,0)*2.6%))}
.cards.is-stack.two .card-t :is(h2,h3){font-size:clamp(1.8rem,3.5vw,3.9rem)}
@media (max-width:760px){
  .cards.is-stack.two{display:flex;flex-direction:column}
  .cards.is-stack.two .stack-col{display:contents}
  .cards.is-stack.two .stack-col .card{width:100%;margin-top:14px}
  .cards.is-stack.two .stack-col .card[data-n="1"]{margin-top:0}
  .cards.is-stack.two .card-t :is(h2,h3){font-size:clamp(2.6rem,6.6vw,7rem)}
}
@media (max-width:760px){
  .cards.is-stack{--H:auto}
  .cards.is-stack .card{height:auto;width:100%;margin-top:14px;grid-template-rows:auto auto auto}
  .cards.is-stack .card:first-child{margin-top:0}
  .cards.is-stack .cv{aspect-ratio:16/10}
}

/* Gallery captions under the images + text notes beside some of them */
.mosaic.has-ann .ph::before,.mosaic.has-ann .ph::after{content:none}
.mosaic-ann{position:absolute;inset:0;pointer-events:none;z-index:2}
.mosaic-ann .cap{position:absolute;display:flex;justify-content:space-between;gap:1rem;font:400 .6rem/1.2 var(--mono);text-transform:uppercase;letter-spacing:.02em;color:var(--ink)}
.mosaic-ann .cap span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mosaic-ann .cap span:last-child{color:var(--muted)}
.mosaic-ann .cap.is-small span:first-child{display:none}
.mosaic-ann .cap.is-small{justify-content:flex-end}
.mosaic-ann .note{position:absolute;font:500 clamp(.78rem,.86vw,.95rem)/1.32 var(--sans);letter-spacing:-.005em;text-transform:none;color:var(--ink)}
.mosaic-ann .note p{margin:0;max-width:30ch}
.mosaic-ann .note.is-left{text-align:right}
.mosaic-ann .note.is-left p{margin-left:auto}
.mosaic-ann .note dl{margin:0;display:grid;gap:.35rem;max-width:32ch}
.mosaic-ann .note.is-left dl{margin-left:auto}
.mosaic-ann .note dl div{display:grid;grid-template-columns:5.5rem 1fr;gap:.8rem;border-top:1px solid #e3e3e3;padding-top:.35rem;font:400 .62rem/1.3 var(--mono);text-transform:uppercase;text-align:left}
.mosaic-ann .note dt{color:var(--muted)}
.mosaic-ann .note dd{margin:0}
.mosaic-ann .note h4{margin:0 0 .35rem;font:500 clamp(1.15rem,1.5vw,1.7rem)/1.02 var(--sans);letter-spacing:-.025em;text-transform:none}
.mosaic-ann .note h4+span{display:block;font:400 .6rem/1.2 var(--mono);text-transform:uppercase;color:var(--muted)}
.js-anim .mosaic-ann>*{opacity:0;transform:translateY(8px)}
.js-anim .mosaic-ann>.in{opacity:1;transform:none;transition:opacity .7s ease calc(var(--d,0s) + .55s),transform .8s var(--soft) calc(var(--d,0s) + .55s)}

/* 404 --------------------------------------------------------------------- */
.nf{min-height:100svh;display:flex;flex-direction:column}
.nf main{flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--gx) 1rem}
.nf .big{margin:0 0 2rem;text-align:left;font-size:clamp(8rem,40vw,36rem)}

/* Responsive -------------------------------------------------------------- */
@media (max-width:760px){
  .hero h1 .ln{display:block}
  .bar{grid-template-columns:1fr 1fr;row-gap:1.1rem}
  .bar nav{justify-self:start;text-align:left}
  .sect{margin-left:0}
  .row{grid-template-columns:1fr 1fr}
  .row>*{grid-column:auto!important}
  .row .lab{grid-column:1/-1!important;padding:.4rem 0 1rem;gap:.8rem;order:-1}
  .cols{grid-template-columns:1fr 1fr}
  .cols .end{text-align:left}
  .clients{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards,.feat .cards,.cat .cards{grid-template-columns:1fr 1fr;gap:1.25rem 6px}
  .card-t{flex-direction:column;gap:.15rem}
  .card-t p{text-align:left;white-space:normal}
  .feat-h .sect{margin-left:0}
  .cat-intro{margin-left:0}
  .proj-info{grid-template-columns:1fr;row-gap:1.5rem}
  .proj-intro,.proj-meta{grid-column:1/-1}
  .row>:only-child,.gallery .row:first-child>*{grid-column:1/-1!important}
}
@media (min-width:761px) and (max-width:1100px){
  .clients{grid-template-columns:repeat(4,minmax(0,1fr))}
  .feat .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cat .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .hero h1 .c{transform:none!important;transition:none!important}
  .ph:hover{transform:none}
}

@media print{
  .car,.skip{display:none}
  .first{min-height:0}
  .ph{break-inside:avoid}
}

/* Home: indicador de rolagem que acompanha o mouse perto do nome */
.scroll-cue{position:fixed;left:0;top:0;z-index:60;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:.5rem;color:#fff;mix-blend-mode:difference;opacity:0;transform:translate3d(var(--x,0),var(--y,0),0) scale(.85);transition:opacity .35s ease,transform .35s cubic-bezier(.16,1,.3,1)}
.scroll-cue.on{opacity:1;transform:translate3d(var(--x,0),var(--y,0),0) scale(1)}
.scroll-cue .mouse{width:26px;height:40px;border:1.5px solid currentColor;border-radius:13px;position:relative}
.scroll-cue .mouse::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:currentColor;animation:cueDot 1.6s cubic-bezier(.6,0,.4,1) infinite}
.scroll-cue .arr{width:10px;height:10px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-.15rem;animation:cueArr 1.6s cubic-bezier(.6,0,.4,1) infinite}
.scroll-cue span{font:400 .66rem/1 var(--mono);letter-spacing:.32em;text-transform:uppercase;margin-right:-.32em}
.hero h1.cue-on{cursor:pointer}
@keyframes cueDot{0%{transform:translateY(0);opacity:1}70%{transform:translateY(16px);opacity:0}100%{transform:translateY(0);opacity:0}}
@keyframes cueArr{0%,100%{transform:translateY(-3px) rotate(45deg);opacity:.35}50%{transform:translateY(3px) rotate(45deg);opacity:1}}
@media (prefers-reduced-motion:reduce){.scroll-cue .mouse::after,.scroll-cue .arr{animation:none}}

/* VIN: efeito líquido no hover (WebGL) */
.grey .big{cursor:pointer}
.grey .big.liq{position:relative}
.grey .big.liq .c{color:transparent}
.big-liq{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;display:block}

/* About: página preta que abre por cima do site --------------------------------- */
.ab-page{--bg:#000;--ink:#ecebe6;--muted:#8d8d88;margin:0;background:#000;color:var(--ink)}
.ab-page .bar a{color:inherit}
.ab{--fg:#ecebe6;position:relative;overflow-x:clip;display:flex;flex-direction:column;padding:clamp(1rem,2vw,2rem) var(--gx) var(--gx);background:#000;color:var(--fg);font:400 .68rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.01em}
.ab a{color:inherit;text-decoration:none;transition:opacity .2s}
.ab a:hover{opacity:.55}
.ab p{margin:0}
.ab-kicker,.ab-name,.ab-year,.ab-sign{font-family:var(--sans);font-weight:800;letter-spacing:-.035em;line-height:.82;white-space:nowrap}
.ab-kicker{font-size:clamp(.9rem,2.4vw,2.4rem);line-height:1;letter-spacing:-.02em}
.ab-name{margin:.05em calc(var(--gx)*-1) 0;font-size:10vw;letter-spacing:-.05em;overflow:hidden}
.ab-mq{display:inline-flex;will-change:transform;animation:abMq 28s linear infinite}
.ab-mq span{display:inline-block;padding-right:.18em}
.ab-mq i{font-style:normal;padding-left:.18em}
@keyframes abMq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ab-mq{animation:none}}
.ab-meta{display:flex;justify-content:space-between;gap:1rem;margin-top:.7rem}
.ab-mid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gx);margin-top:.7rem}
.ab-photo{margin:0;width:69%;background:#111}
.ab-photo picture{display:block}
.ab-photo img{display:block;width:100%;height:auto}
.ab-side{display:flex;flex-direction:column;justify-content:space-between;gap:1.5rem;min-width:0}
.ab-note{max-width:78ch;margin-left:clamp(0rem,3vw,3rem);text-transform:none;font:400 .76rem/1.45 var(--mono)}
.ab-note p+p{margin-top:.9em}
.ab-motto{font:800 clamp(1.3rem,2.2vw,2rem)/1 var(--sans);letter-spacing:-.03em;text-transform:uppercase;margin:1.1em 0 !important}
.ab-year{font-size:16vw;text-align:right}
.ab-lines{display:grid;grid-template-columns:1fr 1fr;gap:var(--gx);margin-top:1rem}
.ab-lines .r{text-align:right}
.ab-foot{display:flex;justify-content:space-between;align-items:flex-end;margin-top:auto;padding-top:1.2rem}
.ab-sign{font-size:clamp(4rem,13vw,13rem)}
@media (max-width:760px){
  .ab-mid,.ab-lines{grid-template-columns:1fr}
  .ab-photo{width:100%}
  .ab-lines .r{text-align:left}
  .ab-meta{flex-wrap:wrap}
  .ab-note{margin-left:0}
}
.ab-cnt{font-variant-numeric:tabular-nums}
/* entrada da página (depois da intro): cada bloco com seu movimento */
.ab-anim{--ez:cubic-bezier(.16,1,.3,1)}
.ab-kicker .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.ab-kicker .w>span{display:inline-block}
.ab-anim .ab-kicker .w>span{transform:translateY(110%)}
.ab-anim .ab-mq{opacity:0;translate:35% 0}
.ab-anim .ab-photo{clip-path:inset(0 0 100% 0)}
.ab-anim .ab-note>p{opacity:0;transform:translateY(22px)}
.ab-anim .ab-year{clip-path:inset(100% 0 0 0);transform:translateY(12%)}
.ab-anim .ab-sign{clip-path:inset(100% 0 0 0);transform:translateY(40%)}
.ab-anim [data-scr]{visibility:hidden}
.ab-anim.in .ab-kicker .w>span{transform:none;transition:transform .9s var(--ez) var(--d,0s)}
.ab-anim.in .ab-mq{opacity:1;translate:0 0;transition:opacity .6s ease .12s,translate 1.6s var(--ez) .12s}
.ab-anim.in .ab-photo{clip-path:inset(0);transition:clip-path 1.2s cubic-bezier(.7,0,.2,1) .45s}
.ab-anim.in .ab-note>p{opacity:1;transform:none;transition:opacity .7s ease var(--d,0s),transform .9s var(--ez) var(--d,0s)}
.ab-anim.in .ab-year{clip-path:inset(0);transform:none;transition:clip-path .9s var(--ez) .75s,transform 1.1s var(--ez) .75s}
.ab-anim.in .ab-sign{clip-path:inset(0);transform:none;transition:clip-path 1s var(--ez) 1.35s,transform 1.2s var(--ez) 1.35s}
@media (prefers-reduced-motion:reduce){.ab-anim *{transition:none!important;clip-path:none!important;transform:none!important;translate:none!important;opacity:1!important;visibility:visible!important}}

.ab-intro{position:fixed;inset:0;width:100%;height:100%;z-index:5;background:#000;cursor:pointer;transition:opacity .35s ease}