/* GLICO splash screen shown while the Blazor circuit connects.
   Markup lives in Pages/_Host.cshtml.

   The white background is deliberate: images/CompanyLogo.svg is a PNG with an
   opaque white surround (no transparent pixels at all), which read as a sticker
   on DevExpress's blue circle. On white it disappears, so the asset needs no
   editing and stays identical to the one the predefined reports embed. */

#glico-splash {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    transition: opacity .35s ease;
}

#glico-splash.glico-splash--done {
    opacity: 0;
    pointer-events: none;
}

.glico-splash__inner {
    text-align: center;
    padding: 24px;
    max-width: 90vw;
}

.glico-splash__logo {
    width: 300px;
    max-width: 70vw;
    height: auto;
    display: block;
    margin: 0 auto 28px;
}

.glico-splash__title {
    font-family: system-ui, "Segoe UI", Roboto, sans-serif;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: #1f2933;
    margin-bottom: 20px;
}

/* Shown only outside Production, so nobody mistakes UAT for the live system. */
.glico-splash__env {
    display: inline-block;
    margin-bottom: 34px;
    font-family: system-ui, "Segoe UI", Roboto, sans-serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .09em;
    color: #8a5300;
    background: #fff3d6;
    border: 1px solid #f0cf8a;
    border-radius: 999px;
    padding: 3px 12px;
}

.glico-splash__bar {
    width: 220px;
    max-width: 60vw;
    height: 3px;
    margin: 0 auto;
    background: #ececec;
    border-radius: 999px;
    overflow: hidden;
}

.glico-splash__bar span {
    display: block;
    width: 40%;
    height: 100%;
    border-radius: 999px;
    background: #E61D30; /* measured from the logo artwork: 14.8% of CompanyLogo.svg */
    animation: glico-splash-slide 1.15s ease-in-out infinite;
}

@keyframes glico-splash-slide {
    0%   { transform: translateX(-100%); }
    /* 250%, not more: the segment is 40% of the track, so 250% is exactly the
       point it clears the right edge. Overshooting leaves the track looking empty
       for part of every cycle. */
    100% { transform: translateX(250%); }
}

@media (prefers-reduced-motion: reduce) {
    .glico-splash__bar span { animation: none; width: 100%; }
    #glico-splash { transition: none; }
}

/* The DevExpress SplashScreen component stays mounted - it is very likely what
   reveals <app> once the circuit connects - but is never shown. */
.glico-splash__dx {
    display: none !important;
}