/* Motion da direção de design. Só lê tokens de templates/tokens.css
   (--ease-out, --spring, --dur-micro, --dur-enter, --e1, --e2, --accent-soft).
   Par com motion.js, que adiciona .is-in e controla loops e parallax. */

/* ---------- Reveal on scroll ---------- */
[data-rv] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--dur-enter) var(--ease-out) var(--d, 0ms),
    transform var(--dur-enter) var(--ease-out) var(--d, 0ms),
    filter var(--dur-enter) var(--ease-out) var(--d, 0ms);
}
[data-rv="scale"] { transform: translateY(10px) scale(.96); }
[data-rv="blur"]  { transform: translateY(10px); filter: blur(8px); }
[data-rv].is-in   { opacity: 1; transform: none; filter: none; }

/* ---------- Título em cascata (data-split) ---------- */
.mo-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(.45em) rotate(2deg);
  transition:
    opacity 520ms var(--ease-out) var(--d, 0ms),
    transform 700ms var(--spring) var(--d, 0ms);
}
[data-split].is-in .mo-word { opacity: 1; transform: none; }

/* ---------- Marca-texto varrendo (palavra de destaque) ---------- */
.mo-mark {
  background: linear-gradient(var(--accent-soft), var(--accent-soft)) 0 88% / 0% 42% no-repeat;
  transition: background-size 900ms var(--ease-out) 450ms;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.is-in .mo-mark, .mo-mark.is-in { background-size: 100% 42%; }

/* ---------- Objetos 3D (thiings) ---------- */
.mo-obj {
  display: block;
  height: auto;
  filter: drop-shadow(var(--obj-shadow, 0 10px 18px rgb(0 0 0 / .18)));
  user-select: none;
  -webkit-user-drag: none;
}
.mo-float { animation: mo-float var(--float-dur, 6s) ease-in-out var(--float-delay, 0s) infinite; }
/* float usa translate/rotate, pop usa scale, tilt usa transform:
   os três combinam no mesmo elemento. Parallax vai num wrapper. */
@keyframes mo-float {
  0%, 100% { translate: 0 0; rotate: var(--float-rot, -2deg); }
  50%      { translate: 0 var(--float-y, -9px); rotate: calc(var(--float-rot, -2deg) * -1); }
}

[data-pop] { opacity: 0; scale: .6; }
[data-pop].is-in {
  opacity: 1;
  scale: 1;
  transition:
    opacity 300ms var(--ease-out) var(--d, 0ms),
    scale 800ms var(--spring) var(--d, 0ms);
}

/* Tilt: motion.js escreve --rx/--ry com o cursor */
[data-tilt] {
  transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 400ms var(--ease-out);
}
[data-tilt]:hover { transition-duration: 80ms; }

/* Parallax: motion.js escreve --py. Use num wrapper, não no objeto. */
[data-parallax] { transform: translate3d(0, var(--py, 0px), 0); }

/* ---------- Cards ---------- */
.mo-lift {
  transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
}
.mo-lift:hover { transform: translateY(-3px); box-shadow: var(--e2), var(--top); }

/* Spotlight do cursor: motion.js escreve --mx/--my */
.mo-spot { position: relative; isolation: isolate; }
.mo-spot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), var(--accent-soft), transparent 70%);
  transition: opacity 300ms var(--ease-out);
}
.mo-spot:hover::before { opacity: 1; }

/* ---------- Botões ---------- */
.mo-press { transition: transform 220ms var(--spring); }
.mo-press:active { transform: translateY(1px) scale(.97); }
.mo-press .mo-arrow { transition: transform var(--dur-micro) var(--ease-out); }
.mo-press:hover .mo-arrow { transform: translateX(2px); }

/* ---------- Marquee (logos, depoimentos) ---------- */
.mo-marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.mo-marquee > * {
  display: flex;
  gap: var(--marquee-gap, 48px);
  width: max-content;
  animation: mo-marquee var(--marquee-dur, 40s) linear infinite;
}
.mo-marquee:hover > * { animation-play-state: paused; }
@keyframes mo-marquee { to { transform: translateX(calc(-50% - var(--marquee-gap, 48px) / 2)); } }

/* ---------- Produto vivo ---------- */
.mo-bar { transform-origin: bottom; animation: mo-bar 2.4s var(--ease-out) var(--d, 0ms) infinite alternate; }
@keyframes mo-bar { from { transform: scaleY(.35); } }
.mo-pulse { animation: mo-pulse 2s ease-out infinite; }
@keyframes mo-pulse { 0% { box-shadow: 0 0 0 0 var(--accent-soft); } 100% { box-shadow: 0 0 0 10px transparent; } }
.mo-caret::after { content: "▍"; margin-left: 1px; animation: mo-blink 1s steps(1) infinite; }
@keyframes mo-blink { 50% { opacity: 0; } }
.mo-notify { animation: mo-notify 600ms var(--spring) var(--d, 0ms) both; }
@keyframes mo-notify { from { opacity: 0; transform: translateY(10px) scale(.96); } }

/* Loops só tocam visíveis (motion.js alterna .is-off) */
.is-off, .is-off * { animation-play-state: paused !important; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-rv], .mo-word, [data-pop] { opacity: 1 !important; transform: none !important; scale: none !important; filter: none !important; transition: none !important; }
  .mo-mark { background-size: 100% 42%; transition: none; }
  .mo-float, .mo-bar, .mo-pulse, .mo-marquee > *, .mo-notify, .mo-caret::after { animation: none !important; }
  [data-tilt], [data-parallax] { transform: none !important; }
}