/* Brand loading (splash) screen.
 *
 * XAF's SplashScreenComponent (DevExpress.ExpressApp.Blazor.Components) renders a fixed chrome
 * that we cannot template from _Host.cshtml without replacing the whole component:
 *
 *   #applicationLoadingPanel.loading-items-center.loading-font
 *     div.loading-items-center                          full-screen flex centre
 *       div.loading.loading-items-center                140x140 stage
 *         div.loading-border                            static grey ring
 *         div.loading-floated-circle.loading-border     rotating accent arc
 *         div#loadingBackground.loading-image-wrapper   120px accent-filled disc
 *           img.loading-image                           46x30 slot
 *       div.loading-caption
 *
 * That chrome squashes the 8:1 OptiNavigator wordmark into a 46x30 slot inside a solid indigo
 * disc. The artwork in images/loading/ animates itself instead, so the DX rings and disc are
 * removed and the <img> is handed the whole stage.
 *
 * Note the artwork is loaded as <img src="...svg">, which renders the SVG as an isolated
 * document: its own <style> block runs (that is what animates it), but it cannot see this
 * stylesheet, the app's webfont, or the XAF theme cookie. Anything the mark needs — outlines,
 * palette, dark-mode variant — has to live inside the SVG file itself. Sizing is the one thing
 * we control from here.
 *
 * Every selector is anchored on #applicationLoadingPanel. The DX rules live in
 * _content/DevExpress.ExpressApp.Blazor/styles.css, which _Host.cshtml links AFTER this file,
 * so class-only selectors here would lose on source order; the ID lifts specificity above
 * anything DX ships, and !important is matched only where DX itself uses it.
 *
 * Linked from <head>, not <body>, on purpose: the splash markup is emitted before the body
 * stylesheets, so linking it with the others would paint one frame of unstyled DX chrome
 * (giant wordmark crushed into the indigo disc) before this file lands.
 */

/* The DX spinner rings — the artwork carries its own motion. */
#applicationLoadingPanel .loading-border,
#applicationLoadingPanel .loading-floated-circle {
    display: none;
}

/* Stage was a fixed 140x140 sized for the rings; let it size to the artwork. */
#applicationLoadingPanel .loading {
    width: auto;
    height: auto;
}

/* #loadingBackground also carries .loading-items-center, which pins it to
   position:absolute / 100vw / 100vh. Drop the disc and let it hug the image. */
#applicationLoadingPanel #loadingBackground.loading-image-wrapper {
    position: relative;
    width: auto !important;
    height: auto !important;
    border-radius: 0;
    background-color: transparent !important;
}

/* Width only — height follows each variant's intrinsic viewBox ratio, which differs
   between the stacked marks (1200x560) and the wordmark-only ones (1400x300). */
#applicationLoadingPanel .loading-image {
    width: min(460px, 62vw);
    height: auto;
    animation: brand-splash-in .45s cubic-bezier(.2, .7, .3, 1) both;
}

@keyframes brand-splash-in {
    from { opacity: 0; transform: translateY(8px) }
    to   { opacity: 1; transform: none }
}

@media (prefers-reduced-motion: reduce) {
    #applicationLoadingPanel .loading-image {
        animation: none;
    }
}
