/* Boot splash (#3716). Every selector and custom property is scoped to #splash and every
   keyframe is eas-prefixed: this stylesheet loads alongside Bootstrap and the app's own
   theme, and the source artwork used names like .app, .btn and --bg that would collide.
   Artwork paths come from white-text-logo.svg — the disc knockout is split so the slash and
   the two brackets animate separately, and the wordmark is split into its six letters. */

#splash {
    --eas-1: #2d388a;
    --eas-2: #00aeef;
    --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;
    /* Above everything, deliberately: the FAB also sits at 9999 and renders later in the
       document, so an equal value let it float over the splash. Nothing should appear on
       top of the boot screen — it is only on screen for a moment, and it removes itself. */
    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%);
    transition: opacity var(--eas-exit) ease;
}

/* The light-mode lockup puts the wordmark in pure black; the disc gradient and its white
   knockout never change, which is how the mark is built. */
@media (prefers-color-scheme: light) {
    #splash {
        --eas-bg: #ffffff;
        --eas-bg-lift: #e7f3fd;
        --eas-word: #000000;
    }
}

/* The id selector outranks the user-agent [hidden] rule, so state it explicitly — the markup
   ships hidden and the boot script unhides it only on the days the splash is due, removing
   the element outright otherwise. */
#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);
    background: radial-gradient(circle, rgba(0, 174, 239, .30), rgba(45, 56, 138, .20) 42%, transparent 68%);
    filter: blur(18px);
    opacity: 0;
    pointer-events: none;
}

#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); }
}

/* The </> assembles: the slash extends along its own axis, the brackets open around it. */
#splash .eas-glyph { fill: #fff; }
#splash .eas-slash { opacity: 0; transform-box: fill-box; transform-origin: 6% 96%; transform: scale(.04); }
#splash.is-playing .eas-slash { animation: easSlashOut 640ms var(--eas-ease-out) 340ms forwards; }
@keyframes easSlashOut { to { opacity: 1; transform: scale(1); } }

#splash .eas-brk { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
#splash .eas-brk--l { transform: translateX(17px) scale(.88); }
#splash .eas-brk--r { transform: translateX(-17px) scale(.88); }
#splash.is-playing .eas-brk { animation: easBrkOpen 760ms var(--eas-ease-pop) forwards; }
#splash.is-playing .eas-brk--l { animation-delay: 700ms; }
#splash.is-playing .eas-brk--r { animation-delay: 760ms; }
@keyframes easBrkOpen { to { opacity: 1; transform: translateX(0) scale(1); } }

/* One light pass across the disc. */
#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); }
@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 easSlashOut { to { opacity: 1; transform: none; } }
    @keyframes easBrkOpen { 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-slash,
    #splash.is-playing .eas-brk { animation-duration: .3s; animation-delay: 0ms; }
    #splash.is-playing .eas-word path { animation-duration: .3s; animation-delay: calc(var(--i) * 30ms); }
}