/* =========================================================================
   Motion Kit — landing-pages-premium
   Tokens + reveals + botões + cards + loops + header + scroll set-pieces.
   Requer motion.js (adiciona .js no <html> e controla os estados).
   Sem JS, tudo aparece no estado final.
   ========================================================================= */

:root{
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-out-long: cubic-bezier(.19,1,.22,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --ease-back: cubic-bezier(.16,1.06,.26,1.15);
  --t-micro: .18s;
  --t-hover: .55s;
  --t-enter: .9s;
  --t-long: 1.3s;
  --stagger: .07s;

  /* cores usadas pelos componentes do kit — sobrescreva no projeto */
  --mk-ink: #111;
  --mk-bg: #fff;
  --mk-accent: #c8f25a;
  --mk-accent-ink: #111;
  --mk-wave-1: #e7ff9e;
  --mk-wave-2: #9be15d;
  --mk-wave-3: #111;
  --mk-wave-ink: #fff;
}

/* -------------------------------------------------------------------------
   1. REVEALS  —  data-reveal="up|fade|scale|blur|mask|zoom|left|right|wipe"
   ------------------------------------------------------------------------- */
.js [data-reveal]{
  transition-property: opacity, transform, filter, clip-path;
  transition-duration: var(--t-enter);
  transition-timing-function: var(--ease-out);
  transition-delay: calc(var(--d, 0s) + var(--i, 0) * var(--stagger));
}
.js [data-reveal]:not(.is-in){ opacity: 0; }
.js [data-reveal=""]:not(.is-in),
.js [data-reveal="up"]:not(.is-in){ transform: translateY(28px); }
.js [data-reveal="left"]:not(.is-in){ transform: translateX(-36px); }
.js [data-reveal="right"]:not(.is-in){ transform: translateX(36px); }
.js [data-reveal="scale"]:not(.is-in){ transform: scale(.88); }
.js [data-reveal="blur"]:not(.is-in){ filter: blur(12px); transform: translateY(10px); }
.js [data-reveal="mask"]{ opacity: 1 !important; transition-duration: var(--t-long); }
.js [data-reveal="mask"]:not(.is-in){ clip-path: inset(100% 0 0 0 round var(--mask-r, 24px)); }
.js [data-reveal="mask"].is-in{ clip-path: inset(0 0 0 0 round var(--mask-r, 24px)); }
/* zoom: a mídia interna começa ampliada e assenta */
.js [data-reveal="zoom"]{ opacity: 1 !important; overflow: hidden; }
.js [data-reveal="zoom"] > :is(img,video,picture){ transition: transform 1.6s var(--ease-out), opacity 1s var(--ease-out); }
.js [data-reveal="zoom"]:not(.is-in) > :is(img,video,picture){ transform: scale(1.18); opacity: 0; }
/* wipe: barra colorida varre a linha e revela o texto (estilo marcador) */
.js [data-reveal="wipe"]{ position: relative; display: inline-block; opacity: 1 !important; clip-path: inset(0 100% 0 0); transition: clip-path .6s var(--ease-out); }
.js [data-reveal="wipe"].is-in{ clip-path: inset(0 0 0 0); }
.js [data-reveal="wipe"]::after{ content:""; position:absolute; inset:0; background: var(--wipe, var(--mk-accent)); transform-origin: right; transition: transform .6s var(--ease-in-out) .45s; }
.js [data-reveal="wipe"].is-in::after{ transform: scaleX(0); }

/* -------------------------------------------------------------------------
   2. SPLIT TEXT  —  data-split="words" (sobem da máscara) | "chars" (blur)
   ------------------------------------------------------------------------- */
/* folga lateral: com letter-spacing negativo a última letra passa da caixa da palavra e o overflow a cortaria */
.js [data-split] .w{ display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 .12em .1em; margin: 0 -.12em -.1em; }
.js [data-split] .w > span{ display: inline-block; transition: transform 1s var(--ease-out), opacity 1s var(--ease-out); transition-delay: calc(var(--d,0s) + var(--wi) * .06s); }
.js [data-split="words"]:not(.is-in) .w > span{ transform: translateY(105%); }
.js [data-split] .cw{ display: inline-block; white-space: nowrap; }
.js [data-split] .c{ display: inline-block; transition: opacity .8s var(--ease-out), filter .8s var(--ease-out), transform .8s var(--ease-out); transition-delay: calc(var(--d,0s) + var(--ci) * .025s); }
.js [data-split="chars"]:not(.is-in) .c{ opacity: 0; filter: blur(10px); transform: translateY(.2em); }

/* texto que acende palavra a palavra com o scroll (data-scrub-words) */
[data-scrub-words] .sw{ color: var(--scrub-dim, color-mix(in oklab, currentColor 22%, transparent)); transition: color .25s linear; }
[data-scrub-words] .sw.on{ color: inherit; }

/* sublinhado desenhado à mão: <span class="draw-underline">palavra<svg>…<path pathLength="1"/></svg></span> */
.draw-underline{ position: relative; white-space: nowrap; }
.draw-underline svg{ position: absolute; left: -2%; width: 104%; bottom: -.18em; height: .4em; overflow: visible; pointer-events: none; }
.draw-underline path{ fill: none; stroke: var(--underline, var(--mk-accent)); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .draw-underline:not(.is-in) path{ stroke-dashoffset: 1; }
.js .draw-underline path{ transition: stroke-dashoffset 1.1s var(--ease-out) var(--d, .4s); }

/* -------------------------------------------------------------------------
   3. BOTÕES  —  .btn (texto rola) + .btn--wave (ondas de cor) + .btn__icon (seta)
   ------------------------------------------------------------------------- */
.btn{
  --btn-bg: var(--mk-ink); --btn-fg: var(--mk-bg);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 52px; padding: 0 1.5em; border-radius: 999px; border: 0;
  background: var(--btn-bg); color: var(--btn-fg);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: transform .4s var(--ease-out), color .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.btn:active{ transform: scale(.965); }
.btn:focus-visible{ outline: 2px solid currentColor; outline-offset: 3px; }
.btn > *{ position: relative; z-index: 2; }
/* rolagem do texto (motion.js duplica o rótulo em .btn__label) */
.btn__label{ display: inline-grid; overflow: hidden; line-height: 1.25; padding: 2px 0; }
.btn__label > span{ grid-area: 1/1; transition: transform .7s var(--ease-out), opacity .4s linear; }
.btn__label > span + span{ transform: translateY(80%); opacity: 0; }
.btn:is(:hover,:focus-visible) .btn__label > span:first-child{ transform: translateY(-80%); opacity: 0; transition: transform 1.1s var(--ease-out-long), opacity .3s linear; }
.btn:is(:hover,:focus-visible) .btn__label > span + span{ transform: none; opacity: 1; transition: transform 1.1s var(--ease-out-long), opacity 1.1s var(--ease-out-long); }
/* ícone de seta: ↗ gira para → e anda */
.btn__icon{ display: grid; place-items: center; width: 1.9em; height: 1.9em; margin-right: -.8em; border-radius: 50%; background: var(--btn-fg); color: var(--btn-bg); transition: transform .6s var(--ease-out), background .5s, color .5s; }
.btn__icon svg{ width: 52%; height: 52%; transform: rotate(-45deg); transition: transform .6s var(--ease-out); }
.btn:is(:hover,:focus-visible) .btn__icon svg{ transform: rotate(0deg); }
.btn:is(:hover,:focus-visible) .btn__icon{ transform: translateX(3px); }
/* ondas de cor: 3 círculos crescem do topo com atraso (motion.js injeta .btn__waves) */
.btn__waves{ position: absolute !important; inset: 0; z-index: 0 !important; overflow: hidden; border-radius: inherit; pointer-events: none; }
.btn__waves i{ position: absolute; left: 50%; top: -60%; width: max(220%, 12rem); aspect-ratio: 1; margin-left: calc(max(220%, 12rem) / -2); border-radius: 50%; transform: scale(0); transition: transform .7s var(--ease-out) .1s; }
.btn__waves i:nth-child(1){ background: var(--mk-wave-1); transition-delay: .2s; }
.btn__waves i:nth-child(2){ background: var(--mk-wave-2); transition-delay: .1s; }
.btn__waves i:nth-child(3){ background: var(--mk-wave-3); transition-delay: 0s; }
.btn--wave{ transition: transform .4s var(--ease-out), color .5s var(--ease-out), box-shadow .5s var(--ease-out), background-color .2s linear; }
/* ao fim da onda o fundo do botão assume a cor final: evita a franja serrilhada da cor original na borda arredondada */
.btn--wave:is(:hover,:focus-visible){ color: var(--mk-wave-ink); background-color: var(--mk-wave-3); transition: transform .4s var(--ease-out), color .5s var(--ease-out), box-shadow .5s var(--ease-out), background-color .1s linear .55s; }
.btn--wave:is(:hover,:focus-visible) .btn__icon{ background: var(--mk-wave-ink); color: var(--mk-wave-3); }
.btn--wave:is(:hover,:focus-visible) .btn__waves i{ transform: scale(1); transition: transform 1.3s var(--ease-out-long); }
.btn--wave:is(:hover,:focus-visible) .btn__waves i:nth-child(2){ transition-delay: .1s; }
.btn--wave:is(:hover,:focus-visible) .btn__waves i:nth-child(3){ transition-delay: .2s; }
/* brilho interno sutil (botões "gordinhos") */
.btn--gloss::before{ content:""; position:absolute; inset:1px; z-index:3; border-radius: inherit; pointer-events:none; background: linear-gradient(178deg, rgba(255,255,255,.32), rgba(255,255,255,0) 55%); }
/* variações */
.btn--accent{ --btn-bg: var(--mk-accent); --btn-fg: var(--mk-accent-ink); }
.btn--ghost{ --btn-bg: transparent; --btn-fg: var(--mk-ink); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--mk-ink) 35%, transparent); }
.btn--ghost:hover{ box-shadow: inset 0 0 0 1.5px var(--mk-ink); }
.btn--ghost .btn__icon{ background: var(--mk-ink); color: var(--mk-bg); }
/* botão "físico" (lúdico): borda inferior deslocada */
.btn--chunky{ box-shadow: 0 5px 0 0 color-mix(in oklab, var(--btn-bg) 60%, #000); transform: translateY(0); }
.btn--chunky:hover{ transform: translateY(-2px); box-shadow: 0 7px 0 0 color-mix(in oklab, var(--btn-bg) 60%, #000); }
.btn--chunky:active{ transform: translateY(4px); box-shadow: 0 1px 0 0 color-mix(in oklab, var(--btn-bg) 60%, #000); }

/* link com sublinhado que entra da esquerda e sai pela direita */
.link-u{ background: linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease-out); text-decoration: none; color: inherit; }
.link-u:hover{ background-size: 100% 1px; }

/* -------------------------------------------------------------------------
   4. CARDS
   ------------------------------------------------------------------------- */
.card-lift{ transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); }
.card-lift:hover{ transform: translateY(-8px); box-shadow: 0 30px 60px -30px rgba(0,0,0,.35); }
.card-zoom{ overflow: hidden; }
.card-zoom :is(img,video){ transition: transform 1.2s var(--ease-out); }
.card-zoom:hover :is(img,video){ transform: scale(1.06); }
/* spotlight: motion.js escreve --mx/--my */
.card-spotlight{ position: relative; isolation: isolate; }
.card-spotlight::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius: inherit; opacity:0; transition: opacity .4s; background: radial-gradient(420px circle at var(--mx,50%) var(--my,50%), color-mix(in oklab, var(--spot, #fff) 14%, transparent), transparent 60%); }
.card-spotlight::after{ content:""; position:absolute; inset:0; border-radius: inherit; padding:1px; opacity:0; transition: opacity .4s; pointer-events:none;
  background: radial-gradient(260px circle at var(--mx,50%) var(--my,50%), color-mix(in oklab, var(--spot, #fff) 55%, transparent), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.card-spotlight:hover::before, .card-spotlight:hover::after{ opacity: 1; }
/* seta de canto que inverte no hover (Botwise) */
.card-arrow{ display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:#fff; color:#111; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); transition: background .35s, color .35s, transform .5s var(--ease-out); }
:hover > .card-arrow, a:hover .card-arrow{ background:#111; color:#fff; transform: rotate(45deg); }
/* linhas que expandem (acordeão horizontal / carrossel de depoimentos) */
.expand-row{ display:flex; gap: 12px; }
.expand-row > *{ flex: 1 1 0; min-width: 0; transition: flex-grow .8s var(--ease-out); }
.expand-row > :is(:hover,.is-active){ flex-grow: 3.2; }
@media (hover:none){ .expand-row{ flex-direction: column; } }

/* -------------------------------------------------------------------------
   5. LOOPS — marquee, fita diagonal, selo girando, flutuação
   ------------------------------------------------------------------------- */
.marquee{ --gap: 3rem; --speed: 40s; display:flex; overflow:hidden; gap: var(--gap); user-select:none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee__track{ flex: 0 0 auto; display:flex; align-items:center; gap: var(--gap); min-width:100%; animation: mk-marquee var(--speed) linear infinite; }
.marquee--reverse .marquee__track{ animation-direction: reverse; }
.marquee--hover-pause:hover .marquee__track{ animation-play-state: paused; }
@keyframes mk-marquee{ to{ transform: translateX(calc(-100% - var(--gap))); } }

.ribbon{ --rot: -4deg; transform: rotate(var(--rot)); width: 110vw; margin-left: -5vw; padding: .8rem 0; background: var(--ribbon-bg, var(--mk-accent)); color: var(--ribbon-fg, var(--mk-ink)); font-weight: 800; text-transform: uppercase; }
.ribbon .marquee{ -webkit-mask-image:none; mask-image:none; }

.badge-spin{ width: 140px; aspect-ratio: 1; position: relative; display:grid; place-items:center; }
.badge-spin svg{ position:absolute; inset:0; width:100%; height:100%; animation: mk-spin 16s linear infinite; }
/* use textLength="236" no <textPath> (≈ circunferência do raio 38) para o texto fechar o círculo sem sobrepor */
.badge-spin text{ font-size: 9px; letter-spacing: .08em; text-transform: uppercase; fill: currentColor; font-weight: 700; }
@keyframes mk-spin{ to{ transform: rotate(360deg); } }

.float{ animation: mk-float var(--float-t, 5s) var(--ease-in-out) var(--float-d, 0s) infinite alternate; }
@keyframes mk-float{ from{ transform: translateY(-6px) rotate(calc(var(--rot,0deg) - 3deg)); } to{ transform: translateY(6px) rotate(calc(var(--rot,0deg) + 3deg)); } }

/* pulso de "disponível" */
.dot-live{ width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: mk-ping 2s var(--ease-out) infinite; display:inline-block; }
@keyframes mk-ping{ 70%,100%{ box-shadow: 0 0 0 10px rgba(34,197,94,0); } }

/* -------------------------------------------------------------------------
   6. HEADER — vira pílula glass ao rolar + indicador animado
   ------------------------------------------------------------------------- */
.header{ position: fixed; inset: 0 0 auto; z-index: 50; padding-top: 0; transition: padding .7s var(--ease-out), transform .6s var(--ease-out); }
.header__bar{ position: relative; margin-inline: auto; max-width: 1280px; height: 76px; padding: 0 clamp(16px,4vw,40px); display:flex; align-items:center; justify-content:space-between; gap: 24px; transition: height .7s var(--ease-out), max-width .7s var(--ease-out), padding .7s var(--ease-out); }
.header__bar::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius: 999px; opacity:0; transform: scale(1.02); transition: opacity .5s var(--ease-out), transform .7s var(--ease-out);
  background: color-mix(in oklab, var(--mk-bg) 82%, transparent); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 18px 40px -28px rgba(0,0,0,.45), inset 0 0 0 1px color-mix(in oklab, var(--mk-ink) 8%, transparent); }
.header.is-scrolled{ padding-top: 10px; }
.header.is-scrolled .header__bar{ height: 60px; max-width: min(1100px, calc(100% - 20px)); padding-inline: 10px 10px; padding-left: 24px; }
.header.is-scrolled .header__bar::before{ opacity: 1; transform: none; }
.header.is-hidden{ transform: translateY(-110%); }
.nav{ position: relative; display:flex; gap: 4px; }
.nav a{ position: relative; z-index: 1; padding: .55em .9em; border-radius: 999px; text-decoration: none; color: inherit; opacity: .72; transition: opacity .3s; }
.nav a:is(:hover,.is-active){ opacity: 1; }
.nav-indicator{ position:absolute; z-index:0; left:0; top:50%; height: 2.3em; width: var(--w, 0); translate: var(--x, 0) -50%; border-radius: 999px; background: color-mix(in oklab, var(--mk-ink) 8%, transparent); opacity: 0; transition: translate .7s var(--ease-out), width .7s var(--ease-out), opacity .3s; }
.nav.has-active .nav-indicator{ opacity: 1; }

/* -------------------------------------------------------------------------
   7. SCROLL SET-PIECES
   ------------------------------------------------------------------------- */
/* horizontal pinado: .hscroll (alto, JS define altura) > .hscroll__sticky > .hscroll__track */
.hscroll{ position: relative; }
.hscroll__sticky{ position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display:flex; align-items:center; }
.hscroll__track{ display:flex; gap: clamp(16px,2vw,32px); padding-inline: clamp(20px,5vw,72px); will-change: transform; }
@media (max-width: 1023px){
  .hscroll{ height: auto !important; }
  .hscroll__sticky{ position: relative; height: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding-block: 24px; }
  .hscroll__track{ transform: none !important; }
  .hscroll__track > *{ scroll-snap-align: center; }
}

/* sticky stack: cards grudam com offset e os de trás encolhem */
.stack{ display:grid; gap: 24px; }
.stack__card{ position: sticky; top: calc(var(--stack-top, 96px) + var(--i, 0) * var(--stack-step, 16px)); transform-origin: 50% 0;
  transform: scale(calc(1 - var(--behind, 0) * .05)); filter: brightness(calc(1 - var(--behind, 0) * .12)); transition: transform .2s linear, filter .2s linear; }

/* parallax: data-parallax="0.15" → motion.js escreve --py */
[data-parallax]{ translate: 0 var(--py, 0px); }

/* -------------------------------------------------------------------------
   8. PRELOADER (estrutura base; ver references/05-preloaders.md)
   ------------------------------------------------------------------------- */
.preloader{ position: fixed; inset: 0; z-index: 1000; display:grid; place-items:center; background: var(--preloader-bg, var(--mk-ink)); color: var(--preloader-fg, var(--mk-bg)); transition: opacity .7s var(--ease-out), clip-path 1s var(--ease-in-out); }
.preloader.is-leaving{ clip-path: inset(0 0 100% 0); }
.preloader.is-fading{ opacity: 0; pointer-events: none; }
html.is-loading{ overflow: hidden; }
html:not(.js) .preloader{ display: none; }

/* -------------------------------------------------------------------------
   9. MOVIMENTO REDUZIDO
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js [data-reveal], .js [data-split] .w > span, .js [data-split] .c{ opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
  .preloader{ display: none !important; }
  [data-parallax]{ translate: none !important; }
}