/* Legacy exit keeps its 1 s easing but Barba removes the old container at 500 ms.
   Half an iteration preserves that progression; retirement hides its remaining
   opacity at the cut. Entry then runs for its full second. */
@view-transition { navigation: auto; }

:root {
  view-transition-name: none;
  --motion-in-x: 20px;
  --motion-out-x: -20px;
  --motion-in-y: 0px;
  --motion-out-y: 0px;
}
:root[data-stonbluart-motion="return"] {
  --motion-in-x: -20px;
  --motion-out-x: 20px;
}
:root[data-stonbluart-motion^="project-"] {
  --motion-in-x: 0px;
  --motion-out-x: 0px;
  --motion-in-y: -20px;
  --motion-out-y: 20px;
}
.site-main { view-transition-name: page; }
.site-header { view-transition-name: header; }
.site-footer { view-transition-name: footer; }
body { overflow-x: clip; }

/* Keep the header's space, as in the reference. Hidden controls cannot take focus.
   The always-visible return link lives inside the project's main content. */
body[data-stonbluart-view="ficha"] .site-header { visibility: hidden; }

::view-transition-group(*) { animation-duration: 0s; }
::view-transition-old(*), ::view-transition-new(*) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-old(header) { opacity: 0; }
html[data-stonbluart-motion]::view-transition-old(page),
html[data-stonbluart-motion]::view-transition-old(footer) {
  animation: stonbluart-leave 1s cubic-bezier(.16,1,.3,1) 0s .5 both,
    stonbluart-retire .5s step-end both;
}
html[data-stonbluart-motion]::view-transition-new(page),
html[data-stonbluart-motion]::view-transition-new(footer) {
  animation: stonbluart-enter 1s cubic-bezier(.16,1,.3,1) .5s both;
}
html[data-stonbluart-motion="project-open"]::view-transition-old(header) {
  animation: stonbluart-header-leave .6s cubic-bezier(.54,.38,.25,.98) both;
}
html[data-stonbluart-motion="project-close"]::view-transition-new(header) {
  animation: stonbluart-header-enter .6s cubic-bezier(.54,.38,.25,.98) both;
}
/* Moving snapshots must not intercept a second deliberate click. */
::view-transition { pointer-events: none; }
@keyframes stonbluart-leave {
  from { opacity: 1; transform: translate(0, 0); }
  to { opacity: 0; transform: translate(var(--motion-out-x), var(--motion-out-y)); }
}
@keyframes stonbluart-retire { from { visibility: visible; } to { visibility: hidden; } }
@keyframes stonbluart-enter {
  from { opacity: 0; transform: translate(var(--motion-in-x), var(--motion-in-y)); }
  to { opacity: 1; transform: translate(0, 0); }
}
@keyframes stonbluart-header-leave { from { opacity: 1; } to { opacity: 0; } }
@keyframes stonbluart-header-enter { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}