@font-face{font-family:Montserrat;src:url('assets/Montserrat-Regular.ttf') format('truetype');font-display:swap}
:root{font-family:Montserrat,system-ui,sans-serif;color:#f5f4fa;background:#0b0f1a;font-synthesis:weight}*{box-sizing:border-box}body{margin:0}header{width:min(1040px,calc(100% - 48px));margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;border-bottom:1px solid #ffffff18;font-size:12px;color:#b5b4c8}header img{width:44px;height:auto}a{color:inherit;text-decoration:none}a:hover{color:#a3a3f9}main{width:min(1040px,calc(100% - 48px));margin:auto;padding:44px 0 28px;text-align:center}.eyebrow{font-size:10px;font-weight:bold;letter-spacing:.15em;color:#b9b7ff;margin:0 0 18px}h1{font-size:clamp(30px,4vw,48px);line-height:1.18;letter-spacing:-.035em;margin:0;font-weight:400}h1 em{color:#a3a3f9;font-style:normal}.lead{font-size:14px;color:#b5b4c8;line-height:1.8;margin:20px 0}.scene-wrap{width:100%;margin:auto}.scene{width:100%;height:auto;display:block;font-family:Montserrat,sans-serif}.scene-caption{font-size:14px;font-weight:600;margin:4px 0 0}.controls{display:flex;justify-content:center;gap:12px;margin:22px 0 16px}button{font:inherit;font-size:12px;color:#eeeaff;border:1px solid #625e7e;background:#1b1a30;padding:12px 18px;border-radius:6px;min-height:44px;cursor:pointer}button:hover{background:#2c2947}button:focus-visible,a:focus-visible{outline:3px solid #a3a3f9;outline-offset:4px}button:disabled{opacity:.45;cursor:default}.note{color:#9794ae;font-size:10px;line-height:1.8;max-width:630px;margin:0 auto}
@media(max-width:600px){header{width:calc(100% - 32px);font-size:10px;padding:18px 0;gap:16px}header img{width:36px}main{width:calc(100% - 24px);padding-top:34px}h1{font-size:30px}.eyebrow{font-size:8px;letter-spacing:.1em}.lead{font-size:12px;padding:0 12px}.scene-caption{font-size:12px;line-height:1.65;padding:0 18px}.controls{gap:10px}button{padding-inline:14px;font-size:11px}.note{padding:0 16px}}
.embed{background:#0b0f1a;overflow:hidden}.embed header,.embed .eyebrow,.embed h1,.embed .lead,.embed .controls,.embed .note{display:none}.embed main{width:100%;padding:0}.embed .scene-caption{display:none}

/* Montagem: acontece ao abrir e ao repetir (classe .prep). Sem ela, tudo fica no estado final. */
.prep .dashboard-panel{animation:show-up .8s .1s ease-out both}
.prep .production-table{animation:show-up .8s .3s ease-out both}
.prep .production-chart{animation:show-up .8s .5s ease-out both}
.prep .stock-bar,.prep .cost-tick{animation:fill-x .7s .9s ease-out both}
.prep .bars rect{animation:fill-y .6s 1.1s ease-out both}
.prep .human{animation:human-enters .9s .5s ease-out both}
.prep .scene-caption{animation:show-up .8s 1.6s ease-out both}
@keyframes show-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fill-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fill-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes human-enters{from{opacity:0;transform:translateX(35px)}to{opacity:1;transform:none}}
.stock-bar,.cost-tick,.gen-bar{transform-box:fill-box;transform-origin:left center}
.bars rect{transform-box:fill-box;transform-origin:50% 100%}

/* Navegação no painel: o menu ativo, o subtítulo e o cartão em destaque seguem data-view. */
.nav-item{fill:#b8b5cf;transition:fill .3s}
[data-view="visao"] .nav-visao,[data-view="orcamento"] .nav-orcamento,[data-view="custos"] .nav-custos,[data-view="faturamento"] .nav-faturamento,[data-view="relatorios"] .nav-relatorios{fill:#fff}
.nav-hl{transition:transform .45s cubic-bezier(.3,.8,.3,1)}
[data-view="orcamento"] .nav-hl{transform:translateY(45px)}
[data-view="custos"] .nav-hl{transform:translateY(86px)}
[data-view="faturamento"] .nav-hl{transform:translateY(127px)}
[data-view="relatorios"] .nav-hl{transform:translateY(168px)}
/* O subtítulo antigo sai antes de o novo entrar, para os dois não se sobreporem. */
.sub{opacity:0;transition:opacity .2s}
[data-view="visao"] .sub-visao,[data-view="orcamento"] .sub-orcamento,[data-view="custos"] .sub-custos,[data-view="faturamento"] .sub-faturamento,[data-view="relatorios"] .sub-relatorios{opacity:1;transition:opacity .3s .2s}
.k{transition:transform .4s ease}
.k .card{transition:stroke .3s}
[data-view="orcamento"] .k-orc,[data-view="custos"] .k-custo,[data-view="faturamento"] .k-fat{transform:translateY(-5px)}
[data-view="orcamento"] .k-orc .card,[data-view="custos"] .k-custo .card,[data-view="faturamento"] .k-fat .card{stroke:#5b5bf6;stroke-width:1.5}
[data-view="orcamento"] .stock-bar,[data-view="custos"] .cost-tick{animation:fill-x .8s .15s ease-out both}
[data-view="faturamento"] .bars rect{animation:fill-y .5s ease-out both}
[data-view="faturamento"] .bars rect:nth-child(2){animation-delay:.12s}
[data-view="faturamento"] .bars rect:nth-child(3){animation-delay:.24s}
[data-view="faturamento"] .bars rect:nth-child(4){animation-delay:.36s}
.fat-up{transform-box:fill-box;transform-origin:center}
[data-view="faturamento"] .fat-up{animation:pulse .45s .6s ease-in-out 2}
@keyframes pulse{50%{transform:scale(1.2)}}
.pill-wait,.pill-ok{transition:opacity .3s}
.pill-ok{opacity:0;transform-box:fill-box;transform-origin:center}
.ok-1 .row1 .pill-wait,.ok-2 .row2 .pill-wait{opacity:0}
.ok-1 .row1 .pill-ok,.ok-2 .row2 .pill-ok{opacity:1;animation:pop .4s ease-out}
@keyframes pop{0%{transform:scale(.7)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
.gen{opacity:0;transition:opacity .3s}
.gen-on .gen{opacity:1}
.gen-on .gen-bar{animation:fill-x 1.5s .1s ease-in-out both}
.floating-check{opacity:0;transform:translateY(10px) scale(.92);transform-box:fill-box;transform-origin:center;transition:opacity .3s,transform .5s cubic-bezier(.2,.9,.28,1.25)}
.check-on .floating-check{opacity:1;transform:none}

/* Cursor do painel: anda quando a mão desliza no notebook e marca cada clique. */
.dash-cursor{opacity:0;transition:opacity .4s,transform .85s cubic-bezier(.45,.05,.3,1)}
.cursor-on .dash-cursor{opacity:1}
.ripple{opacity:0;transform-box:fill-box;transform-origin:center}
[data-pose="click"] .ripple{animation:ripple .5s ease-out}
@keyframes ripple{from{opacity:.4;transform:scale(.3)}to{opacity:0;transform:scale(1.5)}}

/* Pessoa: digita olhando o notebook, ergue a cabeça para o painel e se recosta quando o relatório fica pronto. */
.breath{animation:breath 3.6s ease-in-out infinite}
@keyframes breath{50%{transform:translateY(-1.5px)}}
.lean{transform-origin:952px 405px;transition:transform .8s ease-in-out}
[data-pose="typing"] .lean{transform:rotate(-1.5deg)}
[data-pose="relax"] .lean{transform:rotate(7deg)}
.head,.nod{transform-origin:922px 272px}
.head{transition:transform .6s ease-in-out}
[data-pose="typing"] .head{transform:rotate(-7deg)}
[data-pose="moving"] .head,[data-pose="click"] .head,[data-pose="idle"] .head{transform:rotate(3deg)}
[data-pose="relax"] .head{transform:rotate(-2deg)}
[data-pose="typing"] .nod{animation:nod 1.6s ease-in-out infinite}
@keyframes nod{50%{transform:rotate(-2deg)}}
.eye{transform-box:fill-box;transform-origin:center;animation:blink 4.4s infinite}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.15)}}
.far-arm{transform-origin:924px 308px;transition:transform .7s ease-in-out}
.near-arm{transform-origin:936px 312px;transition:transform .7s ease-in-out}
[data-pose="relax"] .far-arm,[data-pose="relax"] .near-arm{transform:rotate(-30deg)}
[data-pose="typing"] .near-type{animation:type .32s ease-in-out infinite}
[data-pose="typing"] .far-type{animation:type .32s -.16s ease-in-out infinite}
@keyframes type{50%{transform:translateY(-3px)}}
[data-pose="moving"] .near-type{animation:glide .85s ease-in-out}
@keyframes glide{50%{transform:translateX(-6px)}}
[data-pose="click"] .near-type{animation:tap .3s ease-out}
@keyframes tap{50%{transform:translateY(2.5px)}}
.mouth,.smile-big{transition:opacity .3s}
.smile-big,[data-pose="relax"] .mouth{opacity:0}
[data-pose="relax"] .smile-big{opacity:1}
.relief-mark{opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}
[data-pose="relax"] .relief-mark{opacity:1;transform:none}
.glow{opacity:.35;animation:screen 2.6s ease-in-out infinite}
@keyframes screen{50%{opacity:.75}}

.offscreen-paused *,.document-paused *,.paused *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.scene-wrap *{animation:none!important;transition:none!important}}