/* ==========================================================================
   Glide — motion layer.

   Scroll-linked animation rather than more fades. Everything here is driven
   by one rAF loop and touches only transform and opacity, so it composites on
   the GPU. Native scrolling is never hijacked: position:sticky keeps working
   and the scrollbar behaves normally.

   Every effect collapses under prefers-reduced-motion at the end of the file.
   ========================================================================== */

/* ---------- 1. parallax media ---------- */
.mi-par { will-change: transform; }

/* ---------- 2. per-line heading reveal ---------- */
.mi-js .mi-split { display: block; overflow: hidden; }
.mi-js .mi-split > i {
  display: block;
  font-style: inherit;
  transform: translateY(105%);
  transition: transform 0.9s var(--mi-ease);
  transition-delay: var(--mi-d, 0ms);
}
.mi-js .mi-split.is-in > i { transform: none; }

/* ---------- 3. clip reveal for media ---------- */
.mi-js .mi-clip {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.1s var(--mi-ease);
}
.mi-js .mi-clip.is-in { clip-path: inset(0 0 0 0); }

/* ---------- 4. cursor with a contextual label ---------- */
.mi-cursor {
  display: grid;
  place-items: center;
  font: 500 10px/1 var(--mi-font);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: transparent;
  background: transparent;
  transition: opacity .3s var(--mi-ease), width .45s var(--mi-ease),
              height .45s var(--mi-ease), margin .45s var(--mi-ease),
              background-color .45s var(--mi-ease), color .3s var(--mi-ease);
}
.mi-cursor.is-label {
  width: 88px; height: 88px; margin: -44px 0 0 -44px;
  background: var(--mi-bronze);
  border-color: transparent;
  color: #FFFFFF;
}

/* ---------- 5. velocity-reactive marquee ---------- */
.mi-marquee__track { will-change: transform; }

/* ---------- 6. section progress rail ---------- */
.mi-rail {
  position: fixed;
  right: 22px;
  top: 50%;
  translate: 0 -50%;
  z-index: 880;
  display: none;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
@media (min-width: 1120px) { .mi-rail { display: flex; } }
.mi-rail i {
  display: block;
  width: 2px;
  height: 18px;
  background: var(--mi-rule);
  transition: background-color .45s var(--mi-ease), height .45s var(--mi-ease);
}
.mi-rail i.is-on { background: var(--mi-bronze); height: 34px; }

/* ---------- 7. page transition curtain ---------- */
.mi-curtain {
  position: fixed;
  inset: 0;
  z-index: 9990;
  background: var(--mi-charcoal);
  transform: scaleY(0);
  transform-origin: bottom;
  pointer-events: none;
}
.mi-curtain.is-out {
  transform: scaleY(1);
  transform-origin: bottom;
  transition: transform .55s var(--mi-ease);
}

/* ---------- 8. tilt on hover ---------- */
.mi-tilt { transform-style: preserve-3d; will-change: transform; }

/* ---------- 9. counter-rotating hover on panels ---------- */
@media (hover: hover) {
  .mi-feature__shot { transition: transform .6s var(--mi-ease); }
}

@media (prefers-reduced-motion: reduce) {
  .mi-js .mi-split > i { transform: none !important; transition: none !important; }
  .mi-js .mi-clip { clip-path: none !important; transition: none !important; }
  .mi-par, .mi-tilt { transform: none !important; }
  .mi-rail, .mi-curtain, .mi-cursor { display: none !important; }
  .mi-marquee__track { animation: none; transform: none !important; }
}