/*
    Korzite boot splash (#3746), built to Enable.App.Splash.

    Every selector and custom property is scoped to #splash and every keyframe is kz-prefixed. The
    artwork arrived as a standalone page using .app, .btn, .word and --bg on :root, which would
    fight Bootstrap, MDB and theme.css.

    Follows the app's theme (data-theme on <html>, written by js/env.js before first paint), not
    prefers-color-scheme, for the same reason theme.css does not: dark is opt-in here.
*/

#splash {
    --kz-bg: #efeeec;
    --kz-bg-lift: #ffffff;
    --kz-ease-out: cubic-bezier(.16, 1, .3, 1);
    --kz-ease-pop: cubic-bezier(.2, 1.3, .4, 1);
    --kz-ease-in: cubic-bezier(.6, 0, .85, .3);
    --kz-exit: 720ms;   /* keep in step with EXIT_MS in js/splash.js */
    --kz-plate: clamp(240px, 76vw, 430px);

    position: fixed;
    inset: 0;
    /* The maximum, not 9999: anything inside #app on an equal z-index comes later in the document
       and would float over the splash. */
    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(115% 85% at 50% 42%, var(--kz-bg-lift) 0%, var(--kz-bg) 68%);
}

:root[data-theme="dark"] #splash {
    --kz-bg: #141516;
    --kz-bg-lift: #212325;
}

/* An id selector outranks the user-agent [hidden] rule, so restore it. */
#splash[hidden] { display: none; }

#splash .kz-stage { transform-origin: 50% 50%; will-change: transform, opacity, filter; }
#splash.is-exiting .kz-stage { animation: kzZoomThrough var(--kz-exit) var(--kz-ease-in) forwards; }
@keyframes kzZoomThrough { to { transform: scale(6); filter: blur(14px); opacity: 0; } }

#splash .kz-mark { display: block; width: var(--kz-plate); height: auto; overflow: visible; opacity: 0; }
#splash.is-playing .kz-mark { animation: kzMarkZoom 950ms var(--kz-ease-pop) forwards; }
@keyframes kzMarkZoom {
    0% { opacity: 0; transform: scale(2.4); filter: blur(20px); }
    45% { opacity: 1; }
    100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

/* The two slit wedges snap back into the plate. */
#splash .kz-wedge { opacity: 0; }
#splash .kz-wedge--a { transform: translate(-52px, -34px); }
#splash .kz-wedge--b { transform: translate(52px, 34px); }
#splash.is-playing .kz-wedge { animation: kzWedgeIn 780ms var(--kz-ease-pop) forwards; }
#splash.is-playing .kz-wedge--a { animation-delay: 400ms; }
#splash.is-playing .kz-wedge--b { animation-delay: 460ms; }
@keyframes kzWedgeIn { to { opacity: 1; transform: none; } }

/* The wordmark lays down left to right, like a pass across the plate. */
#splash .kz-word path { opacity: 0; transform-box: fill-box; transform-origin: 0% 50%; transform: translateX(-16px); }
#splash.is-playing .kz-word path { animation: kzLetterIn .62s var(--kz-ease-out) forwards; animation-delay: calc(700ms + var(--i) * 52ms); }
@keyframes kzLetterIn { to { opacity: 1; transform: none; } }

/* One light pass across the plate. */
#splash .kz-sheen rect { opacity: 0; }
#splash.is-playing .kz-sheen rect { animation: kzSheen 1.05s ease-out 1.15s 1; }
@keyframes kzSheen {
    0% { transform: translateX(-200px) skewX(-20deg); opacity: 0; }
    30% { opacity: .17; }
    100% { transform: translateX(760px) skewX(-20deg); opacity: 0; }
}

/* Decorative, so reduced motion cross-fades instead. Redefining the keyframes keeps the timing
   structure identical. */
@media (prefers-reduced-motion: reduce) {
    @keyframes kzMarkZoom { from { opacity: 0; } to { opacity: 1; } }
    @keyframes kzZoomThrough { to { opacity: 0; } }
    #splash .kz-wedge { transform: none; }
    #splash .kz-word path { transform: none; }
    #splash.is-playing .kz-sheen rect { animation: none; }
    #splash.is-playing .kz-mark { animation-duration: .4s; }
    #splash.is-playing .kz-wedge { animation-duration: .3s; animation-delay: 0ms; }
    #splash.is-playing .kz-word path { animation-duration: .3s; animation-delay: calc(var(--i) * 26ms); }
}