/* Talko · sistema de movimento v1 (7/out/2026)
   Regras: só transform e opacity; efeitos de ponteiro só com mouse (pointer:fine);
   prefers-reduced-motion desliga tudo. Documentado em docs/02-design-system.md. */

:root{
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-fast:200ms;--dur-base:600ms;--dur-slow:900ms;
  --stagger:70ms;
}

/* 1. Barra de progresso de leitura */
.progress{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--color-accent,#D7FF31);transform-origin:0 50%;transform:scaleX(0);z-index:60;pointer-events:none}

/* 2. Entrada ao rolar: sobe, ganha nitidez */
[data-reveal]{opacity:0;transform:translateY(28px);filter:blur(6px);transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),filter var(--dur-base) var(--ease-out);transition-delay:calc(var(--i,0) * var(--stagger))}
[data-reveal].is-in{opacity:1;transform:none;filter:none}
html:not(.motion-ready) [data-reveal]{opacity:1;transform:none;filter:none}

/* 3. Título palavra por palavra, saindo de uma máscara */
.split-word{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .2em .12em;margin:0 -.2em -.12em}
/* a folga lateral deixa a serifa itálica passar da caixa da palavra sem cortar as pontas; a margem negativa devolve o espaçamento */
.split-word>span{display:inline-block;transform:translateY(105%);transition:transform var(--dur-slow) var(--ease-out);transition-delay:calc(var(--w,0) * 45ms)}
.is-in .split-word>span,.split-done .split-word>span{transform:none}

/* 4. Marca-texto que se desenha na palavra-âncora */
.mark{background-image:linear-gradient(transparent 64%,rgba(215,255,49,.75) 64%,rgba(215,255,49,.75) 92%,transparent 92%);background-repeat:no-repeat;background-size:0% 100%;transition:background-size 900ms var(--ease-out) 500ms;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.is-in .mark,.split-done .mark,.mark.is-in{background-size:100% 100%}

/* 5. Luz que segue o cursor */
@media (pointer:fine){
  .spot{position:relative;isolation:isolate}
  .spot::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity 300ms ease;z-index:0;
    background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(48,34,150,.08),transparent 45%)}
  .dark.spot::before,.spot--dark::before{background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),rgba(215,255,49,.10),transparent 45%)}
  .spot:hover::before{opacity:1}
  .spot>*{position:relative;z-index:1}
}

/* 6. Botão magnético e brilho que atravessa */
.btn--primary,.btn--accent{position:relative;overflow:hidden;isolation:isolate}
.btn--primary::after,.btn--accent::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg) translateX(0);opacity:0;pointer-events:none;z-index:-1}
@media (pointer:fine){
  .btn--primary:hover::after,.btn--accent:hover::after{opacity:1;animation:shine 900ms var(--ease-out)}
}
@keyframes shine{from{transform:skewX(-20deg) translateX(0)}to{transform:skewX(-20deg) translateX(420%)}}
[data-magnetic]{transition:transform 350ms var(--ease-out),box-shadow 200ms ease,background-color 200ms ease}

/* 7. Inclinação 3D e flutuação do mockup */
[data-tilt]{transform-style:preserve-3d;transition:transform 500ms var(--ease-out);will-change:transform}
.float{animation:float 7s var(--ease-in-out) infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* 8. Aurora lenta dentro do bloco escuro */
.aurora::before{content:"";position:absolute;inset:-30%;z-index:-2;pointer-events:none;opacity:.55;
  background:radial-gradient(35% 40% at 20% 30%,rgba(15,70,80,.9),transparent 70%),radial-gradient(30% 35% at 80% 70%,rgba(48,34,150,.45),transparent 70%),radial-gradient(25% 30% at 60% 20%,rgba(215,255,49,.10),transparent 70%);
  animation:aurora 22s var(--ease-in-out) infinite alternate}
@keyframes aurora{0%{transform:translate3d(-4%,-2%,0) rotate(0deg)}100%{transform:translate3d(4%,3%,0) rotate(8deg)}}

/* 9. Abas que avançam sozinhas, com progresso */
.tab{position:relative;overflow:hidden}
[data-autoplay] .tab[aria-selected="true"]::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--color-accent,#D7FF31);transform-origin:0 50%;transform:scaleX(0);animation:tabprog var(--autoplay,7s) linear forwards}
[data-autoplay].is-paused .tab[aria-selected="true"]::after{animation-play-state:paused}
[data-autoplay].is-stopped .tab[aria-selected="true"]::after{display:none}
@keyframes tabprog{to{transform:scaleX(1)}}

/* 10. Faixa de integrações: sem esmaecido nas laterais (pedido do Tibério, 7/out/2026); o recorte é a borda arredondada do bloco */

/* 11. Borda que gira no plano recomendado */
@property --angle{syntax:"<angle>";inherits:false;initial-value:0deg}
.glow-border{position:relative}
.glow-border::before{content:"";position:absolute;inset:-2px;border-radius:calc(var(--radius-card,20px) + 2px);padding:2px;z-index:-1;pointer-events:none;
  background:conic-gradient(from var(--angle),transparent 0 60%,rgba(215,255,49,.9) 75%,transparent 90%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:spin-angle 6s linear infinite}
@keyframes spin-angle{to{--angle:360deg}}

/* 12. Cards que reagem */
@media (pointer:fine){
  .lift{transition:transform 300ms var(--ease-out),box-shadow 300ms var(--ease-out)}
  .lift:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(15,26,51,.10)}
}

@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1!important;transform:none!important;filter:none!important}
  .split-word>span{transform:none!important}
  .mark{background-size:100% 100%!important}
  .float,.aurora::before,.glow-border::before{animation:none!important}
  [data-tilt]{transform:none!important}
  .progress{display:none}
  [data-autoplay] .tab[aria-selected="true"]::after{display:none}
}