:root{
--bg:#10141a;
--bg-alt:#12161d;
--surface:#171d26;
--surface-2:#1e2631;
--line:#2a3341;
--text:#e8ecf1;
--text-dim:#8fa0b2;
--accent:#ff8a3d;
--accent-2:#3fc9a8;
--radius:3px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;max-width:100vw;}
/* iOS Safari dá zoom automático em qualquer input com fonte abaixo de 16px — e não volta sozinho */
@media (max-width:640px){
input, textarea, select{font-size:16px !important;}
}
body{
overflow-x:hidden;max-width:100vw;
background:var(--bg);
color:var(--text);
font-family:'IBM Plex Sans', sans-serif;
line-height:1.6;
-webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent);color:#10141a;}
a{color:inherit;text-decoration:none;}
.mono{font-family:'IBM Plex Mono', monospace;}
.wrap{max-width:1320px;margin:0 auto;padding:0 clamp(24px,4.5vw,72px);}
/* acessibilidade: link "pular pro conteúdo" só aparece com foco de teclado */
.skip-link{
position:absolute;left:12px;top:-64px;z-index:11000;
background:var(--accent);color:#10141a;font-weight:600;font-size:14px;
padding:10px 16px;border-radius:var(--radius);transition:top .2s var(--ease);
}
.skip-link:focus{top:12px;outline:2px solid var(--text);outline-offset:2px;}
main:focus{outline:none;}
/* NAV */
header.nav{
position:sticky;top:26px;z-index:50;
background:rgba(16,20,26,0.9);
backdrop-filter:blur(8px);
border-bottom:1px solid var(--line);
}
.nav-inner{
max-width:1320px;margin:0 auto;padding:14px clamp(24px,4.5vw,72px);
display:flex;align-items:center;justify-content:space-between;
}
.nav-inner .brand{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.nav-inner .brand img{display:block;width:34px;height:34px;border-radius:9px;}
.brand-word{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:16px;color:var(--text);letter-spacing:-0.01em;}
.brand-ext{color:var(--accent);}
.nav-links{
display:flex;gap:22px;font-size:13.5px;color:var(--text-dim);
white-space:nowrap;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none;
margin:0 20px;
}
.nav-links::-webkit-scrollbar{display:none;}
.nav-links a:hover{color:var(--text);}
@media (min-width:721px) and (max-width:1280px){
.nav-links{gap:13px;font-size:12px;}
}
.nav-cta{
flex-shrink:0;display:inline-flex;align-items:center;
background:var(--accent);color:#10141a;font-size:12.5px;font-weight:600;
padding:9px 18px;border-radius:999px;
transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 8px 20px -8px rgba(255,138,61,.5);}
@media (max-width:720px){ .nav-cta{display:none;} }
/* HERO */
.hero{padding:88px 0 40px;}
.tag{
display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:12.5px;
color:var(--accent);border:1px solid rgba(255,138,61,0.35);
padding:4px 10px;border-radius:var(--radius);margin-bottom:22px;
}
.hero h1{
font-family:'Space Grotesk',sans-serif;font-weight:600;
font-size:clamp(32px,4.6vw,68px);line-height:1.1;max-width:920px;
letter-spacing:-0.02em;
}
.hero h1 em{font-style:normal;color:var(--accent-2);}
.hero p.lede{
margin-top:22px;max-width:640px;color:var(--text-dim);font-size:clamp(15.5px,1.1vw,18px);
}
.hero-grid{display:grid;grid-template-columns:1.15fr 0.9fr;gap:44px;align-items:center;}
/* ENTRADA DO HERO — some assim que a intro fecha (o corte fica curto, o hero "acorda" junto) */
.hero .tag, .hero h1, .hero p.lede, #hero-actions, .hero .shot-frame{
opacity:0;transform:translateY(18px);
transition:opacity .7s var(--ease), transform .7s var(--ease);
animation:hero-failsafe 0s linear 2.4s forwards;
}
@keyframes hero-failsafe{ to{opacity:1;transform:none;} }
body.hero-ready .hero .tag{opacity:1;transform:none;transition-delay:.04s;}
body.hero-ready .hero h1{opacity:1;transform:none;transition-delay:.14s;}
body.hero-ready .hero p.lede{opacity:1;transform:none;transition-delay:.3s;}
body.hero-ready #hero-actions{opacity:1;transform:none;transition-delay:.42s;}
body.hero-ready .hero .shot-frame{opacity:1;transform:none;transition-delay:.5s;}
@media (prefers-reduced-motion: reduce){
.hero .tag, .hero h1, .hero p.lede, #hero-actions, .hero .shot-frame{
opacity:1;transform:none;transition:none;animation:none;
}
}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;}}
.code-body{
font-family:'IBM Plex Mono',monospace;font-size:12.5px;line-height:1.75;
padding:16px 18px;margin:0;color:var(--text-dim);white-space:pre;overflow-x:auto;
}
.code-body .tok-kw{color:var(--accent-2);}
.code-body .tok-key{color:var(--text);}
.code-body .tok-str{color:var(--accent);}
.code-body .tok-punc{color:var(--text-dim);}
.code-body .tok-com{color:var(--text-dim);opacity:0.65;font-style:italic;}
.code-body .tok-fn{color:var(--accent-2);}
.cursor-blink{display:inline-block;animation:blink 1s step-start infinite;color:var(--accent);}
@keyframes blink{50%{opacity:0;}}
/* TICKER — status strip, mimics her real TV/kiosk cycling panel */
.ticker{
margin-top:44px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
background:var(--surface);overflow:hidden;position:relative;
}
.ticker-track{
display:flex;white-space:nowrap;
animation:scroll-left 26s linear infinite;
padding:11px 0;
}
.ticker-track span{
font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--text-dim);
padding:0 26px;border-right:1px solid var(--line);
}
.ticker-track span b{color:var(--accent-2);font-weight:500;}
@keyframes scroll-left{
from{transform:translateX(0);}
to{transform:translateX(-50%);}
}
section{padding:64px 0;border-bottom:1px solid var(--line);}
section:nth-of-type(even){background:var(--bg-alt);}
section:last-of-type{border-bottom:none;}
h2.section-title{
font-family:'Space Grotesk',sans-serif;font-weight:600;
font-size:clamp(26px,3.4vw,42px);letter-spacing:-0.015em;margin-bottom:10px;
}
p.section-sub{color:var(--text-dim);font-size:clamp(14.5px,1vw,16px);margin-bottom:40px;max-width:620px;}
/* SOBRE */
.sobre-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;}
.sobre-grid p{color:var(--text-dim);margin-bottom:14px;font-size:15.5px;}
.sobre-grid p strong{color:var(--text);font-weight:500;}
.facts{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px;overflow:hidden;height:fit-content;background:var(--surface);}
.facts > div{padding:15px 18px;}
.facts > div + div{border-top:1px solid rgba(255,255,255,0.05);}
.facts .k{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.05em;color:var(--accent-2);text-transform:uppercase;margin-bottom:5px;}
.facts .v{font-size:14.5px;color:var(--text);line-height:1.45;}
/* TRAJETÓRIA — route line, real sequence, percorrida como uma rota */
.route{position:relative;padding-left:28px;}
.route::before{
content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--line);
}
.route-progress{
position:absolute;left:5px;top:6px;width:1px;height:0;
background:linear-gradient(180deg, var(--accent-2), var(--accent));
box-shadow:0 0 8px 0 rgba(255,138,61,.45);
pointer-events:none;
}
.route-signal{
position:absolute;left:1.5px;top:6px;width:8px;height:8px;border-radius:50%;
background:var(--accent);box-shadow:0 0 12px 3px rgba(255,138,61,.75);
transform:translateY(-50%) scale(0);opacity:0;
transition:opacity .3s var(--ease), transform .3s var(--ease);
pointer-events:none;
}
.route-signal.active{opacity:1;transform:translateY(-50%) scale(1);}
.stop{position:relative;padding-bottom:34px;}
.stop:last-child{padding-bottom:0;}
.stop::before{
content:"";position:absolute;left:-28px;top:4px;width:11px;height:11px;border-radius:50%;
background:var(--bg);border:2px solid var(--accent-2);
transition:border-color .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.stop.current::before, .stop.passed::before{border-color:var(--accent);background:var(--accent);}
.stop.passed::before{box-shadow:0 0 10px 1px rgba(255,138,61,.4);}
.stop .when{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--text-dim);margin-bottom:4px;}
.stop .titlewrap{display:flex;align-items:center;gap:10px;margin-bottom:4px;}
.stop .titlewrap .icon-circle{width:30px;height:30px;flex-shrink:0;}
.stop .titlewrap .icon-circle svg{width:15px;height:15px;}
.stop h3{font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:600;margin-bottom:0;}
.stop p{color:var(--text-dim);font-size:14.5px;max-width:520px;}
/* PROJETOS — record rows, not card-kit */
.record{
position:relative;overflow:hidden;
border:1px solid var(--line);border-left:3px solid var(--accent-2);
background:linear-gradient(165deg, var(--surface) 0%, #141a24 100%);
border-radius:var(--radius);
padding:22px 24px;margin-bottom:16px;
}
.record::after{
content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
background:linear-gradient(100deg, transparent, rgba(255,255,255,0.035), transparent);
transform:skewX(-20deg);transition:left .7s var(--ease);pointer-events:none;
}
.record:hover::after{left:140%;}
.record.featured{border-left-color:var(--accent);}
.record-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:10px;}
.record-head h3{font-family:'Space Grotesk',sans-serif;font-size:19px;font-weight:600;}
.record-code{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--text-dim);}
.record p{color:var(--text-dim);font-size:14.5px;margin-bottom:14px;max-width:640px;}
.chips{display:flex;flex-wrap:wrap;gap:7px;}
.chip{
font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--text);
background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);
padding:3px 9px;
}
/* COMPETÊNCIAS */
/* MINI-GAME */
.game-record{padding:0;overflow:hidden;}
.game-wrap{padding:22px 24px 24px;}
.game-frame{
position:relative;border:1px solid var(--line);border-radius:6px;overflow:hidden;
background:#05070c;margin-top:4px;
}
.game-frame canvas{display:block;width:100%;height:auto;touch-action:none;cursor:crosshair;}
/* TESTE DE DIGITAÇÃO */
.type-area{padding:20px;}
.type-target{
font-size:14px;line-height:1.8;color:var(--text-dim);letter-spacing:.01em;
padding:14px 16px;background:var(--surface-2);border-radius:6px;margin-bottom:12px;
min-height:56px;
}
.type-target .ok{color:var(--accent-2);}
.type-target .bad{color:var(--accent);background:rgba(255,138,61,.15);border-radius:2px;}
.type-input{
width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:6px;
color:var(--text);font-size:14px;padding:10px 12px;outline:none;
}
.type-input:focus{border-color:var(--accent-2);}
.type-result{margin-top:10px;font-size:12.5px;color:var(--accent-2);min-height:18px;}
/* PALETA DE COMANDOS (Ctrl+K) */
.cmdk-overlay{
position:fixed;inset:0;z-index:10000;background:rgba(5,7,12,0.72);
display:flex;align-items:flex-start;justify-content:center;padding-top:14vh;
}
.cmdk-overlay.hidden{display:none;}
.cmdk-box{
width:min(520px, 90vw);background:var(--surface);border:1px solid var(--line);
border-radius:8px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.cmdk-box input{
width:100%;background:var(--surface-2);border:none;border-bottom:1px solid var(--line);
color:var(--text);font-size:15px;padding:14px 16px;outline:none;
}
.cmdk-box ul{list-style:none;margin:0;padding:6px;max-height:320px;overflow-y:auto;}
.cmdk-box li{
padding:10px 12px;border-radius:6px;cursor:pointer;color:var(--text-dim);font-size:13.5px;
display:flex;justify-content:space-between;align-items:center;
}
.cmdk-box li span.cmdk-tag{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--text-dim);opacity:.6;}
.cmdk-box li.active{background:var(--surface-2);color:var(--text);}
.cmdk-box li.active span.cmdk-tag{color:var(--accent-2);opacity:1;}
.cmdk-hint{padding:9px 16px;border-top:1px solid var(--line);color:var(--text-dim);font-size:10.5px;opacity:.7;}
/* ARCADE — teaser card no fluxo normal */
.arcade-teaser{
display:flex;align-items:center;gap:20px;padding:24px 26px;flex-wrap:wrap;
}
.arcade-teaser h3{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600;}
.arcade-teaser > div:not(.icon-circle){flex:1;min-width:200px;}
.arcade-teaser button{
background:var(--accent);color:#10141a;border:none;font-weight:600;font-size:13.5px;
padding:12px 20px;border-radius:var(--radius);cursor:pointer;white-space:nowrap;
}
.arcade-teaser button:hover{filter:brightness(1.08);}
/* ARCADE — overlay em tela cheia, separado do resto do site */
.arcade-overlay{position:fixed;inset:0;z-index:9000;background:var(--bg);}
.arcade-overlay.hidden{display:none;}
.arcade-boot{
position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
background:var(--bg);z-index:2;
}
.arcade-boot.hidden{display:none;}
#arcade-boot-text{font-size:clamp(18px,4vw,26px);color:var(--accent-2);letter-spacing:.04em;}
.arcade-shell{
position:absolute;inset:0;overflow-y:auto;opacity:0;transform:scale(0.97);
transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.arcade-shell.in{opacity:1;transform:scale(1);}
.arcade-topbar{
position:sticky;top:0;z-index:3;display:flex;justify-content:space-between;align-items:center;
padding:16px 24px;background:var(--bg);border-bottom:1px solid var(--line);
}
.arcade-topbar span{color:var(--accent-2);font-size:12px;letter-spacing:.05em;}
.arcade-topbar button{
background:none;border:1px solid var(--line);color:var(--text-dim);font-size:12px;
padding:7px 14px;border-radius:var(--radius);cursor:pointer;
}
.arcade-topbar button:hover{border-color:var(--accent);color:var(--text);}
.arcade-body{padding-top:32px;padding-bottom:60px;}
@media (prefers-reduced-motion: reduce){
.arcade-shell{transition:none;}
}
/* LIVRO DE VISITAS / PEDIR FUNCIONALIDADE */
.guestbook-form{display:flex;gap:10px;flex-wrap:wrap;}
.guestbook-form input{flex:1;min-width:140px;}
.guestbook-form button{
background:var(--accent);color:#10141a;border:none;font-family:'Space Grotesk',sans-serif;
font-weight:600;font-size:14px;padding:0 22px;border-radius:var(--radius);cursor:pointer;
}
.guestbook-form button:disabled{opacity:.6;cursor:default;}
.guestbook-note{margin-top:10px;font-size:12.5px;color:var(--accent-2);font-family:'IBM Plex Mono',monospace;min-height:16px;}
.guestbook-list{list-style:none;margin:20px 0 0;padding:0;max-height:320px;overflow-y:auto;}
.guestbook-list li{
padding:12px 14px;border-top:1px solid var(--line);font-family:'IBM Plex Mono',monospace;font-size:13px;
}
.guestbook-list li:first-child{border-top:none;}
.guestbook-list .gb-name{color:var(--accent-2);font-weight:600;}
.guestbook-list .gb-msg{color:var(--text-dim);margin-top:3px;}
.guestbook-list .gb-time{color:var(--text-dim);opacity:.6;font-size:11px;float:right;}
/* QUEBRA-CABEÇA */
.puzzle-board{
width:280px;height:280px;margin:20px auto;display:grid;
grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:3px;
background:var(--line);border-radius:6px;overflow:hidden;
}
.puzzle-tile{
background-image:var(--puzzle-img);background-size:300% 300%;cursor:pointer;
transition:transform .12s var(--ease);
}
.puzzle-tile:hover{filter:brightness(1.15);}
.puzzle-tile.empty{background:var(--surface);cursor:default;}
.puzzle-tile.empty:hover{filter:none;}
/* TERMO */
.termo-area{padding:20px;display:flex;flex-direction:column;align-items:center;gap:18px;}
.termo-grid{display:grid;grid-template-rows:repeat(6,1fr);gap:6px;}
.termo-row{display:grid;grid-template-columns:repeat(5,40px);gap:6px;}
.termo-cell{
width:40px;height:40px;border:2px solid var(--line);border-radius:4px;
display:flex;align-items:center;justify-content:center;
font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:18px;color:var(--text);
text-transform:uppercase;
}
.termo-cell.filled{border-color:var(--text-dim);}
.termo-cell.correct{background:var(--accent-2);border-color:var(--accent-2);color:#0b1a17;}
.termo-cell.present{background:var(--accent);border-color:var(--accent);color:#3a1f0a;}
.termo-cell.absent{background:var(--surface-2);border-color:var(--surface-2);color:var(--text-dim);}
.termo-keyboard{display:flex;flex-direction:column;gap:6px;}
.termo-krow{display:flex;gap:5px;justify-content:center;}
.termo-key{
min-width:26px;padding:8px 6px;background:var(--surface-2);border:none;border-radius:4px;
color:var(--text);font-family:'IBM Plex Mono',monospace;font-size:11px;cursor:pointer;text-transform:uppercase;
}
.termo-key:hover{background:var(--line);}
.termo-key.correct{background:var(--accent-2);color:#0b1a17;}
.termo-key.present{background:var(--accent);color:#3a1f0a;}
.termo-key.absent{background:#12161d;color:var(--text-dim);}
.termo-key.wide{min-width:50px;font-size:10px;}
/* DEBUG O BUG */
.bug-board{
display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);gap:10px;
padding:20px;height:280px;
}
.bug-hole{
background:var(--surface-2);border-radius:8px;position:relative;overflow:hidden;cursor:pointer;
}
.bug-hole::before{
content:"";position:absolute;inset:30%;border-radius:4px;background:var(--line);
}
.bug-hole.up::before{
background:var(--accent);
animation:bug-pop .18s ease-out;
}
@keyframes bug-pop{from{transform:scale(0.4);opacity:0;}to{transform:scale(1);opacity:1;}}
/* CAMPO MINADO */
.mine-board{
display:grid;grid-template-columns:repeat(8,1fr);gap:2px;
width:320px;margin:16px auto;background:var(--line);padding:2px;border-radius:6px;
}
.mine-cell{
aspect-ratio:1;background:var(--surface-2);display:flex;align-items:center;justify-content:center;
font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;cursor:pointer;user-select:none;
}
.mine-cell.open{background:#05070c;cursor:default;}
.mine-cell.flag{background:var(--surface-2);}
.mine-cell.mine{background:var(--accent);}
.mine-cell.n1{color:#6bb6ff;} .mine-cell.n2{color:var(--accent-2);} .mine-cell.n3{color:var(--accent);}
.mine-cell.n4,.mine-cell.n5,.mine-cell.n6,.mine-cell.n7,.mine-cell.n8{color:#c98bff;}
/* LIG 4 */
.c4-board{
display:grid;grid-template-columns:repeat(7,1fr);gap:5px;
width:350px;margin:16px auto;background:var(--surface-2);padding:8px;border-radius:8px;
}
.c4-cell{
aspect-ratio:1;border-radius:50%;background:#05070c;cursor:pointer;
}
.c4-cell.p{background:var(--accent-2);}
.c4-cell.c{background:var(--accent);}
/* TESTE DE REFLEXO */
.reflex-area{
height:280px;display:flex;align-items:center;justify-content:center;text-align:center;
background:var(--surface-2);cursor:pointer;transition:background .1s;
}
.reflex-area.wait{background:#3a1f0a;}
.reflex-area.go{background:var(--accent-2);}
.reflex-msg{
font-family:'Space Grotesk',sans-serif;font-size:17px;color:var(--text);padding:0 20px;
}
.reflex-area.go .reflex-msg{color:#0b1a17;font-weight:700;}
.game-hud{
position:absolute;top:10px;left:12px;right:12px;display:flex;justify-content:space-between;
font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--text-dim);pointer-events:none;
z-index:2;
}
.game-hud b{color:var(--accent);font-weight:600;}
.game-overlay{
position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:10px;background:rgba(5,7,12,0.82);text-align:center;padding:20px;z-index:3;
}
.game-overlay h4{font-family:'Space Grotesk',sans-serif;font-size:16px;color:var(--text);margin:0;}
.game-overlay p{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--text-dim);margin:0;max-width:280px;}
.game-overlay button{
margin-top:4px;background:var(--accent);color:#10141a;border:none;font-family:'Space Grotesk',sans-serif;
font-weight:600;font-size:13px;padding:9px 18px;border-radius:var(--radius);cursor:pointer;
}
.game-overlay.hidden{display:none;}
.game-leaderboard{
width:100%;max-width:280px;text-align:left;font-family:'IBM Plex Mono',monospace;font-size:11.5px;
border:1px solid var(--line);border-radius:6px;overflow:hidden;background:rgba(23,29,38,0.6);
}
.game-leaderboard .lb-head{
padding:7px 10px;color:var(--accent-2);border-bottom:1px solid var(--line);font-weight:600;letter-spacing:.03em;
}
.game-leaderboard ol{list-style:none;margin:0;padding:4px 0;max-height:130px;overflow-y:auto;}
.game-leaderboard li{display:flex;justify-content:space-between;padding:3px 10px;color:var(--text-dim);gap:10px;}
.game-leaderboard li span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.game-leaderboard li b{color:var(--accent);font-weight:600;}
.game-leaderboard .lb-empty{padding:8px 10px;color:var(--text-dim);opacity:.7;}
.game-submit-row{display:flex;gap:6px;width:100%;max-width:280px;}
.game-submit-row input{
flex:1;min-width:0;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);
color:var(--text);font-family:'IBM Plex Mono',monospace;font-size:12px;padding:8px 10px;
}
.game-submit-row input::placeholder{color:var(--text-dim);}
.game-submit-row button{
background:var(--accent-2);color:#0b1a17;border:none;font-family:'Space Grotesk',sans-serif;font-weight:600;
font-size:12.5px;padding:0 14px;border-radius:var(--radius);cursor:pointer;white-space:nowrap;
}
.game-saved-note{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--accent-2);}
.skill-groups{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;}
.skill-group h3{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:600;margin-bottom:12px;color:var(--accent-2);}
.skill-group .chips{margin-bottom:0;}
/* CONTATO */
.contact-grid{display:flex;flex-wrap:wrap;gap:14px;}
.contact-item{
border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;flex:1 1 200px;
}
.contact-item .titlewrap{display:flex;align-items:center;gap:9px;margin-bottom:8px;}
.contact-item .titlewrap .icon-circle{width:26px;height:26px;flex-shrink:0;}
.contact-item .titlewrap .icon-circle svg{width:13px;height:13px;}
.contact-item .k{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--text-dim);}
.contact-item .v{font-size:14.5px;color:var(--accent);}
.placeholder{color:var(--text-dim);font-style:normal;opacity:0.6;}
/* ICONS & VISUAL BLOCKS */
.icon-circle{
width:40px;height:40px;border-radius:50%;flex-shrink:0;
background:var(--surface-2);border:1px solid var(--line);
display:flex;align-items:center;justify-content:center;
transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease);
}
.icon-circle svg{width:20px;height:20px;stroke:var(--accent-2);fill:none;stroke-width:1.6;}
.featured .icon-circle svg{stroke:var(--accent);}
.stat-bar{display:flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:32px;position:relative;background:var(--surface);}
.stat-bar .binary-rain{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block;}
.stat-bar div{position:relative;z-index:1;flex:1 1 140px;padding:20px 18px;}
.stat-bar .num{font-family:'Space Grotesk',sans-serif;font-size:26px;font-weight:700;color:var(--accent);line-height:1;}
.stat-bar .label{font-size:11px;color:var(--text-dim);font-family:'IBM Plex Mono',monospace;margin-top:8px;}
.diff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.diff-card{
position:relative;overflow:hidden;
border:1px solid var(--line);
background:linear-gradient(165deg, var(--surface) 0%, #141a24 100%);
border-radius:var(--radius);padding:20px;
}
.diff-card .icon-circle{margin-bottom:16px;}
.diff-card h3{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:600;margin-bottom:8px;}
.diff-card p{font-size:13px;color:var(--text-dim);}
.highlights{list-style:none;margin-bottom:14px;}
.highlights li{font-size:13.5px;color:var(--text-dim);padding-left:15px;position:relative;margin-bottom:5px;}
.highlights li::before{content:"›";position:absolute;left:0;top:0;color:var(--accent-2);font-family:'IBM Plex Mono',monospace;font-weight:700;}
.record.featured .highlights li::before{color:var(--accent);}
/* REF-LINK — citação a projeto/competência vira link laranja */
.ref-link{
color:var(--accent);text-decoration:none;border-bottom:1px dashed rgba(255,138,61,.5);
transition:border-color .2s var(--ease),color .2s var(--ease);
}
.ref-link:hover{border-bottom-color:var(--accent);color:#ffa15c;}
@keyframes ref-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,138,61,.5);}50%{box-shadow:0 0 0 6px rgba(255,138,61,0);}}
.ref-pulse{animation:ref-pulse 1s ease-out 2;border-radius:4px;}
.record-head{gap:12px;}
.record-head .titlewrap{display:flex;align-items:center;gap:12px;}
/* SCREENSHOTS */
.shot-frame{border:1px solid var(--line);border-radius:6px;overflow:hidden;margin:4px 0 16px;background:var(--surface-2);}
.shot-frame .chrome{display:flex;gap:6px;padding:8px 10px;background:var(--surface);border-bottom:1px solid var(--line);}
/* ORBES DAS IAs — ATENA e AURORA, personagens originais */
.ai-orbs{
display:flex;align-items:center;justify-content:center;gap:64px;
padding:34px 20px;background:#05070c;
}
.ai-orb-wrap{display:flex;flex-direction:column;align-items:center;gap:12px;}
.ai-orb{
width:76px;height:76px;border-radius:50%;position:relative;
display:flex;align-items:center;justify-content:center;
animation:orb-breathe 3.6s ease-in-out infinite;
}
.orb-atena{
background:radial-gradient(circle at 32% 28%, #ffc898, var(--accent) 58%, #a84e1c 100%);
box-shadow:0 0 28px 6px rgba(255,138,61,.4);
}
.orb-aurora{
background:radial-gradient(circle at 32% 28%, #a8f5e2, var(--accent-2) 58%, #1c6f5a 100%);
box-shadow:0 0 28px 6px rgba(63,201,168,.4);
animation-delay:.65s;
}
@keyframes orb-breathe{
0%,100%{transform:scale(1);}
50%{transform:scale(1.09);}
}
.orb-eyes{display:flex;gap:9px;}
.orb-eyes span{
width:6px;height:8px;border-radius:50%;background:#0b0d10;
animation:orb-blink 4.8s ease-in-out infinite;
}
.orb-aurora .orb-eyes span{animation-delay:1.1s;}
@keyframes orb-blink{
0%,90%,100%{transform:scaleY(1);}
95%{transform:scaleY(.1);}
}
.ai-orb-label{font-size:11px;color:var(--text-dim);letter-spacing:.06em;}
/* quando as orbs de verdade pousam no lugar do mockup, o mockup estático some suavemente */
.ai-orbs .ai-orb{transition:opacity .35s var(--ease);}
.ai-orbs.live-docked .ai-orb-wrap .ai-orb{opacity:0;}
@media (prefers-reduced-motion: reduce){
.ai-orb, .orb-eyes span{animation:none;}
}
.shot-frame .chrome span{width:8px;height:8px;border-radius:50%;background:var(--line);display:inline-block;}
.shot-frame img{display:block;width:100%;height:auto;}
.diagram-mock{
aspect-ratio:16/8;background:var(--surface-2);margin:0;
display:flex;align-items:center;justify-content:center;padding:14px;
}
.diagram-mock svg{width:100%;height:100%;max-width:420px;}
footer{padding:28px 0 40px;text-align:center;color:var(--text-dim);font-size:12.5px;font-family:'IBM Plex Mono',monospace;}
@media (max-width:720px){
.sobre-grid{grid-template-columns:1fr;}
.skill-groups{grid-template-columns:1fr;}
.diff-grid{grid-template-columns:1fr;}
.nav-links{display:none;}
}
#back-to-top{
position:fixed;bottom:24px;right:24px;z-index:40;
width:42px;height:42px;border-radius:50%;
background:var(--surface-2);border:1px solid var(--line);
display:flex;align-items:center;justify-content:center;
opacity:0;pointer-events:none;transform:translateY(8px);
transition:opacity .25s var(--ease),transform .25s var(--ease),border-color .2s;
}
#back-to-top.visible{opacity:1;pointer-events:auto;transform:translateY(0);}
#back-to-top:hover{border-color:var(--accent);}
#back-to-top svg{width:18px;height:18px;stroke:var(--text);fill:none;stroke-width:1.8;}
@media (prefers-reduced-motion: reduce){#back-to-top{transition:opacity .01s;}}
/* ============================================================
Refinamento visual — aditivo (sobrepõe as regras acima)
============================================================ */
:root{
--shadow:0 24px 60px -34px rgba(0,0,0,0.9);
--ease:cubic-bezier(.2,.7,.2,1);
}
body{background-color:var(--bg);}
/* âncoras respeitam a nav fixa */
section[id]{scroll-margin-top:76px;}
#inicio{scroll-margin-top:0;}
/* NAV — logo com brilho sutil + links com sublinhado animado */
header.nav{transition:background .3s var(--ease),border-color .3s var(--ease);}
.nav-inner .brand img{
transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.nav-inner .brand:hover img{
transform:rotate(-4deg) scale(1.06);
box-shadow:0 0 0 1px rgba(255,138,61,.4),0 8px 20px -8px rgba(255,138,61,.5);
}
.nav-links a{position:relative;transition:color .2s var(--ease);}
.nav-links a::after{
content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
background:var(--accent);transform:scaleX(0);transform-origin:left;
transition:transform .28s var(--ease);
}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1);}
.nav-links a.active{color:var(--text);}
/* Aba do app: leva para hellys.dev.br/optimizer/ (página própria). */
.nav-links a.nav-app{color:var(--accent);}
/* HERO — status "ao vivo", botões e moldura de código com vida */
.hero .tag{display:inline-flex;align-items:center;gap:8px;}
/* ABERTURA — enxame de pontos (canvas em JS): foge do mouse/dedo e, ao segurar, forma "HELLYS." */
#intro-overlay{
position:fixed;inset:0;z-index:9999;background:var(--bg);
opacity:1;transition:opacity .5s ease;touch-action:none;
animation:intro-failsafe 0s linear 45s forwards;
}
#intro-overlay.hide{opacity:0;pointer-events:none;}
@keyframes intro-failsafe{ to { opacity:0; visibility:hidden; pointer-events:none; } }
html.intro-lock{overflow:hidden;scrollbar-gutter:stable;}
#intro-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
.intro-hint{
position:absolute;left:50%;bottom:12%;transform:translateX(-50%);
display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 14px;
background:none;border:none;cursor:pointer;text-align:center;
color:var(--text);font-size:13px;letter-spacing:.04em;
opacity:0;animation:intro-hint-in .7s var(--ease) .6s forwards;
transition:opacity .3s var(--ease);
}
.intro-hint-sub{color:var(--text-dim);font-size:12px;opacity:.8;}
.intro-hint.is-empty{opacity:0 !important;pointer-events:none;}
.intro-hint:focus-visible, .intro-skip:focus-visible{outline:1px solid var(--accent-2);outline-offset:4px;}
@keyframes intro-hint-in{ from{opacity:0;transform:translate(-50%,8px);} to{opacity:1;transform:translate(-50%,0);} }
.intro-progress{
position:absolute;left:50%;bottom:calc(12% - 16px);width:min(220px,50vw);height:2px;
transform:translateX(-50%);border-radius:2px;overflow:hidden;
background:rgba(232,236,241,.12);opacity:0;transition:opacity .3s var(--ease);
}
.intro-progress i{display:block;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(0);}
#intro-overlay.is-holding .intro-progress{opacity:1;}
.intro-skip{
position:absolute;right:22px;bottom:22px;background:none;border:none;cursor:pointer;
color:var(--text-dim);font-size:11.5px;letter-spacing:.03em;opacity:0;
animation:intro-skip-in .6s var(--ease) 1.2s forwards;transition:opacity .3s var(--ease);
}
.intro-skip:hover{color:var(--text);}
@keyframes intro-skip-in{ to{opacity:1;} }
#intro-overlay.is-bursting .intro-hint, #intro-overlay.is-bursting .intro-skip, #intro-overlay.is-bursting .intro-progress{opacity:0 !important;pointer-events:none;}
@media (prefers-reduced-motion:reduce){
#intro-overlay{display:none;}
}
.hero .tag::before{
content:"";width:7px;height:7px;border-radius:50%;background:var(--accent-2);
animation:pulse 2.2s infinite;
}
@keyframes pulse{
0%{box-shadow:0 0 0 0 rgba(63,201,168,.45);}
70%{box-shadow:0 0 0 7px rgba(63,201,168,0);}
100%{box-shadow:0 0 0 0 rgba(63,201,168,0);}
}
.hero h1{text-wrap:balance;}
.hero .shot-frame{box-shadow:var(--shadow);}
/* BOTÕES — brilho e elevação universal, pega estilo inline também */
a[style*="background:var(--accent)"], button[style*="background:var(--accent)"],
#hero-actions a:first-child, .game-overlay button, .guestbook-form button{
position:relative;overflow:hidden;
transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .25s var(--ease);
}
a[style*="background:var(--accent)"]::before, button[style*="background:var(--accent)"]::before,
#hero-actions a:first-child::before, .game-overlay button::before, .guestbook-form button::before{
content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;
background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
transform:skewX(-20deg);transition:left .55s var(--ease);
}
a[style*="background:var(--accent)"]:hover::before, button[style*="background:var(--accent)"]:hover::before,
#hero-actions a:first-child:hover::before, .game-overlay button:hover::before, .guestbook-form button:hover::before{
left:125%;
}
a[style*="background:var(--accent)"]:hover, button[style*="background:var(--accent)"]:hover,
.game-overlay button:hover, .guestbook-form button:hover{
transform:translateY(-2px) scale(1.02);
box-shadow:0 14px 30px -14px rgba(255,138,61,.55);
}
a[style*="border:1px solid var(--line)"]:hover{
transform:translateY(-2px);border-color:var(--accent-2) !important;color:var(--accent-2) !important;
}
a[style*="border:1px solid var(--line)"]{transition:transform .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);}
#hero-actions a:first-child{transition:transform .2s var(--ease),box-shadow .2s var(--ease);}
#hero-actions a:first-child:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(255,138,61,.6);}
#hero-actions a:last-child{transition:border-color .2s var(--ease),color .2s var(--ease);}
#hero-actions a:last-child:hover{border-color:var(--accent-2);color:var(--accent-2);}
/* "traffic lights" das molduras, dentro da paleta */
.shot-frame .chrome span:nth-child(1){background:var(--accent);}
.shot-frame .chrome span:nth-child(2){background:var(--text-dim);}
.shot-frame .chrome span:nth-child(3){background:var(--accent-2);}
/* TICKER — pausa ao passar o mouse */
.ticker:hover .ticker-track{animation-play-state:paused;}
/* TÍTULOS de seção com prefixo de comentário */
h2.section-title::before{
content:"// ";font-family:'IBM Plex Mono',monospace;color:var(--accent-2);
font-size:0.62em;font-weight:500;
}
/* FATOS — realce de linha */
.facts div{transition:background .2s var(--ease);}
.facts div:hover{background:var(--surface-2);}
/* DIFERENCIAIS — cartões com elevação */
.diff-card{transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);}
.diff-card:hover{transform:translateY(-5px);border-color:var(--accent-2);box-shadow:0 16px 40px -20px rgba(63,201,168,.35);}
.diff-card:hover .icon-circle{border-color:var(--accent-2);background:rgba(63,201,168,.1);transform:scale(1.08) rotate(-4deg);}
/* PROJETOS — registros com elevação e faixa que cresce */
.record{transition:transform .3s var(--ease),border-left-width .2s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);}
.record:hover{transform:translateY(-4px);border-left-width:5px;box-shadow:var(--shadow), 0 0 0 1px rgba(63,201,168,.15);}
.record.featured:hover{box-shadow:var(--shadow), 0 0 0 1px rgba(255,138,61,.18);}
.record-code{
border:1px solid var(--line);padding:3px 10px;border-radius:999px;
background:var(--surface-2);
}
.record.featured .record-code{color:var(--accent);border-color:rgba(255,138,61,.35);}
/* CHIPS */
.chip{transition:transform .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);}
.chip:hover{transform:translateY(-1px);border-color:var(--accent-2);color:var(--text);}
/* CONTATO */
.contact-item{transition:transform .2s var(--ease),border-color .2s var(--ease);}
.contact-item:hover{transform:translateY(-2px);border-color:var(--accent);}
/* acessibilidade — foco visível */
a:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px;border-radius:2px;}
/* HERO — brilho ambiente atras do conteudo */
#inicio{position:relative;isolation:isolate;}
#inicio::before{
content:"";position:absolute;z-index:-1;top:-120px;left:-10%;
width:520px;height:520px;border-radius:50%;pointer-events:none;
background:radial-gradient(circle, rgba(255,138,61,.16), transparent 68%);
filter:blur(6px);
animation:drift-a 16s ease-in-out infinite;
}
#inicio::after{
content:"";position:absolute;z-index:-1;top:20px;right:-8%;
width:460px;height:460px;border-radius:50%;pointer-events:none;
background:radial-gradient(circle, rgba(63,201,168,.14), transparent 66%);
filter:blur(6px);
animation:drift-b 20s ease-in-out infinite;
}
@keyframes drift-a{
0%,100%{transform:translate(0,0) scale(1);}
50%{transform:translate(30px,40px) scale(1.08);}
}
@keyframes drift-b{
0%,100%{transform:translate(0,0) scale(1);}
50%{transform:translate(-35px,-25px) scale(1.1);}
}
@media (prefers-reduced-motion: reduce){
#inicio::before, #inicio::after{animation:none;}
}
/* CURSOR — mini-enxame (canvas) + etiqueta de contexto. O cursor nativo só some quando o JS liga (html.cursor-swarm). */
#cursor-canvas{position:fixed;top:0;left:0;pointer-events:none;z-index:10500;display:none;}
.cursor-label{
position:fixed;top:0;left:0;pointer-events:none;z-index:10501;display:none;
font-size:11px;font-weight:600;letter-spacing:.04em;white-space:nowrap;
background:var(--accent);color:#10141a;padding:4px 10px;border-radius:999px;
opacity:0;transform:translate3d(-200px,-200px,0);transition:opacity .18s var(--ease);will-change:transform,opacity;
}
.cursor-label.on{opacity:1;}
@media (hover:hover) and (pointer:fine){
#cursor-canvas, .cursor-label{display:block;}
}
html.cursor-swarm, html.cursor-swarm *{cursor:none !important;}
html.cursor-swarm input, html.cursor-swarm textarea{cursor:text !important;}
html.cursor-swarm select{cursor:pointer !important;}
html.cursor-swarm .game-frame canvas{cursor:crosshair !important;}
@media (prefers-reduced-motion: reduce){
#cursor-canvas, .cursor-label{display:none !important;}
}
/* BOTOES MAGNETICOS */
.magnetic{display:inline-block;will-change:transform;}
/* SPOTLIGHT NOS CARDS — brilho segue o mouse */
.record, .diff-card{position:relative;}
.record::before, .diff-card::before{
content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(255,138,61,.10), transparent 70%);
opacity:0;transition:opacity .3s var(--ease);z-index:0;
}
.record:hover::before, .diff-card:hover::before{opacity:1;}
/* REVEAL-ON-SCROLL — trava de segurança: mesmo com JS, 3.5s força tudo visível */
.reveal{
opacity:0;transform:translateY(22px);
transition:opacity .7s var(--ease), transform .7s var(--ease);
animation:reveal-failsafe 0s linear 3.5s forwards;
}
.reveal.in{opacity:1;transform:none;}
/* leitura diferenciada por tipo — cada seção chega de um jeito, não o mesmo fade repetido */
.record.reveal{
opacity:0;transform:translateX(-28px);
transition:opacity .65s var(--ease), transform .65s var(--ease);
}
.record.reveal.in{opacity:1;transform:none;}
.record .chip{opacity:0;transform:scale(.85);}
.record.reveal.in .chip{animation:chip-pop .35s var(--ease) forwards;}
.record.reveal.in .chip:nth-child(1){animation-delay:.42s;}
.record.reveal.in .chip:nth-child(2){animation-delay:.47s;}
.record.reveal.in .chip:nth-child(3){animation-delay:.52s;}
.record.reveal.in .chip:nth-child(4){animation-delay:.57s;}
.record.reveal.in .chip:nth-child(5){animation-delay:.62s;}
.record.reveal.in .chip:nth-child(6){animation-delay:.67s;}
.record.reveal.in .chip:nth-child(n+7){animation-delay:.7s;}
@keyframes chip-pop{ to{opacity:1;transform:none;} }
.diff-card.reveal{transform:perspective(900px) rotateX(10deg) translateY(24px);transform-origin:50% 100%;}
.diff-card.reveal.in{transform:none;}
.stop.reveal{transform:translateX(-18px);}
.stop.reveal.in{transform:none;}
.closing-statement.reveal{opacity:0;transform:scale(.92);transition:opacity .7s var(--ease), transform .7s var(--ease);}
.closing-statement.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
.record.reveal{transition:none;}
.record .chip{opacity:1;transform:none;animation:none;}
.diff-card.reveal, .stop.reveal, .closing-statement.reveal{transform:none;}
}
/* DIAGNÓSTICO — frases-sintoma flutuando + busca fake com typewriter (estilo weevolveit "what's slowing you down") */
.diag-section{position:relative;padding:96px 0 72px;overflow:hidden;border-bottom:1px solid var(--line);min-height:640px;display:flex;align-items:center;}
.diag-inner{position:relative;max-width:680px;margin:0 auto;text-align:center;padding:0 24px;z-index:2;width:100%;}
.diag-kicker{
display:inline-block;border:1px solid var(--line);border-radius:var(--radius);
padding:5px 12px;font-size:11.5px;color:var(--text-dim);margin-bottom:20px;
}
.diag-heading-wrap{position:relative;}
.diag-swarm-canvas{position:absolute;left:0;top:0;pointer-events:none;display:none;z-index:2;opacity:1;}
.diag-heading-wrap.swarm-done .diag-swarm-canvas{opacity:0;transition:opacity .5s var(--ease);}
.diag-heading{
font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(28px,4.6vw,52px);
line-height:1.08;letter-spacing:-0.02em;text-wrap:balance;
opacity:1;
}
.diag-heading-wrap.swarming .diag-heading{opacity:0;}
.diag-heading-wrap.swarm-done .diag-heading{opacity:1;transition:opacity .5s var(--ease);}
.diag-heading em{font-style:normal;color:var(--accent);}
.diag-sub{color:var(--text-dim);margin:14px 0 34px;font-size:15px;}
.diag-search{
display:flex;align-items:center;gap:10px;max-width:520px;margin:0 auto;
border:1px solid var(--line);border-radius:999px;padding:14px 10px 14px 22px;
background:var(--surface);cursor:pointer;
transition:border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.diag-search:hover, .diag-search:focus-visible{
border-color:var(--accent-2);box-shadow:0 0 0 1px rgba(63,201,168,.25);transform:translateY(-1px);outline:none;
}
.diag-search-typed{flex:1;text-align:left;font-size:14px;color:var(--text);white-space:nowrap;overflow:hidden;}
.diag-search-cursor{color:var(--accent);animation:diag-blink 1s step-end infinite;}
.diag-search-btn{
width:34px;height:34px;border-radius:50%;background:var(--accent);color:#10141a;
display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.diag-search-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
@keyframes diag-blink{ 50%{opacity:0;} }
.diag-live{display:inline-flex;align-items:center;gap:8px;margin-top:28px;font-size:11.5px;color:var(--text-dim);}
.diag-live-dot{width:6px;height:6px;border-radius:50%;background:#ff5c7a;animation:globe-pulse 1.6s ease-in-out infinite;}
.diag-live span, .diag-live b{color:var(--text);font-weight:600;}
.diag-section .diag-floaters{position:absolute;inset:0;pointer-events:none;z-index:1;}
.df{
position:absolute;max-width:180px;
font-family:'IBM Plex Mono',monospace;font-size:12px;line-height:1.5;
color:var(--text-dim);white-space:normal;
opacity:0;transform:translateY(8px) rotate(var(--r,0deg));
transition:opacity .7s var(--ease), transform .7s var(--ease);
will-change:opacity, transform;
}
.df.show{opacity:.55;transform:translateY(0) rotate(var(--r,0deg));}
.df.hide{opacity:0;transform:translateY(-8px) rotate(var(--r,0deg));}
.df b{color:var(--accent-2);font-weight:600;}
/* em janelas médias sobra espaço em cima, embaixo e nas laterais do miolo: as frases continuam, menores e em menor número (só somem no celular) */
@media (min-width:721px) and (max-width:1239px){ .df{max-width:150px;font-size:11.5px;} }
@media (max-width:720px){ .diag-floaters{display:none;} }
@media (prefers-reduced-motion: reduce){
.df{transition:none;}
.diag-search-cursor{animation:none;}
.diag-live-dot{animation:none;}
}
/* FAIXA DIAGONAL — texto rodando em looping infinito, levemente torto (estilo weevolveit) */
.skew-marquee{
margin:56px 0;overflow:hidden;transform:rotate(-1.4deg);
border-top:1px solid var(--line);border-bottom:1px solid var(--line);
background:var(--surface);padding:16px 0;
}
.skew-marquee-track{
display:flex;align-items:center;width:max-content;gap:20px;
font-family:'Space Grotesk',sans-serif;font-weight:700;
font-size:clamp(20px,3vw,36px);letter-spacing:-0.01em;
color:var(--text-dim);white-space:nowrap;
animation:skew-marquee-scroll 30s linear infinite;
}
.skew-marquee-track .dot{color:var(--accent);}
.skew-marquee:hover .skew-marquee-track{animation-play-state:paused;}
@keyframes skew-marquee-scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce){
.skew-marquee{transform:none;}
.skew-marquee-track{animation:none;}
}
/* MÉTODO — painéis horizontais presos no scroll (estilo weevolveit "5 method", via GSAP ScrollTrigger) */
.method-section{position:relative;background:var(--bg);}
.method-track{display:block;}
.method-panel{
width:auto;padding:56px clamp(24px,6vw,72px);border-bottom:1px solid var(--line);
display:block;
}
.method-panel:last-child{border-bottom:none;}
.method-num{
display:block;font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:48px;
color:var(--text-dim);opacity:.45;margin-bottom:6px;
}
.method-body{position:relative;z-index:1;max-width:640px;}
.method-body h3{
font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(30px,5vw,52px);
line-height:1.05;margin:8px 0 16px;letter-spacing:-0.02em;
}
.method-body h3 .dot{color:var(--accent);}
.method-lede{font-size:16px;color:var(--text-dim);max-width:520px;margin-bottom:18px;}
.method-list{display:flex;flex-direction:column;gap:9px;}
.method-list li{position:relative;padding-left:20px;color:var(--text-dim);font-size:14px;list-style:none;}
.method-list li::before{content:"—";position:absolute;left:0;color:var(--accent-2);}
.method-stepper{display:none;}
/* modo preso — ativado via JS só quando GSAP/ScrollTrigger carregam e há espaço/condição pra animar */
.method-section.pinned{overflow:hidden;}
.method-section.pinned .method-track{display:flex;width:400%;height:100vh;position:relative;z-index:1;}
.method-swarm{display:none;}
.method-section.pinned .method-swarm{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}
.method-section.pinned .method-panel{
width:25%;height:100vh;flex-shrink:0;border-bottom:none;
display:flex;align-items:center;padding:0 8vw;position:relative;
}
.method-section.pinned .method-num{
position:absolute;left:4vw;top:50%;transform:translateY(-50%);
font-size:min(300px, 24vw);line-height:1;color:rgba(255,255,255,.045);
margin:0;pointer-events:none;user-select:none;
}
.method-section.pinned .method-body h3{font-size:clamp(40px,6.5vw,84px);}
.method-section.pinned .method-lede{font-size:clamp(16px,1.5vw,19px);}
.method-section.pinned .method-stepper{
display:flex;align-items:center;gap:10px;position:absolute;left:50%;bottom:44px;
transform:translateX(-50%);font-size:11px;color:var(--text-dim);letter-spacing:.09em;z-index:2;
}
.ms-sep{color:var(--line);}
.ms-step{transition:color .3s var(--ease);}
.ms-step.is-active{color:var(--accent);}
.ms-dot{
position:absolute;left:0;top:100%;margin-top:10px;
width:5px;height:5px;border-radius:50%;background:var(--accent);
box-shadow:0 0 8px 1px rgba(255,138,61,.55);
will-change:transform;
}
@media (prefers-reduced-motion: reduce){ .ms-dot{display:none;} }
@media (prefers-reduced-motion: reduce){
.method-section.pinned{overflow:visible;}
}
/* SCROLL-SCRUB — palavras acendem conforme a rolagem avança (estilo weevolveit, contínuo e não binário) */
.scroll-scrub .sw{opacity:.22;}
@media (prefers-reduced-motion: reduce){
.scroll-scrub .sw{opacity:1;}
}
/* WORD-REVEAL — palavras aparecem uma a uma ao rolar (estilo weevolveit) */
.word-reveal{overflow:hidden;}
.word-reveal .wr-word{display:inline-block;overflow:hidden;vertical-align:top;}
.word-reveal .wr-word-inner{
display:inline-block;transform:translateY(100%);opacity:0;
transition:transform .55s var(--ease), opacity .5s var(--ease);
transition-delay:var(--wr-delay, 0s);
}
.word-reveal.in .wr-word-inner{transform:none;opacity:1;}
@media (prefers-reduced-motion: reduce){
.word-reveal .wr-word-inner{transition:none;transform:none;opacity:1;}
}
/* BOTÃO "ME CONTRATE" — expande contato rápido */
.hire-toggle{
display:inline-flex;align-items:center;gap:7px;background:none;cursor:pointer;
font-size:12.5px;transition:border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.hire-toggle:hover{border-color:var(--accent);background:rgba(255,138,61,.08);}
.hire-toggle-chevron{transition:transform .3s var(--ease);}
.hire-toggle-chevron path{stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.hire-toggle[aria-expanded="true"] .hire-toggle-chevron{transform:rotate(180deg);}
.quick-contact{
display:grid;grid-template-rows:0fr;opacity:0;
transition:grid-template-rows .5s var(--ease), opacity .4s var(--ease);
margin-top:-6px;
}
.quick-contact.open{grid-template-rows:1fr;opacity:1;margin-bottom:8px;}
.quick-contact-inner{overflow:hidden;}
.quick-contact-hint{color:var(--text-dim);font-size:12px;margin:14px 0 10px;}
.quick-contact-links{display:flex;gap:10px;flex-wrap:wrap;}
.qc-item{
display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:var(--radius);
padding:10px 16px;font-size:13.5px;color:var(--text);transition:border-color .25s var(--ease), transform .25s var(--ease), background .25s var(--ease);
}
.qc-item svg{width:16px;height:16px;stroke:var(--accent-2);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
.qc-item:hover{border-color:var(--accent-2);background:rgba(45,212,191,.08);transform:translateY(-1px);}
@media (prefers-reduced-motion: reduce){
.quick-contact{transition:none;}
.hire-toggle-chevron{transition:none;}
}
/* VITRINE DE PROJETOS — cada slide tem uma animação própria; os dois últimos são "outras coisas" (arcade e contato) */
.proj-carousel-wrap{margin-bottom:34px;}
.proj-carousel{
display:flex;gap:18px;overflow-x:auto;scroll-behavior:auto;overscroll-behavior-x:contain;
cursor:grab;user-select:none;-webkit-user-select:none;
padding:8px 2px 14px;scrollbar-width:none;
}
.proj-carousel::-webkit-scrollbar{display:none;}
.proj-carousel.dragging{cursor:grabbing;}
.proj-carousel.dragging .pc-card{pointer-events:none;}
.pc-card{
flex:0 0 auto;width:min(340px, 82vw);display:flex;flex-direction:column;text-align:left;
border:1px solid var(--line);border-radius:6px;background:var(--surface);overflow:hidden;position:relative;
transform:perspective(760px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
transition:transform .28s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
will-change:transform;outline:none;
}
.pc-card::after{
content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%), rgba(255,138,61,.14), transparent 70%);
opacity:0;transition:opacity .3s var(--ease);
}
.pc-card:hover, .pc-card:focus-visible{border-color:rgba(255,138,61,.55);box-shadow:0 24px 44px -24px rgba(0,0,0,.85);}
.pc-card:hover::after, .pc-card:focus-visible::after{opacity:1;}
.pc-card:focus-visible{outline:1px solid var(--accent-2);outline-offset:3px;}
.pc-vis{
height:138px;flex:0 0 auto;position:relative;overflow:hidden;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(165deg, var(--surface-2), var(--surface));border-bottom:1px solid var(--line);
}
.pc-vis svg{display:block;width:100%;height:100%;}
.pc-body{padding:14px 16px 6px;display:flex;flex-direction:column;gap:6px;flex:1;}
.pc-kicker{font-size:10.5px;letter-spacing:.06em;color:var(--accent-2);text-transform:uppercase;}
.pc-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:19px;line-height:1.15;letter-spacing:-0.01em;color:var(--text);}
.pc-punch{font-size:13px;line-height:1.5;color:var(--text-dim);}
.pc-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;}
.pc-chips span{
font-family:'IBM Plex Mono',monospace;font-size:10.5px;padding:3px 9px;
border:1px solid var(--line);border-radius:999px;color:var(--text-dim);
}
.pc-go{display:block;padding:10px 16px 15px;font-size:11.5px;letter-spacing:.03em;color:var(--accent);transition:transform .25s var(--ease);}
.pc-card:hover .pc-go, .pc-card:focus-visible .pc-go{transform:translateX(5px);}
.pc-controls{display:flex;align-items:center;gap:14px;margin-top:6px;}
.pc-btn{
width:38px;height:38px;flex:0 0 auto;border-radius:50%;border:1px solid var(--line);background:var(--surface);
color:var(--text);font-size:15px;line-height:1;cursor:pointer;
display:flex;align-items:center;justify-content:center;
transition:border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.pc-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent);transform:translateY(-1px);}
.pc-btn:focus-visible{outline:1px solid var(--accent-2);outline-offset:3px;}
.pc-btn:disabled{opacity:.3;cursor:default;}
.pc-progress{flex:1;height:2px;border-radius:2px;background:var(--line);overflow:hidden;}
.pc-progress i{display:block;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(.14);transition:transform .2s var(--ease);}
.carousel-hint{text-align:center;font-size:11px;color:var(--text-dim);opacity:.6;margin-top:8px;}
@media (hover:hover) and (pointer:fine){
.carousel-hint{display:none;}
}
/* animações dos slides (SVG/CSS puros) */
.pcv-kb{animation:pcv-kb 9s ease-in-out infinite;}
@keyframes pcv-kb{
0%,14%{transform:translateX(0);stroke:var(--text-dim);opacity:1;}
28%,44%{transform:translateX(106px);stroke:var(--accent);opacity:1;}
58%,80%{transform:translateX(212px);stroke:var(--accent-2);opacity:1;}
88%{transform:translateX(212px);opacity:0;}
89%{transform:translateX(0);opacity:0;}
100%{transform:translateX(0);stroke:var(--text-dim);opacity:1;}
}
.pcv-stop{animation:pcv-stop 6.8s linear infinite;}
@keyframes pcv-stop{
0%{fill:var(--surface);stroke:var(--text-dim);}
6%,24%{fill:var(--accent-2);stroke:var(--accent-2);}
34%,100%{fill:var(--surface);stroke:var(--text-dim);}
}
.pcv-dr{animation:pcv-dr 5.1s ease-in-out infinite;}
@keyframes pcv-dr{ 0%,6%{transform:translateX(0);} 12%,28%{transform:translateX(14px);} 38%,100%{transform:translateX(0);} }
.pcv-file{opacity:0;animation:pcv-file 1.7s ease-in-out infinite;}
@keyframes pcv-file{ 0%{opacity:0;transform:translateX(-8px);} 22%,68%{opacity:1;transform:none;} 90%,100%{opacity:0;transform:none;} }
.pcv-draw{stroke-dasharray:100;stroke-dashoffset:100;animation:pcv-draw 6s ease-in-out infinite;}
@keyframes pcv-draw{ 0%{stroke-dashoffset:100;opacity:1;} 62%,94%{stroke-dashoffset:0;opacity:1;} 100%{stroke-dashoffset:0;opacity:0;} }
.pcv-eta{opacity:0;animation:pcv-eta 6s ease-in-out infinite;}
@keyframes pcv-eta{ 0%,58%{opacity:0;transform:translateY(4px);} 68%,92%{opacity:1;transform:none;} 100%{opacity:0;transform:none;} }
.pcv-ping{transform-box:fill-box;transform-origin:center;animation:pcv-ping 1.8s ease-out infinite;}
@keyframes pcv-ping{ 0%{transform:scale(1);opacity:1;} 100%{transform:scale(2.3);opacity:.15;} }
.pcv-bar{transform-box:fill-box;transform-origin:50% 100%;animation:pcv-bar 6s ease-out infinite;}
@keyframes pcv-bar{ 0%{transform:scaleY(0);} 16%,88%{transform:scaleY(1);} 98%,100%{transform:scaleY(0);} }
.pcv-line{stroke-dasharray:100;stroke-dashoffset:100;animation:pcv-line 6s ease-in-out infinite;}
@keyframes pcv-line{ 0%,18%{stroke-dashoffset:100;} 40%,88%{stroke-dashoffset:0;} 98%,100%{stroke-dashoffset:100;} }
.pcv-sn{fill:var(--accent-2);opacity:0;animation:pcv-sn 3.52s linear infinite;}
@keyframes pcv-sn{ 0%{opacity:0;} 3%{opacity:1;} 22%{opacity:.85;} 27%,100%{opacity:0;} }
.pcv-food{animation:pcv-food 1.2s ease-in-out infinite;}
@keyframes pcv-food{ 50%{opacity:.35;} }
.pcv-orbs{display:flex;align-items:center;justify-content:center;gap:16px;width:100%;height:100%;padding:0 14px;}
.pcv-orbs .ai-orb{width:58px;height:58px;flex:0 0 auto;}
.pcv-orbs .orb-eyes{gap:8px;}
.pcv-orbs .orb-eyes span{width:5px;height:7px;}
.pcv-say{display:flex;flex-direction:column;align-items:flex-start;min-width:0;font-size:11px;color:var(--text);}
.pcv-say-sub{display:block;margin-top:5px;font-size:10px;color:var(--text-dim);}
.pcv-type{
display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;
width:var(--w);animation:pcv-type 5s steps(var(--n)) infinite;
}
@keyframes pcv-type{ 0%{width:0;} 45%,80%{width:var(--w);} 100%{width:0;} }
.pcv-cta{width:100%;padding:0 24px;font-size:13px;line-height:1.9;color:var(--text);}
.pcv-cta-p{color:var(--accent-2);}
.pcv-cta-sub{margin-top:2px;font-size:11.5px;color:var(--text-dim);}
/* fora da tela ou modo "reduzir movimento": tudo pausado / estático */
/* SITES-MODELO — miniaturas que abrem cada site em nova aba */
.models-grid{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin:4px 0 18px;}
.model{display:grid;gap:4px;text-decoration:none;color:inherit;}
.m-shot{display:block;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--surface-2);margin-bottom:6px;transition:border-color .25s var(--ease);}
.m-shot img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;transition:transform .5s var(--ease);}
.m-ramo{font-size:11px;color:var(--text-dim);letter-spacing:.04em;}
.m-name{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600;line-height:1.2;}
.m-what{font-size:13px;color:var(--text-dim);line-height:1.45;}
.m-go{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--accent-2);margin-top:4px;}
.m-ico{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.model:hover .m-shot,.model:focus-visible .m-shot{border-color:var(--accent);}
.model:hover .m-shot img{transform:scale(1.04);}
.model:hover .m-go{color:var(--accent);}
.model:focus-visible{outline:1px solid var(--accent-2);outline-offset:4px;border-radius:6px;}
@media (max-width:1100px){.models-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}}
@media (prefers-reduced-motion:reduce){.m-shot img{transition:none;}.model:hover .m-shot img{transform:none;}}
.models-all{margin:-4px 0 16px;}
.models-all a{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--accent-2);border-bottom:1px solid rgba(63,201,168,.35);padding-bottom:2px;}
.models-all a:hover{color:var(--accent);border-bottom-color:var(--accent);}
.pcv-pg{animation:pcv-pg 4.2s ease-in-out infinite;}
@keyframes pcv-pg{ 0%,100%{transform:translateY(0);} 30%{transform:translateY(-8px);} 60%{transform:translateY(0);} }
.pc-static .pcv-pg{animation:none;}
.pc-off *{animation-play-state:paused !important;}
.pc-static .pcv-kb, .pc-static .pcv-stop, .pc-static .pcv-dr, .pc-static .pcv-file, .pc-static .pcv-ping, .pc-static .pcv-food,
.pc-static .pcv-type, .pc-static .pcv-draw, .pc-static .pcv-eta, .pc-static .pcv-bar, .pc-static .pcv-line, .pc-static .pcv-sn{animation:none;}
.pc-static .pcv-draw, .pc-static .pcv-line{stroke-dashoffset:0;}
.pc-static .pcv-eta, .pc-static .pcv-file{opacity:1;}
.pc-static .pcv-sn{opacity:.25;}
.pc-static .pcv-sn:nth-child(-n+5){opacity:.9;}
.pc-static .pc-card{transform:none;transition:none;}
.pc-static .ai-orb, .pc-static .orb-eyes span{animation:none;}
@media (prefers-reduced-motion: reduce){
.reveal{opacity:1;transform:none;transition:none;animation:none;}
}
/* botao primario com leve profundidade */
#hero-actions a:first-child{
background:linear-gradient(180deg,#ffa15c,var(--accent));
box-shadow:0 8px 20px -12px rgba(255,138,61,.7);
}
/* TITULOS de secao numerados automaticamente */
body{counter-reset:sec;}
h2.section-title{counter-increment:sec;}
h2.section-title::before{
content:counter(sec, decimal-leading-zero) " // ";
}
/* TICKER — bordas esmaecidas nas pontas */
.ticker{position:relative;}
.ticker::before,.ticker::after{
content:"";position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none;
}
.ticker::before{left:0;background:linear-gradient(90deg,var(--bg),transparent);}
.ticker::after{right:0;background:linear-gradient(270deg,var(--bg),transparent);}
/* CODIGO do hero — cursor pisca com o acento */
.cursor-blink{color:var(--accent);}
@media (prefers-reduced-motion:reduce){
.hero .tag::before{animation:none;}
.ticker-track{animation:none;}
html{scroll-behavior:auto;}
}
/* GLOBO 3D — presença remota, estilo weevolveit (Three.js, ver portfolio-hellys-globe.js) */
.globe-section{
display:flex;flex-direction:column;align-items:center;gap:18px;
padding:52px 0;border-bottom:1px solid var(--line);
}
.globe-badge{
display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-dim);
border:1px solid var(--line);border-radius:var(--radius);padding:6px 14px;
}
.globe-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:globe-pulse 1.8s ease-in-out infinite;}
@keyframes globe-pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }
.globe-canvas-wrap{
width:min(420px, 82vw);aspect-ratio:1/1;position:relative;
}
.globe-canvas-wrap canvas{display:block;width:100%;height:100%;}
@media (prefers-reduced-motion: reduce){
.globe-dot{animation:none;}
}
/* =========================================================
ATENA & AURORA — camada de experiência
========================================================= */
/* fundo HUD — grade pontilhada sutil, estilo painel de operação */
.hud-dots{
position:absolute;inset:0;z-index:0;pointer-events:none;
background-image:radial-gradient(rgba(232,236,241,.10) 1px, transparent 1px);
background-size:26px 26px;
mask-image:radial-gradient(ellipse 85% 65% at 50% 0%, #000 40%, transparent 92%);
-webkit-mask-image:radial-gradient(ellipse 85% 65% at 50% 0%, #000 40%, transparent 92%);
}
.hud-grid{position:relative;}
/* FUNDO — campo de pontos interativo (canvas fixo) atrás de tudo. Com reduced-motion o canvas some e o grid estático das seções assume. */
#bg-dots{
position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;
mask-image:radial-gradient(ellipse 125% 105% at 50% 35%, #000 45%, rgba(0,0,0,.35) 100%);
-webkit-mask-image:radial-gradient(ellipse 125% 105% at 50% 35%, #000 45%, rgba(0,0,0,.35) 100%);
}
html.bg-live .hud-dots{background-image:none;}
.hud-grid > *{position:relative;z-index:1;}
/* tamanho do orb-companheiro */
.orb-sm{width:42px;height:42px;}
.orb-sm .orb-eyes{gap:6px;}
.orb-sm .orb-eyes span{width:4px;height:5px;}
/* ORBS-COMPANHEIROS — Atena e Aurora acompanham a rolagem */
.ai-companions{
position:fixed;right:18px;bottom:18px;z-index:900;
opacity:0;transform:translateY(14px);pointer-events:none;
transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.ai-companions.show{opacity:1;transform:none;pointer-events:auto;}
.ai-companions-inner{
display:flex;flex-direction:column;gap:14px;align-items:flex-end;
transition:transform .5s var(--ease);
will-change:transform;
}
.companion{position:relative;display:flex;align-items:center;gap:10px;}
.companion .ai-orb{
cursor:pointer;
transition:filter .35s var(--ease), box-shadow .35s var(--ease), transform .25s var(--ease);
}
.companion:hover .ai-orb, .companion .ai-orb:focus-visible{transform:scale(1.1);outline:none;}
.companion .orb-atena{box-shadow:0 0 14px 2px rgba(255,138,61,.26);}
.companion .orb-aurora{box-shadow:0 0 14px 2px rgba(63,201,168,.26);}
.ai-companions[data-theme="tech"] .companion-atena .ai-orb{box-shadow:0 0 24px 7px rgba(255,138,61,.6);}
.ai-companions[data-theme="tech"] .companion-aurora .ai-orb{filter:brightness(.7) saturate(.65);}
.ai-companions[data-theme="personal"] .companion-aurora .ai-orb{box-shadow:0 0 24px 7px rgba(63,201,168,.6);}
.ai-companions[data-theme="personal"] .companion-atena .ai-orb{filter:brightness(.7) saturate(.65);}
.companion-bubble{
position:absolute;right:56px;bottom:-6px;width:max-content;max-width:220px;
background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);
padding:10px 12px;font-size:12px;line-height:1.5;color:var(--text);
opacity:0;transform:translateX(6px) scale(.97);pointer-events:none;
transition:opacity .22s var(--ease), transform .22s var(--ease);
box-shadow:var(--shadow);
}
.companion-bubble::after{
content:"";position:absolute;right:-5px;bottom:18px;width:9px;height:9px;
background:var(--surface-2);border-right:1px solid var(--line);border-bottom:1px solid var(--line);
transform:rotate(-45deg);
}
.companion-bubble.open{opacity:1;transform:none;pointer-events:auto;}
/* bolha vira janela de terminal — mesma linguagem CMD do resto do site */
.companion-bubble.term{padding:0;overflow:hidden;width:232px;max-width:232px;}
.term-bar{
display:flex;align-items:center;gap:6px;padding:7px 10px;
background:var(--surface);border-bottom:1px solid var(--line);
}
.term-bar span:not(.term-title){width:7px;height:7px;border-radius:50%;background:var(--line);display:inline-block;}
.term-bar span:nth-child(1){background:var(--accent);}
.term-bar span:nth-child(3){background:var(--accent-2);}
.term-title{margin-left:4px;font-size:10.5px;color:var(--text-dim);}
.term-body{padding:10px 12px;font-size:12px;line-height:1.55;color:var(--text);min-height:40px;}
.term-prompt{color:var(--accent-2);margin-right:4px;}
.term-cursor{display:inline-block;color:var(--accent);animation:blink 1s step-start infinite;}
@media (prefers-reduced-motion: reduce){ .term-cursor{animation:none;} }
@media (max-width:640px){
.ai-companions{right:10px;bottom:14px;}
.ai-companions-inner{gap:9px;}
.orb-sm{width:32px;height:32px;}
.orb-sm .orb-eyes span{width:3px;height:4px;}
.companion-bubble{max-width:168px;font-size:11.5px;right:44px;}
}
/* --bx é definida por JS (fitBubble) pra manter o balão dentro da tela; a setinha anda em sentido oposto pra continuar apontando pra orb */
@media (hover:none){
.companion-bubble{right:auto;left:50%;bottom:calc(100% + 10px);transform:translateX(calc(-50% + var(--bx,0px))) translateY(4px) scale(.97);}
.companion-bubble.open{transform:translateX(calc(-50% + var(--bx,0px))) translateY(0) scale(1);}
.companion-bubble::after{right:auto;left:calc(50% - var(--bx,0px));bottom:-5px;top:auto;transform:translateX(-50%) rotate(45deg);}
}
/* enquanto soltas pela tela (modo hero), a bolha nasce abaixo da orb — nunca sabe se tem espaço à esquerda */
.roaming .companion-bubble{
right:auto;left:50%;bottom:auto;top:calc(100% + 12px);
transform:translateX(calc(-50% + var(--bx,0px))) translateY(-4px) scale(.97);
}
.roaming .companion-bubble.open{transform:translateX(calc(-50% + var(--bx,0px))) translateY(0) scale(1);}
.roaming .companion-bubble::after{right:auto;left:calc(50% - var(--bx,0px));bottom:auto;top:-5px;transform:translateX(-50%) rotate(45deg);}
@media (prefers-reduced-motion: reduce){
.ai-companions{transition:none;}
.companion .ai-orb{transition:none;}
}
/* TRIPULAÇÃO — no céu da Plêiade a hellys. é o satélite: Atena é a engenheira de bordo, Aurora a comunicação de bordo.
O manual pede as duas sempre redondas, com brilho e dois olhos: o equipamento flutua em volta, nunca nelas. */
.orb-atena::before, .orb-atena::after,
.orb-aurora::before, .orb-aurora::after{
content:"";position:absolute;pointer-events:none;
}
/* Atena: escala de inspeção girando, com três nanorrobôs de ferramenta */
.orb-atena::before{
inset:-34%;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='46' fill='none' stroke='%23ff8a3d' stroke-opacity='.55' stroke-width='1.6' stroke-dasharray='.6 2.3'/%3E%3Cg fill='%23ffc796'%3E%3Ccircle cx='50' cy='4' r='2.4'/%3E%3Ccircle cx='89.8' cy='73' r='2'/%3E%3Ccircle cx='10.2' cy='73' r='2'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat;
animation:tripulacao-girar 26s linear infinite;
}
/* Atena: a mira com os colchetes do kit */
.orb-atena::after{
inset:-24%;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M6 22V6h16M78 6h16v16M94 78v16H78M22 94H6V78' fill='none' stroke='%23ff8a3d' stroke-opacity='.85' stroke-width='3'/%3E%3C/svg%3E") center/100% 100% no-repeat;
animation:tripulacao-mirar 3.2s ease-in-out infinite;
transition:transform .25s var(--ease), filter .25s var(--ease);
}
/* Aurora: ondas de rádio */
.orb-aurora::before, .orb-aurora::after{
inset:0;border-radius:50%;
border:1.5px solid rgba(63,201,168,.6);
opacity:0;
animation:tripulacao-onda 3.4s ease-out infinite;
}
.orb-aurora::after{animation-delay:1.7s;}
/* falando: a mira da Atena fecha e acende; as ondas da Aurora aceleram */
.companion:has(.companion-bubble.open) .orb-atena::after{
animation:none;transform:scale(.88);filter:drop-shadow(0 0 4px rgba(255,138,61,.85));
}
.companion:has(.companion-bubble.open) .orb-aurora::before,
.companion:has(.companion-bubble.open) .orb-aurora::after{animation-duration:1.3s;}
@keyframes tripulacao-girar{ to{transform:rotate(360deg);} }
@keyframes tripulacao-mirar{ 0%,100%{transform:scale(1);} 50%{transform:scale(.94);} }
@keyframes tripulacao-onda{ 0%{transform:scale(1);opacity:.7;} 100%{transform:scale(2.2);opacity:0;} }
@media (prefers-reduced-motion: reduce){
.orb-atena::before, .orb-atena::after, .orb-aurora::after{animation:none;}
.orb-aurora::before{animation:none;opacity:.45;transform:scale(1.4);}
}
/* selo do grupo no rodapé */
.foot-grupo{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;}
.foot-grupo:hover{color:var(--accent-2);}
/* trajetória — marco atual ganha leve pulso na cor da Atena */
.stop.current::before{animation:stop-pulse 2.4s ease-in-out infinite;}
@keyframes stop-pulse{
0%,100%{box-shadow:0 0 0 0 rgba(255,138,61,.5);}
50%{box-shadow:0 0 0 6px rgba(255,138,61,0);}
}
@media (prefers-reduced-motion: reduce){
.stop.current::before{animation:none;}
}
/* BARRA DE ROTA — a página inteira é a viagem; essa linha marca quanto já foi percorrido */
#route-bar{
position:fixed;top:26px;left:0;width:100%;height:3px;z-index:9500;
background:var(--line);pointer-events:none;
}
#route-bar-fill{
height:100%;width:100%;transform-origin:left;transform:scaleX(0);
background:linear-gradient(90deg, var(--accent-2), var(--accent));
box-shadow:0 0 10px 0 rgba(255,138,61,.55);
transition:transform .1s linear;
}
/* HODÔMETRO — canto oposto aos orbs-companheiros, lê a viagem em km */
#trip-meter{
position:fixed;left:18px;bottom:18px;z-index:900;
font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--text-dim);
background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
padding:8px 12px;letter-spacing:.03em;
opacity:0;transform:translateY(10px);pointer-events:none;
transition:opacity .4s var(--ease), transform .4s var(--ease);
}
#trip-meter.show{opacity:1;transform:none;}
#trip-meter .tm-label{opacity:.65;margin-right:8px;}
#trip-meter .tm-num{color:var(--accent-2);font-weight:500;}
@media (max-width:640px){
#trip-meter{left:10px;bottom:10px;font-size:10px;padding:6px 9px;}
}
/* CHAMADA PRA ROLAR — só no primeiro momento do hero, some depois do primeiro scroll */
#scroll-cue{
position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
display:flex;flex-direction:column;align-items:center;gap:6px;
font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--text-dim);
letter-spacing:.08em;text-transform:uppercase;opacity:0;
animation:scroll-cue-in .6s var(--ease) 2.4s forwards;
transition:opacity .35s var(--ease);
}
#scroll-cue.hide{opacity:0 !important;}
#scroll-cue svg{width:14px;height:14px;stroke:var(--accent-2);fill:none;stroke-width:1.6;animation:scroll-cue-bob 1.6s ease-in-out infinite;}
@keyframes scroll-cue-in{ to{opacity:.85;} }
@keyframes scroll-cue-bob{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(4px);} }
@media (prefers-reduced-motion: reduce){
#scroll-cue svg{animation:none;}
#scroll-cue{animation:none;opacity:.85;}
#route-bar-fill{transition:none;}
}
/* FALA DE ENCERRAMENTO — o único momento tipográfico grande da página, reservado pro fim da jornada */
.closing-statement{text-align:center;padding:8px 0 52px;}
/* alvo vazio — as orbs de verdade (companion widget) chegam até aqui quando a seção entra em vista */
.closing-orbs{height:64px;margin-bottom:22px;}
.closing-statement h3{
font-family:'Space Grotesk',sans-serif;font-weight:700;
font-size:clamp(30px, 5.6vw, 76px);line-height:1.05;letter-spacing:-0.025em;
max-width:920px;margin:0 auto;text-wrap:balance;
}
.closing-statement h3 em{font-style:normal;color:var(--accent-2);}
/* MODO HERO — enquanto a primeira tela está à vista, Atena e Aurora ganham corpo e andam cada uma por si */
.ai-companions.roaming{
transition:opacity .6s var(--ease);
}
.ai-companions.roaming .ai-companions-inner{
will-change:auto; /* "will-change:transform" no pai vira containing block de fixed — quebra o posicionamento solto */
}
.ai-companions.roaming .companion{
position:fixed;left:0;top:0;pointer-events:auto;
}
.roaming .orb-sm{width:76px;height:76px;transition:width .35s var(--ease),height .35s var(--ease);}
.roaming .orb-sm .orb-eyes{gap:11px;}
.roaming .orb-sm .orb-eyes span{width:7px;height:9px;}
.roaming .companion .ai-orb{cursor:default;}
@media (max-width:619px), (prefers-reduced-motion: reduce){
.ai-companions.roaming{display:none;}
}
/* BARRA DE SISTEMA — a moldura que deixa claro que isso tudo roda numa tela de PC */
body{padding-top:26px;}
#os-bar{
position:fixed;top:0;left:0;right:0;height:26px;z-index:9600;
display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:0 14px;background:#080a0e;border-bottom:1px solid var(--line);
font-size:11px;color:var(--text-dim);letter-spacing:.02em;
}
#os-bar .os-bar-brand{color:var(--text);font-weight:500;flex-shrink:0;}
#os-bar .os-bar-ext{color:var(--text-dim);}
#os-bar .os-bar-procs{
flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0;
}
#os-bar .os-dot{
width:6px;height:6px;border-radius:50%;background:var(--accent-2);flex-shrink:0;
box-shadow:0 0 6px 1px rgba(63,201,168,.6);
animation:os-dot-pulse 2s ease-in-out infinite;
}
@keyframes os-dot-pulse{ 0%,100%{opacity:1;} 50%{opacity:.4;} }
#os-bar .os-bar-clock{flex-shrink:0;font-variant-numeric:tabular-nums;}
@media (max-width:640px){
#os-bar .os-bar-procs{display:none;}
}
@media (prefers-reduced-motion: reduce){
#os-bar .os-dot{animation:none;}
}
/* PODCAST — player com onda de bolinhas + lista de episódios */
.pod{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:18px;align-items:start;}
.pod-stage{
position:relative;border:1px solid var(--line);border-radius:8px;overflow:hidden;
background:linear-gradient(165deg, var(--surface-2), var(--surface));
padding:22px 22px 18px;transition:border-color .3s var(--ease);
}
.pod-stage::before{
content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s var(--ease);
background:radial-gradient(420px circle at 12% 0%, rgba(255,138,61,.13), transparent 70%);
}
.pod[data-state="playing"] .pod-stage, .pod[data-state="loading"] .pod-stage{border-color:rgba(255,138,61,.5);}
.pod[data-state="playing"] .pod-stage::before, .pod[data-state="loading"] .pod-stage::before{opacity:1;}
.pod-stage > *{position:relative;}
.pod-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
.pod-badge{
display:inline-flex;align-items:center;gap:7px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
color:var(--accent-2);border:1px solid rgba(63,201,168,.35);border-radius:999px;padding:4px 11px;
}
.pod-badge i{width:6px;height:6px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 6px 1px rgba(63,201,168,.55);}
.pod-no{font-size:11px;color:var(--text-dim);letter-spacing:.06em;}
.pod-title{
font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(21px,2.5vw,29px);
line-height:1.14;letter-spacing:-0.015em;margin-bottom:12px;text-wrap:balance;
}
.pod-tags{display:flex;flex-wrap:wrap;gap:6px;}
.pod-tag{font-size:10.5px;padding:3px 10px;border:1px solid var(--line);border-radius:999px;color:var(--text-dim);}
.pod-wave{
position:relative;height:108px;margin:22px 0 14px;cursor:pointer;touch-action:pan-y;
user-select:none;-webkit-user-select:none;border-radius:6px;
}
.pod-wave canvas{display:block;width:100%;height:100%;}
.pod-wave:focus-visible{outline:1px solid var(--accent-2);outline-offset:6px;}
.pod-tip{
position:absolute;top:-24px;transform:translateX(-50%);pointer-events:none;
font-size:11px;line-height:1;padding:4px 7px;border-radius:4px;
background:var(--bg);border:1px solid var(--line);color:var(--text);white-space:nowrap;
}
.pod-tip[hidden]{display:none;}
.pod-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.pod-play{
width:54px;height:54px;flex:0 0 auto;border-radius:50%;border:0;cursor:pointer;
background:var(--accent);color:#10141a;display:grid;place-items:center;
box-shadow:0 8px 22px -10px rgba(255,138,61,.75);
transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.pod-play:hover{transform:scale(1.06);box-shadow:0 10px 26px -8px rgba(255,138,61,.9);}
.pod-play:active{transform:scale(.97);}
.pod-play svg{width:22px;height:22px;display:block;}
.pod-play .ic-pause{display:none;}
.pod[data-state="playing"] .pod-play .ic-play, .pod[data-state="loading"] .pod-play .ic-play{display:none;}
.pod[data-state="playing"] .pod-play .ic-pause, .pod[data-state="loading"] .pod-play .ic-pause{display:block;}
.pod[data-state="loading"] .pod-play{animation:pod-load 1s ease-in-out infinite;}
@keyframes pod-load{50%{opacity:.62;}}
.pod-skip, .pod-speed{
height:36px;padding:0 13px;border:1px solid var(--line);border-radius:999px;background:transparent;
color:var(--text-dim);font-size:12px;cursor:pointer;
transition:border-color .2s var(--ease), color .2s var(--ease);
}
.pod-skip:hover, .pod-speed:hover{border-color:var(--accent);color:var(--accent);}
.pod-play:focus-visible, .pod-skip:focus-visible, .pod-speed:focus-visible, .pod-item-btn:focus-visible, .pod-dl:focus-visible{
outline:1px solid var(--accent-2);outline-offset:3px;
}
.pod-time{margin-left:auto;font-size:12.5px;color:var(--text-dim);font-variant-numeric:tabular-nums;}
.pod-time b{color:var(--text);font-weight:500;}
.pod-msg{margin-top:0;font-size:11.5px;line-height:1.5;color:var(--accent);}
.pod-msg:not(:empty){margin-top:12px;}
.pod-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin:0;padding:0;}
.pod-item{
position:relative;display:flex;align-items:stretch;overflow:hidden;
border:1px solid var(--line);border-radius:8px;background:var(--surface);
transition:border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.pod-item::before{
content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);
transform:scaleY(0);transform-origin:center;transition:transform .3s var(--ease);
}
.pod-item:hover{border-color:rgba(255,138,61,.4);transform:translateY(-1px);}
.pod-item.is-active{border-color:rgba(255,138,61,.55);background:var(--surface-2);}
.pod-item.is-active::before{transform:scaleY(1);}
.pod-item-btn{
flex:1;min-width:0;display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:center;
text-align:left;padding:16px 8px 16px 18px;background:none;border:0;color:inherit;font:inherit;cursor:pointer;
}
.pod-n, .pod-eq{grid-area:1 / 1;}
.pod-n{font-size:12px;color:var(--text-dim);letter-spacing:.04em;}
.pod-item.is-active .pod-n{color:var(--accent);}
.pod-eq{display:none;align-items:flex-end;gap:2px;height:16px;}
.pod-eq i{display:block;width:3px;height:35%;border-radius:1px;background:var(--accent);transform-origin:bottom;}
.pod-item.is-active .pod-eq{display:inline-flex;}
.pod-item.is-active .pod-n{display:none;}
.pod[data-state="playing"] .pod-item.is-active .pod-eq i{animation:pod-eq .9s ease-in-out infinite;}
.pod[data-state="playing"] .pod-item.is-active .pod-eq i:nth-child(2){animation-delay:-.35s;}
.pod[data-state="playing"] .pod-item.is-active .pod-eq i:nth-child(3){animation-delay:-.7s;}
@keyframes pod-eq{0%,100%{height:30%;}50%{height:100%;}}
.pod-item-txt{display:flex;flex-direction:column;gap:5px;min-width:0;}
.pod-item-title{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15.5px;line-height:1.25;color:var(--text);}
.pod-item-meta{font-size:11px;color:var(--text-dim);}
.pod-dl{
flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:46px;
border-left:1px solid var(--line);color:var(--text-dim);font-size:15px;
transition:color .2s var(--ease), background .2s var(--ease);
}
.pod-dl:hover{color:var(--accent);background:rgba(255,138,61,.07);}
@media (max-width:900px){
.pod{grid-template-columns:1fr;}
.pod-wave{height:92px;}
}
@media (max-width:520px){
.pod-stage{padding:18px 16px 16px;}
.pod-time{margin-left:0;width:100%;order:9;}
.pod-play{width:50px;height:50px;}
}
@media (prefers-reduced-motion: reduce){
.pod-eq i, .pod[data-state="loading"] .pod-play{animation:none !important;}
.pod-item, .pod-item:hover{transform:none;}
}
/* LABORATÓRIO — simulador de gargalo (fila de pedidos em 4 etapas) */
.lab{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:18px;align-items:start;}
.lab-main{
border:1px solid var(--line);border-radius:8px;padding:18px 18px 16px;
background:linear-gradient(165deg, var(--surface-2), var(--surface));
}
.lab-top{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;justify-content:space-between;margin-bottom:14px;}
.lab-presets{display:flex;flex-wrap:wrap;gap:8px;}
.lab-chip{
font-size:11.5px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;
background:transparent;color:var(--text-dim);cursor:pointer;
transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.lab-chip:hover{border-color:var(--accent);color:var(--accent);}
.lab-chip.is-on{border-color:var(--accent);color:var(--accent);background:rgba(255,138,61,.08);}
.lab-tools{display:flex;gap:6px;}
.lab-tool{
width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--text);
font-size:13px;line-height:1;display:grid;place-items:center;cursor:pointer;
transition:border-color .2s var(--ease), color .2s var(--ease);
}
.lab-tool:hover{border-color:var(--accent);color:var(--accent);}
.lab-tool svg{width:15px;height:15px;display:block;}
.lab-tool .ic-play{display:none;}
.lab[data-run="0"] .lab-tool .ic-play{display:block;}
.lab[data-run="0"] .lab-tool .ic-pause{display:none;}
.lab-chip:focus-visible, .lab-tool:focus-visible, .lab-step button:focus-visible, .lab-btn:focus-visible, #lab-demand:focus-visible{
outline:1px solid var(--accent-2);outline-offset:3px;
}
.lab-stage{border:1px solid var(--line);border-radius:6px;background:rgba(10,13,18,.55);overflow:hidden;}
.lab-stage canvas{display:block;width:100%;}
.lab-ctrls{display:grid;grid-template-columns:repeat(var(--n,4),1fr);padding:2px 16px 14px;}
.lab-sc{display:flex;flex-direction:column;align-items:flex-end;gap:6px;padding-right:6px;}
.lab-sc-name{font-size:10.5px;letter-spacing:.05em;color:var(--text-dim);text-transform:uppercase;}
.lab-sc-name .s{display:none;}
.lab-step{display:flex;align-items:center;gap:6px;}
.lab-step button{
width:28px;height:28px;border-radius:6px;border:1px solid var(--line);background:transparent;color:var(--text);
font-size:16px;line-height:1;cursor:pointer;display:grid;place-items:center;
transition:border-color .2s var(--ease), color .2s var(--ease);
}
.lab-step button:hover:not(:disabled){border-color:var(--accent-2);color:var(--accent-2);}
.lab-step button:disabled{opacity:.3;cursor:default;}
.lab-step output{min-width:18px;text-align:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17px;}
.lab-sc-meta{font-size:10.5px;color:var(--text-dim);}
.lab-demand{display:flex;align-items:center;gap:14px;margin:16px 0 4px;}
.lab-demand label{font-size:11px;color:var(--text-dim);letter-spacing:.05em;text-transform:uppercase;flex:0 0 auto;}
.lab-demand input{flex:1;min-width:0;accent-color:var(--accent);height:26px;cursor:pointer;}
.lab-demand output{flex:0 0 auto;min-width:96px;text-align:right;font-size:12.5px;color:var(--text);}
.lab-note{font-size:10.5px;line-height:1.55;color:var(--text-dim);opacity:.8;margin-top:8px;}
.lab-side{display:flex;flex-direction:column;gap:12px;}
.lab-kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.lab-kpi{border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:12px 14px;display:flex;flex-direction:column;gap:6px;}
.lab-kpi-wide{grid-column:1 / -1;}
.lab-kpi .k{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);}
.lab-kpi .v{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:24px;line-height:1;letter-spacing:-0.01em;font-variant-numeric:tabular-nums;}
.lab-kpi.is-bad .v{color:var(--accent);}
.lab-kpi.is-ok .v{color:var(--accent-2);}
.lab-verdict{
border:1px solid var(--line);border-left:2px solid var(--accent);border-radius:8px;background:var(--surface);
padding:14px 16px;transition:border-left-color .3s var(--ease);
}
.lab[data-ok="1"] .lab-verdict{border-left-color:var(--accent-2);}
.lab-verdict h3{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17px;line-height:1.2;margin-bottom:8px;}
.lab-verdict p{font-size:13px;line-height:1.55;color:var(--text-dim);}
.lab-verdict p + p{margin-top:8px;}
.lab-verdict .lab-v-fix{color:var(--text);}
.lab-verdict .lab-v-fix:empty{display:none;}
.lab-cta{display:flex;flex-wrap:wrap;gap:10px;}
.lab-btn{
display:inline-flex;align-items:center;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13.5px;
padding:10px 16px;border-radius:var(--radius);border:1px solid var(--line);color:var(--text);
transition:border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.lab-btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px);}
.lab-btn-main{background:var(--accent);border-color:var(--accent);color:#10141a;}
.lab-btn-main:hover{color:#10141a;filter:brightness(1.08);}
@media (max-width:980px){
.lab{grid-template-columns:1fr;}
}
@media (max-width:560px){
.lab-main{padding:14px 12px 14px;}
.lab-ctrls{padding:2px 10px 12px;}
.lab-sc{padding-right:0;align-items:center;}
.lab-sc-name .l{display:none;}
.lab-sc-name .s{display:inline;}
.lab-step{gap:3px;}
.lab-step button{width:24px;height:24px;font-size:14px;}
.lab-sc-meta{display:none;}
}
/* LABORATÓRIO — seletor de ramo */
.lab-row{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.lab-row-l{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);flex:0 0 auto;}
.lab-inds{display:flex;flex-wrap:wrap;gap:8px;}
.lab-ind{
font-size:11.5px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;
background:transparent;color:var(--text-dim);cursor:pointer;
transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.lab-ind:hover{border-color:var(--accent-2);color:var(--accent-2);}
.lab-ind.is-on{border-color:var(--accent-2);color:var(--accent-2);background:rgba(63,201,168,.09);}
.lab-ind:focus-visible{outline:1px solid var(--accent-2);outline-offset:3px;}
@media (max-width:560px){
.lab-row{align-items:flex-start;flex-direction:column;gap:8px;}
}
/* LABORATÓRIO — ferramentas (abas), editor "Meu processo", custo, antes × depois e curva de espera */
.lab-ind-custom{border-style:dashed;}
.lab-chip:disabled{opacity:.4;cursor:default;}
.lab-tabs{display:flex;flex-wrap:wrap;gap:6px;}
.lab-tab{
font-size:11px;padding:6px 11px;border:1px solid var(--line);border-radius:6px;background:transparent;
color:var(--text-dim);cursor:pointer;transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.lab-tab:hover{color:var(--text);border-color:var(--text-dim);}
.lab-tab[aria-selected="true"]{color:var(--accent);border-color:var(--accent);background:rgba(255,138,61,.07);}
.lab-tab:focus-visible, .lab-editor input:focus-visible, .lab-editor select:focus-visible, .lab-editor button:focus-visible, .lab-cost-in input:focus-visible{
outline:1px solid var(--accent-2);outline-offset:2px;
}
.lab-panel[hidden]{display:none;}
.lab-box{border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:14px 16px;}
.lab-box h3{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:16px;line-height:1.2;margin-bottom:8px;}
.lab-box p{font-size:13px;line-height:1.55;color:var(--text-dim);}
.lab-box p + p{margin-top:8px;}
.lab-box .lab-note{font-size:10.5px;margin-top:10px;}
.lab-box .lab-v-fix{color:var(--text);margin-top:8px;}
.lab-v-fix:empty{display:none;}
.lab-au-btns{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px;}
.lab-cost-in{display:grid;gap:10px;margin:10px 0 8px;}
.lab-cost-in label, .lab-ed-meta label{display:flex;flex-direction:column;gap:5px;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-dim);}
.lab-cost-in input, .lab-ed-meta input, .lab-ed-meta select, .lab-ed-row input{
background:var(--bg);border:1px solid var(--line);border-radius:6px;color:var(--text);
padding:7px 9px;font-size:13px;font-family:'IBM Plex Mono',monospace;min-width:0;width:100%;
}
.lab-crow{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:baseline;padding:9px 0;border-top:1px solid var(--line);}
.lab-crow .k{font-size:12.5px;color:var(--text);}
.lab-crow .v{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:16px;text-align:right;font-variant-numeric:tabular-nums;}
.lab-crow .s{grid-column:1 / -1;font-size:10.5px;color:var(--text-dim);}
.lab-cmp{width:100%;border-collapse:collapse;font-size:12px;margin-top:12px;}
.lab-cmp th{text-align:right;color:var(--text-dim);font-weight:400;font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:4px 6px;border-bottom:1px solid var(--line);}
.lab-cmp td{padding:7px 6px;text-align:right;border-bottom:1px solid rgba(255,255,255,.05);font-variant-numeric:tabular-nums;}
.lab-cmp th:first-child, .lab-cmp td:first-child{text-align:left;color:var(--text);}
.lab-cmp td.ok{color:var(--accent-2);}
.lab-cmp td.bad{color:var(--accent);}
#lab-curve{display:block;width:100%;margin:8px 0 10px;}
.lab-editor{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);}
.lab-editor[hidden]{display:none;}
.lab-ed-head{font-size:11px;letter-spacing:.05em;color:var(--accent-2);text-transform:uppercase;margin-bottom:10px;}
.lab-ed-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px;}
.lab-ed-rows{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;}
.lab-ed-row{display:grid;grid-template-columns:22px minmax(0,1fr) 84px 38px 28px;gap:8px;align-items:center;}
.lab-ed-row .n{color:var(--text-dim);font-size:11px;text-align:center;}
.lab-ed-row .u{font-size:11px;color:var(--text-dim);}
.lab-ed-row button{
width:28px;height:28px;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--text-dim);
cursor:pointer;font-size:15px;line-height:1;display:grid;place-items:center;transition:border-color .2s var(--ease), color .2s var(--ease);
}
.lab-ed-row button:hover:not(:disabled){border-color:var(--accent);color:var(--accent);}
.lab-ed-row button:disabled{opacity:.3;cursor:default;}
@media (min-width:981px){
/* o simulador acompanha a leitura das abas ao lado; com o editor aberto ele fica alto demais e volta ao fluxo normal */
.lab-main{position:sticky;top:78px;}
.lab:has(.lab-editor:not([hidden])) .lab-main{position:static;}
}
@media (max-width:700px){
.lab-ed-meta{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:560px){
.lab-ctrls{grid-template-columns:repeat(auto-fit,minmax(70px,1fr));}
.lab-ed-row{grid-template-columns:18px minmax(0,1fr) 70px 30px 28px;gap:6px;}
.lab-box{padding:12px 12px;}
}
/* TERMINAL — gaveta com comandos (tecla `), lê o conteúdo do próprio site */
.tmn{
position:fixed;left:0;right:0;bottom:0;z-index:9450;
height:min(46vh,440px);display:flex;flex-direction:column;
background:rgba(9,12,17,.965);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
border-top:1px solid rgba(63,201,168,.4);box-shadow:0 -18px 50px -20px rgba(0,0,0,.85);
visibility:hidden;transform:translateY(104%);
transition:transform .34s var(--ease), visibility 0s linear .34s;
padding-bottom:env(safe-area-inset-bottom);
}
.tmn.open{visibility:visible;transform:none;transition:transform .34s var(--ease), visibility 0s;}
.tmn-bar{display:flex;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid var(--line);font-size:11.5px;color:var(--text-dim);flex:0 0 auto;}
.tmn-dots{display:flex;gap:6px;}
.tmn-dots i{width:9px;height:9px;border-radius:50%;background:var(--line);display:block;}
.tmn-dots i:nth-child(1){background:var(--accent);}
.tmn-dots i:nth-child(3){background:var(--accent-2);}
.tmn-title{flex:1;text-align:center;letter-spacing:.03em;}
.tmn-x{background:none;border:1px solid var(--line);border-radius:4px;color:var(--text-dim);font-size:10.5px;padding:2px 8px;cursor:pointer;}
.tmn-x:hover{color:var(--accent);border-color:var(--accent);}
.tmn-out{flex:1;min-height:0;overflow:auto;padding:12px 18px 8px;font-size:13px;line-height:1.62;color:var(--text);overscroll-behavior:contain;}
.tmn-out .tl{white-space:pre-wrap;word-break:break-word;}
.tmn-out .tl-dim{color:var(--text-dim);}
.tmn-out .tl-ps{color:var(--accent-2);}
.tmn-out .tl-k{color:var(--accent-2);}
.tmn-out .tl-ok{color:var(--accent-2);}
.tmn-out .tl-err{color:var(--accent);}
.tmn-out .tl-hl{color:var(--accent);}
.tmn-out a{color:var(--accent-2);text-decoration:underline;text-underline-offset:3px;}
.tmn-out a:hover{color:var(--accent);}
.tmn-out .tl-cmd{
background:none;border:0;padding:0;margin:0;font:inherit;color:var(--accent-2);cursor:pointer;
text-decoration:underline dotted;text-underline-offset:3px;
}
.tmn-out .tl-cmd:hover{color:var(--accent);}
.tmn-quick{display:flex;gap:6px;flex-wrap:wrap;padding:6px 18px 8px;flex:0 0 auto;}
.tmn-quick button{
font:inherit;font-size:11px;padding:3px 10px;border:1px solid var(--line);border-radius:999px;
background:transparent;color:var(--text-dim);cursor:pointer;transition:border-color .2s var(--ease), color .2s var(--ease);
}
.tmn-quick button:hover{border-color:var(--accent-2);color:var(--accent-2);}
.tmn-in{display:flex;align-items:center;gap:10px;padding:9px 18px 12px;border-top:1px solid var(--line);font-size:13px;flex:0 0 auto;}
.tmn-ps{color:var(--accent-2);white-space:nowrap;}
.tmn-in input{
flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--text);
font:inherit;caret-color:var(--accent);
}
.tmn-in:focus-within{border-top-color:rgba(63,201,168,.55);}
.tmn-bar button:focus-visible, .tmn-quick button:focus-visible, .tmn-out .tl-cmd:focus-visible, .tmn-out a:focus-visible{
outline:1px solid var(--accent-2);outline-offset:2px;
}
.foot-term{background:none;border:0;padding:0;font:inherit;color:var(--accent-2);cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px;}
.foot-term:hover{color:var(--accent);}
.foot-term kbd{font:inherit;padding:0 5px;border:1px solid var(--line);border-radius:3px;margin-left:2px;}
#os-bar .os-bar-right{display:flex;align-items:center;gap:14px;flex-shrink:0;}
#os-bar .os-bar-term{cursor:pointer;color:var(--text-dim);transition:color .2s var(--ease);}
#os-bar .os-bar-term:hover{color:var(--accent-2);}
@media (max-width:640px){
#os-bar .os-bar-term{display:none;}
.tmn{height:min(62dvh,520px);}
}
@media (prefers-reduced-motion: reduce){
.tmn, .tmn.open{transition:none;}
}
/* menu: entre 721 e 1020px não cabem os 10 links — os menos prioritários saem daqui (seguem acessíveis pela rolagem e pelo Ctrl+K) */
@media (min-width:721px) and (max-width:1020px){
.nav-links a[href="#diferenciais"], .nav-links a[href="#entretenimento"], .nav-links a[href="#livro-visitas"]{display:none;}
}
@media (min-width:721px) and (max-width:800px){
.nav-links a[href="#skills"]{display:none;}
}
/* CURRÍCULO — a versão impressa do site vira um currículo de ~2 páginas (botão no Contato → "Salvar como PDF"). Só usa conteúdo que já está no site. */
.cv-head{display:none;}
.cv-cta{margin-top:20px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;}
.cv-btn{
font-size:12.5px;padding:10px 16px;border:1px solid var(--line);border-radius:var(--radius);
background:transparent;color:var(--text);cursor:pointer;
transition:border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.cv-btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px);}
.cv-btn:focus-visible{outline:1px solid var(--accent-2);outline-offset:3px;}
.cv-hint{font-size:11px;color:var(--text-dim);}
@page{size:A4;margin:13mm 14mm 15mm;}
@media print{
:root{--bg:#fff;--bg-alt:#fff;--surface:#fff;--surface-2:#fff;--line:#c9ced6;--text:#14181f;--text-dim:#444b57;--accent:#b4460c;--accent-2:#0a6f5a;}
html, body{background:#fff !important;color:#14181f !important;padding:0 !important;margin:0 !important;overflow:visible !important;height:auto !important;}
body{font-size:10pt;line-height:1.45;}
/* some tudo que é interface, efeito ou conteúdo que não cabe num currículo */
#os-bar, #route-bar, #trip-meter, #bg-dots, #cursor-canvas, #cursor-label, #ai-companions, #intro-overlay, #cmdk-overlay, #arcade-overlay,
#back-to-top, #hire-toggle, #quick-contact, .skip-link, header.nav, .ticker, .pin-spacer, .tmn, canvas, .cv-cta, footer,
#inicio, #presenca, #diferenciais, #metodo, #podcast, #entretenimento, #laboratorio, #livro-visitas, #pedir-funcionalidade, #diagnostico, #servicos-pc, #contato,
.stat-bar, .facts, .proj-carousel-wrap, .shot-frame, .section-sub, .closing-statement, .skew-marquee, img{display:none !important;}
main{display:block !important;}
.wrap{max-width:none !important;padding:0 !important;margin:0 !important;}
section{padding:0 !important;margin:0 !important;border:0 !important;background:none !important;min-height:0 !important;}
/* sem animação de entrada: tudo já visível */
.reveal, .reveal.in, .stop, .record, .skill-group, .word-reveal, .diff-card{opacity:1 !important;transform:none !important;transition:none !important;animation:none !important;}
.cv-head{display:block !important;margin:0 0 4pt;padding-bottom:8pt;border-bottom:1.5pt solid #14181f;}
.cv-name{font-family:'Space Grotesk',sans-serif;font-size:25pt;font-weight:700;letter-spacing:-0.01em;line-height:1.05;margin:0;}
.cv-name i{font-style:normal;color:var(--accent);}
.cv-role{font-size:11.5pt;font-weight:600;margin:3pt 0 4pt;}
.cv-contact{font-size:8.8pt;color:#333;}
.cv-summary{font-size:9.6pt;margin:6pt 0 0;color:#222;}
h2.section-title{
font-family:'Space Grotesk',sans-serif;font-size:11pt !important;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
margin:12pt 0 5pt !important;padding-bottom:2pt;border-bottom:.75pt solid #9aa1ad;color:#14181f;break-after:avoid;
}
h2.section-title::before{content:none !important;}
a{color:inherit !important;text-decoration:none !important;}
strong{color:#000;}
.sobre-grid{display:block !important;}
.sobre-grid p{font-size:9.6pt;margin:0 0 4pt;color:#222;}
.route{padding-left:0 !important;}
.route::before, .route-progress, .route-signal, .stop::before, .stop::after{display:none !important;}
.stop{padding:0 !important;margin:0 0 5pt !important;break-inside:avoid;}
.stop .when{font-size:8pt;text-transform:uppercase;letter-spacing:.07em;color:#555;}
.stop h3{font-size:10.5pt;margin:0;}
.stop p{font-size:9.3pt;margin:1pt 0 0;color:#222;}
.icon-circle{display:none !important;}
.titlewrap{display:block;margin:0;}
.record, .record.featured{border:0 !important;background:none !important;box-shadow:none !important;padding:0 !important;margin:0 0 8pt !important;break-inside:avoid;}
.record-head{display:flex;justify-content:space-between;align-items:baseline;gap:8pt;margin:0 0 2pt !important;}
.record h3{font-size:11pt;font-weight:700;margin:0;}
.record-code{font-size:7.8pt;color:#555 !important;text-transform:uppercase;letter-spacing:.04em;border:0 !important;background:none !important;padding:0 !important;}
.highlights{margin:2pt 0 3pt !important;}
.highlights li{font-size:9.3pt;margin:0 0 1.5pt;color:#222;}
.chips{display:flex;flex-wrap:wrap;gap:1.5pt 0;margin:0 !important;}
.chip, .record .chip{border:0 !important;background:none !important;padding:0 !important;margin:0 !important;font-family:'IBM Plex Mono',monospace;font-size:7.8pt;color:#555 !important;opacity:1 !important;transform:none !important;animation:none !important;}
.chip::after{content:'\00a0·\00a0';}
.chip:last-child::after{content:'';}
.skill-groups{display:block !important;}
.skill-group{margin:0 0 4pt !important;padding:0 !important;border:0 !important;background:none !important;break-inside:avoid;}
.skill-group h3{font-size:9.5pt;margin:0 0 1pt;color:#0a6f5a;}
}
/* PULSAR — o satélite capta uma transmissão: o podcast agora é da Pulsar (marca irmã no grupo Plêiade)
e a seção dele assume a identidade dela. Só esta seção: paleta noite/limão/rosa-choque, Unbounded,
sombra dura. A interferência dura meio pulso (668 ms) e a troca acontece no meio dela. */
.pod-secao{position:relative;}
.pod-interferencia, .pod-transmissao{display:none;}
.pod-secao.pulsar{
--accent:#e4ff3a;--accent-2:#ff2d8a;
isolation:isolate;border-bottom-color:transparent;
padding-top:58px;padding-bottom:66px; /* espaço para a borda rasgada não ficar atrás do título e da lista */
}
/* O fundo da transmissão vai de ponta a ponta da tela; em cima e embaixo não tem quina:
a borda é sinal rasgado (blocos desencontrados, riscos e estática), que dá um tranco a cada pulso */
.pod-secao.pulsar::before, .pod-secao.pulsar::after{
content:"";position:absolute;left:50%;width:100vw;transform:translateX(-50%);z-index:-1;pointer-events:none;
}
.pod-secao.pulsar::before{top:44px;bottom:44px;background:#08070d;}
.pod-secao.pulsar::after{
top:0;bottom:0;
background:url('data:image/svg+xml,') 0 0 / 640px 48px repeat-x, url('data:image/svg+xml,') 0 100% / 640px 48px repeat-x;
animation:pl-borda 2.6746s steps(1) infinite;
}
@keyframes pl-borda{0%{background-position:0 0, 0 100%;}50%{background-position:-211px 0, 137px 100%;}}
.pod-secao.pulsar h2.section-title{
font-family:'Unbounded',sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:-.035em;
color:#f6f4ff;text-shadow:.055em .055em 0 #ff2d8a;
}
.pod-secao.pulsar h2.section-title::before{color:#e4ff3a;text-shadow:none;letter-spacing:0;text-transform:none;}
.pod-secao.pulsar p.section-sub{color:#aaa4c6;margin-bottom:22px;}
.pod-secao.pulsar .pod-transmissao{
display:inline-block;max-width:100%;line-height:1.5;margin:0 0 34px;padding:9px 16px;border-radius:18px;
background:#e4ff3a;color:#08070d;text-decoration:none;font-family:'IBM Plex Mono',monospace;font-size:12px;
letter-spacing:.06em;text-transform:uppercase;box-shadow:5px 5px 0 #ff2d8a;transform:rotate(-2deg);
animation:pl-estouro .3s cubic-bezier(.2,1.6,.4,1) both;transition:box-shadow .15s, transform .15s;
}
.pod-secao.pulsar .pod-transmissao b{font-family:'Unbounded',sans-serif;font-weight:900;letter-spacing:.01em;}
.pod-secao.pulsar .pod-transmissao:hover{transform:rotate(-2deg) translate(-2px,-2px);box-shadow:7px 7px 0 #ff2d8a;}
.pod-secao.pulsar .pod-transmissao:focus-visible{outline:2px solid #2de2ff;outline-offset:4px;}
.pod-secao.pulsar .pod-stage{background:#13111d;border:2px solid #2c2842;border-radius:22px;box-shadow:8px 8px 0 #ff2d8a;}
.pod-secao.pulsar .pod-stage::before{display:none;}
.pod-secao.pulsar .pod[data-state="playing"] .pod-stage,
.pod-secao.pulsar .pod[data-state="loading"] .pod-stage{border-color:#e4ff3a;}
.pod-secao.pulsar .pod-title{font-family:'Unbounded',sans-serif;font-weight:700;letter-spacing:-.025em;color:#f6f4ff;}
.pod-secao.pulsar .pod-badge{color:#2de2ff;border-color:#2c2842;background:#1c1929;}
.pod-secao.pulsar .pod-badge i{background:#2de2ff;box-shadow:none;}
.pod-secao.pulsar .pod-tag{border-color:#2c2842;color:#aaa4c6;}
.pod-secao.pulsar .pod-play{
background:#e4ff3a;color:#08070d;box-shadow:5px 5px 0 #ff2d8a;
animation:pl-bate 1.3373s cubic-bezier(.2,.8,.2,1) infinite;
}
.pod-secao.pulsar .pod-play:hover{box-shadow:7px 7px 0 #ff2d8a;}
.pod-secao.pulsar .pod-skip, .pod-secao.pulsar .pod-speed{border-color:#2c2842;}
.pod-secao.pulsar .pod-item{background:#13111d;border-color:#2c2842;border-radius:16px;}
.pod-secao.pulsar .pod-item:hover{border-color:rgba(228,255,58,.45);}
.pod-secao.pulsar .pod-item.is-active{border-color:#e4ff3a;background:#1c1929;}
.pod-secao.pulsar .pod-n{font-family:'Unbounded',sans-serif;font-weight:900;font-size:16px;color:#ff2d8a;}
.pod-secao.pulsar .pod-dl{border-left-color:#2c2842;}
.pod-secao.pulsar .pod-dl:hover{background:rgba(228,255,58,.08);}
/* A interferência: chiado de linhas, três faixas de estática descendo e um tranco no conteúdo */
.pod-secao.interferindo .pod-interferencia{
display:block;position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden;
background:repeating-linear-gradient(0deg, rgba(246,244,255,.07) 0 2px, transparent 2px 4px);
animation:pl-chiado .1337s steps(2) infinite;
}
.pod-interferencia i{
position:absolute;left:-4%;right:-4%;top:0;height:14%;
background:repeating-linear-gradient(90deg, rgba(228,255,58,.55) 0 2px, transparent 2px 5px, rgba(255,45,138,.5) 5px 7px, transparent 7px 13px, rgba(246,244,255,.35) 13px 14px, transparent 14px 19px);
animation:pl-faixa .44s steps(6) both;
}
.pod-interferencia i:nth-child(2){animation-delay:.11s;height:7%;animation-direction:reverse;}
.pod-interferencia i:nth-child(3){animation-delay:.22s;height:22%;opacity:.75;}
.pod-secao.interferindo > :not(.pod-interferencia){animation:pl-tranco .668s steps(6) both;}
@keyframes pl-faixa{from{transform:translateY(-100%);}to{transform:translateY(700%);}}
@keyframes pl-chiado{to{background-position:0 4px;}}
@keyframes pl-tranco{0%,100%{transform:none;}20%{transform:translateX(-7px) skewX(5deg);}40%{transform:translateX(6px);}60%{transform:translateX(-4px) skewX(-3deg);}80%{transform:translateX(2px);}}
@keyframes pl-bate{0%{transform:scale(1.08);}30%,100%{transform:scale(1);}}
@keyframes pl-estouro{from{opacity:0;transform:scale(.6) rotate(-8deg);}to{opacity:1;transform:scale(1) rotate(-2deg);}}
@media (prefers-reduced-motion: reduce){
.pod-secao.pulsar .pod-play, .pod-secao.pulsar .pod-transmissao, .pod-secao.pulsar::after{animation:none;}
.pod-secao.interferindo .pod-interferencia{display:none;}
.pod-secao.interferindo > :not(.pod-interferencia){animation:none;}
}