/* motion.css — site-generator opt-in motion layer.
 * Injected by assemble.js only when brand-profile `motion` is subtle/expressive/signature.
 * Keyed off body[data-motion]. reveal.js adds `.motion-ready` to the motion root once JS runs,
 * so the hidden-then-reveal state never traps content when JS is disabled.
 * All scroll/entrance motion is gated behind prefers-reduced-motion: no-preference.
 * See MANIFEST.md for the catalog + tier guidance. */

/* ============================================================
   1. REVEALS (scroll entrances) — opt-in via [data-reveal]
   Hidden state applies ONLY after reveal.js sets .motion-ready AND
   only when the user has not asked to reduce motion.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  [data-motion].motion-ready [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
  }
  [data-motion].motion-ready [data-reveal="fade"]        { transform: none; }
  [data-motion].motion-ready [data-reveal="fade-up"]     { transform: translateY(18px); }
  [data-motion].motion-ready [data-reveal="fade-down"]   { transform: translateY(-18px); }
  [data-motion].motion-ready [data-reveal="slide-left"]  { transform: translateX(28px); }
  [data-motion].motion-ready [data-reveal="slide-right"] { transform: translateX(-28px); }
  [data-motion].motion-ready [data-reveal="zoom-in"]     { transform: scale(0.94); }

  [data-motion].motion-ready [data-reveal].in-view {
    opacity: 1;
    transform: none;
  }

  /* Stagger: children of a [data-reveal-stagger] container reveal in sequence. */
  [data-motion].motion-ready [data-reveal-stagger] > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  [data-motion].motion-ready [data-reveal-stagger].in-view > * {
    opacity: 1;
    transform: none;
  }
  [data-motion].motion-ready [data-reveal-stagger].in-view > *:nth-child(1) { transition-delay: 0s; }
  [data-motion].motion-ready [data-reveal-stagger].in-view > *:nth-child(2) { transition-delay: 0.08s; }
  [data-motion].motion-ready [data-reveal-stagger].in-view > *:nth-child(3) { transition-delay: 0.16s; }
  [data-motion].motion-ready [data-reveal-stagger].in-view > *:nth-child(4) { transition-delay: 0.24s; }
  [data-motion].motion-ready [data-reveal-stagger].in-view > *:nth-child(5) { transition-delay: 0.32s; }
  [data-motion].motion-ready [data-reveal-stagger].in-view > *:nth-child(6) { transition-delay: 0.40s; }
}

/* ============================================================
   2. MICRO-INTERACTIONS — opt-in classes, hover/focus driven.
   Transitions gated behind no-preference; the resting state is
   always the plain element so reduced-motion users lose nothing.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  [data-motion] .mx-btn-elevate,
  [data-motion] .mx-card-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  [data-motion] .mx-btn-elevate:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px color-mix(in srgb, currentColor 18%, transparent);
  }
  [data-motion] .mx-card-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px color-mix(in srgb, #000 14%, transparent);
  }
  [data-motion] .mx-btn-glow {
    animation: mxPulseGlow 2.4s ease-in-out infinite;
  }
}

/* Link underline reveal — cheap, fine under reduced motion (no movement). */
[data-motion] .mx-link-underline {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.25s ease;
  text-decoration: none;
}
[data-motion] .mx-link-underline:hover,
[data-motion] .mx-link-underline:focus-visible {
  background-size: 100% 1.5px;
}

@keyframes mxPulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 35%, transparent); }
  50%      { box-shadow: 0 0 0 8px color-mix(in srgb, currentColor 0%, transparent); }
}

/* ============================================================
   3. MOMENTS — opt-in, expressive tier. count-up is handled by reveal.js.
   ============================================================ */

/* Marquee: a .marquee viewport with a .marquee-track of duplicated content.
   Pauses on hover. Frozen under reduced motion. */
[data-motion] .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);
}
[data-motion] .marquee-track {
  display: inline-flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  [data-motion] .marquee-track {
    animation: mxMarquee 28s linear infinite;
  }
  [data-motion] .marquee:hover .marquee-track {
    animation-play-state: paused;
  }
  [data-motion] .marquee--right .marquee-track {
    animation-direction: reverse;
  }
}
@keyframes mxMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Animated gradient background (hero accents). Frozen under reduced motion. */
[data-motion] .mx-gradient-shift {
  background-size: 200% 200%;
}
@media (prefers-reduced-motion: no-preference) {
  [data-motion] .mx-gradient-shift {
    animation: mxGradient 12s ease infinite;
  }
}
@keyframes mxGradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Progress bar that fills when it enters view (pair the wrapper with data-reveal). */
[data-motion] .mx-progress {
  overflow: hidden;
}
[data-motion] .mx-progress > .mx-progress-fill {
  width: 0;
}
@media (prefers-reduced-motion: no-preference) {
  [data-motion] .mx-progress > .mx-progress-fill {
    transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  }
}
[data-motion] .mx-progress.in-view > .mx-progress-fill {
  width: var(--mx-progress, 100%);
}

/* count-up: keep digits from reflowing as they tick. */
[data-motion] [data-countup] {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   4. THE KIELBURGERS editorial polish (site-wide)
   ============================================================ */
/* Eyebrow lead-in mark: a short burgundy rule before every eyebrow/kicker. Static, always on. */
[data-motion] [data-cms-field$="eyebrow"],
[data-motion] [data-cms-field$="kicker"] { display: inline-flex; align-items: center; gap: 0.8rem; }
[data-motion] [data-cms-field$="eyebrow"]::before,
[data-motion] [data-cms-field$="kicker"]::before { content: ""; width: 1.75rem; height: 2px; background: var(--sage); flex: none; }

@media (prefers-reduced-motion: no-preference) {
  /* Card lift on hover: news + video cards */
  [data-motion] [data-cms-group="news"] a[data-cms-field^="news.item"],
  [data-motion] [data-cms-group="latestvideos"] .grid > div {
    transition: transform 0.24s cubic-bezier(0.16,1,0.3,1), box-shadow 0.24s ease, border-color 0.24s ease;
  }
  [data-motion] [data-cms-group="news"] a[data-cms-field^="news.item"]:hover,
  [data-motion] [data-cms-group="latestvideos"] .grid > div:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 38px color-mix(in srgb, var(--shadow-color) 13%, transparent);
    border-color: color-mix(in srgb, var(--sage) 42%, var(--border));
  }
  /* Video thumbnail slow zoom on hover */
  [data-motion] .kb-video-thumb img { transition: transform 0.5s cubic-bezier(0.16,1,0.3,1); }
  [data-motion] .kb-video-thumb:hover img { transform: scale(1.045); }
  /* Text-link arrow nudge */
  [data-motion] a[data-cms-field$=".more"] span[aria-hidden] { display: inline-block; transition: transform 0.25s cubic-bezier(0.16,1,0.3,1); }
  [data-motion] a[data-cms-field$=".more"]:hover span[aria-hidden] { transform: translateX(5px); }
  /* Hero entrance: confident ease-out-expo, longer throw (homepage) */
  [data-motion].motion-ready #kb-hero-inner > * {
    transition: opacity 0.85s cubic-bezier(0.16,1,0.3,1), transform 0.85s cubic-bezier(0.16,1,0.3,1);
    transform: translateY(28px);
  }
}

/* Credential marquee text */
[data-motion] .kb-cred { font-family: var(--font-display); font-weight: 500; font-size: clamp(1rem,1.5vw,1.3rem); letter-spacing: -0.01em; color: var(--fg); padding: 0 1.5rem; white-space: nowrap; }
[data-motion] .kb-cred-dot { color: var(--sage); font-size: 0.6rem; }
[data-motion] .marquee-track { align-items: center; }