/* Method page motion layer (mm)
   ONE reveal system for /method. It is armed only by mm.js (html.mm-on),
   so without JavaScript nothing here applies.

   Motion language: opacity + small translateY only.
   No clip-path. No mask. No scale. No blur. No background animation.
   Nothing here changes layout, size, spacing, colour, typography or Fold. */

html.mm-on {
  --mr-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- 1. neutralise the legacy reveal states ----------
   The original stylesheet hides .reveal / .stg-r until a second observer
   adds .is-in. Two systems on one node is the source of the glitching, so
   while mm is live the legacy states are inert and mm owns every reveal. */
html.mm-on .reveal,
html.mm-on .reveal.is-in,
html.mm-on .is-in .reveal,
html.mm-on .stg .stg-r,
html.mm-on .stg .is-in .stg-r,
html.mm-on .stg .stg-inner.is-in .stg-r {
  opacity: 1;
  transform: none;
  transition: none;
  will-change: auto;
}

/* ---------- 2. the single mm reveal state ---------- */
html.mm-on [data-mr]:not(.mr-in) {
  opacity: 0;
  transform: translateY(var(--mr-y, 10px));
  transition: none;
}

html.mm-on [data-mr].mr-in {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--mr-d, 560ms) var(--mr-ease),
    transform var(--mr-d, 560ms) var(--mr-ease);
  transition-delay: var(--mr-delay, 0ms);
}

/* Existing gold rules / dividers: draw, never move. */
html.mm-on [data-mr="rule"]:not(.mr-in) {
  opacity: 1;
  transform: scaleX(0);
  transform-origin: left center;
}
html.mm-on [data-mr="rule"].mr-in {
  opacity: 1;
  transform: none;
  transform-origin: left center;
  transition: transform 500ms var(--mr-ease);
  transition-delay: var(--mr-delay, 0ms);
}

/* Deep links, restored scroll and fast flicks: settle with no late replay. */
html.mm-on [data-mr].mr-instant {
  transition: none !important;
  transition-delay: 0ms !important;
}

/* ---------- mobile: same choreography, lighter travel ---------- */
@media (max-width: 700px) {
  html.mm-on [data-mr]:not(.mr-in) {
    transform: translateY(calc(var(--mr-y, 10px) * 0.7));
  }
}

/* ---------- reduced motion ----------
   mm.js never arms in this mode; this is belt and braces. */
@media (prefers-reduced-motion: reduce) {
  html.mm-on [data-mr] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}