/* Stable scrollbar gutter: keep page width constant so the centered nav/content
   does not shift horizontally between pages of different heights. */
html { overflow-y: scroll; }

/**
 * Pathway Labs — site-level animations.
 *
 * All durations and easings come from tokens.css. Every animated rule has a
 * `prefers-reduced-motion` fallback. No `transition: all`. No parallax. No
 * autoplay over 5 seconds. Marquee pauses on hover/focus and entirely under
 * reduced motion.
 *
 * Used by: news.html, examples/example-website.html,
 * examples/example-dashboard.html.
 */

/* ── 1. Hero ECG splash (background draw, once on load) ───────────────── */
[data-hero-ecg] {
  pointer-events: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.18;
}
[data-hero-ecg] path {
  stroke-dasharray: var(--ecg-len, 2000);
  stroke-dashoffset: var(--ecg-len, 2000);
  animation: pathway-ecg-draw 1400ms linear forwards;
}
@keyframes pathway-ecg-draw {
  to { stroke-dashoffset: 0; }
}

/* ── 2. Trusted-by marquee (continuous horizontal scroll) ─────────────── */
.pathway-marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.pathway-marquee__track {
  display: flex;
  width: max-content;
  gap: var(--space-5xl);
  animation: pathway-marquee-scroll 36s linear infinite;
}
.pathway-marquee:hover .pathway-marquee__track,
.pathway-marquee:focus-within .pathway-marquee__track {
  animation-play-state: paused;
}
.pathway-marquee__item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  font-weight: var(--weight-semibold);
  color: rgba(14, 18, 64, 0.62);
  font-size: 18px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
@keyframes pathway-marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ── 3. Section reveal on scroll (one-shot per element) ──────────────── */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition:
    opacity var(--motion-slow) var(--ease-pathway),
    transform var(--motion-slow) var(--ease-pathway);
  will-change: opacity, transform;
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ── 4. Stat tick-up (fed by JS; CSS sets the typography only) ───────── */
[data-stat-target] {
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ── 5. Card hover lift (used by news cards, team cards, etc.) ───────── */
.pathway-card-lift {
  transition:
    transform var(--motion-fast) var(--ease-pathway),
    box-shadow var(--motion-fast) var(--ease-pathway),
    border-color var(--motion-fast) var(--ease-pathway);
}
.pathway-card-lift:hover {
  transform: translate3d(0, -4px, 0);
  box-shadow: var(--shadow-floating);
}

/* ── 6. CTA button micro-press (paired with card-lift / standalone) ──── */
.pathway-press {
  transition: transform var(--motion-fast) var(--ease-pathway);
}
.pathway-press:active {
  transform: translate3d(0, 1px, 0);
}

/* ── Reduced-motion: disable everything decorative ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-hero-ecg] path {
    animation: none;
    stroke-dashoffset: 0;
  }
  .pathway-marquee__track {
    animation: none;
    transform: none;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .pathway-card-lift,
  .pathway-press {
    transition: none;
  }
  .pathway-card-lift:hover {
    transform: none;
  }
}