/* =========================================================================== motion.css — kit de animação/interação compartilhado (vanilla, sem deps) Núcleo idêntico em todos os projetos. Assinaturas temáticas no fim do arquivo, ativadas por + cor via --primary do venda.css. Regras de ouro: - Tudo escopado em html.motion-on (adicionado pelo motion.js). - Se o JS não rodar OU prefers-reduced-motion: nada disso aplica e o conteúdo aparece 100% visível (as classes mx-reveal só entram via JS). =========================================================================== */ /* Desliga totalmente em quem pediu menos movimento */ @media (prefers-reduced-motion: reduce){ html.motion-on [class*="mx-"]{animation:none !important;transition:none !important;opacity:1 !important;transform:none !important} } /* ---------- 1. Reveal ao rolar ---------- */ html.motion-on .mx-reveal{ opacity:0;transform:translateY(26px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); transition-delay:var(--mx-delay,0ms);will-change:opacity,transform } html.motion-on .mx-reveal.mx-left{transform:translateX(-34px)} html.motion-on .mx-reveal.mx-right{transform:translateX(34px)} html.motion-on .mx-reveal.mx-scale{transform:scale(.94)} html.motion-on .mx-reveal.mx-in{opacity:1;transform:none} /* ---------- 2. Aurora animada no hero ---------- */ html.motion-on .mx-aurora{position:relative;overflow:hidden;isolation:isolate} html.motion-on .mx-aurora::after{ content:"";position:absolute;inset:-35%;z-index:-1;pointer-events:none; background:radial-gradient(38% 38% at 28% 30%, var(--primary), transparent 70%), radial-gradient(34% 34% at 78% 72%, var(--primary), transparent 72%); opacity:.16;filter:blur(36px); animation:mxAurora 20s ease-in-out infinite alternate } @keyframes mxAurora{ 0%{transform:translate3d(-4%,-2%,0) scale(1)} 50%{transform:translate3d(3%,4%,0) scale(1.12)} 100%{transform:translate3d(5%,-3%,0) scale(1.05)} } /* ---------- 3. Header que encolhe ao rolar ---------- */ html.motion-on .site-header{transition:height .3s ease, background .3s ease, box-shadow .3s ease} html.motion-on .site-header.mx-scrolled{height:60px;box-shadow:0 8px 30px rgba(0,0,0,.35)} /* ---------- 4. Micro-interações de hover ---------- */ html.motion-on .feature-grid article, html.motion-on .plans article, html.motion-on .trust-band > div, html.motion-on .price-box{ transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease } html.motion-on .feature-grid article:hover, html.motion-on .plans article:hover{ transform:translateY(-6px);border-color:var(--primary); box-shadow:0 20px 44px rgba(0,0,0,.38) } html.motion-on .feature-grid article:hover .icon, html.motion-on .feature-grid article:hover i{transform:scale(1.12)} html.motion-on .feature-grid .icon, html.motion-on .feature-grid i{transition:transform .35s ease} /* Botão primário com varredura de brilho */ html.motion-on .btn.primary, html.motion-on .btn.btn-primary{position:relative;overflow:hidden;transition:transform .2s ease, box-shadow .3s ease} html.motion-on .btn.primary:hover, html.motion-on .btn.btn-primary:hover{transform:translateY(-2px)} html.motion-on .btn.primary::after, html.motion-on .btn.btn-primary::after{ content:"";position:absolute;top:0;left:-160%;width:55%;height:100%; background:linear-gradient(110deg,transparent,rgba(255,255,255,.4),transparent); transform:skewX(-20deg);transition:left .65s ease;pointer-events:none } html.motion-on .btn.primary:hover::after, html.motion-on .btn.btn-primary:hover::after{left:170%} /* ---------- 5. Mockup do hero com profundidade ---------- */ html.motion-on .app-preview, html.motion-on .phone{transition:transform .4s cubic-bezier(.16,1,.3,1)} html.motion-on .mx-tilt{transform:perspective(1100px) rotateY(var(--mx-ry,0deg)) rotateX(var(--mx-rx,0deg))} /* Pílula que pisca suave (status "vivo") */ html.motion-on .mx-live{animation:mxPulse 2.4s ease-in-out infinite} @keyframes mxPulse{0%,100%{opacity:1}50%{opacity:.55}} /* Brilho de borda no card de destaque */ html.motion-on .mx-glow{animation:mxGlow 3s ease-in-out infinite} @keyframes mxGlow{ 0%,100%{box-shadow:0 0 0 0 rgba(0,0,0,0)} 50%{box-shadow:0 0 0 1px var(--primary), 0 0 26px -6px var(--primary)} } /* Fade rápido usado pelas trocas de estado das assinaturas */ html.motion-on .mx-swap{transition:opacity .35s ease, transform .35s ease} html.motion-on .mx-swap.mx-out{opacity:0;transform:translateY(6px)} /* =========================================================================== ASSINATURAS TEMÁTICAS (somente partes em CSS puro; o resto vem no motion.js) =========================================================================== */ /* VEXA — destaque pulsante no horário vazio */ html.motion-on body[data-mx-signature="vexa"] .day.empty{animation:mxGlow 3s ease-in-out infinite} /* LEVA — moto percorrendo a rota em loop */ html.motion-on body[data-mx-signature="leva"] .route{position:relative} html.motion-on body[data-mx-signature="leva"] .route .bike{ animation:mxRide 3.4s cubic-bezier(.45,0,.55,1) infinite } @keyframes mxRide{ 0%{transform:translateX(0)} 45%{transform:translateX(0)} 50%{transform:translateX(2px) scale(1.05)} 100%{transform:translateX(0)} } html.motion-on body[data-mx-signature="leva"] .route span{position:relative;overflow:hidden} html.motion-on body[data-mx-signature="leva"] .route span::after{ content:"";position:absolute;inset:0;border-radius:inherit; background:linear-gradient(90deg,transparent, var(--primary), transparent); transform:translateX(-100%);animation:mxFlow 3.4s linear infinite } @keyframes mxFlow{0%{transform:translateX(-100%)}60%{transform:translateX(100%)}100%{transform:translateX(100%)}} /* MECANIZOU — pílulas de status com brilho ao trocar (transição suave) */ html.motion-on body[data-mx-signature="mecanizou"] .order .status{transition:background .4s ease, color .4s ease} /* ORGANEX — cada badge numerado "PASSO N" dá um pop ao entrar (stepper) */ html.motion-on body[data-mx-signature="organex"] .organex-step-num-filled{ transition:transform .55s cubic-bezier(.2,1.5,.4,1), box-shadow .55s ease } html.motion-on body[data-mx-signature="organex"] .organex-step-num-filled.mx-reveal{transform:scale(.4)} html.motion-on body[data-mx-signature="organex"] .organex-step-num-filled.mx-in{ transform:scale(1); box-shadow:0 0 0 6px rgba(249,115,22,.12), 0 0 24px -2px var(--primary) } /* NEXIA — linha de scanner varrendo o hero (sem JS) */ html.motion-on body[data-mx-signature="nexia"] .hero{position:relative;overflow:hidden} html.motion-on body[data-mx-signature="nexia"] .hero::after{ content:"";position:absolute;left:0;right:0;height:120px;z-index:1;pointer-events:none; background:linear-gradient(180deg,transparent, color-mix(in srgb, var(--primary) 30%, transparent), transparent); animation:mxScan 5s ease-in-out infinite } @keyframes mxScan{0%{top:-120px}100%{top:100%}}