/* Tudo aqui depende de .motion no <html>, que o motion.js só liga sem prefers-reduced-motion. */

/* ── Onda cinética nos títulos (landing do Campanha 365) ──
   Engrossar a letra pelo peso refluiria a linha a cada quadro; contorno e escala
   são só pintura e composição. */
[data-kinetic] .k-w {
  display: inline-block;
  white-space: nowrap;
}

[data-kinetic] .k-l {
  --stroke: calc(1em * 125 / 6000);
  display: inline-block;
  -webkit-text-stroke: var(--stroke) transparent;
  transform-origin: 50% 70%;
  transition: -webkit-text-stroke-color 0.34s ease, -webkit-text-stroke-width 0.34s ease, transform 0.34s ease;
}

@media (hover: hover) {
  [data-kinetic] .k-l:hover {
    -webkit-text-stroke-color: currentColor;
    -webkit-text-stroke-width: calc(var(--stroke) * 2.6);
    transform: translateY(-0.05em) scale(1.09);
  }

  [data-kinetic] .k-l:has(+ .k-l:hover),
  [data-kinetic] .k-l:hover + .k-l {
    -webkit-text-stroke-color: currentColor;
    -webkit-text-stroke-width: calc(var(--stroke) * 1.5);
    transform: translateY(-0.028em) scale(1.05);
  }
}

[data-kinetic][data-wave='on'] .k-l {
  transition: none;
  animation: wave 680ms ease-in-out both;
  animation-delay: calc(var(--k) * 32ms);
}

@keyframes wave {
  0%,
  100% {
    -webkit-text-stroke-color: transparent;
    -webkit-text-stroke-width: var(--stroke);
    transform: none;
  }

  45% {
    -webkit-text-stroke-color: currentColor;
    -webkit-text-stroke-width: calc(var(--stroke) * 2.6);
    transform: translateY(-0.05em) scale(1.09);
  }
}

/* ── Entrada do hero: o título desembaça letra a letra, o resto sobe em seguida ── */
.hero h1.is-entering .k-l {
  animation: blur-in-up 0.7s var(--ease-out) both;
  animation-delay: calc(var(--k) * 18ms);
}

.motion .hero__copy > *,
.motion .forge {
  animation: slide-up 0.7s var(--ease-out) both;
}

.motion .hero__lead {
  animation-delay: 0.35s;
}

.motion .hero__actions {
  animation-delay: 0.45s;
}

.motion .status {
  animation-delay: 0.55s;
}

.motion .forge {
  animation-delay: 0.3s;
}

@keyframes blur-in-up {
  from {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(0.25em);
  }
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
}

/* ── Revolut: o palco começa recortado e se abre até a largura toda ── */
.motion [data-zoom] {
  --open: calc(1 - var(--z, 1));
  clip-path: inset(calc(var(--open) * 5%) calc(var(--open) * 9%) round calc(28px + var(--open) * 36px));
}

/* ── Revolut: o cartão coberto encolhe e escurece ── */
.motion .stack__card {
  transform: scale(calc(1 - var(--cover, 0) * 0.06));
  filter: brightness(calc(1 - var(--cover, 0) * 0.5));
}

/* ── Blocos que caem e números em odômetro (landing do Campanha 365) ── */
.drop-ready .offer,
.drop-ready .waitlist {
  opacity: 0;
  transform: translateY(-36px) scale(0.98);
}

.drop-in .offer,
.drop-in .waitlist {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.2, 0.9, 0.25, 1.15);
}

.drop-in .waitlist {
  transition-delay: 240ms;
}

[data-odometer] {
  line-height: 1;
}

.odo {
  display: inline-block;
  height: 1em;
  overflow: hidden;
  vertical-align: top;
  line-height: 1;
}

.odo__tape {
  display: flex;
  flex-direction: column;
}

.odo__tape span {
  height: 1em;
  line-height: 1;
}

.drop-in .odo__tape {
  transform: translateY(calc(var(--target) * -1em));
  transition: transform 1.6s cubic-bezier(0.15, 0.85, 0.2, 1);
  transition-delay: calc(var(--col) * 70ms + 250ms);
}