/* ATELIER 17 — the pseudo-elements. Two named pairs morph, the rest cross-fades. */

/* the shared pair rides the scene clock and the sheet curve */
::view-transition-group(specimen-art),
::view-transition-group(specimen-title),
::view-transition-old(specimen-title),
::view-transition-new(specimen-title) {
  animation-duration: var(--dur-scene, 560ms);
  animation-timing-function: var(--ease-sheet, cubic-bezier(0.32, 0.72, 0, 1));
}

/* hygiene: the art changes aspect ratio between states. height:100% makes both
   snapshots fill the group; mix-blend-mode: normal stops the two ghosting. */
::view-transition-old(specimen-art),
::view-transition-new(specimen-art) {
  mix-blend-mode: normal;
  height: 100%;
  animation-duration: var(--dur-scene, 560ms);
  animation-timing-function: var(--ease-sheet, cubic-bezier(0.32, 0.72, 0, 1));
}

/* everything unnamed is the root pair: a shorter cross-fade */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: var(--dur-state, 240ms); }

/* direction. The pseudo-elements live on the root, so :has() reaches down to
   the stage's data attribute to pick which way the content slides. */
@keyframes vt-in-r  { from { opacity: 0; transform: translateX(24px); } }
@keyframes vt-out-l { to   { opacity: 0; transform: translateX(-24px); } }
@keyframes vt-in-l  { from { opacity: 0; transform: translateX(-24px); } }
@keyframes vt-out-r { to   { opacity: 0; transform: translateX(24px); } }

.view { view-transition-name: stage-content; }

:root:has([data-direction="push"])::view-transition-old(stage-content) { animation: vt-out-l var(--dur-scene, 560ms) var(--ease-sheet, ease) both; }
:root:has([data-direction="push"])::view-transition-new(stage-content) { animation: vt-in-r  var(--dur-scene, 560ms) var(--ease-sheet, ease) both; }
:root:has([data-direction="pop"])::view-transition-old(stage-content)  { animation: vt-out-r var(--dur-scene, 560ms) var(--ease-sheet, ease) both; }
:root:has([data-direction="pop"])::view-transition-new(stage-content)  { animation: vt-in-l  var(--dur-scene, 560ms) var(--ease-sheet, ease) both; }