/* =====================================================================
   MOTION — camada de motion graphics do portfólio.
   Só transform/opacity nas animações contínuas; tudo desliga com
   prefers-reduced-motion. Cores sempre via tokens de styles.css.
   ===================================================================== */
@property --fill { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

/* 13 · Barra de progresso de leitura */
.read-progress{position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--accent-line); transform:scaleX(var(--rp,0)); transform-origin:left; pointer-events:none}

/* 1 · Abertura: aparelhos se separam em profundidade ao rolar */
.hero__stage{--hp:0}
.dev--monitor{scale:calc(1 - var(--hp) * .1); translate:0 calc(var(--hp) * 70px)}
.dev--tablet{translate:calc(var(--hp) * -70px) calc(var(--hp) * 110px); rotate:calc(var(--hp) * -5deg)}
.dev--phone{translate:calc(var(--hp) * 60px) calc(var(--hp) * 150px); rotate:calc(var(--hp) * 5deg)}
.hero__now{opacity:calc(1 - var(--hp) * 2)}

/* 8 · Títulos revelados por máscara (palavra a palavra) */
.mw{display:inline-block; overflow:clip; vertical-align:top; padding-bottom:.36em; margin-bottom:-.36em}
.mwi{display:inline-block; transform:translateY(140%); transition:transform 700ms var(--ease-out); transition-delay:calc(var(--i) * 50ms)}
.is-shown .mwi{transform:none}

/* 9 · Traço desenhado sob as palavras em itálico */
.has-stroke{position:relative; display:inline-block}
.stroke{position:absolute; left:-2%; right:-2%; bottom:-.1em; width:104%; height:.32em; overflow:visible; pointer-events:none}
.stroke path{fill:none; stroke:var(--accent-line); stroke-width:3; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 900ms var(--ease-out) 450ms}
.light .stroke path{stroke:var(--ink)}
.is-shown .stroke path, .hero.is-ready .stroke path{stroke-dashoffset:0}

/* 10 · Faixa rolante que reage à velocidade */
.marquee__track{will-change:transform}
.marquee{--skew:0deg}
.marquee__track span{display:inline-flex; transform:skewX(var(--skew))}

/* 3 · Processo: mini animações por etapa */
.mini{position:relative; height:84px; margin-bottom:var(--s4); border-radius:12px; background:var(--light); border:1px solid var(--light-line); overflow:hidden}
.step .step__ic{display:none}
.mini *{box-sizing:border-box}
/* conversa */
.mini--chat{display:flex; flex-direction:column; justify-content:center; gap:6px; padding:0 12px}
.bub{height:16px; border-radius:9px; opacity:0; transform:translateY(8px) scale(.9); transition:opacity 300ms var(--ease-out), transform 300ms var(--ease-out)}
.bub--in{width:58%; background:var(--light-line)}
.bub--out{width:46%; align-self:flex-end; background:var(--accent)}
.bub--typing{width:44px; display:flex; align-items:center; justify-content:center; gap:4px; background:var(--light-line)}
.bub--typing i{width:5px; height:5px; border-radius:50%; background:var(--ink-muted)}
.is-lit .bub{opacity:1; transform:none}
.is-lit .bub:nth-child(2){transition-delay:350ms}
.is-lit .bub:nth-child(3){transition-delay:700ms}
/* estrutura (wireframe) e design (preenchido) */
.mini--wire, .mini--design{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); grid-template-rows:10px 1fr 14px; gap:6px; padding:10px}
.blk{border-radius:4px; border:1.5px dashed var(--ink-muted); opacity:0; transform:translateY(10px); transition:opacity 320ms var(--ease-out), transform 320ms var(--ease-out), background-color 400ms var(--ease-out), border-color 400ms var(--ease-out)}
.blk--bar{grid-column:1 / -1}
.blk--hero{grid-column:1 / 3}
.is-lit .blk{opacity:1; transform:none}
.is-lit .blk:nth-child(2){transition-delay:120ms} .is-lit .blk:nth-child(3){transition-delay:240ms}
.is-lit .blk:nth-child(4){transition-delay:360ms} .is-lit .blk:nth-child(5){transition-delay:480ms} .is-lit .blk:nth-child(6){transition-delay:600ms}
.mini--design .blk{border-style:solid; border-color:transparent}
.mini--design .blk--bar{background:var(--ink)}
.mini--design .blk--hero{background:linear-gradient(135deg, var(--ink) 0 55%, var(--accent) 55%)}
.mini--design .blk--side{background:var(--accent-soft); border-color:var(--accent-line)}
.mini--design .blk--col{background:var(--light-line)}
/* publicação */
.mini--ship{display:flex; flex-direction:column; justify-content:center; gap:10px; padding:0 14px}
.ship__track{height:8px; border-radius:8px; background:var(--light-line); overflow:hidden}
.ship__bar{display:block; height:100%; background:var(--ink); transform:scaleX(0); transform-origin:left; transition:transform 1100ms var(--ease-out) 200ms}
.ship__badge{display:inline-flex; align-self:flex-start; align-items:center; gap:6px; padding:3px 10px; border-radius:99px; background:var(--accent); color:var(--accent-ink); font-size:.75rem; font-weight:600; opacity:0; transform:scale(.8); transition:opacity 260ms var(--ease-out) 1250ms, transform 260ms var(--ease-out) 1250ms}
.ship__badge .od-icon{--od-icon-size:13px}
.is-lit .ship__bar{transform:scaleX(1)}
.is-lit .ship__badge{opacity:1; transform:none}

/* 11 · Sistemas: mini interfaces animadas */
.sysviz{height:64px; display:flex; align-items:flex-end; gap:6px; margin-bottom:var(--s2); padding:10px; border-radius:12px; background:var(--bg); border:1px solid var(--line); overflow:hidden}
.sysviz--kanban{align-items:stretch}
.kcol{flex:1; display:flex; flex-direction:column; gap:4px; padding:4px; border-radius:6px; background:var(--surface-2)}
.kcard{height:9px; border-radius:3px; background:var(--line-2)}
.kcard--move{background:var(--accent)}
.sysviz--bars .bar{flex:1; height:100%; border-radius:3px 3px 0 0; background:var(--line-2); transform-origin:bottom; transform:scaleY(var(--h))}
.sysviz--bars .bar:nth-child(4){background:var(--accent)}
.sysviz--wave{align-items:center}
.sysviz--wave .wv{flex:1; height:70%; border-radius:4px; background:var(--accent-line); transform-origin:center; transform:scaleY(.25)}
.sysviz--msg{flex-direction:column; align-items:stretch; justify-content:flex-end; gap:4px}
.msg{height:10px; border-radius:6px; background:var(--line-2); width:55%}
.msg:nth-child(even){align-self:flex-end; background:var(--accent); width:40%}

/* 12 · Anel girando em volta da foto */
.avatar-ring{position:relative; display:inline-grid; place-items:center; padding:6px; border-radius:50%; isolation:isolate}
.avatar-ring::before{content:""; position:absolute; inset:0; z-index:-1; border-radius:50%; background:conic-gradient(from 0deg, var(--accent), transparent 30%, var(--ink) 55%, transparent 75%, var(--accent))}
.avatar-ring img{border-color:var(--light-2)!important}

/* 4 · Celular recebendo o pedido de orçamento */
.notif-phone{position:relative; width:min(300px, 100%); aspect-ratio:9/12; margin-top:var(--s7); padding:8px 8px 0; border-radius:36px 36px 0 0; background:linear-gradient(145deg,#4a4d54,#1b1c20 40%,#2c2e33); box-shadow:0 0 0 1px #5a5e66, 0 30px 60px -24px rgba(0,0,0,.6); -webkit-mask:linear-gradient(#000 70%, transparent); mask:linear-gradient(#000 70%, transparent)}
.np__screen{position:relative; height:100%; border-radius:28px 28px 0 0; overflow:hidden; background:radial-gradient(120% 80% at 30% 0%, #2b3a12, #0b0c0e 60%); color:#F2F4F7; padding:40px 12px 0}
.np__island{position:absolute; top:10px; left:50%; width:84px; height:22px; transform:translateX(-50%); border-radius:20px; background:#000}
.np__time{font-size:2.75rem; font-weight:500; text-align:center; letter-spacing:-.03em; line-height:1}
.np__date{font-size:.75rem; text-align:center; color:#C9CDD4; margin:6px 0 18px}
.np__card{display:grid; grid-template-columns:32px minmax(0,1fr); gap:10px; padding:10px 12px; border-radius:16px; background:rgba(40,42,48,.88); backdrop-filter:blur(8px); transform:translateY(-130%) scale(.96); opacity:0}
.np__app{display:grid; place-items:center; width:32px; height:32px; border-radius:9px; background:#25D366; color:#062b14}
.np__app .od-icon{--od-icon-size:20px}
.np__top{display:flex; justify-content:space-between; gap:8px; font-size:.75rem; color:#C9CDD4}
.np__title{font-size:.875rem; font-weight:600; color:#fff; line-height:1.3}
.np__msg{font-size:.8125rem; color:#DADDE2; line-height:1.35}
.notif-phone.is-ringing .np__card{animation:notifIn 4800ms var(--ease-out) both}
@keyframes notifIn{
  0%{transform:translateY(-130%) scale(.96); opacity:0}
  10%{transform:translateY(6%) scale(1); opacity:1}
  14%{transform:none}
  86%{transform:none; opacity:1}
  100%{transform:translateY(-130%) scale(.96); opacity:0}
}

/* 6 · Cursor personalizado */
.cursor{position:fixed; left:0; top:0; z-index:95; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; background:var(--text); pointer-events:none; opacity:0}
.cursor.is-on{opacity:.9}

/* 7 · Botões magnéticos */
.magnetic{transition:translate 300ms var(--ease-out), background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out)}

/* 14 · Perguntas frequentes abrindo com altura suave (progressivo) */
:root{interpolate-size:allow-keywords}
.faq details::details-content{block-size:0; overflow:clip; transition:block-size 320ms var(--ease-out), content-visibility 320ms allow-discrete}
.faq details[open]::details-content{block-size:auto}
.faq details p{opacity:0; transform:translateY(-6px); transition:opacity 260ms var(--ease-out), transform 260ms var(--ease-out)}
.faq details[open] p{opacity:1; transform:none; transition-delay:80ms}

/* 15 · Formulário: check desenhado */
.btn .sent-check path{stroke-dasharray:24; stroke-dashoffset:24; animation:draw 500ms var(--ease-out) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.btn.is-sent{background:var(--text); color:var(--bg)}

/* 16 · Troca de tema em círculo (View Transitions) */
::view-transition-old(root), ::view-transition-new(root){animation:none; mix-blend-mode:normal}
::view-transition-new(root){z-index:2}

/* 17 · "LEMES" se preenchendo */
.foot__giant{background:linear-gradient(to top, color-mix(in srgb, var(--text) 14%, transparent) var(--fill), transparent var(--fill)); -webkit-background-clip:text; background-clip:text; transition:--fill 1600ms var(--ease-out)}
.foot__giant.is-shown{--fill:100%}

/* Animações contínuas só quando o usuário aceita movimento e o bloco está visível */
@media (prefers-reduced-motion: no-preference){
  .in-view .bub--typing i{animation:typing 1s ease-in-out infinite}
  .in-view .bub--typing i:nth-child(2){animation-delay:.15s}
  .in-view .bub--typing i:nth-child(3){animation-delay:.3s}
  .in-view .kcard--move{animation:kanban 3.6s var(--ease-out) infinite}
  .in-view .sysviz--bars .bar{animation:bars 2.8s ease-in-out infinite alternate; animation-delay:calc(var(--k) * -.4s)}
  .in-view .sysviz--wave .wv{animation:wave 1.1s ease-in-out infinite; animation-delay:calc(var(--k) * -.12s)}
  .in-view .msg{animation:msgIn 4s var(--ease-out) infinite; animation-delay:calc(var(--k) * .5s)}
  .in-view.avatar-ring::before{animation:spin 8s linear infinite}
}
@keyframes typing{0%,100%{transform:translateY(0); opacity:.5}50%{transform:translateY(-3px); opacity:1}}
@keyframes kanban{0%,20%{transform:translateX(0)}40%,60%{transform:translateX(calc(100% + 14px))}80%,100%{transform:translateX(calc(200% + 28px))}}
@keyframes bars{from{transform:scaleY(var(--h))}to{transform:scaleY(calc(var(--h) * .45 + .3))}}
@keyframes wave{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
@keyframes msgIn{0%{opacity:0; transform:translateY(8px)}12%,80%{opacity:1; transform:none}100%{opacity:0}}

@media (max-width:640px){
  .hero__stage .dev{translate:none; rotate:none; scale:none}
  .notif-phone{margin-inline:auto}
}
@media (max-width:1024px){
  .dev--monitor,.dev--tablet,.dev--phone{translate:none; rotate:none; scale:none}
}
@media (prefers-reduced-motion: reduce){
  .dev--monitor,.dev--tablet,.dev--phone{translate:none!important; rotate:none!important; scale:none!important}
  .mwi{transform:none!important}
  .stroke path{stroke-dashoffset:0!important}
  .bub,.blk,.ship__bar,.ship__badge{opacity:1!important; transform:none!important}
  .np__card{opacity:1; transform:none}
  .foot__giant{--fill:100%}
  .cursor{display:none}
}

/* Abertura: troca constante de site nos aparelhos (cortina + reflexo) */
.page--in{position:absolute; top:0; left:0; right:0; z-index:2; box-shadow:0 -24px 40px -12px rgba(0,0,0,.55)}
.page--old{filter:brightness(.6); transition:filter 600ms var(--ease-out)}
.dev__screen::after{content:""; position:absolute; inset:-20% -60%; z-index:3; pointer-events:none; background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,.22) 50%, transparent 60%); transform:translateX(-70%); opacity:0}
.dev__screen.is-flash::after{animation:glare 900ms var(--ease-out)}
@keyframes glare{0%{opacity:0; transform:translateX(-70%)}20%{opacity:1}100%{opacity:0; transform:translateX(70%)}}
[data-hero-name].is-changing{display:inline-block; animation:nameIn 420ms var(--ease-out)}
@keyframes nameIn{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){ .dev__screen::after{display:none} .page--old{filter:none} }