/* ==========================================================================
   MIM Agency - MOTION LAYER
   An optional enhancement loaded AFTER agency.css. Nothing here is required
   for the page to work: if this file or the GSAP CDN fails, agency.css and
   agency.js keep running their own IntersectionObserver reveal and the page
   looks correct, just less animated.

   Contents
     1. Hand-off from the built-in reveal
     2. Glowing gradient cards
     3. Section transitions
     4. Reduced motion
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HAND-OFF FROM THE BUILT-IN REVEAL

   agency.css hides `.reveal` and eases it back with a CSS transition, while
   agency.js adds `.is-in` from an IntersectionObserver. When GSAP is present
   motion.js sets `.has-motion` on <html> and drives opacity/transform with
   inline styles, which outrank both of those rules.

   Killing the transition here is what stops the two systems easing the same
   two properties on different clocks - without it you get a visible double
   ease as the CSS transition and the GSAP tween disagree mid-flight.

   Note the compound selector: `js` and `has-motion` both live on <html>, so
   a descendant selector (`.js .has-motion`) would never match.
   -------------------------------------------------------------------------- */
.js.has-motion .reveal {
  transition: none;
  will-change: opacity, transform;
}

/* Once a reveal has played, drop the compositor hint again so long pages do
   not hold dozens of promoted layers alive. motion.js adds this class. */
.js.has-motion .reveal.motion-done {
  will-change: auto;
}

/* --------------------------------------------------------------------------
   2. GLOWING GRADIENT CARDS

   The glow is a real child element injected by motion.js, not a pseudo
   element. `.path-card` already spends both ::before and ::after on its
   existing bloom and masked border, so a pseudo here would collide with it.

   A real element also lets the pointer position ride in on two custom
   properties, so the highlight tracks the cursor instead of sitting still.
   -------------------------------------------------------------------------- */
[data-glow] {
  position: relative;
}

/* Outranks agency.css's `.path-card > *` (0,1,0) rule, which would otherwise
   force this layer back to position:relative and break the fill. */
[data-glow] > .glow-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  background: radial-gradient(
    260px circle at var(--glow-x, 50%) var(--glow-y, 50%),
    rgba(62, 157, 255, 0.18),
    rgba(99, 102, 241, 0.09) 40%,
    transparent 72%
  );
}

/* focus-within keeps the effect available to keyboard users, since several of
   these cards contain links. */
[data-glow]:hover > .glow-layer,
[data-glow]:focus-within > .glow-layer {
  opacity: 1;
}

/* Content must sit above the glow. agency.css already does this for
   .path-card; repeated here so the layer is safe on any card it is applied
   to, including ones with no stacking rules of their own. */
[data-glow] > *:not(.glow-layer) {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   3. SECTION TRANSITIONS

   A 1px hard edge between two dark sections reads as a seam. A short gradient
   rule fading out from the centre dissolves it, which is what carries the eye
   from one band to the next. Pure CSS - no scroll work, so it costs nothing.
   -------------------------------------------------------------------------- */
.section + .section::before,
.section + .section-alt::before,
.section-alt + .section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(920px, 82%);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(62, 157, 255, 0.28),
    transparent
  );
  pointer-events: none;
}

/* The seam is absolutely positioned, so its section needs to be a containing
   block. `.section` is static by default in agency.css. */
.section,
.section-alt {
  position: relative;
}

/* Parallax drift targets. motion.js moves these on scroll progress; with no
   JS they simply sit where the layout puts them. */
[data-parallax] {
  will-change: transform;
}

/* --------------------------------------------------------------------------
   4. REDUCED MOTION

   motion.js refuses to initialise under a reduce preference, so this is a
   belt-and-braces pass for the purely declarative effects above.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js.has-motion .reveal {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
  [data-glow] > .glow-layer {
    display: none;
  }
  [data-parallax] {
    transform: none !important;
    will-change: auto;
  }
}