/* This marker makes the controller opt in only after its presentation exists. */
.jr-page { --jr-motion-enabled: 1; }

@media (min-width: 761px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .jr-page.jr-motion-active .jr-motion-frame > img {
    transform: translate3d(0,var(--jr-motion-y,0px),0) scale(1.05);
    transition: transform 140ms linear;
  }
  .jr-page.jr-motion-active .jr-story-link:is(:hover,:focus-visible) .jr-motion-frame > img,
  .jr-page.jr-motion-active .jr-cover-link:is(:hover,:focus-visible) .jr-motion-frame > img {
    transform: translate3d(0,var(--jr-motion-y,0px),0) scale(1.06);
    transition: transform 600ms cubic-bezier(.22,1,.36,1);
  }
  .jr-page.jr-motion-active .jr-motion-curtain::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: var(--jr-sand,#D9C9B3) url('/assets/navigation/nav-shell-plaster.webp') center / 1000px auto;
    transform: translate3d(0,calc(-100% + var(--jr-motion-cover,0%)),0);
    transition: transform 140ms linear;
  }
  .jr-page.jr-motion-active .jr-story-link:focus-visible .jr-motion-curtain::after {
    transform: translate3d(0,-100%,0);
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce), (max-width: 760px), (pointer: coarse) {
  .jr-page .jr-motion-frame > img,
  .jr-page .jr-cover-link:hover .jr-cover-photo > img,
  .jr-page .jr-story-link:hover .jr-story-photo > img { transform: none; }
  .jr-page .jr-motion-curtain::after { display: none; }
}