/* =============================================================
   copilotBC — motion utilities
   -------------------------------------------------------------
   Class-based reveal / parallax / stagger / marquee primitives.
   Driven by motion.js (IntersectionObserver). Falls back to
   visible-by-default if JS doesn't run, and to no-motion if the
   user prefers reduced motion.

   Tokens used here come from core.css and may be overridden by
   marketing.css.
   ============================================================= */

:root {
  --reveal-duration: var(--duration-cinema-1);
  --reveal-ease:     var(--ease-confident);
  --reveal-distance: 16px;
  --reveal-stagger:  60ms;
}

/* ─── Reveal ────────────────────────────────────────────────── */
/* The element is visible by default. JS adds [data-reveal-pending]
   on init when supported, so the first paint hides it. The `.is-in`
   class (added when the element scrolls in) plays the reveal. */

.fx-reveal {
  /* default state */
  transition:
    opacity   var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease);
  will-change: opacity, transform;
}
[data-reveal-pending].fx-reveal {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
}
[data-reveal-pending].fx-reveal--up    { transform: translateY(var(--reveal-distance)); }
[data-reveal-pending].fx-reveal--down  { transform: translateY(calc(var(--reveal-distance) * -1)); }
[data-reveal-pending].fx-reveal--left  { transform: translateX(var(--reveal-distance)); }
[data-reveal-pending].fx-reveal--right { transform: translateX(calc(var(--reveal-distance) * -1)); }
[data-reveal-pending].fx-reveal--zoom  { transform: scale(0.94); }
[data-reveal-pending].fx-reveal--blur  { filter: blur(12px); transition-property: opacity, filter; }

.fx-reveal.is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Heavier "manifesto" reveal for hero quotes / big statements. */
.fx-reveal--statement {
  --reveal-duration: var(--duration-cinema-3);
  --reveal-distance: 32px;
}

/* ─── Stagger ───────────────────────────────────────────────── */
.fx-stagger > .fx-reveal { transition-delay: 0ms; }
.fx-stagger > .fx-reveal:nth-child(1) { transition-delay: calc(0 * var(--reveal-stagger)); }
.fx-stagger > .fx-reveal:nth-child(2) { transition-delay: calc(1 * var(--reveal-stagger)); }
.fx-stagger > .fx-reveal:nth-child(3) { transition-delay: calc(2 * var(--reveal-stagger)); }
.fx-stagger > .fx-reveal:nth-child(4) { transition-delay: calc(3 * var(--reveal-stagger)); }
.fx-stagger > .fx-reveal:nth-child(5) { transition-delay: calc(4 * var(--reveal-stagger)); }
.fx-stagger > .fx-reveal:nth-child(6) { transition-delay: calc(5 * var(--reveal-stagger)); }
.fx-stagger > .fx-reveal:nth-child(7) { transition-delay: calc(6 * var(--reveal-stagger)); }
.fx-stagger > .fx-reveal:nth-child(8) { transition-delay: calc(7 * var(--reveal-stagger)); }
.fx-stagger > .fx-reveal:nth-child(9) { transition-delay: calc(8 * var(--reveal-stagger)); }

/* ─── Parallax ──────────────────────────────────────────────── */
/* JS reads `data-parallax` and `data-speed` (0..1, where 1 means
   moves with the scroll) and writes a CSS variable `--parallax-y`.
   This class consumes it. */
.fx-parallax {
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  will-change: transform;
}

/* ─── Scroll progress ───────────────────────────────────────── */
/* Element exposes a 0..1 progress value as `--scroll-progress` while
   it is in the viewport. Combine with linear gradients, scale, etc.
   Set on the element via `data-scroll-progress`. */
.fx-progress-bar::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--color-primary);
  transform-origin: left center;
  transform: scaleX(var(--scroll-progress, 0));
  transition: transform 50ms linear;
}

/* ─── Marquee ───────────────────────────────────────────────── */
/* Use for a row of customer logos / "trusted by" / etc. */
.fx-marquee {
  display: flex;
  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);
}
.fx-marquee__track {
  display: flex;
  gap: var(--space-12);
  animation: fx-marquee-slide 40s linear infinite;
  flex-shrink: 0;
  padding-inline: var(--space-6);
}
@keyframes fx-marquee-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fx-reveal,
  [data-reveal-pending].fx-reveal,
  .fx-reveal.is-in {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .fx-marquee__track { animation: none; }
  .fx-parallax { transform: none; }
}