/* Keep the mobile layout vertical; only a running motion module enhances it. */
@media (max-width: 900px) {
  .js .paso { --t: 1; }
  .testigo__ficha { pointer-events: auto; }
}

@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  html.mobile-motion:not(.motion-off) .mobile-reveal {
    opacity: 0 !important;
    transform: translate3d(0, var(--mobile-enter-y, 28px), 0)
      rotate(var(--mobile-enter-angle, 0deg)) scale(var(--mobile-enter-scale, 1));
    transition: opacity 650ms var(--ease-veil), transform 850ms var(--ease-deco);
  }

  html.mobile-motion:not(.motion-off) .mobile-reveal.is-mobile-visible,
  html.mobile-motion:not(.motion-off) .mobile-reveal:focus-within {
    opacity: 1 !important;
    transform: none;
  }

  html.mobile-motion:not(.motion-off) .mobile-reveal:focus-within {
    transition: none;
  }

  html.mobile-motion:not(.motion-off) .testigo__actor {
    --mobile-enter-y: 44px;
    --mobile-enter-angle: -3deg;
    --mobile-enter-scale: .94;
  }

  html.mobile-motion:not(.motion-off) .testigo:nth-child(even) .testigo__actor {
    --mobile-enter-angle: 3deg;
  }

  html.mobile-motion:not(.motion-off) .testigo__ficha { --mobile-enter-y: 20px; }

  html.mobile-motion:not(.motion-off) .witness-portrait img {
    transform: translate3d(0, var(--mobile-depth, 0px), 0);
  }

  html.mobile-motion:not(.motion-off) .hero__visual {
    transform: translate3d(0, var(--mobile-depth, 0px), 0);
  }

  html.mobile-motion:not(.motion-off) .testigo__actor .figura__aura {
    opacity: .55;
  }

  html.mobile-motion:not(.motion-off) .criterio__relleno {
    transform: scaleX(0);
    transition: transform 950ms var(--ease-deco) 120ms;
  }

  html.mobile-motion:not(.motion-off) .is-mobile-visible .criterio__relleno,
  html.mobile-motion:not(.motion-off) .mobile-reveal:focus-within .criterio__relleno {
    transform: scaleX(var(--peso, 0));
  }

  html.mobile-motion:not(.motion-off) .fases__rail {
    position: relative;
    will-change: auto;
  }

  html.mobile-motion:not(.motion-off) .fases__rail::before {
    content: '';
    position: absolute;
    z-index: 2;
    inset: 0 auto 0 0;
    width: 2px;
    background: linear-gradient(var(--accent-hot), var(--accent-bright));
    transform: scaleY(var(--mobile-track, 0));
    transform-origin: top;
    pointer-events: none;
  }

  html.mobile-motion:not(.motion-off) .fase {
    padding-inline-start: 26px;
    border-left: 1px solid var(--line-soft);
  }

  html.mobile-motion:not(.motion-off) .fase::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 39px;
    width: 6px;
    height: 6px;
    border: 1px solid var(--accent);
    transform: rotate(45deg);
  }

  html.mobile-motion:not(.motion-off) .fase.is-mobile-current {
    border-top-color: var(--accent);
    background: linear-gradient(110deg, #7d14263d, #d4a54809);
  }

  html.mobile-motion:not(.motion-off) .fase.is-mobile-current::before {
    background: var(--accent-bright);
  }
}