/* ============================================================
   BTD MOTION — btd-motion.css
   Spring-feel scroll motion for beforethedata.com
   Pair with btd-motion.js. See BTD_MOTION_INSTALL.md for usage.
   ============================================================ */

:root {
  /* Spring approximation: fast arrival, soft settle. The whole feel lives here. */
  --btd-spring: cubic-bezier(0.22, 1, 0.36, 1);
  /* Slight overshoot variant for hero/headline moments only */
  --btd-spring-pop: cubic-bezier(0.34, 1.4, 0.45, 1);
  --btd-reveal-distance: 24px;
  --btd-reveal-duration: 750ms;
  --btd-stagger-step: 80ms;
}

/* ---------- REVEAL ----------
   Add data-reveal to any element. It starts low + transparent,
   and animates in when it enters the viewport. */
[data-reveal] {
  opacity: 0;
  transform: translateY(var(--btd-reveal-distance));
  transition:
    opacity var(--btd-reveal-duration) var(--btd-spring),
    transform var(--btd-reveal-duration) var(--btd-spring);
  will-change: opacity, transform;
}
[data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
}

/* Variants via attribute value */
[data-reveal="left"]  { transform: translateX(calc(-1 * var(--btd-reveal-distance))); }
[data-reveal="right"] { transform: translateX(var(--btd-reveal-distance)); }
[data-reveal="left"].is-in,
[data-reveal="right"].is-in { transform: translateX(0); }

[data-reveal="scale"] { transform: scale(0.96); }
[data-reveal="scale"].is-in { transform: scale(1); transition-timing-function: var(--btd-spring-pop); }

/* Slower, statelier option for hero headlines */
[data-reveal="slow"] { transition-duration: 1000ms; }

/* ---------- STAGGER ----------
   Put data-reveal-group on a parent; its direct [data-reveal]
   children arrive one beat apart. JS assigns --i per child. */
[data-reveal-group] > [data-reveal] {
  transition-delay: calc(var(--i, 0) * var(--btd-stagger-step));
}

/* ---------- PARALLAX ----------
   data-parallax="0.15" → element drifts at 15% of scroll rate.
   JS drives --py. Keep values between 0.05 and 0.25, and use on
   at most 3-4 ambient elements per viewport. */
[data-parallax] {
  transform: translateY(var(--py, 0));
  will-change: transform;
}

/* ---------- MARQUEE ----------
   Markup: <div class="btd-marquee"><div class="btd-marquee-track">
   [items][items duplicated once] </div></div>
   Duplicate the item set exactly once for a seamless loop. */
.btd-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.btd-marquee-track {
  display: flex;
  gap: 48px;
  width: max-content;
  will-change: transform;
}
.usedby-row.btd-marquee { display:block; flex-wrap:nowrap; padding:0; }
.usedby-row.btd-marquee .btd-marquee-track { align-items:center; }
.usedby-row.btd-marquee a { flex:0 0 auto; }

/* ---------- INTERACTIVE SPRING (buttons, cards) ----------
   Optional: add .btd-springy to CTAs/cards for a physical hover. */
.btd-springy {
  transition: transform 350ms var(--btd-spring-pop);
}
.btd-springy:hover  { transform: translateY(-2px); }
.btd-springy:active { transform: translateY(0) scale(0.98); }

/* ---------- ACCESSIBILITY KILL SWITCH ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  [data-parallax] { transform: none !important; }
  .btd-marquee-track { animation: none !important; }
  .btd-springy, .btd-springy:hover, .btd-springy:active {
    transform: none !important; transition: none !important;
  }
}