@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
/* R95: a frame-exact copy of the Asli/Elementor AJAX transition (theme js: AJAXAnimations.animateCurtains + framework.js
   animateCurtain), timing 1 s expo.inOut (app.options.ajax: transitionDuration 1, transitionEase expo.inOut):
   - old page: moves up 10vh and fades out (Asli fades the old content to the page colour),
   - new page: starts 10vh lower and settles at 0, clipped by Asli's curtain: a dome that grows from the bottom edge
     (scaleY 0 -> 1.01, origin centre-bottom) while its arch morphs from "sides halfway down" to flat.
   The script below builds those frames with the same maths (expo.inOut, same path points) once the transition is ready. */
::view-transition{background:var(--pxv-vt-bg,#f9f7f3)}
::view-transition-group(root){animation:none}
::view-transition-image-pair(root){isolation:auto}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){clip-path:inset(100% 0 0 0)}
/* header: like Asli's persistent header it stays perfectly still above the curtain. The old page's bar (pxv-hdr-o) and the new
   page's bar (pxv-hdr-n) are separate layers, each at its own position (headers can differ a few px between pages); the old bar stays
   until the curtain has landed, then the new one takes over in one frame (never seen doubled). Floating button: same. */
::view-transition-group(pxv-hdr-o),::view-transition-group(pxv-hdr-n),::view-transition-group(pxv-fab-o),::view-transition-group(pxv-fab-n){animation:none}
::view-transition-old(pxv-hdr-o),::view-transition-old(pxv-fab-o){animation:pxv-bvt-hdr-out 1s linear both}
::view-transition-new(pxv-hdr-n),::view-transition-new(pxv-fab-n){animation:pxv-bvt-hdr-in 1s linear both}
@keyframes pxv-bvt-hdr-out{0%,99%{opacity:1}100%{opacity:0}}
@keyframes pxv-bvt-hdr-in{0%,99%{opacity:0}100%{opacity:1}}
/* R94/R95 click feedback (Asli shows a loading cursor while the next page loads): the glass cursor becomes a loading ring,
   the normal cursor becomes "progress" where the glass one is off. Nothing else changes on the old page. */
html.pxv-leaving.pxv-nocur .pxv-dot span{opacity:1!important;transform:scale(.6)!important;position:relative}
html.pxv-leaving.pxv-nocur .pxv-dot span::after{content:"";position:absolute;inset:9px;border-radius:50%;border:2.5px solid rgba(29,29,31,.16);border-top-color:#1d1d1f;animation:pxv-bvt-spin .75s linear infinite}
html.pxv-leaving.pxv-nocur .pxv-dot span>*{opacity:0}
html.pxv-leaving:not(.pxv-nocur),html.pxv-leaving:not(.pxv-nocur) *{cursor:progress!important}
@keyframes pxv-bvt-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){html.pxv-leaving.pxv-nocur .pxv-dot span::after{animation-duration:2s}}