/* =========================================================================
   Motion layer — makes the page feel alive on top of the Figma spec.
   Everything here is gated on .js (never added under prefers-reduced-motion),
   and hover/pointer effects only run on devices with a fine pointer.
   Driven by js/sections/95-motion.js.
   ========================================================================= */

/* ---------- 1 · Headings rise word by word ---------- */
.js .lb-w {
  display: inline-block;
  overflow: clip;
  overflow-clip-margin: .2em;
  padding-bottom: .1em;
  margin-bottom: -.1em;
  vertical-align: top;
}
.js .lb-wi {
  display: inline-block;
  transform: translateY(108%) rotate(4deg);
  transform-origin: 0 100%;
  opacity: 0;
  transition:
    transform 1s var(--ease) calc(var(--wi, 0) * 55ms + 80ms),
    opacity .6s var(--ease) calc(var(--wi, 0) * 55ms + 80ms);
}
.js .lb-words-in .lb-wi { transform: none; opacity: 1; }

/* ---------- 2 · Hero ----------
   The hero's own load sequence lives in css/sections/01-hero.css; here only the
   pointer lean on the hand-and-cards stage (js) is styled. */
.js .hero .stage { transform: perspective(1400px) rotateY(calc(var(--mx, 0) * 5deg)) rotateX(calc(var(--my, 0) * -4deg)); transition: transform .9s var(--ease); }

/* ---------- 3 · Eyebrow dots ping ---------- */
.js .eyebrow { position: relative; }
.js .eyebrow::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--accent);
  animation: lb-ping 2.8s cubic-bezier(0, 0, .2, 1) infinite;
  pointer-events: none;
}
@keyframes lb-ping { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(3.4); opacity: 0; } }

/* ---------- 4 · Primary buttons: light sweep ---------- */
.js .btn-pri { position: relative; overflow: hidden; isolation: isolate; }
.js .btn-pri::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-20deg) translateX(0);
  pointer-events: none;
  z-index: -1;
  opacity: 0;
}
@keyframes lb-sweep { 0% { transform: skewX(-20deg) translateX(0); opacity: 1; } 100% { transform: skewX(-20deg) translateX(420%); opacity: 1; } }
@media (hover: hover) {
  .js .btn-pri:hover::after { animation: lb-sweep .8s var(--ease); }
}
.js .hero-btns .btn-pri::after,
.js .cta__btns .btn-white::after { animation: lb-sweep-idle 5.5s ease-in-out 2.4s infinite; }
@keyframes lb-sweep-idle {
  0% { transform: skewX(-20deg) translateX(0); opacity: 1; }
  22%, 100% { transform: skewX(-20deg) translateX(420%); opacity: 1; }
}
.js .cta__btns .btn-white { position: relative; overflow: hidden; isolation: isolate; }
.js .cta__btns .btn-white::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; pointer-events: none; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(49, 226, 154, .35), transparent);
}

/* ---------- 5 · Card tilt + glare (pointer devices) ---------- */
.js .lb-tilt { transform-style: preserve-3d; }
.js .lb-tilt.lb-tilt.is-tilting {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-5px);
  transition: transform .18s ease-out, box-shadow .35s var(--ease), border-color .3s;
}
.lb-glare {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(380px circle at var(--gx, 50%) var(--gy, 50%), rgba(49, 226, 154, .18), rgba(255, 255, 255, .06) 35%, transparent 60%);
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.is-tilting > .lb-glare { opacity: 1; }

/* ---------- 6 · Stats: rule fills as the band arrives ---------- */
.js .stat { position: relative; }
.js .stat::before {
  content: "";
  position: absolute;
  left: -2px; top: 0;
  width: 2px; height: 100%;
  background: linear-gradient(var(--accent), var(--cta-b));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.1s var(--ease);
}
.js .stats.lb-in .stat::before { transform: scaleY(1); }
.js .stats.lb-in .stat:nth-child(2)::before { transition-delay: .12s; }
.js .stats.lb-in .stat:nth-child(3)::before { transition-delay: .24s; }
.js .stats.lb-in .stat:nth-child(4)::before { transition-delay: .36s; }

/* ---------- 7 · Commission ladder draws itself ---------- */
.js .partners__ladder::before { transform: scaleX(0); transform-origin: left; transition: transform 1.6s cubic-bezier(.45, .05, .25, 1); }
.js .partners__ladder.lb-drawn::before { transform: none; }
.js .partners__rung-dot,
.js .partners__rung-pct { transition: transform .6s cubic-bezier(.34, 1.56, .64, 1), opacity .4s var(--ease); transition-delay: calc(var(--ri, 0) * .22s + .2s); }
.js .partners__ladder:not(.lb-drawn) .partners__rung-dot { transform: scale(0); opacity: 0; }
.js .partners__ladder:not(.lb-drawn) .partners__rung-pct { transform: translateY(14px); opacity: 0; }
.js .partners__ladder.lb-drawn .partners__rung:last-child .partners__rung-dot { animation: lb-glow 2.4s ease-in-out 2s infinite; }
@keyframes lb-glow { 50% { filter: drop-shadow(0 0 10px rgba(49, 226, 154, .9)); scale: 1.12; } }

/* ---------- 8 · Pinned sections: continuous progress rail + floating phone ---------- */
@media (min-width: 1061px) {
  .js .how__steps, .js .platform__steps { position: relative; }
  .js .how__steps::before, .js .how__steps::after,
  .js .platform__steps::before, .js .platform__steps::after {
    content: "";
    position: absolute;
    left: -22px; top: 6px; bottom: 6px;
    width: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .1);
  }
  .js .how__steps::after, .js .platform__steps::after {
    background: linear-gradient(var(--accent), var(--cta-b));
    box-shadow: 0 0 12px rgba(49, 226, 154, .6);
    transform: scaleY(var(--p, 0));
    transform-origin: top;
  }
  .js .how__phone.is-on,
  .js .platform__phone.is-on { animation: lb-float 5.5s ease-in-out .6s infinite; }
}

/* ---------- 9 · Parallax targets get a smooth hand-off ---------- */
.js [data-lb-par] { will-change: translate; }

/* Phones in the swipe rails: no tilt there (touch) */
@media (hover: none) {
  .js .lb-tilt.is-tilting { transform: none; }
  .lb-glare { display: none; }
}