/* Boot splash (#5005), after Enable App's (AppMain/tenant/Enable/docs/Enable.App.Splash.md). Every selector, custom
   property and keyframe is scoped to #splash or eas-prefixed so nothing here touches app.css. The mark is the house
   from the app icon, drawn inline in parts so the body rises, the roof settles onto it and the chimney pops last. */

#splash {
    --eas-bg: #060910;
    --eas-bg-lift: #0a1426;
    --eas-word: #ffffff;
    --eas-ease-out: cubic-bezier(.16, 1, .3, 1);
    --eas-ease-pop: cubic-bezier(.2, 1.3, .4, 1);
    --eas-ease-in: cubic-bezier(.6, 0, .85, .3);
    --eas-exit: 760ms;
    --eas-mark: clamp(134px, 28.4vmin, 184px);

    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: grid;
    place-items: center;
    padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
    background: radial-gradient(120% 90% at 50% 40%, var(--eas-bg-lift) 0%, var(--eas-bg) 64%);
}

@media (prefers-color-scheme: light) {
    #splash { --eas-bg: #ffffff; --eas-bg-lift: #e7f3fd; --eas-word: #000000; }
}

#splash[hidden] { display: none; }

#splash .eas-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

#splash .eas-stage { display: grid; justify-items: center; gap: clamp(20px, 4.6vmin, 32px); transform-origin: 50% 42%; will-change: transform, opacity, filter; }
#splash.is-exiting .eas-stage { animation: easZoomThrough var(--eas-exit) var(--eas-ease-in) forwards; }
@keyframes easZoomThrough { to { transform: scale(6.4); filter: blur(16px); opacity: 0; } }

#splash .eas-markwrap { position: relative; display: grid; place-items: center; }
#splash .eas-halo {
    position: absolute; left: 50%; top: 50%; width: min(74vmin, 470px); height: min(74vmin, 470px); border-radius: 50%;
    translate: -50% calc(-50% - 30px); filter: blur(18px); opacity: 0; pointer-events: none;
    background: radial-gradient(circle, rgba(0, 180, 255, .30), rgba(10, 47, 196, .20) 42%, transparent 68%);
}
#splash.is-playing .eas-halo { animation: easHaloIn 1.4s var(--eas-ease-out) forwards, easHaloBreathe 4.2s 1.4s ease-in-out infinite; }
@keyframes easHaloIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
@keyframes easHaloBreathe { 50% { opacity: .72; } }

#splash .eas-mark { width: var(--eas-mark); height: var(--eas-mark); display: block; }
#splash.is-playing .eas-mark { animation: easMarkZoom 1s var(--eas-ease-out) forwards; }
@keyframes easMarkZoom {
    0% { opacity: 0; transform: scale(2.6); filter: blur(20px); }
    55% { opacity: 1; }
    100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

#splash .eas-house { fill: #fff; }
#splash .eas-body, #splash .eas-roof, #splash .eas-chimney { opacity: 0; transform-box: fill-box; }
#splash .eas-body { transform-origin: 50% 100%; transform: scaleY(.1); }
#splash .eas-roof { transform-origin: 50% 0; transform: translateY(-14px); }
#splash .eas-chimney { transform-origin: 50% 100%; transform: scale(.2); }
#splash.is-playing .eas-body { animation: easRise 620ms var(--eas-ease-out) 340ms forwards; }
#splash.is-playing .eas-roof { animation: easRise 700ms var(--eas-ease-pop) 640ms forwards; }
#splash.is-playing .eas-chimney { animation: easRise 520ms var(--eas-ease-pop) 980ms forwards; }
@keyframes easRise { to { opacity: 1; transform: none; } }

#splash .eas-sheen rect { opacity: 0; }
#splash.is-playing .eas-sheen rect { animation: easSheen 1s ease-out 1.2s 1; }
@keyframes easSheen {
    0% { transform: translateX(-70px) skewX(-18deg); opacity: 0; }
    30% { opacity: .2; }
    100% { transform: translateX(150px) skewX(-18deg); opacity: 0; }
}

#splash .eas-lock { display: grid; justify-items: start; gap: .38em; }
#splash .eas-word { display: block; width: calc(var(--eas-mark) * 1.066); height: auto; }
#splash .eas-word path { fill: var(--eas-word); opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; transform: translateY(3px); }
#splash.is-playing .eas-word path { animation: easRiseIn .72s var(--eas-ease-out) forwards; animation-delay: calc(720ms + var(--i) * 62ms); }
#splash .eas-homes { color: var(--eas-word); font: 600 calc(var(--eas-mark) * .16)/1 system-ui, -apple-system, "Segoe UI", sans-serif; opacity: 0; transform: translateY(3px); }
#splash.is-playing .eas-homes { animation: easRiseIn .72s var(--eas-ease-out) 1.15s forwards; }
@keyframes easRiseIn { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    @keyframes easMarkZoom { from { opacity: 0; } to { opacity: 1; } }
    @keyframes easZoomThrough { to { opacity: 0; } }
    @keyframes easRise { to { opacity: 1; transform: none; } }
    @keyframes easRiseIn { to { opacity: 1; transform: none; } }
    @keyframes easHaloIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes easHaloBreathe { 50% { opacity: 1; } }
    #splash.is-playing .eas-sheen rect { animation: none; }
    #splash.is-playing .eas-mark { animation-duration: .4s; }
    #splash.is-playing .eas-body, #splash.is-playing .eas-roof, #splash.is-playing .eas-chimney { animation-duration: .3s; animation-delay: 0ms; }
    #splash.is-playing .eas-word path, #splash.is-playing .eas-homes { animation-duration: .3s; animation-delay: calc(var(--i, 6) * 30ms); }
}