/* ==========================================================================
   GODOI CREATIVE — folha de estilos principal
   Sumário: 1 Fontes · 2 Tokens/tema · 3 Base · 4 Componentes · 5 Menu
            6 Hero · 7 Seções · 8 Trabalhos · 9 Sobre · 10 Disciplinas
            11 Faixa de ondas · 12 Contato · 13 Rodapé · 14 Cursor/Revelações
            15 Responsivo · 16 Movimento reduzido
   ========================================================================== */

/* ---------- 1. FONTES ----------
   Akihiko = fonte de DISPLAY (logo, títulos gigantes, palavras em contorno, lista de projetos, rodapé).
   Space Grotesk = texto corrido, rótulos, números e qualquer caractere que a Akihiko não tenha.

   ATENÇÃO: os arquivos atuais são a versão DEMO (GC Akihiko Demo, Glyphonic): só têm A-Z, a-z, espaço,
   vírgula e ponto (sem acentos, números nem pontuação). Por isso o unicode-range abaixo limita a Akihiko
   a esses caracteres; o resto cai sozinho na Space Grotesk.
   QUANDO COMPRAR A LICENÇA COMPLETA: converta os .ttf/.otf em .woff2, sobrescreva os 8 arquivos de
   assets/fonts/akihiko/ (mesmos nomes) e APAGUE as linhas "unicode-range" das Akihiko aqui embaixo.
   Também mude `--font-display` para incluir a Akihiko em `--font` se quiser usá-la no site todo. */
@font-face{font-family:"Akihiko";font-weight:100;font-style:normal;font-display:swap;src:url("../assets/fonts/akihiko/Akihiko-Thin.woff2") format("woff2");unicode-range:U+0020,U+002C,U+002E,U+0041-005A,U+0061-007A}
@font-face{font-family:"Akihiko";font-weight:200;font-style:normal;font-display:swap;src:url("../assets/fonts/akihiko/Akihiko-Extralight.woff2") format("woff2");unicode-range:U+0020,U+002C,U+002E,U+0041-005A,U+0061-007A}
@font-face{font-family:"Akihiko";font-weight:300;font-style:normal;font-display:swap;src:url("../assets/fonts/akihiko/Akihiko-Light.woff2") format("woff2");unicode-range:U+0020,U+002C,U+002E,U+0041-005A,U+0061-007A}
@font-face{font-family:"Akihiko";font-weight:400;font-style:normal;font-display:swap;src:url("../assets/fonts/akihiko/Akihiko-Regular.woff2") format("woff2");unicode-range:U+0020,U+002C,U+002E,U+0041-005A,U+0061-007A}
@font-face{font-family:"Akihiko";font-weight:500;font-style:normal;font-display:swap;src:url("../assets/fonts/akihiko/Akihiko-Medium.woff2") format("woff2");unicode-range:U+0020,U+002C,U+002E,U+0041-005A,U+0061-007A}
@font-face{font-family:"Akihiko";font-weight:600;font-style:normal;font-display:swap;src:url("../assets/fonts/akihiko/Akihiko-Semibold.woff2") format("woff2");unicode-range:U+0020,U+002C,U+002E,U+0041-005A,U+0061-007A}
@font-face{font-family:"Akihiko";font-weight:700;font-style:normal;font-display:swap;src:url("../assets/fonts/akihiko/Akihiko-Bold.woff2") format("woff2");unicode-range:U+0020,U+002C,U+002E,U+0041-005A,U+0061-007A}
@font-face{font-family:"Akihiko";font-weight:800;font-style:normal;font-display:swap;src:url("../assets/fonts/akihiko/Akihiko-Extrabold.woff2") format("woff2");unicode-range:U+0020,U+002C,U+002E,U+0041-005A,U+0061-007A}

@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;
  src:url("../assets/fonts/space-grotesk/space-grotesk-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;
  src:url("../assets/fonts/space-grotesk/space-grotesk-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- 2. TOKENS / TEMA ---------- */
:root{
  --mag:#0C46F2;        /* destaque principal (azul) */
  --mag-text:#6E98FF;   /* tom mais claro do destaque, para TEXTO pequeno (7,3:1 sobre o fundo escuro; o #0C46F2 puro dá só 3:1) */
  --on-accent:#fff;     /* texto/ícone sobre o destaque: branco = 6,6:1 */
  --wa:#25D366;         /* verde do WhatsApp */
  --alt:#A830F2;        /* destaque secundário (roxo): hovers e degradês */
  --pur:#3C038C;        /* cartões e faixas */
  --pur-2:#1D0259;      /* superfícies e bordas */
  --pur-3:#150240;      /* seções alternadas */
  --ink:#090126;        /* fundo principal / texto no claro */

  --bg:#090126;
  --bg-alt:#150240;
  --txt:#fff;
  --txt-2:rgba(255,255,255,.76);
  --txt-3:rgba(255,255,255,.58);
  --line:rgba(255,255,255,.16);
  --glass:rgba(255,255,255,.06);
  --glass-2:rgba(255,255,255,.1);
  --glass-line:rgba(255,255,255,.18);
  --ghost-stroke:rgba(255,255,255,.14);
  --link:var(--mag-text);
  --focus-in:#fff;
  --focus-out:#0C46F2;
  --shadow:0 30px 80px -30px rgba(0,0,0,.7);

  --font:"Space Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display:"Akihiko","Space Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gut:clamp(20px,4.2vw,64px);
  --max:1440px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --r-lg:32px;
  --nav-h:76px;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#F4F4F4;
  --bg-alt:#EAE6F5;
  --txt:#090126;
  --txt-2:rgba(9,1,38,.8);
  --txt-3:rgba(9,1,38,.64);
  --line:rgba(9,1,38,.18);
  --glass:rgba(255,255,255,.65);
  --glass-2:rgba(255,255,255,.9);
  --glass-line:rgba(9,1,38,.14);
  --ghost-stroke:rgba(9,1,38,.14);
  --link:#0C46F2;
  --focus-in:#fff;
  --focus-out:#0C46F2;
  --shadow:0 30px 70px -35px rgba(60,3,140,.35);
  color-scheme:light;
}

/* Fonte de display (Akihiko) */
.logo,.hero-title,.h2,.ghost,.work-t,.statement,.footer-giant,.footer-sign,.soon-title,.menu li a{font-family:var(--font-display)}
.footer-sign span,.menu li a span{font-family:var(--font)}

/* ---------- 3. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px)}
body{
  margin:0;min-height:100vh;background:var(--bg);color:var(--txt);
  font-family:var(--font);font-weight:400;font-size:clamp(1rem,.96rem + .2vw,1.125rem);line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  overflow-x:hidden;transition:background-color .5s var(--ease),color .5s var(--ease);
}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3,p,dl,dd,figure{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--mag);color:var(--on-accent)}

.wrap{width:min(var(--max),calc(100% - var(--gut)*2));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0}
.skip{position:fixed;left:16px;top:-80px;z-index:200;background:var(--mag);color:var(--on-accent);padding:12px 20px;border-radius:99px;font-weight:600;transition:top .2s}
.skip:focus{top:16px}

/* Foco visível (azul secundário + anel branco, 3:1 sobre qualquer fundo) */
:focus{outline:none}
:focus-visible{outline:2px solid var(--focus-in);outline-offset:3px;box-shadow:0 0 0 5px var(--focus-out);border-radius:inherit}
.btn:focus-visible,.icon-btn:focus-visible,.seal-link:focus-visible{border-radius:999px}
.work-link:focus-visible{border-radius:var(--r-lg)}

.progress{position:fixed;left:0;top:0;right:0;height:3px;z-index:120;pointer-events:none}
.progress i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--alt),var(--mag));transform:scaleX(0);transform-origin:0 50%}

.curtain{position:fixed;inset:0;z-index:150;background:var(--ink);opacity:0;pointer-events:none;transition:opacity .35s ease}
.curtain.on{opacity:1;pointer-events:all}

/* ---------- 4. COMPONENTES ---------- */
.glass{
  background:var(--glass);border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
}

.btn{
  --pad:.55rem;
  display:inline-flex;align-items:center;gap:1.1rem;
  padding:var(--pad) var(--pad) var(--pad) 1.6rem;border-radius:999px;
  background:var(--mag);color:var(--on-accent);       /* texto sobre o roxo de destaque: branco (contraste 4,8:1) */
  font-weight:600;font-size:.95rem;letter-spacing:.01em;line-height:1.2;
  transition:transform .5s var(--ease),background-color .3s,color .3s,box-shadow .3s;
  will-change:transform;
}
.btn-ic{display:grid;place-items:center;width:2.8rem;height:2.8rem;border-radius:50%;background:var(--ink);color:#fff;flex:none;transition:transform .5s var(--ease),background-color .3s,color .3s}
.btn .ic{width:1.15rem;height:1.15rem}
.btn:hover .btn-ic{transform:rotate(-45deg);background:var(--alt)}
.btn:hover{box-shadow:0 12px 40px -10px rgba(12,70,242,.7)}
.btn--glass{background:var(--glass);color:var(--txt);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.btn--glass .btn-ic{background:var(--mag);color:var(--on-accent)}
.btn--glass .btn-ic.btn-ic--wa,.btn--glass:hover .btn-ic.btn-ic--wa{background:var(--wa);color:#fff}
/* botão verde do WhatsApp (texto escuro: 10:1 sobre o verde) */
.btn.btn--wa{background:var(--wa);color:var(--ink)}
.btn.btn--wa:hover{box-shadow:0 12px 40px -10px rgba(37,211,102,.65)}
.btn.btn--wa .btn-ic,.btn.btn--wa:hover .btn-ic{background:var(--ink);color:#fff}
/* hover na cor da rede: Instagram (degradê oficial) e LinkedIn */
.btn--glass:hover .btn-ic.btn-ic--ig{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%);color:#fff}
.btn--glass:hover .btn-ic.btn-ic--in{background:#0A66C2;color:#fff}
.btn:hover .btn-ic.btn-ic--ig,.btn:hover .btn-ic.btn-ic--in{transform:scale(1.08)}   /* logos das redes não giram */
.btn--glass:hover{background:var(--glass-2);box-shadow:none}
.btn--glass:hover .btn-ic{background:var(--alt);color:#fff}
.btn--sm{--pad:.3rem;gap:.8rem;padding-left:1.15rem;font-size:.85rem}
.btn--sm .btn-ic{width:2.1rem;height:2.1rem}

.icon-btn{display:grid;place-items:center;width:2.8rem;height:2.8rem;border-radius:50%;border:1px solid var(--glass-line);background:var(--glass);color:var(--txt);transition:background-color .3s,color .3s,transform .4s var(--ease),border-color .3s}
.icon-btn .ic{width:1.2rem;height:1.2rem}
.icon-btn:hover{background:var(--mag);color:var(--on-accent);border-color:transparent;transform:translateY(-3px)}

.ic{fill:none;stroke:currentColor}
.eyebrow{display:inline-flex;align-items:center;gap:.7rem;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-2);font-weight:500}
.eyebrow .dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--mag);box-shadow:0 0 0 0 rgba(12,70,242,.6);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(12,70,242,0)}100%{box-shadow:0 0 0 0 rgba(12,70,242,0)}}

.h2{font-size:clamp(2.4rem,6.4vw,5.8rem);font-weight:700;line-height:1;letter-spacing:-.02em}
.lead{font-size:clamp(1.05rem,1rem + .5vw,1.35rem);color:var(--txt-2);max-width:34ch;line-height:1.5;font-weight:300}
.body{color:var(--txt-2);max-width:52ch;font-weight:300;font-size:1.05rem}

/* ---------- 5. MENU EM CÁPSULA ---------- */
.nav-wrap{position:fixed;top:16px;left:0;right:0;z-index:100;display:flex;justify-content:center;padding:0 var(--gut);pointer-events:none}
.nav{pointer-events:auto;display:flex;align-items:center;gap:clamp(.6rem,1.6vw,1.6rem);padding:.45rem .5rem .45rem 1.5rem;border-radius:999px;width:min(980px,100%);
  background:rgba(21,2,64,.55);transition:background-color .4s,transform .6s var(--ease),box-shadow .4s}
:root[data-theme="light"] .nav{background:rgba(255,255,255,.7)}
.nav.is-scrolled{box-shadow:0 20px 50px -20px rgba(0,0,0,.6)}
.nav.is-hidden{transform:translateY(-140%)}
.logo{font-weight:700;font-size:1.05rem;letter-spacing:0;white-space:nowrap;margin-right:auto}
.nav-links{display:flex;gap:.2rem}
.nav-links a{display:block;padding:.55rem 1rem;border-radius:99px;font-size:.88rem;font-weight:500;color:var(--txt-2);transition:background-color .3s,color .3s}
.nav-links a:hover{color:var(--txt);background:var(--glass-2)}
.nav-links a[aria-current="true"]{background:var(--mag);color:#fff}    /* estado ativo em azul (branco/azul 6,6:1) */
.theme-toggle .ic-sun{display:none}
:root[data-theme="light"] .theme-toggle .ic-moon{display:none}
:root[data-theme="light"] .theme-toggle .ic-sun{display:block}
.menu-btn{display:none;width:2.8rem;height:2.8rem;border-radius:50%;background:var(--mag);position:relative}
.menu-btn-bars,.menu-btn-bars::before{position:absolute;left:50%;width:18px;height:2px;background:var(--on-accent);transition:transform .4s var(--ease)}
.menu-btn-bars{top:calc(50% - 4px);transform:translateX(-50%)}
.menu-btn-bars::before{content:"";top:8px;left:0}
.menu-btn[aria-expanded="true"] .menu-btn-bars{transform:translateX(-50%) translateY(4px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-btn-bars::before{transform:translateY(-8px) rotate(-90deg)}

.menu{position:fixed;inset:0;z-index:90;background:radial-gradient(120% 90% at 80% 10%,var(--pur) 0%,var(--pur-3) 45%,var(--ink) 100%);display:flex;flex-direction:column;justify-content:center;gap:2.4rem;padding:6rem var(--gut) 3rem;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s;color:#fff}
.menu.open{opacity:1;visibility:visible}
.menu li{overflow:hidden}
.menu li a{display:flex;align-items:baseline;gap:1rem;font-size:clamp(2.6rem,12vw,5rem);font-weight:700;letter-spacing:-.04em;line-height:1.1;transform:translateY(110%);transition:transform .7s var(--ease),color .3s}
.menu.open li a{transform:none}
.menu.open li:nth-child(2) a{transition-delay:.06s}.menu.open li:nth-child(3) a{transition-delay:.12s}.menu.open li:nth-child(4) a{transition-delay:.18s}
.menu li a span{font-size:.9rem;letter-spacing:.2em;color:var(--mag-text);font-weight:500}
.menu li a:hover{color:var(--mag-text)}
.menu .btn{align-self:flex-start}

/* ---------- 6. HERO ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;padding:calc(var(--nav-h) + 3rem) 0 clamp(2.5rem,6vh,4.5rem);isolation:isolate;
  background:radial-gradient(90% 70% at 78% 28%,rgba(60,3,140,.9) 0%,rgba(29,2,89,.55) 38%,rgba(9,1,38,0) 70%),linear-gradient(180deg,#090126 0%,#150240 55%,#090126 100%)}
:root[data-theme="light"] .hero{background:radial-gradient(90% 70% at 78% 28%,rgba(12,70,242,.16) 0%,rgba(168,48,242,.1) 40%,rgba(244,244,244,0) 72%),linear-gradient(180deg,#F4F4F4 0%,#ECE7F8 100%)}
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;will-change:transform}
.hero-bg .fluid,.hero-bg .fluid-poster{position:absolute;right:max(-12vw,-160px);top:calc(var(--nav-h) - 2rem);width:min(78vw,980px);height:auto;aspect-ratio:1}
.hero-inner{position:relative;display:flex;flex-direction:column;gap:clamp(1.4rem,3vh,2.4rem);will-change:transform,opacity}
.hero-title{font-weight:700;font-size:clamp(4.4rem,17.2vw,18.5rem);line-height:.84;letter-spacing:-.025em;margin-left:-.03em}
.hero-title .ln{display:block;overflow:hidden;padding:.18em .1em .14em .1em;margin:-.18em 0 -.14em -.1em}   /* folga p/ o C da Akihiko não ser cortado */
.hero-title .ln-in{display:block;transform:translateY(0);padding:.16em .08em .12em;margin:-.16em -.08em -.12em}   /* a caixa precisa cobrir as letras: o degradê (background-clip:text) só pinta dentro dela */
.hero-title .accent{color:var(--mag);background:linear-gradient(95deg,#1F58FF 5%,#4D7BFF 50%,#9B6CFF 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
:root[data-theme="light"] .hero-title .accent{background:linear-gradient(95deg,#0C46F2 10%,#5a35e8 60%,#8a1fd6 100%);-webkit-background-clip:text;background-clip:text}
.hero-foot{display:flex;flex-wrap:wrap;gap:1.6rem 3rem;align-items:flex-end;justify-content:space-between}
.hero-lead{max-width:34ch;font-size:clamp(1.05rem,1rem + .55vw,1.4rem);line-height:1.45;color:var(--txt-2);font-weight:300}
.hero-lead strong{color:var(--txt);font-weight:600}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem}

/* entrada curta (somente CSS, não depende do JS) */
.js .ln-in{animation:lineUp 1.15s var(--ease) both;animation-delay:var(--d,0s)}
.js .rise{animation:rise .9s var(--ease) both;animation-delay:var(--d,0s)}
@keyframes lineUp{from{transform:translateY(135%)}to{transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.js .hero-bg{animation:bgIn 1.3s var(--ease) both}
@keyframes bgIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}

.fluid,.fluid-poster{width:100%;height:100%;pointer-events:none;transition:opacity .9s var(--ease)}
/* a imagem estática (poster) é o primeiro quadro da forma; o canvas WebGL assume na 1ª interação */
.fluid{opacity:0}
.fluid.live{opacity:1}
.fluid-poster{object-fit:fill}
.fluid-poster.gone{opacity:0}

.seal{position:absolute;right:var(--gut);bottom:calc(clamp(2.5rem,6vh,4.5rem) + 6.4rem);width:clamp(96px,9vw,128px);aspect-ratio:1;display:grid;place-items:center;border-radius:50%;z-index:2}
.seal>svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 22s linear infinite}
.seal text{fill:var(--txt);font-size:9.4px;letter-spacing:.14em;font-weight:500;text-transform:uppercase}
.seal-link{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center}
.seal-arrow{display:grid;place-items:center;width:42%;aspect-ratio:1;border-radius:50%;background:var(--mag);color:var(--on-accent);transition:transform .5s var(--ease)}
.seal-arrow .ic{width:46%;transform:rotate(90deg)}
.seal-link:hover .seal-arrow{transform:scale(1.12)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 7. SEÇÕES ---------- */
.section{position:relative;padding:clamp(5rem,12vw,11rem) 0;overflow:hidden;isolation:isolate}
.section--works{background:linear-gradient(180deg,#090126 0%,#0d0230 100%)}
.section--skills{background:linear-gradient(180deg,#0d0230 0%,var(--bg-alt) 100%)}
.section--about{background:linear-gradient(180deg,var(--bg-alt) 0%,#090126 100%)}
.section--contact{background:radial-gradient(70% 55% at 15% 40%,rgba(60,3,140,.55) 0%,rgba(9,1,38,0) 70%),var(--bg)}
:root[data-theme="light"] .section--works{background:linear-gradient(180deg,#F4F4F4 0%,#EFEBFA 100%)}
:root[data-theme="light"] .section--skills{background:linear-gradient(180deg,#EFEBFA 0%,var(--bg-alt) 100%)}
:root[data-theme="light"] .section--about{background:linear-gradient(180deg,var(--bg-alt) 0%,#F4F4F4 100%)}
:root[data-theme="light"] .section--contact{background:radial-gradient(70% 55% at 15% 40%,rgba(12,70,242,.14) 0%,rgba(244,244,244,0) 70%),var(--bg)}

.ghost{position:absolute;left:50%;top:clamp(1rem,3vw,3rem);z-index:-1;transform:translate3d(-50%,var(--gy,0px),0);font-size:clamp(5.5rem,22vw,26rem);font-weight:800;letter-spacing:-.03em;line-height:.9;white-space:nowrap;color:transparent;-webkit-text-stroke:1.5px var(--ghost-stroke);user-select:none;pointer-events:none}

.sec-head{display:flex;align-items:center;gap:1.2rem;margin-bottom:clamp(2rem,5vw,4rem);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--txt-2)}
.sec-num{color:var(--link);font-weight:700}
.sec-line{flex:0 1 clamp(60px,12vw,180px);height:1px;background:var(--line)}

/* ---------- 8. TRABALHOS ---------- */
.works-intro{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:clamp(2.5rem,6vw,5rem)}
.works{border-top:1px solid var(--line)}
.work{border-bottom:1px solid var(--line);position:relative}
.work-link{position:relative;display:grid;grid-template-columns:clamp(3.4rem,7vw,7rem) minmax(0,1fr) minmax(8rem,13rem) 4.5rem 3.4rem;align-items:center;gap:clamp(.8rem,2vw,2rem);padding:clamp(1.4rem,3.2vw,2.8rem) clamp(.4rem,1.2vw,1.2rem);overflow:hidden;isolation:isolate;transition:padding .6s var(--ease),opacity .4s}
.work-link::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--blob,none) center/cover no-repeat,linear-gradient(90deg,rgba(60,3,140,.55),rgba(168,48,242,.28));opacity:0;transform:scale(1.08);transition:opacity .6s var(--ease),transform 1.1s var(--ease)}
.work-n{font-size:clamp(1.3rem,3vw,3rem);font-weight:300;color:var(--txt-3);letter-spacing:-.04em;font-variant-numeric:tabular-nums;transition:color .3s}
.work-t{font-size:clamp(1.9rem,4.1vw,4.3rem);font-weight:700;letter-spacing:-.02em;line-height:1.02;transition:transform .7s var(--ease),color .3s}
.work-c{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--txt-2);font-weight:500}
.work-y{font-size:.9rem;color:var(--txt-3);font-variant-numeric:tabular-nums;text-align:right}
.work-go{display:grid;place-items:center;width:3.4rem;height:3.4rem;border-radius:50%;border:1px solid var(--glass-line);transition:background-color .3s,color .3s,transform .6s var(--ease),border-color .3s}
.work-go .ic{width:1.2rem;height:1.2rem}
.work-thumb{display:none}
@media (hover:hover) and (pointer:fine){
  .works:hover .work-link:not(:hover):not(:focus-visible){opacity:.38}
}
.work-link:hover::before,.work-link:focus-visible::before{opacity:1;transform:none}
.work-link:hover .work-t,.work-link:focus-visible .work-t{transform:translateX(clamp(.4rem,1.6vw,1.6rem));color:#fff}
:root[data-theme="light"] .work-link:hover .work-t,:root[data-theme="light"] .work-link:hover .work-c,:root[data-theme="light"] .work-link:hover .work-y,:root[data-theme="light"] .work-link:hover .work-n,
:root[data-theme="light"] .work-link:focus-visible .work-t{color:#fff}
.work-link:hover .work-n{color:var(--mag-text)}
.work-link:hover .work-c,.work-link:hover .work-y{color:#fff}
.work-link:hover .work-go,.work-link:focus-visible .work-go{background:var(--mag);color:var(--on-accent);transform:rotate(-45deg);border-color:transparent}

.preview{position:fixed;left:0;top:0;z-index:80;width:clamp(240px,24vw,380px);aspect-ratio:4/3;border-radius:22px;overflow:hidden;pointer-events:none;opacity:0;transform:translate3d(-999px,-999px,0) scale(.7);transition:opacity .35s var(--ease);border:1px solid var(--glass-line);box-shadow:var(--shadow);background:var(--pur-2)}
.preview.on{opacity:1}
.preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.15);transition:opacity .4s var(--ease),transform .8s var(--ease)}
.preview img.on{opacity:1;transform:none}

/* ---------- 9. SOBRE ---------- */
.about-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.portrait{position:relative;display:flex;flex-direction:column;gap:1rem;position:sticky;top:calc(var(--nav-h) + 2rem)}
.portrait-glow{position:absolute;left:50%;top:46%;width:175%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:0;pointer-events:none;-webkit-mask-image:radial-gradient(closest-side,#000 60%,transparent 100%);mask-image:radial-gradient(closest-side,#000 60%,transparent 100%)}
.portrait-glow .fluid,.portrait-glow .fluid-poster{position:absolute;inset:0;width:100%;height:100%}
.portrait-frame{position:relative;z-index:1;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;padding:10px}
.portrait-frame img{width:100%;height:100%;object-fit:cover;border-radius:calc(var(--r-lg) - 10px)}
.portrait-cap{position:relative;z-index:1;display:flex;justify-content:space-between;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--txt-2);font-weight:500}
.about-copy{display:flex;flex-direction:column;gap:clamp(1.4rem,2.6vw,2.2rem)}
.about-copy .h2{font-size:clamp(2.2rem,4.4vw,4rem)}
.scrub{font-size:clamp(1.55rem,1.1rem + 2.1vw,3rem);font-weight:600;line-height:1.14;letter-spacing:-.035em;max-width:24ch}
.scrub .sw{opacity:.22;transition:opacity .25s linear}
.scrub .sw.lit{opacity:1}
.facts{display:grid;gap:0;border-top:1px solid var(--line)}
.facts>div{display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.facts dt{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--link);font-weight:600;padding-top:.2rem}
.facts dd{color:var(--txt);font-weight:400}
.about-cta{display:flex;flex-wrap:wrap;gap:.8rem}
.qa{border-radius:var(--r-lg);padding:clamp(1.4rem,2.4vw,2.2rem)}
.qa-title{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--link);font-weight:600;margin-bottom:1rem}
.qa dl{display:grid;gap:1.1rem}
.qa dt{font-weight:600;letter-spacing:-.01em}
.qa dd{color:var(--txt-2);font-weight:300;margin-top:.15rem}

/* ---------- 10. DISCIPLINAS ---------- */
.section--skills .h2{margin-bottom:clamp(2.4rem,6vw,5rem)}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.8rem,1.6vw,1.4rem)}
.card{position:relative;border-radius:var(--r-lg);padding:clamp(1.4rem,2vw,2rem);display:flex;flex-direction:column;gap:1rem;min-height:21rem;transition:transform .7s var(--ease),border-color .4s,background-color .4s}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(120% 80% at 20% 0%,rgba(12,70,242,.22),rgba(168,48,242,0) 60%);opacity:0;transition:opacity .5s;pointer-events:none}
.card:hover{transform:translateY(-8px);border-color:rgba(12,70,242,.5)}
.card:hover::after{opacity:1}
.card-n{font-size:.8rem;letter-spacing:.2em;color:var(--link);font-weight:700}
.card h3{font-size:clamp(1.4rem,1.1rem + 1vw,2rem);font-weight:700;letter-spacing:-.035em;line-height:1.05;margin-top:auto}
.card p{color:var(--txt-2);font-weight:300;font-size:.98rem;line-height:1.5}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.4rem}
.chips li{font-size:.72rem;letter-spacing:.06em;padding:.32rem .75rem;border-radius:99px;border:1px solid var(--glass-line);color:var(--txt-2)}

/* ---------- 11. FAIXA DE ONDAS ---------- */
.wave{position:relative;height:clamp(420px,70vh,700px);display:flex;align-items:center;overflow:hidden;background:linear-gradient(180deg,#090126 0%,#150240 50%,#090126 100%);isolation:isolate}
:root[data-theme="light"] .wave{background:linear-gradient(180deg,#F4F4F4 0%,#E9E2FA 50%,#F4F4F4 100%)}
.wave-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.statement{white-space:nowrap;font-size:clamp(4.5rem,17vw,19rem);font-weight:700;letter-spacing:-.025em;line-height:1;transform:translate3d(var(--sx,6vw),0,0);will-change:transform}
.statement span{display:inline-block}

/* ---------- 12. CONTATO ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.contact-copy{position:relative;display:flex;flex-direction:column;gap:clamp(1.4rem,2.6vw,2.2rem)}
.contact-blob{position:absolute;left:-26%;bottom:-24rem;width:min(62vw,660px);aspect-ratio:1;z-index:-1;pointer-events:none;opacity:.85;-webkit-mask-image:radial-gradient(closest-side,#000 58%,transparent 100%);mask-image:radial-gradient(closest-side,#000 58%,transparent 100%)}
.contact-blob .fluid,.contact-blob .fluid-poster{position:absolute;inset:0;width:100%;height:100%}
.channels{display:flex;flex-wrap:wrap;gap:.7rem;max-width:34rem}
.channels li:first-child{flex-basis:100%}
.channels .btn{max-width:100%}
.form{border-radius:var(--r-lg);padding:clamp(1.4rem,3vw,2.6rem);display:flex;flex-direction:column;gap:1.2rem}
.form-title{font-size:clamp(1.4rem,1.1rem + 1vw,2rem);font-weight:700;letter-spacing:-.03em}
.field{display:flex;flex-direction:column;gap:.5rem}
.field label{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--txt-2);font-weight:600}
.field input,.field textarea{width:100%;font:inherit;color:var(--txt);background:rgba(9,1,38,.55);border:1px solid var(--glass-line);border-radius:22px;padding:1rem 1.3rem;transition:border-color .3s,background-color .3s}
:root[data-theme="light"] .field input,:root[data-theme="light"] .field textarea{background:rgba(255,255,255,.9)}
.field textarea{resize:vertical;min-height:9rem;border-radius:26px}
.field input::placeholder,.field textarea::placeholder{color:var(--txt-3)}
.field input:hover,.field textarea:hover{border-color:rgba(12,70,242,.55)}
.field input:focus-visible,.field textarea:focus-visible{border-color:var(--mag);outline-offset:2px;border-radius:22px}
.form .btn{align-self:flex-start;margin-top:.4rem}
.form-status{min-height:1.4em;font-size:.9rem;color:var(--txt-2)}

/* ---------- 13. RODAPÉ ---------- */
.footer{position:relative;background:linear-gradient(180deg,var(--bg) 0%,#150240 100%);padding-top:clamp(3rem,6vw,5rem);overflow:hidden}
:root[data-theme="light"] .footer{background:linear-gradient(180deg,var(--bg) 0%,#E7E0F8 100%)}
.footer-top{display:flex;flex-wrap:wrap;gap:2rem;align-items:flex-end;justify-content:space-between;padding-bottom:clamp(1.5rem,3vw,3rem)}
.footer-sign{font-size:clamp(1.3rem,1rem + 1vw,2rem);font-weight:700;letter-spacing:-.035em;line-height:1.15}
.footer-sign span{display:block;margin-top:.4rem;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:var(--txt-2)}
.social{display:flex;gap:.6rem}
.to-top{display:inline-flex;align-items:center;gap:.9rem;padding:.4rem .4rem .4rem 1.3rem;border-radius:999px;border:1px solid var(--glass-line);background:var(--glass);font-size:.88rem;font-weight:500;transition:background-color .3s}
.to-top .btn-ic{width:2.4rem;height:2.4rem;background:var(--mag);color:var(--on-accent)}
.to-top .ic{width:1.1rem;height:1.1rem}
.to-top:hover{background:var(--glass-2)}
.footer-giant{font-size:clamp(3.4rem,14.6vw,20rem);font-weight:800;letter-spacing:-.03em;line-height:.8;white-space:nowrap;text-align:center;color:transparent;-webkit-text-stroke:1.5px var(--ghost-stroke);margin:clamp(.5rem,2vw,2rem) 0 0;user-select:none;padding-bottom:.06em}
.footer-copy{position:relative;text-align:center;padding:1.6rem 0 1.8rem;font-size:.82rem;color:var(--txt-2);background:transparent}

/* ---------- 14. CURSOR / REVELAÇÕES ---------- */
.cursor{position:fixed;left:0;top:0;z-index:300;pointer-events:none;display:none}
.has-cursor .cursor{display:block}
.has-cursor,.has-cursor a,.has-cursor button,.has-cursor input,.has-cursor textarea{cursor:none}
.cursor-dot,.cursor-ring{position:absolute;left:0;top:0;border-radius:50%;will-change:transform}
.cursor-dot{width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--mag)}
.cursor-ring{width:38px;height:38px;margin:-19px 0 0 -19px;border:1.5px solid var(--mag);display:grid;place-items:center;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background-color .3s,opacity .3s}
.cursor-label{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--on-accent);opacity:0;transition:opacity .2s}
.cursor.is-link .cursor-ring{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(12,70,242,.18)}
.cursor.is-view .cursor-ring{width:92px;height:92px;margin:-46px 0 0 -46px;background:var(--mag)}
.cursor.is-view .cursor-label{opacity:1}
.cursor.is-view .cursor-dot{opacity:0}
.cursor.is-hidden{opacity:0}

/* Revelação na rolagem (só com JS; sem JS tudo aparece) */
.js .rv{opacity:0;transform:translateY(36px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .work.rv{transform:translateY(24px)}

/* ---------- 15. RESPONSIVO ---------- */
@media (max-width:1100px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card{min-height:17rem}
}
@media (max-width:900px){
  :root{--nav-h:68px}
  .nav-links,.nav-cta{display:none}
  .menu-btn{display:block}
  .nav{padding-left:1.2rem}
  .about-grid,.contact-grid{grid-template-columns:1fr}
  .portrait{position:relative;top:auto;max-width:440px}
  .contact-blob{left:-40%;bottom:-16rem;opacity:.45}
  .hero-bg .fluid,.hero-bg .fluid-poster{width:min(128vw,720px);right:-24vw;top:calc(var(--nav-h) - 3.4rem)}
  .seal{display:none}
  /* Lista em toque: miniatura sempre visível no lugar da prévia do mouse */
  .work-link{grid-template-columns:3rem minmax(0,1fr) 3rem;grid-template-areas:"n t go" "n c go" "th th th" "y y y";gap:.3rem 1rem}
  .work-n{grid-area:n;align-self:start;padding-top:.4rem}
  .work-t{grid-area:t}
  .work-c{grid-area:c}
  .work-y{grid-area:y;text-align:left}
  .work-go{grid-area:go;align-self:start;width:3rem;height:3rem}
  .work-thumb{grid-area:th;display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:20px;margin:1rem 0 .6rem;border:1px solid var(--glass-line)}
  .ghost{font-size:30vw}
}
@media (max-width:560px){
  .hero-title{font-size:19vw}
  .cards{grid-template-columns:1fr}
  .card{min-height:0}
  .facts>div{grid-template-columns:1fr;gap:.2rem}
  .hero-cta .btn,.about-cta .btn{width:100%;justify-content:space-between}
  .channels .btn{width:100%;justify-content:space-between}
  .statement{font-size:24vw}
}
@media (hover:none){
  .btn:hover,.icon-btn:hover,.card:hover{transform:none}
}

/* ---------- 16. MOVIMENTO REDUZIDO ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .rv,.js .rise{opacity:1;transform:none}
  .seal>svg{animation:none}
  .scrub .sw{opacity:1}
  .statement{transform:none!important}
}

/* ---------- 17. PÁGINAS SIMPLES (em breve / 404) ---------- */
.soon{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding:calc(var(--nav-h) + 3rem) 0 4rem;isolation:isolate;
  background:radial-gradient(90% 70% at 78% 40%,rgba(60,3,140,.9) 0%,rgba(29,2,89,.5) 40%,rgba(9,1,38,0) 72%),linear-gradient(180deg,#090126 0%,#150240 60%,#090126 100%)}
:root[data-theme="light"] .soon{background:radial-gradient(90% 70% at 78% 40%,rgba(12,70,242,.16) 0%,rgba(168,48,242,.1) 40%,rgba(244,244,244,0) 72%),linear-gradient(180deg,#F4F4F4 0%,#ECE7F8 100%)}
.soon-blob{position:absolute;right:max(-10vw,-140px);top:50%;width:min(70vw,860px);aspect-ratio:1;transform:translateY(-50%);z-index:-1;pointer-events:none}
.soon-blob .fluid,.soon-blob .fluid-poster{position:absolute;inset:0;width:100%;height:100%}
.soon-inner{display:flex;flex-direction:column;gap:1.4rem;align-items:flex-start}
.soon-title{font-size:clamp(3.2rem,11.5vw,12rem);font-weight:700;line-height:.9;letter-spacing:-.025em}
.soon-name{font-size:clamp(1.4rem,1.1rem + 1.4vw,2.4rem);font-weight:600;letter-spacing:-.03em;color:var(--link)}
.soon-meta{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-2);font-weight:500;margin-top:-.8rem}
.soon-meta:empty,.soon-name:empty{display:none}
.page-soon .nav{width:min(560px,100%);padding-right:.45rem}
.page-soon #projeto-nome{display:block}
.page-soon .soon-inner .hero-cta{margin-top:.6rem}
@media (max-width:900px){.soon-blob{width:110vw;right:-34vw;top:12%;opacity:.85}.page-launch .soon{align-items:flex-end}}

/* prévia (cores de hover da lista): variações da forma líquida como fundo da linha */
.work:nth-child(3n+1) .work-link{--blob:url("../assets/img/forma-hero.webp")}
.work:nth-child(3n+2) .work-link{--blob:url("../assets/img/forma-sobre.webp")}
.work:nth-child(3n) .work-link{--blob:url("../assets/img/forma-contato.webp")}
.work-link::before{background-size:auto 340%,auto;background-position:62% 50%,center}

/* ---------- 18. FORMA COMO FUNDO CSS (404) + PÁGINA "EM BREVE" DE LANÇAMENTO ---------- */
/* O 404 pode abrir de qualquer URL; imagens em CSS resolvem o caminho a partir deste arquivo e sempre funcionam. */
.soon-blob--bg::before{content:"";position:absolute;inset:0;background:var(--blob-img) center/100% 100% no-repeat;transition:opacity .9s var(--ease)}
.soon-blob--hero{--blob-img:url("../assets/img/forma-hero.webp")}
.soon-blob--about{--blob-img:url("../assets/img/forma-sobre.webp")}
.soon-blob.live::before{opacity:0}
.page-launch .soon{padding-bottom:7rem}
.launch-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:.6rem}
.launch-actions .btn{max-width:100%}
.launch-foot{position:absolute;left:0;right:0;bottom:1.6rem;text-align:center;font-size:.82rem;color:var(--txt-2)}
.launch-chip{display:inline-flex;align-items:center;gap:.7rem;padding:.5rem 1rem;border-radius:999px;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--txt-2)}
@media (max-width:560px){.launch-actions .btn{width:100%;justify-content:space-between}}