/* Create-page entrance (Peter, 30 Jun).
   The page LANDS looking like the Invoice home — body centred, breadcrumb in the same spot —
   then the "Add … details" form slides in from the right and PUSHES the body left into the
   create layout. So the breadcrumb travels smoothly instead of snapping ~230px left.

   The body shift is exactly HALF the 468px form (234px): a block centred in the full width
   moves left by half the form's width when the form claims the right 468px. That makes the
   start frame line up with home's centred content regardless of viewport. Plain CSS (no
   View Transitions). The back arrow reverses it (.pt-*-exit) then navigates home. */

:root { --pt-dur: 1.25s; --pt-ease: cubic-bezier(0.16, 1, 0.3, 1); }

.pt-stage { overflow-x: clip; }   /* hide the form while it's parked off the right edge */

/* Entrance */
.pt-body  { animation: pt-body-shift var(--pt-dur) var(--pt-ease) both; }
.pt-panel { animation: pt-panel-in  var(--pt-dur) var(--pt-ease) both; }

/* Exit (back arrow) — the same motion played in reverse: form slides back out right, body
   returns to centred. JS navigates home on animationend. */
.pt-body-exit  { animation: pt-body-shift var(--pt-dur) var(--pt-ease) reverse both; }
.pt-panel-exit { animation: pt-panel-in  var(--pt-dur) var(--pt-ease) reverse both; }

@keyframes pt-body-shift { from { transform: translateX(234px); } to { transform: translateX(0); } }
@keyframes pt-panel-in   { from { transform: translateX(100%);  } to { transform: translateX(0); } }

/* Stacked layout (≤900px): the form is full-width below the body — skip the sideways push. */
@media (max-width: 900px) { .pt-body, .pt-body-exit { animation: none; } }

@media (prefers-reduced-motion: reduce) {
  .pt-body, .pt-panel, .pt-body-exit, .pt-panel-exit { animation: none; }
}