/* =========================================================
   Motion layer — added on top of style.css, changes no content.
   Ideas borrowed from the Kage landing page, translated into the
   black / white / yellow system: a living "world" behind the hero,
   drifting particles in dark scenes, depth on hover, a progress rail.
   Everything here is off for prefers-reduced-motion.
   ========================================================= */

/* Scroll progress: a thin yellow rail across the top */
.mo-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 10000;
  pointer-events: none;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: var(--yellow);
}

/* Every section hosts a people-network canvas behind its content.
   `isolation` keeps the canvas (z-index -1) above the section's own
   background but below everything inside it. */
.mo-host { position: relative; isolation: isolate; }
.mo-host > .mo-net,
.mo-host > .mo-dust {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* Hero portrait floats with the pointer (transform set by motion.js) */
.hero-portrait { will-change: transform; transition: transform .6s var(--ease), box-shadow .6s var(--ease); }

/* Cards: depth and a yellow spotlight that follows the pointer */
.mo-tilt {
  transform-style: preserve-3d;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.mo-tilt.is-tilting { transition: transform .12s linear, box-shadow .3s var(--ease); box-shadow: var(--shadow-md); }
.mo-tilt::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s var(--ease);
  background: radial-gradient(240px circle at var(--mo-x, 50%) var(--mo-y, 50%), rgba(255, 193, 14, .16), transparent 65%);
}
.mo-tilt.is-tilting::after { opacity: 1; }

/* Buttons: a gentle magnetic pull (uses `translate`, so the existing
   hover `transform` lift still works) */
.mo-magnet { transition: translate .35s var(--ease); }

/* Section scenes: dark blocks open like a curtain as they arrive */
@media (prefers-reduced-motion: no-preference) {
  .js .bg-black.mo-scene {
    clip-path: inset(6% 4% 6% 4% round 18px);
    transition: clip-path 1s var(--ease);
  }
  .js .bg-black.mo-scene.is-open { clip-path: inset(0 0 0 0 round 0); }
}

/* Media: posters and images ease into scale as they enter */
@media (prefers-reduced-motion: no-preference) {
  .js .mo-media { transform: scale(.94); transition: transform 1.1s var(--ease); }
  .js .mo-media.is-in { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mo-progress, .mo-net, .mo-dust { display: none; }
  .mo-tilt, .mo-tilt.is-tilting, .hero-portrait { transform: none !important; }
  .mo-magnet { translate: none !important; }
}