/* dgtiago — protótipo Home (Tier C: frames + tipografia + rig de olhar) */

@font-face{font-family:"Google Sans Flex";font-weight:400;src:url(../fonts/GoogleSansFlex_72pt-Regular.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Google Sans Flex";font-weight:500;src:url(../fonts/GoogleSansFlex_72pt-Medium.ttf) format("truetype");font-display:swap}

:root{
  --ground:#7C8279;   /* ciclorama do novo vídeo, verde-acinzentado (aparece atrás do canvas enquanto carrega) */
  --ink:#221F1C;
  --paper:#F2EEE8;
  --coral:#DF7F71;
  --coral-deep:#C8685B;
  --eye:#5E9B4E;
  --sans:"Google Sans Flex","Google Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pad:clamp(20px,4vw,56px);
  --mx:0; --my:0;   /* posição do cursor normalizada (-1..1), escrita pelo JS */
}

*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:var(--ground);color:var(--paper);font-family:var(--sans);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
h1,h2{margin:0;font-weight:500;letter-spacing:-.035em;line-height:.98;text-wrap:balance}
p{margin:0}
em{font-style:normal;color:var(--coral)}
:focus-visible{outline:2px solid var(--coral);outline-offset:4px;border-radius:2px}

/* timeline */
.spacer{height:900vh}

/* palco: vídeo cover; o personagem fica à direita, o texto sempre à esquerda */
#stage{position:fixed;inset:-2%;width:104%;height:104%;z-index:0;display:block;object-fit:cover;object-position:center;background:var(--ground);pointer-events:none;will-change:transform}
.grain{position:fixed;inset:0;z-index:1;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='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  animation:grain .25s steps(3) infinite}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-6px,4px)}66%{transform:translate(5px,-5px)}100%{transform:translate(0,0)}}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:calc(var(--pad) * .55) var(--pad);font-size:15px;letter-spacing:-.01em;text-shadow:0 1px 10px rgba(0,0,0,.25)}
.nav .brand{font-weight:500}
.nav nav{display:flex;gap:2.2em}
.nav nav a{opacity:.85;border-bottom:1px solid transparent;padding-bottom:2px}
.nav nav a:hover{opacity:1;border-color:rgba(255,255,255,.6)}
.chip{display:inline-flex;align-items:center;gap:.55em;padding:.5em 1em;border:1px solid rgba(255,255,255,.55);border-radius:999px;font-size:13px;backdrop-filter:blur(10px);background:rgba(20,18,16,.12)}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--eye);box-shadow:0 0 0 0 rgba(94,155,78,.6);animation:pulse 2.6s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(94,155,78,.55)}70%{box-shadow:0 0 0 9px rgba(94,155,78,0)}100%{box-shadow:0 0 0 0 rgba(94,155,78,0)}}

/* camada de UI: todos os atos fixos, só um visível por vez */
.ui{position:fixed;inset:0;z-index:10;pointer-events:none}
.act{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;will-change:opacity,transform}
.act.on{pointer-events:auto}
/* scrim direcional: 45 % → 0 atrás da coluna de texto (nunca sobre o rosto) */
.act::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(20,18,16,.42),rgba(20,18,16,0) 52%)}
.act-tech::before,.act-about::before{background:linear-gradient(270deg,rgba(20,18,16,.42),rgba(20,18,16,0) 52%)}
.act-lab::before{background:linear-gradient(0deg,rgba(20,18,16,.78),rgba(20,18,16,0) 48%)}
.act a{pointer-events:auto}
.copy{position:absolute;left:var(--pad);top:50%;transform:translateY(-50%);max-width:min(52vw,48rem);display:flex;flex-direction:column;gap:clamp(14px,1.6vw,24px);text-shadow:0 1px 14px rgba(0,0,0,.28)}
.copy h1{font-size:clamp(34px,min(5.8vw,10.5vh),104px)}
.act-hero .copy{max-width:min(57vw,54rem)}
.copy h2{font-size:clamp(28px,min(5vw,9.5vh),88px)}
.lede{font-size:clamp(14px,min(1.4vw,2.7vh),22px);max-width:52ch;opacity:.92}
.tags{font-size:13px;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.dim{opacity:.6}
.eyebrow{font-size:13px;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.ctas{display:flex;align-items:center;gap:22px;margin-top:6px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:.6em;background:var(--coral);color:var(--ink);padding:.8em 1.4em;border-radius:999px;font-weight:500;font-size:15px;text-shadow:none;transition:transform .35s cubic-bezier(.2,.9,.2,1.2),background .2s}
.btn::after{content:"";width:.5em;height:.5em;border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:rotate(45deg);transition:transform .3s}
.btn:hover{background:#F0958A;transform:translateY(-2px)}
.btn:hover::after{transform:rotate(45deg) translate(2px,-2px)}
.link{font-size:15px;border-bottom:1px solid rgba(255,255,255,.55);padding-bottom:2px;width:max-content}
.link:hover{border-color:#fff}
.small{font-size:13px;opacity:.75}

/* HERO: planos de profundidade */
.plane{position:absolute;font-weight:500;letter-spacing:-.05em;line-height:1;color:var(--paper);pointer-events:none;user-select:none;transform:translate(var(--px,0),var(--py,0))}
.plane-far{left:-2vw;top:16vh;font-size:clamp(90px,17vw,240px);filter:blur(2.4px);opacity:.55}
.plane-mid{right:4vw;bottom:8vh;font-size:clamp(60px,11vw,150px);filter:blur(.7px);opacity:.75}
.hint{position:absolute;left:var(--pad);bottom:calc(var(--pad) + 22px);display:flex;align-items:center;gap:12px;font-size:13px;letter-spacing:.04em;opacity:.85;transition:opacity .5s}
.hint.off{opacity:0}
.wheel{width:18px;height:28px;border:1.5px solid rgba(255,255,255,.8);border-radius:10px;position:relative}
.wheel i{position:absolute;left:50%;top:5px;width:3px;height:6px;margin-left:-1.5px;border-radius:2px;background:#fff;animation:wheel 1.6s ease-in-out infinite}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(10px);opacity:0}100%{transform:translateY(0);opacity:0}}

/* TRABALHOS: o personagem aponta para a direita; os cards ficam ali, na altura do dedo */
/* o personagem está no centro neste ato: coluna estreita à esquerda */
.act-work .copy{max-width:min(35vw,34rem)}
.act-work h2{font-size:clamp(26px,min(3.5vw,7.5vh),64px)}
.cards{position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);display:grid;grid-template-columns:repeat(2,clamp(110px,min(13vw,24vh),260px));gap:clamp(10px,1.2vw,18px)}
.cards .card:nth-child(even){margin-top:clamp(14px,3vh,36px)}
.card{display:flex;flex-direction:column;justify-content:flex-end;gap:.35em;aspect-ratio:4/5;padding:.9em 1em;border-radius:6px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.10);backdrop-filter:blur(14px) saturate(1.1);box-shadow:0 30px 60px -30px rgba(0,0,0,.6);transition:transform .5s cubic-bezier(.2,.9,.2,1.1),background .3s,border-color .3s;font-size:13px;text-shadow:none}
.card.has-img{position:relative;overflow:hidden;background:#2A2724}
.card.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.9;transition:transform .6s cubic-bezier(.2,.9,.2,1)}
.card.has-img::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(20,18,16,.75),rgba(20,18,16,0) 60%)}
.card.has-img small,.card.has-img b{position:relative;z-index:2}
.card.has-img:hover img{transform:scale(1.05)}
@view-transition{navigation:auto}
.card small{opacity:.7;font-size:12px}
.card b{font-weight:500;font-size:15px;letter-spacing:-.02em}
.card:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.7)}

/* TERRITÓRIO: cadeia de frases que acende linha a linha */
.chain{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;font-size:clamp(15px,min(2vw,3.5vh),30px);font-weight:500;letter-spacing:-.02em}
.chain li{opacity:.28}
.chain li.strong{margin-top:10px}

/* EXPERIMENTOS: close grande no centro; texto em faixa embaixo, sobre a camiseta */
.act-lab .copy{top:auto;bottom:calc(var(--pad) + 36px);transform:none;max-width:none;right:var(--pad);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:clamp(24px,5vw,80px);row-gap:12px;align-items:end}
.act-lab .copy .eyebrow{grid-column:1;grid-row:1;align-self:end}
.act-lab .copy h2{grid-column:1;grid-row:2 / span 2;font-size:clamp(26px,min(4.4vw,9vh),76px)}
.act-lab .copy .lede{grid-column:2;max-width:46ch}
.act-lab .copy .lede:nth-of-type(2){grid-row:1 / span 2}
.act-lab .copy .lede:nth-of-type(3){grid-row:3}
.act-lab .copy .link{grid-column:2;grid-row:4;margin-top:4px}

/* DESIGN + TEC e SOBRE: personagem à esquerda, texto à direita */
.act-tech .copy{left:auto;right:var(--pad);max-width:min(47vw,42rem)}
.act-tech h2{font-size:clamp(28px,min(4.3vw,8.5vh),76px)}
.act-about .copy{left:auto;right:var(--pad);max-width:min(45vw,40rem)}
.act-about h2{font-size:clamp(32px,min(5.6vw,11vh),96px)}

/* CONTATO */
.act-contact .copy{max-width:min(56vw,52rem)}
.act-contact h2{font-size:clamp(32px,min(5.6vw,11vh),100px);letter-spacing:-.045em}
.foot{position:absolute;left:var(--pad);right:var(--pad);bottom:calc(var(--pad) * .6);display:flex;justify-content:space-between;font-size:12.5px;opacity:.7;letter-spacing:.02em}
.foot a{border-bottom:1px solid rgba(255,255,255,.4)}

/* progresso */
.progress{position:fixed;left:var(--pad);right:var(--pad);bottom:calc(var(--pad) * .6);z-index:15;pointer-events:none;display:flex;align-items:center;gap:14px;transition:opacity .4s}
.progress .track{flex:1;height:1px;background:rgba(255,255,255,.3);position:relative}
.progress .track i{position:absolute;top:-3px;left:0;width:7px;height:7px;border-radius:50%;background:var(--coral);margin-left:-3px}
.progress span{font-size:10.5px;letter-spacing:.14em;color:rgba(255,255,255,.8);min-width:12ch;text-align:right;font-variant-numeric:tabular-nums}
body.at-end .progress{opacity:0}

.nojs{position:fixed;inset:auto 0 0 0;background:var(--ink);padding:12px var(--pad);font-size:14px;z-index:30}

/* mobile */
@media (max-width:820px){
  body{font-size:16px}
  .nav nav{display:none}
  #stage{object-position:74% center}
  .act::before{background:linear-gradient(0deg,rgba(20,18,16,.62),rgba(20,18,16,0) 62%)}
  .act .copy{max-width:calc(100vw - var(--pad) * 2);top:auto;bottom:calc(var(--pad) + 44px);transform:none;gap:14px}
  .act-work .copy,.act-tech .copy,.act-about .copy{top:auto;left:var(--pad);right:auto}
  .act-lab .copy{display:flex;flex-direction:column;left:var(--pad);right:var(--pad)}
  .act-lab .copy .lede{max-width:38ch}
  .act-lab::before,.act-tech::before,.act-about::before{background:linear-gradient(0deg,rgba(20,18,16,.62),rgba(20,18,16,0) 62%)}
  .copy h1{font-size:clamp(34px,9.5vw,60px)}
  .copy h2{font-size:clamp(28px,8vw,48px)}
  .hint{display:none}
  .cards{left:var(--pad);right:var(--pad);top:auto;transform:none;bottom:calc(var(--pad) + 190px);grid-template-columns:repeat(4,minmax(140px,1fr));gap:10px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
  .card{aspect-ratio:5/3}
  .cards .card:nth-child(even){margin-top:0}
  .act-work .copy .lede{display:none}
  .chain{font-size:17px}
  .foot{display:none}
  .progress span{display:none}
}

@media (prefers-reduced-motion:reduce){
  .grain{animation:none}
  .chip i{animation:none}
  .wheel i{animation:none}
}







/* TERRITÓRIO: bloco alto (título + 8 linhas + parágrafo); compacta em janelas baixas */
.act-territory .copy{top:53%;gap:clamp(8px,1.4vh,18px)}
.act-territory h2{font-size:clamp(28px,min(4.6vw,8vh),84px)}



/* tela de loading */
body.loading{overflow:hidden}
#loader{position:fixed;inset:0;z-index:100;background:var(--ground);color:var(--paper);display:grid;place-items:center;transition:opacity .5s}
#loader.gone{opacity:0;pointer-events:none}
.ld-inner{display:grid;gap:14px;justify-items:center;text-align:center;padding:0 var(--pad)}
.ld-brand{font-size:clamp(40px,7vw,96px);font-weight:500;letter-spacing:-.045em;line-height:1}
.ld-tag{font-size:clamp(13px,1.1vw,16px);opacity:.75;letter-spacing:-.01em}
.ld-bar{width:min(280px,60vw);height:2px;background:rgba(255,255,255,.28);overflow:hidden;margin-top:10px;border-radius:2px}
.ld-bar i{display:block;height:100%;width:100%;background:var(--coral);transform:scaleX(0);transform-origin:left}
.ld-pct{font-size:12px;letter-spacing:.14em;opacity:.8;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){#loader{transition:none}}