/* フルスパ（HLSPA）add-on: motion — 株式会社スタンプ, 2026-10-16 (14版)
   The look of the view transition that hlspa.js runs around each swap. The
   classes on <html> come from hlspa_motion.js. With reduced motion, hlspa.js
   runs no transition, so nothing here applies. */

@media (prefers-reduced-motion: no-preference) {
  /* Parts outside the swap region keep their own small motions (the glide
     of the header, the menu marker, the breadcrumb fade): their old picture
     is dropped and their live state shows at once, above the content. */
  .motion_running .site_header { view-transition-name: site_header; }
  .motion_running .sub_menu_outer { view-transition-name: sub_menu; }
  .motion_running .crumbs_outer { view-transition-name: crumbs; }
  ::view-transition-old(site_header),
  ::view-transition-old(sub_menu),
  ::view-transition-old(crumbs) { display: none; }
  ::view-transition-new(site_header),
  ::view-transition-new(sub_menu),
  ::view-transition-new(crumbs) { animation: none; }
  ::view-transition-group(site_header),
  ::view-transition-group(sub_menu),
  ::view-transition-group(crumbs) { animation: none; z-index: 3; }

  /* fade: the whole screen cross-fades (the stage of the TOP too) */
  .motion_fade::view-transition-old(root),
  .motion_fade::view-transition-new(root) { animation-duration: 240ms; }

  /* slide: only the content moves; the rest switches at once */
  .motion_slide .page_swap { view-transition-name: page; }
  .motion_slide::view-transition-old(root) { display: none; }
  .motion_slide::view-transition-new(root) { animation: none; }
  .motion_slide::view-transition-group(page) { animation: none; z-index: 1; }
  .motion_slide::view-transition-old(page) { animation: 260ms cubic-bezier(.4, 0, .2, 1) both hlspa_motion_out_left; }
  .motion_slide::view-transition-new(page) { animation: 260ms cubic-bezier(.4, 0, .2, 1) both hlspa_motion_in_right; }
  .motion_slide.motion_to_right::view-transition-old(page) { animation-name: hlspa_motion_out_right; }
  .motion_slide.motion_to_right::view-transition-new(page) { animation-name: hlspa_motion_in_left; }

  /* heading: the card's name grows into the page heading, the rest fades */
  .motion_heading::view-transition-old(root),
  .motion_heading::view-transition-new(root) { animation-duration: 240ms; }
  .motion_heading::view-transition-group(page_heading) { animation-duration: 380ms; animation-timing-function: cubic-bezier(.2, 0, 0, 1); z-index: 2; }
  /* the two boxes hug their words, so the same words only change size */
  .motion_heading .hlspa_motion_named { inline-size: fit-content; max-inline-size: 100%; }
  .motion_heading::view-transition-old(page_heading),
  .motion_heading::view-transition-new(page_heading) { block-size: 100%; inline-size: auto; }
}

@keyframes hlspa_motion_out_left { to { opacity: 0; transform: translateX(-56px); } }
@keyframes hlspa_motion_in_right { from { opacity: 0; transform: translateX(56px); } }
@keyframes hlspa_motion_out_right { to { opacity: 0; transform: translateX(56px); } }
@keyframes hlspa_motion_in_left { from { opacity: 0; transform: translateX(-56px); } }