/* v0.2.211 — PERSONAL mobile editorial motion.
   The page is fully readable before this optional layer runs. It uses one-shot
   IntersectionObserver state only; native scrolling remains browser-owned. */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  html.personal-motion-ready main .personal-page .pm-sequence > .pm-item {
    transition:
      opacity var(--pm-duration, 620ms) cubic-bezier(.16, 1, .3, 1) var(--pm-delay, 0ms),
      translate var(--pm-duration, 620ms) cubic-bezier(.16, 1, .3, 1) var(--pm-delay, 0ms) !important;
  }

  html.personal-motion-ready main .personal-page .pm-sequence:not(.pm-in) > .pm-item {
    opacity: 0 !important;
    translate: 0 8px !important;
  }

  html.personal-motion-ready main .personal-page .pm-sequence.pm-in > .pm-item {
    opacity: 1 !important;
    translate: 0 0 !important;
  }

  /* Only the primary editorial boundaries draw on. Item rules remain quiet. */
  html.personal-motion-ready main .personal-page .pm-rule {
    position: relative;
    border-top-color: transparent;
  }

  html.personal-motion-ready main .personal-page .pm-rule::before {
    content: '';
    position: absolute;
    right: 0;
    top: -1px;
    left: 0;
    height: 1px;
    background: rgba(30,29,27,.18);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 680ms cubic-bezier(.16, 1, .3, 1) 20ms;
  }

  html.personal-motion-ready main .personal-page .pm-rule.pm-in::before { transform: scaleX(1); }

  html.personal-motion-ready main .personal-page .pm-image {
    overflow: hidden;
    transition: clip-path 860ms cubic-bezier(.16, 1, .3, 1) !important;
  }

  html.personal-motion-ready main .personal-page .pm-image:not(.pm-in) { clip-path: inset(0 0 100% 0) !important; }
  html.personal-motion-ready main .personal-page .pm-image.pm-in { clip-path: inset(0 0 0 0) !important; }

  html.personal-motion-ready main .personal-page .pm-image > img {
    /* This narrowly restores the approved one-shot reveal above the mobile
       native-scroll baseline, which otherwise freezes .js-image-drift media. */
    scale: 1.024 !important;
    transition: scale 860ms cubic-bezier(.16, 1, .3, 1) !important;
  }

  html.personal-motion-ready main .personal-page .pm-image.pm-in > img { scale: 1 !important; }

  html.personal-motion-ready main .personal-page .pm-cta {
    position: relative;
    border-bottom-color: transparent;
  }

  html.personal-motion-ready main .personal-page .pm-cta::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 440ms cubic-bezier(.16, 1, .3, 1) calc(var(--pm-delay, 0ms) + 120ms);
  }

  html.personal-motion-ready main .personal-page .pm-sequence.pm-in .pm-cta::after { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  html.personal-motion-ready main .personal-page :is(.pm-item, .pm-image, .pm-image > img) {
    clip-path: none !important;
    opacity: 1 !important;
    scale: 1 !important;
    translate: 0 0 !important;
    transition: none !important;
  }
}