/* Enable GPU compositing */
::view-transition-old(*),
::view-transition-new(*) { mix-blend-mode: normal; }

/* Suppress root snapshots; specific elements carry the visual transition */
::view-transition-old(root),
::view-transition-new(root) { animation: none; }

/* Text-page transitions skip the view transition (via pageswap); use a plain CSS fade instead */
:root.is-text-page body,
:root.from-text-page body { animation: bg-fade-in .3s ease both; }

/* Photo group morphs smoothly between gallery and fullscreen */
::view-transition-group(photo) {
  animation-duration: 0.45s;
  animation-timing-function: ease-in-out;
}

/* Background crossfade (no carousel direction) */
@keyframes bg-fade-out { to   { opacity: 0 } }
@keyframes bg-fade-in  { from { opacity: 0 } }

:root:not(.dir-next):not(.dir-prev)::view-transition-group(bg),
:root:not(.dir-next):not(.dir-prev)::view-transition-group(ellipse-bg) { animation: none; }

:root:not(.dir-next):not(.dir-prev)::view-transition-old(bg),
:root:not(.dir-next):not(.dir-prev)::view-transition-old(ellipse-bg) {
  animation: bg-fade-out .45s ease both;
}
:root:not(.dir-next):not(.dir-prev)::view-transition-new(bg),
:root:not(.dir-next):not(.dir-prev)::view-transition-new(ellipse-bg) {
  animation: bg-fade-in .45s ease both;
}

/* Carousel keyframes */
@keyframes slide-in-right  { from { translate:  100vw 0 } to { translate: 0 0 } }
@keyframes slide-out-left  { to   { translate: -100vw 0 } }
@keyframes slide-in-left   { from { translate: -100vw 0 } to { translate: 0 0 } }
@keyframes slide-out-right { to   { translate:  100vw 0 } }

/* Nav snapshot stays centered and stationary during carousel */
::view-transition-old(nav),
::view-transition-new(nav) {
  width: 100%;
  height: 100%;
  object-fit: none;
  object-position: center;
}

:root.dir-next::view-transition-old(nav),
:root.dir-next::view-transition-new(nav),
:root.dir-prev::view-transition-old(nav),
:root.dir-prev::view-transition-new(nav) { animation: none; }

/* Position incoming slides offscreen before animation */
:root.dir-next::view-transition-new(root) { translate:  100vw 0; }
:root.dir-prev::view-transition-new(root) { translate: -100vw 0; }

/* Root carousel */
:root.dir-next::view-transition-old(root)  { animation: slide-out-left  .9s cubic-bezier(1, 0, 0.6, 1) forwards; }
:root.dir-next::view-transition-new(root)  { animation: slide-in-right  .9s cubic-bezier(1, 0, 0.6, 1) forwards; }
:root.dir-prev::view-transition-old(root)  { animation: slide-out-right .9s cubic-bezier(1, 0, 0.6, 1) forwards; }
:root.dir-prev::view-transition-new(root)  { animation: slide-in-left   .9s cubic-bezier(1, 0, 0.6, 1) forwards; }

/* Photo slides in sync with root */
:root.dir-next::view-transition-new(photo) { translate:  100vw 0; }
:root.dir-prev::view-transition-new(photo) { translate: -100vw 0; }

:root.dir-next::view-transition-old(photo),
:root.dir-next::view-transition-new(photo),
:root.dir-prev::view-transition-old(photo),
:root.dir-prev::view-transition-new(photo) { width: auto; height: auto; inset: 0; margin: auto; }

:root.dir-next::view-transition-old(photo)  { animation: slide-out-left  .9s cubic-bezier(1, 0, 0.6, 1) forwards; }
:root.dir-next::view-transition-new(photo)  { animation: slide-in-right  .9s cubic-bezier(1, 0, 0.6, 1) forwards; }
:root.dir-prev::view-transition-old(photo)  { animation: slide-out-right .9s cubic-bezier(1, 0, 0.6, 1) forwards; }
:root.dir-prev::view-transition-new(photo)  { animation: slide-in-left   .9s cubic-bezier(1, 0, 0.6, 1) forwards; }