/* Native scrolling with a separate, bounded touch composition. Every visual
   state is conditional on the mobile owner; the base document stays complete. */
:root {
  --codorus-mobile-motion-css: 1;
}

.mobile-motion-toggle {
  min-height: 44px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 5px;
  cursor: pointer;
}

.mobile-motion-toggle[hidden] {
  display: none;
}

.mobile-motion-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}

/* The media guard ends mobile ownership synchronously when a fine-pointer
   viewport grows. Desktop resize handlers can then sample the original colors
   even before the mobile JavaScript receives the same resize event. */
@media (pointer: coarse), (max-width: 760px) {
  /* Moving artwork/headings must not become scroll anchors, including during
     settled measurements. Ordinary reading content keeps native anchoring. */
  [data-mobile-kind="arrival"],
  [data-mobile-kind="image"] {
    overflow-anchor: none;
  }

  html[data-mobile-motion="active"] [data-mobile-kind="arrival"] {
    translate: 0 calc((1 - var(--mobile-progress, 1)) * 24px);
  }

  html[data-mobile-motion="active"] [data-mobile-kind="image"] {
    translate: 0 calc((1 - var(--mobile-progress, 1)) * 36px);
    scale: calc(0.975 + var(--mobile-progress, 1) * 0.025);
    transform-origin: 50% 50%;
  }

  html[data-mobile-motion="active"] [data-mobile-word] {
    color: var(--mobile-word-color, inherit);
  }

  /* Preserve a full track while the registration square travels on it. Review
   rules previously used a growing line and a static square at its right end. */
  html[data-mobile-motion="active"]
    :is(.wd-review-rule, .nw-review-rule, .rb-review-rule, .wc-review-rule)::before {
    transform: none;
  }

  html[data-mobile-motion="active"]
    :is(
      .sv-close-rule,
      .ck-close-rule,
      .wd-review-rule,
      .wd-close-rule,
      .nw-review-rule,
      .nw-close-rule,
      .rb-review-rule,
      .rb-close-rule,
      .wc-review-rule,
      .wc-close-rule,
      .wk-close-rule,
      .bi-close-rule,
      .mg-close-rule,
      .rf-close-rule,
      .ar-close-rule
    )
    > span {
    right: auto;
    left: calc((100% - 18px) * var(--mobile-progress, 1));
  }

  html[data-mobile-motion="active"] .sv-project-rule > span {
    left: calc((100% - 16px) * var(--mobile-progress, 1));
  }

  html[data-mobile-motion="active"] .ps-close-rule > span {
    left: calc((100% - 15px) * var(--mobile-progress, 1));
  }

  /* Home keeps its own line/mark composition and native swipe gallery. */
  html[data-mobile-motion="active"] .hp-drawn-rule {
    transform: scaleX(calc(0.18 + var(--mobile-progress, 1) * 0.82));
  }

  html[data-mobile-motion="active"] .hp-review-visual .hp-review-line {
    transform: scaleX(var(--mobile-progress, 1));
  }

  /* The two existing down arrows remain in flow. A short shaft draws through
   their preceding gap; no SVG measurement or desktop lateral path is reused. */
  @media (max-width: 999px) {
    html[data-mobile-motion="active"] .nw-native-arrow[data-mobile-kind="connector"] {
      position: relative;
      /* Keep the original glyph's layout box; draw a continuous connector in it. */
      color: transparent;
    }

    html[data-mobile-motion="active"] .nw-native-arrow[data-mobile-kind="connector"]::before {
      content: "";
      position: absolute;
      pointer-events: none;
      width: 2px;
      height: calc(100% + 18px);
      top: -18px;
      left: calc(50% - 1px);
      background: #b7adff;
      transform-origin: center top;
      scale: 1 var(--mobile-progress, 1);
    }

    html[data-mobile-motion="active"] .nw-native-arrow[data-mobile-kind="connector"]::after {
      content: "";
      position: absolute;
      width: 10px;
      height: 10px;
      left: calc(50% - 5px);
      bottom: 1px;
      border-right: 2px solid #b7adff;
      border-bottom: 2px solid #b7adff;
      rotate: 45deg;
      opacity: var(--mobile-progress, 1);
      pointer-events: none;
    }
  }
}