/* Customer page transitions: same frosted logo splash as the admin panel. */
/* ───────────── Logo splash between pages: frosted page + logo light sweep ───────────── */
.fx-splash{position:fixed;inset:0;z-index:400;display:grid;place-items:center;pointer-events:none;opacity:0;visibility:hidden;background:rgba(10,10,12,.34);-webkit-backdrop-filter:blur(0) saturate(1);backdrop-filter:blur(0) saturate(1)}
.fx-splash-logo{position:relative;display:grid;place-items:center;--w:clamp(96px,26vw,140px)}
.fx-splash-logo img{width:var(--w);height:auto;max-height:120px;object-fit:contain;filter:drop-shadow(0 10px 28px rgba(0,0,0,.55))}
/* light sweep clipped to the logo's own shape */
.fx-splash-logo::before{content:"";position:absolute;inset:0;-webkit-mask:var(--fx-logo) center/contain no-repeat;mask:var(--fx-logo) center/contain no-repeat;background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.32) 50%,transparent 62%) 160% 0/250% 100% no-repeat;mix-blend-mode:soft-light;opacity:0}
/* halo ring + soft orbit */
.fx-splash-logo::after{content:"";position:absolute;width:calc(var(--w) * 1.55);aspect-ratio:1;border-radius:50%;border:1.5px solid transparent;background:conic-gradient(from 0deg,transparent 0 72%,rgba(255,255,255,.28) 90%,transparent) border-box;-webkit-mask:linear-gradient(#000 0 0) padding-box exclude,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) padding-box exclude,linear-gradient(#000 0 0);opacity:0}
/* leaving: the current page frosts over, the logo materialises out of blur */
.fx-splash.on{visibility:visible;opacity:1;-webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25);transition:opacity .16s ease,backdrop-filter .26s ease,-webkit-backdrop-filter .26s ease}
.fx-splash.on .fx-splash-logo img{animation:fx-sp-in .42s cubic-bezier(.16,1,.3,1) both}
.fx-splash.on .fx-splash-logo::before{animation:fx-sp-shine .7s cubic-bezier(.4,0,.2,1) .12s both}
.fx-splash.on .fx-splash-logo::after{animation:fx-sp-orbit .9s cubic-bezier(.3,0,.2,1) .05s both}
@keyframes fx-sp-in{0%{opacity:0;transform:scale(.9);filter:blur(10px) drop-shadow(0 10px 28px rgba(0,0,0,0))}100%{opacity:1;transform:none;filter:blur(0) drop-shadow(0 10px 28px rgba(0,0,0,.55))}}
@keyframes fx-sp-shine{0%{opacity:1;background-position:160% 0}100%{opacity:1;background-position:-60% 0}}
@keyframes fx-sp-orbit{0%{opacity:0;transform:scale(.92) rotate(-60deg)}100%{opacity:.7;transform:scale(1) rotate(180deg)}}
/* arriving: the new page starts frosted, then the frost melts while the logo dissolves into light */
html.fx-splash-in .fx-splash{visibility:visible;opacity:1;-webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25)}
html.fx-splash-in .fx-splash-logo::after{opacity:.7;animation:fx-sp-spin 1.4s linear infinite}
@keyframes fx-sp-spin{to{transform:rotate(360deg)}}
.fx-splash.out{opacity:0!important;-webkit-backdrop-filter:blur(0) saturate(1)!important;backdrop-filter:blur(0) saturate(1)!important;transition:opacity .38s cubic-bezier(.4,0,.2,1) .06s,backdrop-filter .42s cubic-bezier(.4,0,.2,1),-webkit-backdrop-filter .42s cubic-bezier(.4,0,.2,1),visibility 0s .46s}
.fx-splash.out .fx-splash-logo img{animation:fx-sp-out .42s cubic-bezier(.3,0,.2,1) both}
.fx-splash.out .fx-splash-logo::after{animation:fx-sp-ring-out .42s ease-out both}
@keyframes fx-sp-out{0%{transform:none;opacity:1;filter:blur(0)}100%{transform:scale(1.06);opacity:0;filter:blur(8px)}}
@keyframes fx-sp-ring-out{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(1.25)}}
@media (prefers-reduced-motion:reduce){.fx-splash{display:none}}