/* Grupo Vorkeza — animações compartilhadas (par de grupo/movimento.js). */
:root { --m-ease: cubic-bezier(.2, .75, .2, 1); --m-mola: cubic-bezier(.34, 1.56, .64, 1); }

/* Títulos: palavra por palavra, saindo do desfoque */
.m-texto .m-w { display: inline-block; opacity: 0; filter: blur(12px); transform: translateY(.38em) scale(.98); transition: opacity .7s var(--m-ease), filter .8s var(--m-ease), transform .8s var(--m-ease); transition-delay: calc(var(--i, 0) * 55ms + 60ms); will-change: transform, filter; }
.m-texto.m-in .m-w { opacity: 1; filter: blur(0); transform: none; }

/* Frase que acende com a rolagem */
.m-rolagem .m-r { opacity: .16; filter: blur(3px); transition: opacity .45s var(--m-ease), filter .45s var(--m-ease); }
.m-rolagem .m-r.on { opacity: 1; filter: blur(0); }

/* Luz que segue o mouse + borda acesa */
.m-brilho { position: relative; isolation: isolate; }
.m-brilho::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; padding: 1.5px; opacity: 0; transition: opacity .35s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), var(--m-luz, rgba(255, 255, 255, .9)), transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.m-brilho::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0; transition: opacity .35s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), var(--m-luz-fundo, rgba(255, 255, 255, .07)), transparent 60%); }
@media (hover: hover) { .m-brilho:hover::after, .m-brilho:hover::before { opacity: 1; } }

/* Botão-ímã: usa "translate" para não brigar com o transform do próprio botão */
.m-ima { transition: translate .35s var(--m-mola), transform .15s, background .2s, box-shadow .2s, border-color .2s; }

/* Cartão que inclina, com reflexo */
.m-tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--m-ease); transform-style: preserve-3d; }
.m-tilt.m-tilt-on { transition: transform .12s linear; }
.m-tilt > .m-reflexo { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; opacity: 0; transition: opacity .3s; mix-blend-mode: soft-light;
  background: radial-gradient(500px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .55), transparent 45%); }
.m-tilt.m-tilt-on > .m-reflexo { opacity: 1; }

/* Profundidade com o mouse */
[data-m-parallax] [data-prof] { transition: translate .6s var(--m-ease); }

/* Seta com troca: a atual sai pela diagonal com desfoque, a nova entra */
.m-seta { display: inline-grid; width: 1.05em; height: 1.05em; overflow: hidden; flex: none; vertical-align: -.15em; }
.m-seta > span { grid-area: 1 / 1; display: grid; place-items: center; transition: transform .45s var(--m-ease), opacity .3s, filter .35s; }
.m-seta svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.m-seta .m-b { transform: translate(-90%, 90%) scale(.5); opacity: 0; filter: blur(4px); }
a:hover .m-seta .m-a, button:hover .m-seta .m-a, a:focus-visible .m-seta .m-a { transform: translate(90%, -90%) scale(.5); opacity: 0; filter: blur(4px); }
a:hover .m-seta .m-b, button:hover .m-seta .m-b, a:focus-visible .m-seta .m-b { transform: none; opacity: 1; filter: blur(0); }

/* Troca genérica de ícone/texto: escala + desfoque */
.m-troca { display: inline-grid; }
.m-troca > .m-a, .m-troca > .m-b { grid-area: 1 / 1; transition: opacity .35s var(--m-ease), filter .35s var(--m-ease), transform .45s var(--m-mola); }
.m-troca > .m-b { opacity: 0; filter: blur(6px); transform: scale(.6); }
.m-troca.is-on > .m-a { opacity: 0; filter: blur(6px); transform: scale(.6); }
.m-troca.is-on > .m-b { opacity: 1; filter: blur(0); transform: none; }

/* "digitando..." */
.m-pontos { display: inline-flex; gap: 4px; align-items: center; height: 1.35em; }
.m-pontos i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .35; animation: m-pulo 1s infinite ease-in-out; }
.m-pontos i:nth-child(2) { animation-delay: .15s; } .m-pontos i:nth-child(3) { animation-delay: .3s; }
@keyframes m-pulo { 0%, 60%, 100% { transform: none; opacity: .35; } 30% { transform: translateY(-4px); opacity: 1; } }

/* Faixa que corre (letreiro) */
.m-letreiro { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.m-letreiro-trilho { display: flex; width: max-content; animation: m-correr var(--m-vel, 38s) linear infinite; }
.m-letreiro:hover .m-letreiro-trilho { animation-play-state: paused; }
.m-letreiro ul { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; }
@keyframes m-correr { to { transform: translateX(-50%); } }

/* Faíscas do clique */
.m-faiscas { position: fixed; width: 100px; height: 100px; margin: -50px 0 0 -50px; pointer-events: none; z-index: 9999; overflow: visible; }
.m-faiscas line { stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 12; stroke-dashoffset: 0; animation: m-faisca .5s var(--m-ease) forwards; }
@keyframes m-faisca { from { stroke-dashoffset: 0; opacity: 1; transform: scale(.6); } to { stroke-dashoffset: -12; opacity: 0; transform: scale(1.25); } }

/* Brilho que passa pelo texto (para selos e etiquetas) */
.m-reluz { background: linear-gradient(110deg, currentColor 40%, var(--m-reluz, #fff) 50%, currentColor 60%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: m-reluz 4.5s ease-in-out infinite; }
@keyframes m-reluz { 0% { background-position: 100% 0; } 55%, 100% { background-position: -50% 0; } }

@media (prefers-reduced-motion: reduce) {
  .m-texto .m-w, .m-rolagem .m-r { opacity: 1 !important; filter: none !important; transform: none !important; }
  .m-tilt { transform: none !important; }
  .m-letreiro-trilho, .m-reluz, .m-pontos i { animation: none !important; }
  .m-reluz { -webkit-text-fill-color: currentColor; background: none; }
}