/*!
 * Animações RPS — estilos das animações. Par do motion.js.
 * Personalize por site sobrescrevendo as variáveis abaixo no :root do projeto.
 */
:root {
  --mk-accent: #a8e63a;             /* cor de destaque (barra, preloader, spotlight) */
  --mk-bg: #070807;                 /* fundo do preloader */
  --mk-fg: #ffffff;                 /* texto do preloader */
  --mk-ease: cubic-bezier(.2, .7, .2, 1);
  --mk-ease-out: cubic-bezier(.16, 1, .3, 1);
  --mk-dur: .9s;
  --mk-spot: rgba(168, 230, 58, .13); /* cor do spotlight nos cards */
}

/* ---------- PRELOADER ---------- */
.mk-preloader { display: none; }
.mk-js .mk-preloader {
  position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(16px, 3vw, 32px); background: var(--mk-bg); color: var(--mk-fg);
  clip-path: inset(0 0 0 0); transition: clip-path 1s var(--mk-ease-out);
}
.mk-preloader.is-done { clip-path: inset(0 0 100% 0); pointer-events: none; }
.mk-preloader__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; }
.mk-preloader__row > span:not(.mk-preloader__count) { opacity: .55; }
.mk-preloader__logo { align-self: center; transition: transform 1s var(--mk-ease-out), opacity .6s; }
.mk-preloader.is-done .mk-preloader__logo { transform: translateY(-40px); opacity: 0; }
.mk-preloader__count { font-size: clamp(3rem, 9vw, 6rem); font-weight: 700; line-height: .8; letter-spacing: -.04em; font-variant-numeric: tabular-nums; opacity: 1; }
.mk-preloader__count::after { content: "%"; font-size: .3em; color: var(--mk-accent); margin-left: .1em; }
.mk-preloader__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--mk-accent); transform: scaleX(0); transform-origin: left; }
.mk-loading body { overflow: hidden; }

/* ---------- REVEAL ---------- */
.mk-js .reveal, .mk-js [data-reveal] {
  opacity: 0; transform: translateY(28px);
  transition: opacity var(--mk-dur) var(--mk-ease), transform var(--mk-dur) var(--mk-ease), filter var(--mk-dur) var(--mk-ease), mask-position 1.2s var(--mk-ease-out), -webkit-mask-position 1.2s var(--mk-ease-out),
    border-color .3s, box-shadow .3s, background-color .3s;
  transition-delay: var(--mk-delay, 0ms);
}
.mk-js [data-reveal="blur"]  { filter: blur(12px); transform: translateY(16px); }
.mk-js [data-reveal="scale"] { transform: scale(.92); }
.mk-js [data-reveal="left"]  { transform: translateX(-40px); }
.mk-js [data-reveal="right"] { transform: translateX(40px); }
/* clip usa mask (clip-path esconderia o elemento do IntersectionObserver) */
.mk-js [data-reveal="clip"] {
  opacity: 1; transform: none;
  -webkit-mask-image: linear-gradient(to top, #000 50%, transparent 50%); mask-image: linear-gradient(to top, #000 50%, transparent 50%);
  -webkit-mask-size: 100% 200%; mask-size: 100% 200%; -webkit-mask-position: 0 0; mask-position: 0 0;
}
.mk-js [data-reveal="clip"] img { transition: transform 1.4s var(--mk-ease-out), filter .5s; }
.mk-js [data-reveal="clip"]:not(.is-in) img { transform: scale(1.25); }
.mk-js .reveal.is-in, .mk-js [data-reveal].is-in { opacity: 1; transform: none; filter: none; }
.mk-js [data-reveal="clip"].is-in { -webkit-mask-position: 0 100%; mask-position: 0 100%; }

/* ---------- SPLIT TEXT ---------- */
.mk-w { display: inline-block; vertical-align: top; clip-path: inset(-.15em -.3em -.2em -.15em); }
.mk-wi { display: inline-block; }
.mk-js .mk-split .mk-wi {
  transform: translateY(115%); opacity: 0;
  transition: transform 1s var(--mk-ease-out), opacity .6s;
  transition-delay: calc(var(--i) * 45ms + var(--mk-delay, 0ms));
}
.mk-js .mk-split.is-in .mk-wi { transform: none; opacity: 1; }

/* ---------- ROTATING WORD ---------- */
.mk-rot { display: inline-grid; vertical-align: bottom; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; transition: width .6s var(--mk-ease-out); }
.mk-rot__w { grid-area: 1 / 1; white-space: nowrap; width: max-content; transform: translateY(105%); opacity: 0; transition: transform .7s var(--mk-ease-out), opacity .5s; }
.mk-rot__w.is-active { transform: none; opacity: 1; }
.mk-rot__w.is-out { transform: translateY(-105%); opacity: 0; }

/* ---------- TEXT ROLL ---------- */
.mk-roll { position: relative; display: inline-block; overflow: hidden; vertical-align: top; line-height: 1.25; }
.mk-roll > span { display: inline-block; transition: transform .45s var(--mk-ease-out); }
.mk-roll::after { content: attr(data-text); position: absolute; left: 0; top: 100%; white-space: nowrap; transition: transform .45s var(--mk-ease-out); }
:is(a, button, [data-roll]):hover > .mk-roll > span,
:is(a, button, [data-roll]):hover > .mk-roll::after,
:is(a, button, [data-roll]):focus-visible > .mk-roll > span,
:is(a, button, [data-roll]):focus-visible > .mk-roll::after { transform: translateY(-100%); }

/* ---------- MAGNETIC ---------- */
[data-magnetic] { transition: translate .35s var(--mk-ease-out); }

/* ---------- SPOTLIGHT ---------- */
[data-spotlight] { position: relative; isolation: isolate; }
[data-spotlight]::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), var(--mk-spot), transparent 45%);
}
[data-spotlight]:hover::after { opacity: 1; }

/* ---------- ODOMETER ---------- */
.mk-odo { display: inline-flex; line-height: 1; }
.mk-odo__d { display: inline-block; height: 1em; overflow: hidden; }
.mk-odo__d > span { display: block; line-height: 1; transform: translateY(0); transition: transform 1.8s var(--mk-ease-out); transition-delay: calc(var(--i) * 120ms + 100ms); }
.mk-odo.is-in .mk-odo__d > span { transform: translateY(calc(var(--n) * -1em)); }

/* ---------- AUTO TABS ---------- */
[data-tabs] [role="tab"] { position: relative; overflow: hidden; }
[data-tabs] [role="tab"]::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--mk-accent); transform: scaleX(0); transform-origin: left;
}
[data-tabs] [role="tab"][aria-selected="true"]::after { transform: scaleX(1); }
[data-tabs] [role="tab"].is-playing::after { animation: mk-tab var(--mk-tab-ms, 5s) linear; }
@keyframes mk-tab { from { transform: scaleX(0); } to { transform: scaleX(1); } }
[data-tabs] [role="tabpanel"]:not([hidden]) { animation: mk-fade .6s var(--mk-ease-out); }
@keyframes mk-fade { from { opacity: 0; transform: translateY(10px); filter: blur(6px); } }

/* ---------- MARQUEE ---------- */
.mk-marquee { overflow: hidden; --mk-fade: 10%;
  mask-image: linear-gradient(90deg, transparent, #000 var(--mk-fade), #000 calc(100% - var(--mk-fade)), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--mk-fade), #000 calc(100% - var(--mk-fade)), transparent); }
.mk-marquee__track { display: flex; gap: var(--mk-gap, 24px); width: max-content; animation: mk-marquee-x var(--mk-marquee-s, 40s) linear infinite; }
.mk-marquee__track > * { flex: none; }
.mk-marquee--rev .mk-marquee__track { animation-direction: reverse; }
.mk-marquee:hover .mk-marquee__track { animation-play-state: paused; }
.mk-marquee--y { mask-image: linear-gradient(transparent, #000 var(--mk-fade), #000 calc(100% - var(--mk-fade)), transparent);
  -webkit-mask-image: linear-gradient(transparent, #000 var(--mk-fade), #000 calc(100% - var(--mk-fade)), transparent); }
.mk-marquee--y .mk-marquee__track { flex-direction: column; width: auto; animation-name: mk-marquee-y; }
@keyframes mk-marquee-x { to { transform: translateX(calc(-50% - var(--mk-gap, 24px) / 2)); } }
@keyframes mk-marquee-y { to { transform: translateY(calc(-50% - var(--mk-gap, 24px) / 2)); } }

/* ---------- SCROLL PROGRESS + PARALLAX ---------- */
.mk-scrollbar { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 100; background: var(--mk-accent); transform: scaleX(0); transform-origin: left; pointer-events: none; }
[data-parallax] { will-change: translate; }

/* Elemento que cresce ao rolar (efeito "showreel"): use data-progress="enter" */
.mk-grow { transform: scale(calc(.82 + var(--p, 1) * .18)); border-radius: calc(48px - var(--p, 1) * 26px); transform-origin: center top; }

/* ---------- GRAIN (textura de filme) ---------- */
.mk-grain {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: mk-grain 1s steps(6) infinite;
}
@keyframes mk-grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-6%, 4%); } 40% { transform: translate(5%, -7%); }
  60% { transform: translate(-3%, 8%); } 80% { transform: translate(7%, 2%); } 100% { transform: translate(0, 0); }
}

/* Pausa animações infinitas fora da tela (classe colocada pelo motion.js) */
.mk-off, .mk-off *, .mk-off ::before, .mk-off ::after { animation-play-state: paused !important; }

/* No celular o grain fica parado: animar uma camada de tela cheia gasta bateria */
@media (hover: none), (max-width: 860px) {
  .mk-grain { inset: 0; animation: none; opacity: .05; }
}

/* ---------- OUTLINE TEXT (letras só com contorno) ---------- */
.mk-outline { color: transparent; -webkit-text-stroke: 1.5px currentColor; }
.mk-outline-fill { color: transparent; -webkit-text-stroke: 1.5px var(--mk-accent); }

/* ---------- MOVIMENTO REDUZIDO ---------- */
@media (prefers-reduced-motion: reduce) {
  .mk-js .reveal, .mk-js [data-reveal], .mk-js .mk-split .mk-wi { opacity: 1; transform: none; filter: none; -webkit-mask: none; mask: none; transition: none; }
  .mk-js [data-reveal="clip"] img { transform: none; }
  .mk-grain, .mk-marquee__track { animation: none; }
  .mk-grow { transform: none; }
  .mk-odo__d > span { transition: none; }
}