/* ============================================================
   loading.css — Simple boot screen styles
   Scoped to the #app element; all rules are replaced when
   Blazor mounts and removes the loading markup.
   ============================================================ */

body.app-loading *, body.app-loading *::before, body.app-loading *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --teal:    #1abc9c;
    --teal-d:  #0e8f73;
    --white:   #e8eef2;
}

body.app-loading {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-family: 'Aoboshi One', sans-serif;
    background-image: url('../resources/thunder.gif');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ── Content wrapper ── */
.content {
    position: relative;
    display: flex; flex-direction: column;
    align-items: center; gap: 32px;
    width: min(400px, 92vw);
}

/* ── Logo ── */
.loading-logo {
    width: 350px;
    max-width: 100%;
    filter: drop-shadow(0 4px 24px rgba(0,0,0,.6));
}

/* ── Progress bar ── */
.progress-wrap  { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.progress-track { width: 100%; height: 4px; background: rgba(255,255,255,.15); border-radius: 2px; overflow: hidden; }
.progress-fill  {
    height: 100%; width: 0%;
    background: linear-gradient(to right, var(--teal-d), var(--teal), #7fffd4);
    box-shadow: 0 0 10px var(--teal);
    animation: pfill 12s linear infinite;
    border-radius: 2px;
}
@keyframes pfill { 0% { width: 0%; } 100% { width: 100%; } }
.progress-row   { display: flex; justify-content: space-between; align-items: center; }
.progress-label { font-size: .72rem; font-weight: 700; color: rgba(255,255,255,.6); letter-spacing: .2em; text-transform: uppercase; }
.progress-pct   { font-family: 'Aoboshi One', sans-serif; font-size: .85rem; color: var(--teal); letter-spacing: .1em; }