/* ==========================================================================
   Leonardo Martinelli — Portfólio 2026
   Preto absoluto, brilho laranja, cromado, tipografia editorial
   (grotesca pesada + serifa itálica) e detalhes de câmera/código.
   ========================================================================== */

/* ---------- Fontes (locais) ---------- */
@font-face{font-family:"Bricolage";src:url(../fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(../fonts/instrument-serif.woff2) format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(../fonts/instrument-serif-italic.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(../fonts/jetbrains-mono.woff2) format("woff2");font-weight:100 800;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --bg:#050505;
  --ink:#eee8de;
  --dim:#8b857b;
  --mute:#3a3733;
  --orange:#ff4a1c;
  --ember:#ff8a4c;
  --maroon:#7a1526;
  --ice:#8fd3ff;
  --ok:#7dffa1;
  --line:rgba(238,232,222,.14);

  --f-display:"Bricolage","Helvetica Neue",Arial,sans-serif;
  --f-serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --gut:clamp(18px,4vw,64px);
  --ease:cubic-bezier(.2,.8,.2,1);
  --vh:100vh;
  color-scheme:dark;
}
@supports (height:100svh){:root{--vh:100svh}}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--f-display);font-size:clamp(15px,1.05vw,17px);line-height:1.5;
  overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{display:block;user-select:none;-webkit-user-drag:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
em{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:0}
::selection{background:var(--orange);color:#050505}
:focus-visible{outline:2px solid var(--orange);outline-offset:4px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--ink);color:#050505;padding:10px 14px;border-radius:8px;font:600 13px var(--f-mono)}
.skip:focus{top:12px}

html.js:not(.is-loaded){overflow:hidden}
html.menu-open{overflow:hidden}

/* ---------- Textura de filme ---------- */
.grain{
  position:fixed;inset:-60%;z-index:90;pointer-events:none;opacity:.075;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .9s steps(1) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}
  60%{transform:translate(-2%,-3%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}
}

/* ---------- Utilitários de tipografia ---------- */
.eyebrow{
  display:flex;align-items:center;gap:12px;
  font:500 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
}
.eyebrow b{color:var(--orange);font-weight:500}
.eyebrow::after{content:"";height:1px;width:clamp(32px,6vw,80px);background:var(--line)}
.h2{
  font-weight:800;font-size:clamp(34px,5.6vw,92px);line-height:.94;letter-spacing:-.045em;text-wrap:balance;
}
.h2 em{font-size:1.06em;letter-spacing:-.02em;color:var(--ember)}

/* quadradinhos "pixel" — assinatura visual */
.px{display:inline-block;width:9px;height:9px;background:var(--orange);margin-right:9px;box-shadow:12px 9px 0 -1px var(--ink);vertical-align:.05em;margin-right:22px}

/* efeito RGB nas manchetes enquanto rola rápido */
html.is-fast .rgb{filter:drop-shadow(calc(var(--rgb,0)*1px) 0 0 rgba(255,40,90,.8)) drop-shadow(calc(var(--rgb,0)*-1px) 0 0 rgba(60,200,255,.8))}

/* revelação ao entrar na tela */
.js [data-reveal]{opacity:0;transform:translateY(46px);filter:blur(8px);transition:opacity .9s var(--ease),transform 1s var(--ease),filter .9s var(--ease);transition-delay:calc(var(--i,0)*90ms)}
.js [data-reveal].in{opacity:1;transform:none;filter:none}

/* ---------- Seções fixadas (scroll "prende" e anima) ---------- */
.pin{position:relative}
.js .pin{height:var(--pin-h,240vh)}
.pin__stick{position:sticky;top:0;height:var(--vh);overflow:hidden}
html:not(.js) .pin__stick{position:static;height:auto;min-height:var(--vh)}

/* ==========================================================================
   Loader — claquete
   ========================================================================== */
.loader{position:fixed;inset:0;z-index:150;display:none;color:var(--ink)}
.js .loader{display:block}
.loader__half{position:absolute;left:0;right:0;height:50.5%;background:#050505;transition:transform 1s cubic-bezier(.8,0,.1,1) .1s}
.loader__half--t{top:0}.loader__half--b{bottom:0}
.loader.is-out .loader__half--t{transform:translateY(-101%)}
.loader.is-out .loader__half--b{transform:translateY(101%)}
.loader__ui{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:22px;transition:opacity .35s}
.loader.is-out .loader__ui{opacity:0}
.loader__log{display:grid;gap:4px;font:400 11px/1.4 var(--f-mono);color:var(--dim);letter-spacing:.06em;justify-self:start;width:min(320px,80vw)}
.loader__log span{opacity:0;animation:logIn .3s forwards}
.loader__log span:nth-child(2){animation-delay:.35s}.loader__log span:nth-child(3){animation-delay:.7s}
@keyframes logIn{to{opacity:1}}
.loader__num{font-weight:800;font-size:clamp(96px,22vw,260px);line-height:.85;letter-spacing:-.06em;font-variant-numeric:tabular-nums;display:flex;align-items:flex-start}
.loader__num i{font-family:var(--f-serif);font-size:.28em;color:var(--orange);margin:.15em 0 0 .06em}
.loader__slate{font:500 11px/1 var(--f-mono);letter-spacing:.2em;color:var(--dim)}
.loader__slate b{color:var(--ink);font-weight:500}
.loader__bar{width:min(320px,80vw);height:2px;background:var(--line);overflow:hidden}
.loader__bar i{display:block;height:100%;background:var(--orange);transform-origin:left;transform:scaleX(var(--k,0))}

/* ==========================================================================
   Cursor — visor de câmera
   ========================================================================== */
.cur{position:fixed;left:0;top:0;z-index:120;width:0;height:0;pointer-events:none;display:none;mix-blend-mode:difference}
html.has-cur .cur{display:block}
html.has-cur,html.has-cur a,html.has-cur button{cursor:none}
.cur__box{
  position:absolute;left:-22px;top:-22px;width:44px;height:44px;
  --c:#fff;
  background:
    linear-gradient(var(--c),var(--c)) 0 0/10px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) 0 0/1.5px 10px no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0/10px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) 100% 0/1.5px 10px no-repeat,
    linear-gradient(var(--c),var(--c)) 0 100%/10px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) 0 100%/1.5px 10px no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100%/10px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) 100% 100%/1.5px 10px no-repeat;
  transition:transform .4s var(--ease);
}
.cur.is-hover .cur__box{transform:scale(1.9) rotate(90deg)}
.cur.is-down .cur__box{transform:scale(.7)}
.cur__dot{position:absolute;left:-2px;top:-2px;width:4px;height:4px;background:#fff;border-radius:50%}
.cur__lb{position:absolute;left:34px;top:26px;font:500 10px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#fff;opacity:0;transition:opacity .25s;white-space:nowrap}
.cur.is-hover .cur__lb{opacity:1}

/* ==========================================================================
   Navegação + HUD
   ========================================================================== */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  padding:calc(18px + env(safe-area-inset-top,0px)) var(--gut) 18px;color:#fff;mix-blend-mode:difference;pointer-events:none;
}
.nav>*{pointer-events:auto}
.nav__logo{font-weight:800;font-size:22px;letter-spacing:-.05em;display:flex;align-items:center}
.nav__links{display:flex;gap:clamp(14px,2.2vw,34px);font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
.nav__links a{display:flex;gap:7px;opacity:.72;transition:opacity .2s}
.nav__links a i{font-style:normal;opacity:.55}
.nav__links a:hover{opacity:1}
.nav__menu{display:none;font:500 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;border:1px solid rgba(255,255,255,.6);padding:10px 14px;border-radius:99px}

.menu{
  position:fixed;inset:0;z-index:55;background:var(--bg);display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 var(--gut);
  clip-path:circle(0 at calc(100% - 44px) 34px);transition:clip-path .7s var(--ease);visibility:hidden;
}
.menu.is-open{clip-path:circle(150% at calc(100% - 44px) 34px);visibility:visible}
.menu a{font-weight:800;font-size:clamp(40px,12vw,84px);letter-spacing:-.05em;line-height:1.05;display:flex;align-items:baseline;gap:14px}
.menu a i{font:500 12px var(--f-mono);letter-spacing:.1em;color:var(--orange)}

.hud{
  position:fixed;left:var(--gut);bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;gap:16px;align-items:center;
  font:500 10.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#fff;mix-blend-mode:difference;pointer-events:none;
  opacity:0;transition:opacity .6s .4s;
}
html.is-loaded .hud{opacity:1}
html.at-end .hud{opacity:0}
.hud__rec{display:flex;align-items:center;gap:7px}
.hud__rec i{width:7px;height:7px;border-radius:50%;background:#fff;animation:blink 1.2s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.hud__tc{font-variant-numeric:tabular-nums}
.hud__scene{opacity:.65}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;height:var(--vh);min-height:560px;overflow:hidden;isolation:isolate}

.hero__glow{
  position:absolute;left:50%;top:56%;width:min(125vmin,1250px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;z-index:0;
  background:radial-gradient(closest-side,rgba(255,74,28,.95) 0%,rgba(255,74,28,.5) 34%,rgba(122,21,38,.32) 62%,transparent 100%);
  filter:blur(26px);will-change:transform;
  transform:translate3d(calc(var(--mx,0)*3vw),calc(var(--my,0)*2vh),0) scale(calc(1 + var(--hp,0)*.9));
  opacity:calc(1 - var(--hp,0)*.65);
  scale:0;
}
html.is-loaded .hero__glow{animation:glowIn 2.2s .25s var(--ease) forwards}
@keyframes glowIn{from{scale:.15;opacity:0}to{scale:1}}

/* nome gigante */
.name{position:absolute;inset:0;pointer-events:none;font-weight:800}
.name__a{
  --W:1200;
  position:absolute;z-index:1;left:0;right:0;top:calc(var(--vh)*.115);display:flex;justify-content:center;flex-wrap:nowrap;gap:0;
  font-size:min(19.6vw,44vh*1.28,320px);line-height:.86;letter-spacing:-.05em;text-transform:uppercase;
  transform:translate3d(calc(var(--mx,0)*1.2vw),calc(var(--hp,0)*-16vh),0);will-change:transform;
}
.name__w{display:flex}
.ch{display:block;overflow:hidden;padding:.02em .012em .07em;margin-right:-.012em}
.ch>span{
  display:block;transform:translateY(112%) rotate(4deg);transform-origin:0 100%;
  background-image:linear-gradient(100deg,#8c8c8c 0%,#ffffff 11%,#6d6d6d 24%,#f5f0e6 38%,#5c5c5c 52%,#ffffff 66%,#7a7a7a 80%,#efefef 92%,#8c8c8c 100%);
  background-size:calc(var(--W)*1px*1.5) 100%;
  background-position:calc((var(--lx,0) + var(--shift,0))*-1px) 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
html.is-loaded .ch>span{animation:chIn 1.25s calc(.35s + var(--ci,0)*70ms) var(--ease) forwards}
@keyframes chIn{to{transform:none}}
html:not(.js) .ch>span{transform:none}

.name__b{
  position:absolute;z-index:1;left:calc(var(--gut) + 1.5vw);top:calc(var(--vh)*.115 + min(19.6vw,44vh*1.28,320px)*.7);
  font-family:var(--f-serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.03em;line-height:.9;
  font-size:min(9.6vw,24vh*1.28,172px);color:var(--ink);
  transform:translate3d(calc(var(--mx,0)*-1.6vw),calc(var(--hp,0)*-8vh),0);
  mix-blend-mode:normal;overflow:hidden;padding:0 .1em .12em 0;
}
.name__b>span{display:block;transform:translateY(105%);}
html.is-loaded .name__b>span{animation:chIn 1.3s .95s var(--ease) forwards}
html:not(.js) .name__b>span{transform:none}

/* boneco */
.hero__puppet{
  position:absolute;left:50%;bottom:0;z-index:2;height:min(88vh,980px);height:min(calc(var(--vh)*.9),980px);aspect-ratio:631/1595;translate:-50% 0;
  transform:translate3d(calc(var(--mx,0)*-1vw),calc(var(--hp,0)*7vh),0) scale(calc(1 + var(--hp,0)*.1));transform-origin:50% 100%;
  will-change:transform;opacity:0;filter:brightness(0);
}
html.is-loaded .hero__puppet{animation:puppetIn 1.8s .5s var(--ease) forwards}
@keyframes puppetIn{from{opacity:0;filter:brightness(0) blur(6px);translate:-50% 5vh}to{opacity:1;filter:brightness(1) blur(0);translate:-50% 0}}
html:not(.js) .hero__puppet{opacity:1;filter:none}
.hero__puppet-in{height:100%;transform-origin:50% 100%;animation:breathe 5s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.004,1.012)}}
.hero__puppet img{height:100%;width:100%;filter:drop-shadow(0 0 34px rgba(255,74,28,.28)) drop-shadow(0 30px 40px rgba(0,0,0,.6))}

/* clarão anamórfico */
.hero__flare{position:absolute;left:0;right:0;top:calc(var(--vh)*.9*.16 + var(--vh)*.1);height:2px;z-index:3;pointer-events:none;mix-blend-mode:screen;opacity:0;transform:scaleX(0)}
html.is-loaded .hero__flare{animation:flare 2.6s 1.2s var(--ease) forwards}
@keyframes flare{0%{opacity:0;transform:scaleX(0)}35%{opacity:1;transform:scaleX(1)}100%{opacity:.5;transform:scaleX(1)}}
.hero__flare i{position:absolute;inset:0;background:linear-gradient(90deg,transparent 0,rgba(255,60,90,0) 8%,rgba(255,90,40,.85) 30%,#fff 50%,rgba(120,205,255,.85) 70%,rgba(80,120,255,0) 92%,transparent 100%)}
.hero__flare i:nth-child(2){height:70px;top:-34px;filter:blur(30px);opacity:.5}

/* ---------- chips de vidro flutuando (stack) ---------- */
.hero__tech{position:absolute;inset:0;z-index:3;pointer-events:none}
.tchip{
  --sz:clamp(68px,7.4vw,104px);--px:1;--rot:0deg;--dur:8s;--delay:0s;
  position:absolute;top:var(--top);left:var(--left);width:var(--sz);aspect-ratio:1;margin:calc(var(--sz)*-.5) 0 0 calc(var(--sz)*-.5);
  border-radius:26%;display:grid;place-items:center;padding:calc(var(--sz)*.055);box-sizing:border-box;isolation:isolate;
  background:linear-gradient(155deg,rgba(255,255,255,.24),rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.4);
  box-shadow:0 24px 46px -18px rgba(0,0,0,.75),0 0 0 1px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.6),inset 0 -10px 16px -12px rgba(0,0,0,.4);
  backdrop-filter:blur(13px) saturate(1.35);-webkit-backdrop-filter:blur(13px) saturate(1.35);
  opacity:0;scale:.4;rotate:calc(var(--rot) - 18deg);
  transform:translate3d(calc(var(--mx,0)*var(--px)*2.6vw),calc(var(--my,0)*var(--px)*2vh),0);
  will-change:transform,translate,rotate;
}
html.is-loaded .tchip{
  animation:tchipIn .9s var(--ease) forwards,tfloat var(--dur) ease-in-out calc(var(--delay) - .9s) infinite;
  transition:transform .5s var(--ease);
}
.tchip.is-soft{--op:.94;opacity:.001}
html:not(.js) .tchip{opacity:var(--op,1);scale:1;rotate:var(--rot);transform:none}
@keyframes tchipIn{to{opacity:var(--op,1);scale:1;rotate:var(--rot)}}
@keyframes tfloat{
  0%,100%{translate:0 0;rotate:var(--rot)}
  50%{translate:0 -16px;rotate:calc(var(--rot) + 3deg)}
}
.tchip__mark{
  width:100%;height:100%;border-radius:24%;display:grid;place-items:center;
  font-family:var(--f-display);font-weight:800;letter-spacing:-.01em;line-height:1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -4px 8px -4px rgba(0,0,0,.3);
}
.tchip__mark--js{background:#f7df1e;color:#0a0a0a;font-size:calc(var(--sz)*.34)}
.tchip__mark--php{background:linear-gradient(155deg,#9ba3ec,#5c67c4);color:#fff;font-style:italic;font-size:calc(var(--sz)*.27);text-transform:lowercase;text-shadow:0 1px 4px rgba(0,0,0,.4)}
.tchip__mark--n8n{background:linear-gradient(155deg,#452a3f,#1c1018);color:#ff9a86;font-size:calc(var(--sz)*.25);text-transform:lowercase;text-shadow:0 0 10px rgba(255,109,90,.6)}
.tchip__mark--lr{background:linear-gradient(155deg,#1c4d75,#0a1f33);color:#8fe8ff;font-size:calc(var(--sz)*.3);text-shadow:0 0 10px rgba(127,227,255,.55)}
.tchip__py{width:100%;height:100%}
.tchip__edusef{width:92%;height:auto}

/* posições — coluna esquerda e direita, desktop */
.tchip--js{--top:15%;--left:8.5%;--px:.7;--rot:-7deg;--dur:8.5s;--delay:-1.2s}
.tchip--lr{--top:33%;--left:6.5%;--px:1.05;--rot:5deg;--dur:8.9s;--delay:-2.1s}
.tchip--py{--top:57%;--left:8%;--px:1.3;--rot:-5deg;--dur:9.4s;--delay:-.6s}
.tchip--php{--top:11%;--left:90%;--px:1.15;--rot:6deg;--dur:7.2s;--delay:-3.4s}
.tchip--n8n{--top:32%;--left:93%;--px:.95;--rot:8deg;--dur:7.8s;--delay:-5s}
.tchip--edusef{--top:55%;--left:91.5%;--px:.85;--rot:-6deg;--dur:7.5s;--delay:-4.3s}
.tchip--edusef{background:linear-gradient(155deg,rgba(255,255,255,.5),rgba(255,255,255,.22))}

/* quadradinhos pixel espalhados */
.hero__dots i{position:absolute;z-index:1;width:clamp(8px,1vw,14px);aspect-ratio:1;background:var(--orange);opacity:0}
html.is-loaded .hero__dots i{animation:dot 3s var(--d,0s) steps(1) infinite}
.hero__dots i:nth-child(1){left:12%;top:20%;--d:1.6s}
.hero__dots i:nth-child(2){left:86%;top:30%;background:var(--ink);--d:2.1s}
.hero__dots i:nth-child(3){left:20%;top:64%;background:var(--ink);--d:2.6s;width:.7vw}
.hero__dots i:nth-child(4){left:78%;top:70%;--d:1.9s}
.hero__dots i:nth-child(5){left:33%;top:13%;--d:2.9s;background:var(--ink)}
@keyframes dot{0%,40%{opacity:0}41%,70%{opacity:1}71%,100%{opacity:0}}

.hero__vert{
  position:absolute;z-index:4;top:50%;font:500 10.5px/1 var(--f-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--dim);white-space:nowrap;
  writing-mode:vertical-rl;opacity:0;
}
html.is-loaded .hero__vert{animation:fade 1s 1.6s forwards}
.hero__vert em{font-size:1.5em;letter-spacing:0;color:var(--ink);text-transform:none}
.hero__vert--l{left:calc(var(--gut) - 6px);transform:translateY(-50%) rotate(180deg)}
.hero__vert--r{right:calc(var(--gut) - 6px);transform:translateY(-50%)}
@keyframes fade{to{opacity:1}}

/* bloco de "spec" em mono, no espírito dos créditos de pôster */
.hero__spec{
  position:absolute;z-index:4;left:calc(var(--gut) + 2vw);bottom:calc(var(--vh)*.2);display:grid;gap:3px;
  font:500 clamp(9px,.72vw,11px)/1.35 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink);max-width:36ch;opacity:0;
}
html.is-loaded .hero__spec{animation:fade 1s 1.8s forwards}
.hero__spec p{opacity:.85}
.hero__spec-by{margin-top:10px;color:var(--dim);display:flex;align-items:center;gap:8px}
.hero__spec-by i{width:8px;height:8px;background:var(--orange);display:block}

.hero__lead{
  position:absolute;z-index:4;right:calc(var(--gut) + 2vw);bottom:calc(var(--vh)*.2);text-align:right;
  font-weight:600;font-size:clamp(15px,1.55vw,24px);line-height:1.2;letter-spacing:-.025em;opacity:0;max-width:16em;
}
.hero__lead em{font-size:1.15em;color:var(--ember)}
html.is-loaded .hero__lead{animation:fade 1s 2s forwards}

.hero__scroll{
  position:absolute;z-index:4;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));translate:-50% 0;display:none;
  flex-direction:column;align-items:center;gap:8px;font:500 10px/1 var(--f-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--dim);
}
.hero__scroll i{width:1px;height:38px;background:linear-gradient(var(--ink),transparent);animation:drip 1.8s var(--ease) infinite;transform-origin:top}
@keyframes drip{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* ==========================================================================
   Fita (marquee em X)
   ========================================================================== */
.ribbon{position:relative;height:clamp(180px,25vw,360px);margin-top:-2vw;z-index:5;overflow:hidden}
.ribbon__row{
  position:absolute;left:-6%;right:-6%;top:50%;display:flex;overflow:hidden;
  font-weight:800;font-size:clamp(32px,6vw,96px);line-height:1;letter-spacing:-.04em;text-transform:uppercase;white-space:nowrap;
}
.ribbon__row--a{background:var(--orange);color:#050505;transform:translateY(-100%) rotate(-2.6deg);transform-origin:50% 50%}
.ribbon__row--b{background:var(--ink);color:#050505;transform:translateY(58%) rotate(1.8deg)}
.ribbon__row--b{font-size:clamp(28px,5vw,80px)}
.ribbon__in{display:flex;align-items:center;flex:none;gap:.5em;padding:.18em 0 .22em;will-change:transform}
.ribbon__in span{display:block}
.ribbon__in em{font-size:1.12em;text-transform:none}
.sp{display:block;flex:none;width:.42em;height:.42em;background:currentColor;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);margin:0 .12em}

/* ==========================================================================
   01 · SOBRE
   ========================================================================== */
.about__in{
  height:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"eyebrow photo" "text photo" "stats photo";
  grid-template-rows:auto auto auto;align-content:center;column-gap:clamp(28px,5vw,90px);row-gap:clamp(24px,4vh,44px);
  padding:0 var(--gut);max-width:1500px;margin:0 auto;position:relative;
}
.about__in .eyebrow{grid-area:eyebrow}
.about::before{content:"";position:absolute;left:-15vw;top:30%;width:60vw;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(122,21,38,.38),transparent);filter:blur(30px);pointer-events:none}
.manifesto{
  grid-area:text;font-weight:700;font-size:clamp(27px,3.9vw,68px);line-height:1.03;letter-spacing:-.04em;
}
.manifesto em{font-size:1.12em;letter-spacing:-.02em}
.manifesto .w{color:var(--ink);transition:color .5s,filter .5s}
.js .manifesto .w{color:rgba(238,232,222,.14)}
.js .manifesto .w.lit{color:var(--ink)}
.js .manifesto em .w.lit{color:var(--ember)}
html:not(.js) .manifesto em{color:var(--ember)}

.stats{grid-area:stats;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gut);border-top:1px solid var(--line);padding-top:clamp(14px,2.4vh,26px)}
.stats div{display:flex;flex-direction:column-reverse;gap:8px}
.stats dt{font:500 10.5px/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.stats dd{font-weight:800;font-size:clamp(30px,4.2vw,68px);line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums}

/* cartão "por trás do boneco": boneco em close por baixo, foto real revelada pela varredura */
.about__photo{grid-area:photo;align-self:center;width:min(27vw,400px);display:grid;gap:12px;--rv:1}
.ph__view{
  position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:4px;isolation:isolate;
  background:radial-gradient(90% 80% at 40% 30%,#a5223a 0%,#4a0d19 50%,#0a0305 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.06),0 30px 70px -24px rgba(0,0,0,.85),0 0 90px -30px rgba(255,74,28,.35);
}
.ph__view::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(120% 100% at 50% 45%,transparent 60%,rgba(0,0,0,.4))}
.ph__me{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:cover;clip-path:inset(0 calc((1 - var(--rv))*100%) 0 0)}
.ph__scan{
  position:absolute;z-index:3;top:0;bottom:0;left:calc(var(--rv)*100%);width:2px;margin-left:-1px;background:#fff;
  box-shadow:0 0 18px 4px rgba(255,74,28,.85),0 0 60px 14px rgba(255,74,28,.35);
  opacity:min(1,calc(var(--rv)*24),calc((1 - var(--rv))*24));
}
.about__photo .frame__shot,.about__photo .vf-c{z-index:6}
.about__photo figcaption{display:grid;gap:4px;font-weight:700;font-size:clamp(15px,1.3vw,20px);letter-spacing:-.03em}
.about__photo figcaption span{font:500 10.5px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}

/* ==========================================================================
   02 · TRAJETÓRIA — fita de filme
   ========================================================================== */
.film__stick{display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,3.2vh,36px)}
.film__head{padding:calc(56px + env(safe-area-inset-top,0px)) var(--gut) 0;display:grid;gap:clamp(10px,1.6vh,18px);position:relative;z-index:2}
.film__head .h2{font-size:clamp(28px,4vw,66px);max-width:14em}
.film__meta{display:flex;align-items:center;gap:14px;font:500 10.5px/1 var(--f-mono);letter-spacing:.16em;color:var(--dim)}
.film__prog{width:clamp(120px,18vw,260px);height:2px;background:var(--line);overflow:hidden}
.film__prog i{display:block;height:100%;background:var(--orange);transform-origin:left;transform:scaleX(var(--fpg,0))}

.film__track{
  position:relative;display:flex;align-items:stretch;gap:clamp(28px,5vw,90px);width:max-content;
  padding:34px calc(var(--gut) + 4vw) 34px var(--gut);background:#0c0b0a;border-block:1px solid #1d1b19;will-change:transform;
}
/* furos da película */
.film__track::before,.film__track::after{
  content:"";position:absolute;left:0;right:0;height:12px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='12'%3E%3Crect x='4' y='1' width='16' height='10' rx='3' fill='%23050505'/%3E%3C/svg%3E") repeat-x;
}
.film__track::before{top:11px}.film__track::after{bottom:11px}

.frame{
  --fh:min(calc(var(--vh)*.4),36vw);
  flex:none;display:grid;grid-template-columns:auto minmax(240px,26vw);gap:clamp(18px,2.4vw,40px);align-items:end;
  opacity:calc(.32 + var(--fa,1)*.68);transition:opacity .2s;
}
.frame__view{
  position:relative;height:var(--fh);aspect-ratio:4/5;overflow:hidden;border-radius:4px;isolation:isolate;
  box-shadow:0 0 0 1px rgba(255,255,255,.06),0 24px 60px -20px rgba(0,0,0,.8);
}
.frame__view--orange{background:radial-gradient(90% 80% at 50% 60%,#ff4a1c 0%,#8a1d0b 45%,#160604 100%)}
.frame__view--maroon{background:radial-gradient(90% 80% at 40% 30%,#a5223a 0%,#4a0d19 50%,#0a0305 100%)}
.frame__view--cream{background:radial-gradient(90% 80% at 50% 40%,#f6efe3 0%,#d9cfbe 60%,#a89e8d 100%)}
.frame__view--ice{background:radial-gradient(90% 80% at 60% 40%,#8fd3ff 0%,#2b6a92 40%,#04101a 100%)}
.frame__view::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(120% 100% at 50% 50%,transparent 55%,rgba(0,0,0,.45));}
.crop{
  position:absolute;z-index:1;left:50%;top:50%;height:calc(var(--k,1)*100%);width:auto;max-width:none;
  transform:translate(calc(var(--cx,.5)*-100% + var(--fp,0)*-22px),calc(var(--cy,.5)*-100%));
  will-change:transform;
}
.frame__shot,.frame__tc{position:absolute;z-index:4;font:500 9.5px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:#fff;mix-blend-mode:difference}
.frame__shot{left:18px;top:16px}
.frame__tc{left:18px;bottom:16px;opacity:.8}

.vf-c{position:absolute;z-index:4;width:14px;height:14px;border:solid #fff;mix-blend-mode:difference;opacity:.9}
.vf-c--tl{left:8px;top:8px;border-width:1.5px 0 0 1.5px}.vf-c--tr{right:8px;top:8px;border-width:1.5px 1.5px 0 0}
.vf-c--bl{left:8px;bottom:8px;border-width:0 0 1.5px 1.5px}.vf-c--br{right:8px;bottom:8px;border-width:0 1.5px 1.5px 0}

.frame__body{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding-bottom:6px}
.frame__no{
  position:absolute;right:0;top:calc(var(--fh)*-.62);font:italic 400 clamp(90px,13vw,210px)/.8 var(--f-serif);
  color:transparent;-webkit-text-stroke:1px rgba(238,232,222,.28);pointer-events:none;user-select:none;
}
.tag{display:inline-flex;align-items:center;gap:9px;font:500 10.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line);padding:8px 12px;border-radius:99px}
.tag i{width:6px;height:6px;border-radius:50%;background:var(--dim)}
.tag--live{color:var(--ink);border-color:rgba(255,74,28,.55)}
.tag--live i{background:var(--orange);animation:blink 1.2s steps(1) infinite}
.tag--next{color:var(--ice);border-color:rgba(143,211,255,.4)}
.tag--next i{background:var(--ice)}
.frame h3{font-weight:800;font-size:clamp(26px,3.2vw,52px);line-height:.98;letter-spacing:-.045em;margin-top:6px}
.frame h3 em{font-size:1.08em;color:var(--ember);letter-spacing:-.02em}
.frame__where{font:500 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.frame__txt{color:var(--dim);font-size:.96em;max-width:32ch}
.link{display:inline-flex;gap:10px;align-items:center;margin-top:8px;font-weight:600;border-bottom:1px solid var(--orange);padding-bottom:4px;transition:gap .3s var(--ease),color .2s}
.link:hover{gap:18px;color:var(--ember)}

/* ==========================================================================
   03 · STACK — editor de código
   ========================================================================== */
.stack__in{
  height:100%;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,5vw,90px);align-items:center;
  padding:0 var(--gut);max-width:1500px;margin:0 auto;
}
.stack__txt{display:grid;gap:clamp(16px,3vh,32px);align-content:center}
.stack__txt .h2{font-size:clamp(34px,5vw,82px)}
.skills{display:grid;gap:14px}
.skill{display:grid;gap:6px;padding:16px 0 4px;border-top:1px solid var(--line);opacity:.45;transition:opacity .4s}
.skill.is-on{opacity:1}
.skill__n{font-weight:800;font-size:clamp(22px,2.4vw,38px);letter-spacing:-.04em;line-height:1}
.skill__d{color:var(--dim);font-size:.95em;max-width:34ch}
.skill__bar{height:2px;background:var(--line);overflow:hidden;margin-top:6px}
.skill__bar i{display:block;height:100%;background:var(--orange);transform-origin:left;transform:scaleX(var(--sp,0))}
.stack__hint{font:500 10.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

.ed{position:relative;min-width:0}
.ed__glow{position:absolute;inset:-18% -12%;background:radial-gradient(closest-side,rgba(255,74,28,.36),rgba(122,21,38,.16) 55%,transparent);filter:blur(28px);z-index:0}
.ed__win{
  position:relative;z-index:1;border:1px solid rgba(238,232,222,.16);border-radius:14px;overflow:hidden;
  background:rgba(14,12,11,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 40px 90px -30px #000;
}
.ed__bar{display:flex;align-items:center;gap:18px;padding:12px 16px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.ed__dots{display:flex;gap:7px}
.ed__dots i{width:10px;height:10px;border-radius:50%;background:#2a2725}
.ed__dots i:first-child{background:var(--orange)}
.ed__tabs{display:flex;gap:4px;font:500 11.5px/1 var(--f-mono);letter-spacing:.03em}
.ed__tabs b{font-weight:500;padding:8px 12px;border-radius:7px;color:var(--dim);transition:background .3s,color .3s}
.ed__tabs b.is-on{background:rgba(238,232,222,.09);color:var(--ink)}
.ed__body{padding:clamp(14px,2vw,26px);min-height:clamp(300px,52vh,460px);overflow:auto}
.ed pre{font:400 clamp(11px,1.02vw,14.5px)/1.7 var(--f-mono);color:var(--ink);tab-size:2;white-space:pre;-moz-tab-size:2;font-variant-ligatures:none}
.ed pre[hidden]{display:none}
.tk-k{color:var(--orange)}.tk-s{color:#f0cf9a}.tk-v{color:var(--ice)}.tk-f{color:#ffb18a}.tk-n{color:#ff7d9a}.tk-c{color:var(--dim);font-style:italic}.tk-t{color:#ff7d9a}
.caret{display:inline-block;width:.55em;height:1.1em;background:var(--orange);vertical-align:text-bottom;margin-left:1px;animation:blink 1s steps(1) infinite}
.ed__out{display:grid;gap:6px;padding:14px 18px 16px;border-top:1px solid var(--line);font:400 12px/1.5 var(--f-mono);color:var(--dim);min-height:72px}
.ed__prompt{color:var(--ok)}
.ed__res{color:var(--ink);opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.ed__res.on{opacity:1;transform:none}

/* ==========================================================================
   05 · LENTE — foco puxado pelo scroll
   ========================================================================== */
.lens__stick{background:radial-gradient(70% 60% at 50% 50%,#0e0a09,#050505)}
.lens__bokeh{position:absolute;inset:-5%;filter:blur(calc((1 - var(--f,0))*22px + .6px));will-change:filter;opacity:calc(.35 + var(--f,0)*.65)}
.bk{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--c),.16) 0,rgba(var(--c),.16) 52%,rgba(var(--c),.55) 60%,rgba(var(--c),.16) 68%,transparent 71%);
  transform:translate3d(0,calc(var(--lp,0)*var(--bs,1)*-120px),0);
}
.lens__grid{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(rgba(255,255,255,.05),rgba(255,255,255,.05)) 33.33% 0/1px 100% no-repeat,
  linear-gradient(rgba(255,255,255,.05),rgba(255,255,255,.05)) 66.66% 0/1px 100% no-repeat,
  linear-gradient(rgba(255,255,255,.05),rgba(255,255,255,.05)) 0 33.33%/100% 1px no-repeat,
  linear-gradient(rgba(255,255,255,.05),rgba(255,255,255,.05)) 0 66.66%/100% 1px no-repeat}
.lens__center{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;gap:clamp(14px,2.6vh,26px);padding:0 var(--gut)}
.lens__center .eyebrow{justify-content:center}
.lens__center .eyebrow::after{display:none}
.lens__title{
  font-weight:800;font-size:min(17.5vw,34vh*1.6,290px);line-height:.85;letter-spacing:calc(.22em - var(--f,0)*.27em);text-transform:uppercase;
  filter:blur(calc((1 - var(--f,0))*26px));opacity:calc(.25 + var(--f,0)*.75);
  background:linear-gradient(100deg,#8c8c8c,#fff 20%,#6d6d6d 38%,#f5f0e6 54%,#5c5c5c 70%,#fff 86%,#8c8c8c);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  padding:0 .06em .06em;will-change:filter;
}
.lens__title em{text-transform:none;letter-spacing:-.03em;font-size:1.05em;-webkit-text-fill-color:var(--ember);color:var(--ember)}
.lens__txt{max-width:44ch;color:var(--ink);font-size:clamp(15px,1.3vw,20px);line-height:1.45;opacity:calc((var(--f,0) - .55)*3);transform:translateY(calc((1 - var(--f,0))*20px))}
.lens__tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;opacity:calc((var(--f,0) - .7)*3.4)}
.lens__tags li{font:500 10.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line);padding:9px 13px;border-radius:99px;color:var(--dim)}

/* visor */
.vf{position:absolute;inset:clamp(56px,9vh,84px) var(--gut) clamp(46px,8vh,72px);pointer-events:none;font:500 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#fff;mix-blend-mode:difference}
.vf>.vf-c{width:26px;height:26px;border-width:2px}
.vf>.vf-c--tl{left:0;top:0;border-width:2px 0 0 2px}.vf>.vf-c--tr{right:0;top:0;border-width:2px 2px 0 0}
.vf>.vf-c--bl{left:0;bottom:0;border-width:0 0 2px 2px}.vf>.vf-c--br{right:0;bottom:0;border-width:0 2px 2px 0}
.vf__top-l,.vf__top-r{position:absolute;top:18px;display:flex;gap:16px;align-items:center}
.vf__top-l{left:20px}.vf__top-r{right:20px}
.vf__top-r b,.vf__top-l span{font-variant-numeric:tabular-nums}
.vf__top-r b{font-weight:600}
.vf__rec{display:flex;align-items:center;gap:8px}
.vf__rec i{width:9px;height:9px;border-radius:50%;background:#fff;animation:blink 1.2s steps(1) infinite}
.vf__bat{display:flex;gap:2px;border:1.5px solid #fff;padding:2px;border-radius:2px}
.vf__bat i{width:5px;height:9px;background:#fff}
.vf__reticle{position:absolute;left:50%;top:50%;width:clamp(70px,9vw,120px);aspect-ratio:1;translate:-50% -50%;
  border:1.5px solid #fff;transition:border-color .3s,transform .3s var(--ease);transform:scale(calc(1.5 - var(--f,0)*.5));display:grid;place-items:center}
.vf__reticle i{width:4px;height:4px;background:#fff}
.vf__reticle span{position:absolute;top:calc(100% + 10px);white-space:nowrap;font-size:10px}
.vf__reticle.is-ok{border-color:var(--ok);opacity:.6}
.vf__level{position:absolute;left:50%;top:50%;width:clamp(120px,22vw,300px);height:1.5px;background:#fff;translate:-50% -50%;opacity:.35;transform:rotate(calc(var(--lp,0)*6deg - 3deg));display:none}
.vf__hist{position:absolute;left:20px;bottom:18px;display:flex;align-items:flex-end;gap:2px;height:34px}
.vf__hist i{display:block;width:4px;background:#fff;opacity:.85;height:var(--h,20%)}
.vf__bot-r{position:absolute;right:20px;bottom:18px}

/* ==========================================================================
   04 · AUTOMAÇÃO — nodes se conectando até virar uma notificação
   ========================================================================== */
.auto{position:relative;padding:clamp(80px,14vh,160px) var(--gut) clamp(70px,12vh,140px);max-width:1500px;margin:0 auto}
.auto::before{content:"";position:absolute;right:0;top:10%;width:40vw;max-width:600px;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,74,28,.16),transparent);filter:blur(20px);pointer-events:none;z-index:0}
.auto__head{position:relative;z-index:1;display:grid;gap:clamp(14px,2.4vh,26px);margin-bottom:clamp(40px,7vh,84px);max-width:640px}
.auto__lead{color:var(--dim);font-size:clamp(15px,1.3vw,20px);max-width:46ch}
.auto__tags{display:flex;flex-wrap:wrap;gap:8px}
.auto__tags li{font:500 10.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line);padding:9px 13px;border-radius:99px;color:var(--dim)}

.auto__stage{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,5vw,80px);align-items:center}

.auto__robot{justify-self:center;width:min(100%,360px)}
.auto__robot img{width:100%;height:auto;filter:drop-shadow(0 30px 50px rgba(0,0,0,.6)) drop-shadow(0 0 40px rgba(255,74,28,.16));animation:autoBreathe 5.5s ease-in-out infinite}
@keyframes autoBreathe{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(-6px) scale(1.006,1.012)}}

/* ---------- fluxo de nodes ---------- */
.auto__flow{display:flex;flex-direction:column;align-items:flex-start;gap:0;max-width:400px}
.fnode{
  display:flex;align-items:center;gap:14px;padding:14px 20px;border-radius:16px;width:100%;
  background:linear-gradient(155deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border:1px solid var(--line);box-shadow:0 20px 34px -22px rgba(0,0,0,.7);
}
.fnode span{font-weight:700;font-size:15px;letter-spacing:-.01em}
.fnode--n8n{border-color:rgba(255,74,28,.4)}
.fline{display:flex;justify-content:flex-start;padding-left:35px;height:30px}
.fline i{position:relative;width:2px;height:100%;background:var(--line);overflow:hidden;display:block}
.fline i::after{
  content:"";position:absolute;left:-2px;top:-40%;width:6px;height:40%;border-radius:99px;
  background:linear-gradient(var(--orange),transparent);
  animation:flowdown 2.2s linear infinite;
}
@keyframes flowdown{to{top:100%}}

/* ícone circular por trás de cada node */
.ficon{
  --s:38px;flex:none;width:var(--s);height:var(--s);border-radius:50%;display:grid;place-items:center;
  background:rgba(255,74,28,.12);color:var(--ember);
}
.ficon::before{content:"";width:52%;height:52%;background-color:currentColor;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}
.ficon--bolt::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E")}
.ficon--crawl::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M20 20l-4.5-4.5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M20 20l-4.5-4.5'/%3E%3C/svg%3E")}
.ficon--bot::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='7' width='16' height='13' rx='4'/%3E%3Cpath d='M9 13v1M15 13v1M12 7V3M9 3h6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='7' width='16' height='13' rx='4'/%3E%3Cpath d='M9 13v1M15 13v1M12 7V3M9 3h6'/%3E%3C/svg%3E")}
.ficon--flow::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='6' r='2.4'/%3E%3Ccircle cx='5' cy='18' r='2.4'/%3E%3Ccircle cx='18' cy='12' r='2.4'/%3E%3Cpath d='M7 7l9 4M7 17l9-4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='6' r='2.4'/%3E%3Ccircle cx='5' cy='18' r='2.4'/%3E%3Ccircle cx='18' cy='12' r='2.4'/%3E%3Cpath d='M7 7l9 4M7 17l9-4'/%3E%3C/svg%3E")}
.ficon--chat::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 01-8.9 8.4 9 9 0 01-3.6-.8L3 20l1.1-4a8.3 8.3 0 01-1-4A8.4 8.4 0 0112 3a8.6 8.6 0 019 8.5z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 01-8.9 8.4 9 9 0 01-3.6-.8L3 20l1.1-4a8.3 8.3 0 01-1-4A8.4 8.4 0 0112 3a8.6 8.6 0 019 8.5z'/%3E%3C/svg%3E")}

/* ---------- notificação final ---------- */
.fnotify{
  position:relative;display:flex;align-items:flex-start;gap:14px;margin-top:18px;padding:16px 20px;width:100%;
  background:linear-gradient(155deg,rgba(255,74,28,.16),rgba(255,74,28,.03));border:1px solid rgba(255,74,28,.4);border-radius:16px;
  box-shadow:0 26px 50px -24px rgba(255,74,28,.35);
}
.fnotify__ping{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 0 rgba(255,74,28,.6)}
html.is-loaded .fnotify__ping{animation:ping 2s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,74,28,.55)}70%{box-shadow:0 0 0 14px rgba(255,74,28,0)}100%{box-shadow:0 0 0 0 rgba(255,74,28,0)}}
.fnotify__ico{flex:none;width:38px;height:38px;border-radius:50%;background:var(--orange);color:#050505;display:grid;place-items:center}
.fnotify__ico .ficon{all:unset;display:grid;place-items:center;width:100%;height:100%}
.fnotify__ico .ficon::before{width:52%;height:52%;background-color:#050505}
.fnotify__txt b{display:block;font-size:13px;letter-spacing:.02em;margin-bottom:2px}
.fnotify__txt p{color:var(--dim);font-size:13.5px;line-height:1.4}

@media (max-width:900px){
  .auto__stage{grid-template-columns:1fr;justify-items:center;gap:36px}
  .auto__robot{width:min(56vw,280px)}
  .auto__flow{max-width:420px;width:100%}
}
@media (max-width:520px){
  .fnode{padding:12px 16px;gap:11px}
  .fnode span{font-size:13.5px}
  .ficon{--s:32px}
}
@media (prefers-reduced-motion:reduce){
  .auto__robot img{animation:none}
  .fline i::after{animation:none;top:0;height:100%;background:var(--orange)}
  .fnotify__ping{animation:none}
}

/* ==========================================================================
   06 · GALERIA — transição: câmera 3D gira e cresce com o scroll, depois a grade de fotos
   ========================================================================== */
/* a câmera é uma TRANSIÇÃO amarrada ao scroll, não um brinquedo interativo:
   sem cliques, sem arrastar — o progresso da seção fixada (--gp, 0 a 1) gira
   e "aproxima" o modelo 3D dentro do iframe (via postMessage) e ao mesmo
   tempo escala o próprio quadro do iframe, reforçando a sensação de algo
   vindo em direção à tela. */
.gal__stick{display:grid;place-items:center;isolation:isolate}
.gal__head{
  position:relative;z-index:2;text-align:center;max-width:620px;padding:0 var(--gut);
  opacity:calc(1 - var(--gp,0)*3.2);transform:translateY(calc(var(--gp,0)*-26px));
  transition:opacity .08s linear,transform .08s linear;pointer-events:none;
}
.gal__head .eyebrow{justify-content:center}
.gal__head .eyebrow::after{display:none}
.gal__lead{color:var(--dim);margin-top:14px;font-size:clamp(15px,1.3vw,20px)}

.gal__cam{position:absolute;inset:0;z-index:1}
.gal__cam-frame{display:block;width:100%;height:100%;border:0;background:#050505;pointer-events:none}

/* ---------- grade de fotos (seção normal, depois da transição) ---------- */
.galphotos{position:relative;padding:clamp(30px,6vh,70px) var(--gut) clamp(90px,16vh,180px);max-width:1600px;margin:0 auto}
.gal__grid.is-flash{animation:galFlash .5s ease-out}
@keyframes galFlash{0%{filter:brightness(1)}15%{filter:brightness(1.9)}100%{filter:brightness(1)}}
.gal__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1.2vw,14px)}
.gtile{
  position:relative;aspect-ratio:4/5;border-radius:10px;overflow:hidden;border:1px solid var(--line);
  background:#000;padding:0;cursor:pointer;isolation:isolate;
}
.gtile__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  background:linear-gradient(150deg,var(--a,#333),var(--b,#111));transition:transform .6s var(--ease)}
.gtile::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.75),transparent 46%);opacity:0;transition:opacity .3s}
.gtile:hover .gtile__img,.gtile:focus-visible .gtile__img{transform:scale(1.07)}
.gtile:hover::after,.gtile:focus-visible::after{opacity:1}
.gtile__cap{
  position:absolute;left:10px;right:10px;bottom:9px;z-index:1;text-align:left;color:#fff;
  font:600 11.5px/1.3 var(--f-display);letter-spacing:-.01em;opacity:0;transform:translateY(6px);
  transition:opacity .3s,transform .3s;
}
.gtile:hover .gtile__cap,.gtile:focus-visible .gtile__cap{opacity:1;transform:none}
.gtile__cap small{display:block;font:500 9.5px/1 var(--f-mono);letter-spacing:.04em;color:rgba(255,255,255,.72);margin-top:3px;text-transform:none}

/* revelação com atraso extra, pra vir logo depois do flash da câmera */
.js .gal .gtile[data-reveal]{transition-delay:calc(260ms + var(--i,0)*70ms)}

/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:6vh 5vw;
  background:rgba(5,5,5,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility 0s .35s}
.lightbox.is-open{opacity:1;visibility:visible;transition:opacity .35s var(--ease)}
.lightbox__frame{max-width:min(90vw,900px);width:100%;transform:scale(.94);transition:transform .35s var(--ease)}
.lightbox.is-open .lightbox__frame{transform:scale(1)}
.lightbox__img{display:block;width:100%;aspect-ratio:4/5;max-height:76vh;border-radius:10px;
  background:linear-gradient(150deg,var(--a,#333),var(--b,#111));box-shadow:0 60px 100px -40px rgba(0,0,0,.8)}
.lightbox__img img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.lightbox__cap{margin-top:16px;text-align:center;color:var(--dim);font:500 13px/1.4 var(--f-mono);letter-spacing:.02em}
.lightbox__close{
  position:absolute;top:calc(20px + env(safe-area-inset-top,0px));right:20px;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line);color:var(--ink);font-size:18px;display:grid;place-items:center;transition:background .2s,border-color .2s;
}
.lightbox__close:hover{background:var(--orange);border-color:var(--orange);color:#050505}

@media (max-width:980px){
  .gal__grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  .gal__grid{grid-template-columns:repeat(2,1fr)}
  .gtile__cap{opacity:1;transform:none;background:linear-gradient(0deg,rgba(0,0,0,.72),transparent 60%)}
}

/* ==========================================================================
   07 · PROJETOS
   ========================================================================== */
.work{position:relative;padding:clamp(80px,14vh,160px) var(--gut) clamp(90px,16vh,180px);max-width:1500px;margin:0 auto}
.work__head{display:grid;gap:clamp(14px,2.4vh,26px);margin-bottom:clamp(36px,7vh,80px)}
.work__lead{max-width:44ch;color:var(--dim);font-size:clamp(15px,1.3vw,20px)}
.posters{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.4vw,36px);perspective:1400px}
.poster{
  --rx:0deg;--ry:0deg;--gx:50%;--gy:50%;
  position:relative;display:grid;grid-template-rows:auto 1fr auto;aspect-ratio:2/3;padding:clamp(16px,1.8vw,26px);border-radius:8px;overflow:hidden;isolation:isolate;
  transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .5s var(--ease);will-change:transform;
  box-shadow:0 0 0 1px rgba(255,255,255,.07),0 40px 80px -40px #000;
}
.poster.is-tilt{transition:transform .08s linear}
.poster--a{background:radial-gradient(70% 55% at 50% 100%,#ff4a1c,#7c1c0a 45%,#0a0403 100%);--tone:#050505}
.poster--b{background:conic-gradient(from 210deg at 50% 45%,#c9c4bb,#8c8a85,#f4f1ea,#77746f,#e3ded5,#9c9891,#c9c4bb);color:#050505}
.poster--c{background:radial-gradient(80% 60% at 30% 20%,#a5223a,#4a0d19 55%,#0a0305),#0a0305}
.poster::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
.poster__glare{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(closest-side circle at var(--gx) var(--gy),rgba(255,255,255,.4),transparent 70%);opacity:0;transition:opacity .3s;mix-blend-mode:soft-light}
.poster:hover .poster__glare{opacity:1}
.poster>*{position:relative;z-index:1}

/* selo da EDU SEF: fica encostado no canto e "salta" para fora do cartão no hover,
   usando o mesmo espaço 3D (perspective + preserve-3d) do tilt do poster */
.poster__brand{
  position:absolute;z-index:4;top:clamp(64px,11vw,92px);right:clamp(14px,2.4vw,22px);
  width:clamp(46px,6vw,60px);aspect-ratio:1;display:grid;place-items:center;
  background:#fff;border-radius:16px;padding:9px;
  box-shadow:0 10px 22px -10px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08);
  transform:translateZ(26px) rotate(-6deg);transform-origin:70% 30%;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.poster__brand img{width:100%;height:100%;object-fit:contain}
.poster:hover .poster__brand{
  transform:translateZ(110px) scale(1.14) rotate(2deg);
  box-shadow:0 34px 54px -16px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.14);
}
@media (hover:none){ .poster:hover .poster__brand{transform:translateZ(26px) rotate(-6deg)} }
.poster__top{display:flex;justify-content:space-between;align-items:baseline;font:500 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase}
.poster__top b{font-weight:500}
.poster__top i{font:italic 400 clamp(26px,3vw,46px)/1 var(--f-serif);letter-spacing:0;text-transform:none}
.poster__mid{align-self:center;font-weight:800;font-size:clamp(46px,7vw,124px);line-height:.84;letter-spacing:-.06em;text-transform:uppercase;transform:translateZ(40px)}
.poster__mid em{font-size:1.08em;text-transform:none;letter-spacing:-.03em}
.poster__bot{display:grid;gap:8px}
.poster__bot small{font:500 10px/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase}
.poster__bot small:first-child{justify-self:start;border:1px solid currentColor;padding:6px 10px;border-radius:99px}
.poster__bot small:last-child{opacity:.7}

/* ==========================================================================
   08 · CONTATO
   ========================================================================== */
.contact{position:relative;min-height:var(--vh);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;isolation:isolate;border-top:1px solid var(--line)}
.contact::before{
  content:"";position:absolute;left:50%;bottom:-38vw;width:120vw;aspect-ratio:1;translate:-50% 0;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,rgba(255,74,28,.85),rgba(255,74,28,.36) 42%,rgba(122,21,38,.2) 66%,transparent);filter:blur(24px);
  scale:calc(.7 + var(--cp,0)*.35);opacity:calc(.35 + var(--cp,0)*.65);
}
.contact__in{padding:clamp(90px,16vh,170px) var(--gut) 0;display:grid;gap:clamp(20px,4vh,40px);justify-items:start}
.contact__h{font-weight:800;font-size:clamp(46px,11.5vw,210px);line-height:.86;letter-spacing:-.06em}
.contact__h em{font-size:1.06em;color:var(--ember);letter-spacing:-.03em}
.contact__links{position:relative;display:flex;flex-wrap:wrap;gap:12px}
.goo-defs{position:absolute;width:0;height:0;overflow:hidden}

/* camada de blobs por trás dos botões: some por padrão, e só funde quando o
   cursor (.goo-cursor) chega perto — ver initGoo() em main.js */
.goo-field{position:absolute;inset:0;z-index:0;pointer-events:none}
html.has-cur .goo-field{filter:url(#goo)}
.goo-blob,.goo-cursor{
  position:absolute;left:0;top:0;border-radius:99px;background:var(--orange);opacity:0;transform:scale(.001);
  will-change:opacity,transform;transition:opacity .28s,transform .28s cubic-bezier(.2,.8,.2,1);
}
.goo-cursor{width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;transition:opacity .32s,transform .12s linear}
.btn{
  position:relative;z-index:1;display:inline-flex;align-items:center;gap:14px;padding:16px 26px;border-radius:99px;border:1px solid rgba(238,232,222,.4);
  font-weight:700;font-size:clamp(15px,1.3vw,19px);letter-spacing:-.02em;transition:background .3s,color .3s,border-color .3s;will-change:transform;
}
.btn i{font-style:normal;transition:transform .3s var(--ease)}
.btn:hover{background:var(--orange);border-color:var(--orange);color:#050505}
.btn:hover i{transform:translate(3px,-3px)}
.btn--stack{gap:20px;padding:12px 24px 12px 26px}
.btn__label{display:flex;flex-direction:column;gap:1px;align-items:flex-start}
.btn--stack b{font:500 10px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;font-weight:500;opacity:.65}
.btn--stack i{flex:none}

.contact__loc{
  display:flex;align-items:center;gap:9px;margin-top:-6px;
  font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
}
.contact__loc i{width:7px;height:7px;border-radius:50%;background:var(--orange);flex:none}

.contact__verse{
  position:relative;z-index:2;max-width:46ch;margin-top:12px;padding-top:26px;border-top:1px solid var(--line);
  font-family:var(--f-serif);font-style:italic;font-size:clamp(16px,1.4vw,19px);line-height:1.5;color:var(--dim);
}
.contact__verse-mark{position:absolute;top:2px;left:0;transform:translateY(-58%);font-family:var(--f-serif);font-style:normal;font-size:2.6em;line-height:1;color:var(--orange);opacity:.7}
.contact__verse cite{display:block;margin-top:12px;font-family:var(--f-mono);font-style:normal;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);opacity:.75}

.peek{position:absolute;right:clamp(10px,7vw,120px);bottom:clamp(46px,7vh,70px);z-index:2;width:min(30vw,380px)}
.peek__win{position:relative;height:min(38vw,470px);overflow:hidden;-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
.peek__win img{width:100%;height:auto;transform:translateY(calc((1 - var(--cp,0))*46%));will-change:transform;}
.peek__bubble{
  position:absolute;z-index:3;left:14%;top:-19%;translate:0 0;background:var(--ink);color:#050505;padding:14px 18px;border-radius:18px 18px 18px 4px;
  font:600 clamp(12px,1.05vw,16px)/1.25 var(--f-display);letter-spacing:-.02em;transform:scale(calc(var(--cp,0)*1.4 - .4));transform-origin:0 100%;opacity:calc(var(--cp,0)*3 - 1.6);width:max-content;max-width:190px;
}
.peek__bubble::first-line{font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:1.6em}

.contact__bar{
  position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding:20px var(--gut) calc(20px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);
  font:500 10.5px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);background:rgba(5,5,5,.5)
}
.contact__bar a:hover{color:var(--ink)}
.contact__clock{display:flex;align-items:center;gap:8px;white-space:nowrap}
.contact__clock i{width:6px;height:6px;border-radius:50%;background:var(--ok);animation:blink 1.6s steps(1) infinite}
/* o relógio fica no meio de verdade (não só entre os vizinhos), largo o bastante para o nome comprido de um lado */
@media (min-width:760px){
  .contact__bar{display:grid;grid-template-columns:1fr auto 1fr;justify-content:normal}
  .contact__bar>:first-child{justify-self:start}
  .contact__clock{justify-self:center}
  .contact__bar>:last-child{justify-self:end}
}

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width:900px){
  .about__in{grid-template-columns:1fr auto;grid-template-areas:"eyebrow photo" "text text" "stats stats";row-gap:clamp(14px,2.4vh,28px)}
  .about__in .eyebrow{align-self:start}
  .about__in{padding-top:calc(62px + env(safe-area-inset-top,0px))}
  .about__photo{width:min(34vw,17vh);align-self:start}
  .about__photo figcaption{display:none}
  .manifesto{font-size:clamp(23px,min(6.4vw,4.4vh),54px)}
  .stats{gap:12px}
  .stats dd{font-size:clamp(24px,6vw,44px)}
}
@media (min-width:600px) and (max-width:900px){
  .about__photo{width:min(30vw,24vh)}
}
@media (max-width:980px){
  .lens__title{display:grid;justify-items:center;font-size:min(22vw,17vh*1.6);letter-spacing:calc(.12em - var(--f,0)*.16em)}
  .nav__links{display:none}
  .nav__menu{display:block}
  .stack__in{grid-template-columns:1fr;align-content:center;gap:18px}
  .stack__txt{gap:12px}
  .stack__txt .h2{font-size:clamp(30px,8vw,52px)}
  .skills{display:none}
  .stack__hint{display:none}
  .ed__body{min-height:0;max-height:52vh}
  .posters{grid-template-columns:1fr;max-width:460px;margin:0 auto;gap:20px}
  .poster{aspect-ratio:4/5}
  .peek{width:min(46vw,300px)}
  .peek__win{height:min(58vw,380px)}
  .peek__bubble{left:4%;top:-14%}
}
/* Hero empilhado: celular (qualquer orientação estreita) e tablet em pé.
   --ph = altura do boneco como fração da tela; o resto se posiciona a partir dele. */
@media (max-width:1100px) and (orientation:portrait){
  .hero{--ph:.74;min-height:620px}
  .hero__vert{display:none}
  .name__a{flex-direction:column;align-items:center;top:calc(var(--vh)*.085);font-size:min(27vw,17vh*1.6)}
  .name__w{justify-content:center}
  .name__b{z-index:3;left:0;right:0;padding:0 0 .12em;text-align:center;top:calc(var(--vh)*(1 - var(--ph) + var(--ph)*.3));font-size:min(21vw,12vh*1.6);text-shadow:0 4px 28px rgba(0,0,0,.55)}
  .hero__puppet{height:calc(var(--vh)*var(--ph))}
  .hero__dots i:nth-child(5){display:none}
  .hero__spec{display:none}
  .hero__lead{left:var(--gut);right:var(--gut);bottom:calc(var(--vh)*.05 + 28px);text-align:center;max-width:none;font-size:clamp(14px,4vw,17px);text-shadow:0 2px 14px #000}
  .hero__scroll{display:none}
  .hero__flare{top:calc(var(--vh)*(1 - var(--ph) + var(--ph)*.147))}

  /* chips de vidro no retrato: menores, só 4, nas margens ao lado do boneco —
     entre o fim do nome e o início do "Martinelli", e entre o fim do
     "Martinelli" e o texto final, pra não brigar com nenhum texto legível. */
  .tchip{--sz:clamp(38px,10.5vw,50px)}
  .tchip--lr,.tchip--n8n{display:none}
  .tchip--js{--top:30%;--left:9%}
  .tchip--py{--top:30%;--left:91%}
  .tchip--php{--top:63%;--left:9%}
  .tchip--edusef{--top:63%;--left:91%}
}
/* tablet em pé: boneco menor e nome menor, senão a cabeça cobre as letras */
@media (min-width:600px) and (max-width:1100px) and (orientation:portrait){
  .hero{--ph:.64}
  .name__a{font-size:min(23vw,14vh*1.6)}
  .name__b{font-size:min(17vw,10vh*1.6)}
  .hero__lead{font-size:clamp(16px,2.4vw,22px)}
  .tchip{--sz:clamp(46px,7.6vw,64px)}
}

@media (max-width:720px){
  .stats dt{font-size:9px;letter-spacing:.08em}
  .hud__scene{display:none}
  .frame{grid-template-columns:1fr;width:min(76vw,340px);gap:14px;--fh:min(calc(var(--vh)*.3),64vw)}
  .frame__view{width:100%;height:var(--fh);aspect-ratio:auto}
  .frame__no{display:none}
  .frame__txt{font-size:.9em}
  .film__track{gap:22px;padding-right:12vw}
  .film__head{padding-top:calc(60px + env(safe-area-inset-top,0px))}
  .lens__title{font-size:min(27vw,17vh*1.6)}
  .vf__top-r span:nth-child(3){display:none}
  .vf__bot-r{display:none}
  .contact__h{font-size:clamp(44px,15vw,120px)}
  .peek{right:-6vw;width:56vw}
  .peek__win{height:64vw}
  .peek__bubble{display:none}
  .ribbon{height:clamp(120px,30vw,200px)}
  .contact__verse{max-width:54%}
}
/* telas muito baixas (celular deitado): compacta as cenas fixadas para nada ser cortado */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:0}
  .hero__spec,.hero__lead,.hero__vert,.hero__tech{display:none}
  .name__a{font-size:min(19.6vw,44vh*1.28,320px)}
  .manifesto{font-size:clamp(17px,3.1vw,30px);line-height:1.12}
  .about__in{grid-template-columns:1fr auto;grid-template-areas:"eyebrow photo" "text photo";row-gap:12px}
  .about__photo{width:min(30vw,52vh*.8);align-self:center}
  .stats{display:none}
  .film__head{padding-top:52px;gap:6px}
  .film__head .h2{font-size:clamp(20px,3vw,32px)}
  .film__meta{display:none}
  .frame{--fh:calc(var(--vh)*.42)}
  .frame h3{font-size:24px}
  .frame__txt,.frame__no{display:none}
  .stack__in{grid-template-columns:.7fr 1.3fr;gap:20px;padding-top:64px}
  .stack__txt .h2{font-size:clamp(24px,4vw,40px)}
  .skills,.stack__hint,.stack__txt .eyebrow{display:none}
  .ed__body{max-height:calc(var(--vh) - 150px);padding:10px 14px}
  .ed pre{font-size:10.5px;line-height:1.5}
  .ed__out{min-height:0;padding:8px 14px}
  .lens__center{gap:6px}
  .lens__title{display:block;font-size:min(13vw,26vh*1.6)}
  .lens__txt{font-size:12px}
  .lens__tags{display:none}
  .contact__h{font-size:clamp(32px,8vw,64px)}
  .contact__in{padding-top:70px}
  .peek{width:26vw}
  .peek__win{height:30vw}
  .work{padding-block:60px}
}

@media (max-height:640px) and (min-width:721px){
  .frame{--fh:min(calc(var(--vh)*.36),36vw)}
}

/* ==========================================================================
   Movimento reduzido
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .grain,.hud__rec i,.tag--live i,.caret,.hero__dots i,.hero__scroll i,.hero__puppet-in{animation:none}
  .js .pin{height:auto}
  .pin__stick{position:static;height:auto;min-height:var(--vh);padding:80px 0}
  .film__stick{overflow-x:hidden;overflow-y:visible}
  .film__track{transform:none!important;overflow-x:auto;max-width:100vw}
  .ch>span,.name__b>span{transform:none;animation:none!important}
  .hero__glow{scale:1}.hero__puppet{opacity:1;filter:none}.hero__flare{opacity:.6;transform:none}
  .hero__vert,.hero__spec,.hero__lead,.hud{opacity:1}
  .tchip{animation:none!important;opacity:1;scale:1;rotate:var(--rot);transform:none;transition:none}
  .tchip.is-soft{opacity:.85}
  .js [data-reveal]{opacity:1;transform:none;filter:none}
  .js .manifesto .w{color:var(--ink)}.js .manifesto em .w{color:var(--ember)}
  .lens__title,.lens__bokeh{filter:none}
}