/* RLGN.CA — motion-kit v1 styles.
   Partner to js/motion-kit.js. Defaults are FINAL states; motion is
   opt-in inside prefers-reduced-motion: no-preference, matching the
   existing style.css convention. */

/* --- halo: legibility for copy over busy art (works everywhere) --- */
.mk-halo {
  text-shadow: 0 2px 20px rgba(241, 234, 219, 0.92), 0 0 8px rgba(241, 234, 219, 0.85);
}
.on-dark .mk-halo,
.mk-halo--dark {
  text-shadow: 0 2px 22px rgba(13, 10, 5, 0.95), 0 0 9px rgba(13, 10, 5, 0.9);
}

/* --- tip-in (locomotive): photo splits into the row on hover --- */
.mk-tipin__fig {
  display: inline-block;
  width: 0;
  height: 1.15em;
  vertical-align: baseline;
  overflow: hidden;
  border-radius: 2px;
}
.mk-tipin__fig img {
  height: 100%;
  width: auto;
  max-width: none;
  display: inline-block;
  filter: grayscale(1) contrast(1.05);
}

@media (prefers-reduced-motion: no-preference) {
  .mk-tipin__fig { transition: width 340ms cubic-bezier(0.6, 0, 0.2, 1); }
  .mk-tipin__row:hover .mk-tipin__fig,
  .mk-tipin__row:focus-within .mk-tipin__fig { width: 2.1em; margin: 0 0.28em; }

  /* --- ladder (cryox): steps ghost until they take viewport focus --- */
  .mk-ladder > * {
    opacity: 0.8;
    transition: opacity 420ms ease;
  }
  .mk-ladder > .mk-focus { opacity: 1; }

  /* --- draw: rule extends under the element on first view --- */
  [data-mk="draw"] { position: relative; }
  [data-mk="draw"]::after {
    content: "";
    position: absolute;
    left: 0; bottom: -0.18em;
    height: 2px; width: 100%;
    background: var(--red, #E4002B);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 700ms cubic-bezier(0.6, 0, 0.2, 1);
  }
  [data-mk="draw"].mk-drawn::after { transform: scaleX(1); }
}

/* reduced motion / no-JS: ladder steps fully readable, draw rule shown */
@media (prefers-reduced-motion: reduce) {
  [data-mk="draw"]::after {
    content: "";
    position: absolute;
    left: 0; bottom: -0.18em;
    height: 2px; width: 100%;
    background: var(--red, #E4002B);
  }
  [data-mk="draw"] { position: relative; }
}