/* Static initial-response backdrop: it does not wait for the interactive server circuit. */
html[data-login-backdrop] { --login-wave-display:contents; --login-wave-veil:5%; }
html[data-login-backdrop] body { isolation:isolate; }
.login-wave { display:var(--login-wave-display,none); }
.login-wave-clock { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }
.login-wave-image { position:fixed; z-index:-1; pointer-events:none; inset:-24px; animation:login-wave-breathe var(--login-wave-period,18s) ease-in-out infinite; animation-delay:calc(var(--login-wave-period,18s) / -4); background-color:var(--page); background-image:linear-gradient(color-mix(in srgb,var(--page) var(--login-wave-veil,5%),transparent),color-mix(in srgb,var(--page) var(--login-wave-veil,5%),transparent)),linear-gradient(135deg,var(--brand-primary),var(--brand-identity-accent)),url('/images/bg/bg-default.jpg'); background-blend-mode:normal,color,luminosity; background-size:cover; background-position:center; background-repeat:no-repeat; filter:none; }
.login-wave[data-motion="ripple"] .login-wave-image,.login-wave[data-motion="paused"] .login-wave-image { filter:var(--login-ripple-filter); }
.login-wave[data-motion="paused"] .login-wave-image { animation-play-state:paused; }
.login-wave[data-motion="still"] .login-wave-image { filter:none !important; animation:none; transform:none; }
@keyframes login-wave-breathe {
    0%,100% { transform:translate3d(-4px,8px,0) scale(1.01); }
    50% { transform:translate3d(4px,-8px,0) scale(1.018); }
}
@media (prefers-reduced-motion:reduce) { .login-wave-image { filter:none !important; animation:none; transform:none; } }
.login-wave-toggle { position:fixed; z-index:1; bottom:1rem; right:1rem; border:0; border-radius:.375rem; width:2.75rem; height:2.75rem; background:transparent; color:var(--muted); font-size:1rem; opacity:.65; transition:opacity .15s ease; display:grid; place-items:center; }
.login-wave-toggle:hover,.login-wave-toggle:focus-visible { opacity:1; }
.login-wave-toggle:focus-visible { outline:2px solid var(--brand-action); outline-offset:3px; }
@media (prefers-reduced-motion:reduce) { .login-wave-toggle { display:none; } }