/* Load on inner pages only. The homepage hero never opts into these transitions. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  :root { view-transition-name: none; }
  body.inner-page #page-main { view-transition-name: wp-main; }

  /* Optional static builder contract: one name per document, matching actual
     image src and project/treatment identity at both ends. Missing names opt out.
     This is parsed with the page CSS; no late JS assignment or router is needed. */
  body.inner-page img[data-motion-shared] {
    view-transition-name: var(--sm-shared-name, none);
  }
  ::view-transition-group(*) {
    animation-duration: 460ms;
    animation-timing-function: cubic-bezier(.16,1,.3,1);
  }

  ::view-transition-group(wp-main) {
    animation-duration: 220ms;
    animation-timing-function: cubic-bezier(.16,1,.3,1);
  }
  ::view-transition-image-pair(wp-main) { isolation: auto; }
  ::view-transition-old(wp-main) {
    animation: 160ms linear both sm-frame-out;
    mix-blend-mode: normal;
  }
  ::view-transition-new(wp-main) {
    animation: 220ms linear both sm-frame-in;
    mix-blend-mode: normal;
  }
}

@keyframes sm-frame-out { to { opacity: 0; } }
@keyframes sm-frame-in { from { opacity: 0; } }

/* Classes are applied only to eligible existing arrows inside .wp-content. */
.inner-page .sm-arrow-link > .sm-link-arrow {
  display: inline-block;
  transition: transform 220ms cubic-bezier(.16,1,.3,1);
}
.inner-page .sm-arrow-link:focus-visible > .sm-link-arrow[data-sm-arrow="diagonal"] {
  transform: translate(3px,-3px);
}
.inner-page .sm-arrow-link:focus-visible > .sm-link-arrow[data-sm-arrow="right"] {
  transform: translateX(4px);
}
@media (hover: hover) and (pointer: fine) {
  .inner-page .sm-arrow-link:hover > .sm-link-arrow[data-sm-arrow="diagonal"] {
    transform: translate(3px,-3px);
  }
  .inner-page .sm-arrow-link:hover > .sm-link-arrow[data-sm-arrow="right"] {
    transform: translateX(4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  body.inner-page #page-main { view-transition-name: none; }
  body.inner-page img[data-motion-shared] { view-transition-name: none; }
  .inner-page .sm-arrow-link > .sm-link-arrow {
    transition: none;
    transform: none !important;
  }
  ::view-transition-group(wp-main),
  ::view-transition-old(wp-main),
  ::view-transition-new(wp-main) { animation: none !important; }
}