/* gxT Tech Lab — camada de movimento.
   Só animação: não muda cores, tamanhos, textos nem layout do site.
   Tudo aqui vale apenas com <html class="mo-on">, que o motion.js liga
   (e não liga quando o aparelho pede "reduzir movimento"). */

@keyframes mo-up{from{opacity:0;transform:translate3d(0,22px,0);filter:blur(6px)}}
@keyframes mo-rise{from{opacity:0;transform:translate3d(0,46px,0) scale(.94);filter:blur(6px)}}
@keyframes mo-drop{from{opacity:0;transform:translate3d(0,-16px,0)}}

/* ---------- entrada ao rolar (substitui o fade simples de .rv) ---------- */
.mo-on .rv{opacity:0;transform:translate3d(0,30px,0) scale(.985);filter:blur(8px);will-change:opacity,transform,filter;transition:opacity .9s var(--ease),transform 1.15s var(--ease),filter .9s var(--ease)}
.mo-on .rv.in{opacity:1;transform:none;filter:none;will-change:auto}

/* blocos de texto: o container não pisca, quem anima são as palavras e os filhos */
.mo-on .hero-txt.rv,.mo-on .sec-head.rv,.mo-on .prod-head.rv,.mo-on .about.rv{opacity:1;transform:none;filter:none;transition:none;will-change:auto}
.mo-on .hero-txt.rv:not(.in)>:not(h1),
.mo-on .sec-head.rv:not(.in)>:not(h2),
.mo-on .prod-head.rv:not(.in)>:not(h1),
.mo-on .about.rv:not(.in) .about-txt>:not(h1):not(h2){opacity:0}

/* título: palavras sobem por dentro de uma máscara */
.mo-on .mw{display:inline-block;vertical-align:top;overflow:hidden;padding:.1em .05em .16em;margin:-.1em -.05em -.16em}
.mo-on .mwi{display:inline-block;transform:translate3d(0,118%,0) rotate(3deg);transform-origin:0 100%;transition:transform 1.1s var(--ease);transition-delay:calc(var(--w,0) * 65ms + var(--d,0ms))}
.mo-on .in .mwi{transform:none}
.mo-on .hero h1{--d:140ms}

/* hero */
.mo-on .hero-txt.rv.in>.eyebrow{animation:mo-up .9s var(--ease) .05s backwards}
.mo-on .hero-txt.rv.in>.sub{animation:mo-up 1s var(--ease) .6s backwards}
.mo-on .hero-txt.rv.in>.hero-cta{animation:mo-up 1s var(--ease) .74s backwards}
.mo-on .hero-art.rv{transition-duration:1.5s}
.mo-glow{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .6s var(--ease);background:radial-gradient(480px circle at var(--gx,70%) var(--gy,35%),rgba(255,255,255,.2),rgba(255,255,255,0) 65%)}
.hero.mo-hot .mo-glow{opacity:1}
.mo-on .hero-art>a{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease)}
.mo-on .hero-art>a:after{content:"";position:absolute;inset:0;border-radius:20px;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(340px circle at var(--ax,50%) var(--ay,40%),rgba(255,255,255,.26),rgba(255,255,255,0) 60%)}
.mo-on .hero-art.mo-hot>a:after{opacity:1}

/* títulos de seção e cabeçalhos de página */
.mo-on .sec-head.rv.in>.sub,.mo-on .prod-head.rv.in>.sub{animation:mo-up .9s var(--ease) .3s backwards}
.mo-on .prod-head.rv.in>:not(h1):not(.sub){animation:mo-up .9s var(--ease) .2s backwards}

/* categorias e produtos: entram em cascata por coluna */
.mo-on .cat.rv{position:relative}
.mo-on .card.rv,.mo-on .cat.rv{transition:transform .5s var(--ease),translate .5s var(--ease),rotate .35s var(--ease),box-shadow .4s,border-color .3s,background .3s;transition-delay:0s!important}
.mo-on .card.rv.in,.mo-on .cat.rv.in{animation:mo-rise 1s var(--ease) backwards;animation-delay:calc(var(--mo-i,0) * 65ms)}
.mo-on .card.rv::before,.mo-on .cat.rv::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;opacity:0;transition:opacity .4s;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(37,99,235,.1),rgba(37,99,235,0) 70%)}
.mo-on .thumb img{transition:transform 1.2s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .mo-on .grid{perspective:1400px}
  .mo-on .card.rv:hover{translate:0 -6px}
  .mo-on .cat.rv:hover{translate:0 -4px}
  .mo-on .card.rv:hover::before,.mo-on .cat.rv:hover::before{opacity:1}
  .mo-on .card:hover .thumb img{transform:scale(1.06)}
}

/* sobre mim: foto abre de cima para baixo, com parallax na rolagem */
.mo-on .about.rv .about-photo{clip-path:inset(0 0 100% 0 round 18px)}
.mo-on .about.rv.in .about-photo{clip-path:inset(0 0 0 0 round 18px);transition:clip-path 1.5s var(--ease)}
.mo-on .about-photo img{scale:1.14;transition:scale 1.9s var(--ease)}
.mo-on .about.rv:not(.in) .about-photo img{scale:1.32}
.mo-on .about.rv.in .about-txt>:not(h1):not(h2){animation:mo-up 1s var(--ease) backwards}
.mo-on .about.rv.in .about-txt>:nth-child(2){animation-delay:.35s}
.mo-on .about.rv.in .about-txt>:nth-child(3){animation-delay:.5s}
.mo-on .about.rv.in .about-txt>:nth-child(4){animation-delay:.65s}
.mo-on .about.rv.in .about-txt>:nth-child(5){animation-delay:.8s}

/* botões */
.mo-on .btn-primary:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.38) 50%,transparent 65%);transform:translateX(-130%)}
.mo-on .mo-mag{transition:translate .45s var(--ease),transform .25s var(--ease),box-shadow .3s,background .3s,color .3s,border-color .3s}
@media (hover:hover) and (pointer:fine){.mo-on .btn-primary:hover:before{transform:translateX(130%);transition:transform .9s var(--ease)}}

/* topo */
.mo-on body>.hdr{animation:mo-drop .9s var(--ease) backwards;transition:box-shadow .4s var(--ease)}
.mo-on .hdr.mo-scrolled{box-shadow:0 12px 32px -24px rgba(15,23,42,.4)}

/* saída de página: o conteúdo some suave antes de abrir o link */
.mo-leave body>:not(.hdr):not(script){opacity:0!important;transform:translate3d(0,-10px,0)!important;filter:blur(5px)!important;transition:opacity .28s ease,transform .28s ease,filter .28s ease!important}

@media (prefers-reduced-motion:reduce){.mo-on *,.mo-on *:before,.mo-on *:after{animation:none!important;transition:none!important}}