/* Pantalla de carga mientras arranca Blazor WebAssembly (index.html).
   Se pinta antes de que exista ningún componente, así que es HTML propio con clases app-boot-*.
   Todo sale del tema (var(--…)): cambia sola con claro/oscuro y con otro tema de tweakcn.
   Va en su propio fichero porque las animaciones (@keyframes) no son maquetación de app.css.
   Blazor sustituye todo el contenido de #app al arrancar, así que nada de esto queda después. */

.app-boot {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 1.5rem 1rem;
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
    text-align: center;
    animation: app-boot-in 400ms ease-out both;
}

/* La marca: una «E» que se ensambla pieza a pieza, como el icono de la aplicación. */
.app-boot-mark {
    position: relative;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: calc(var(--radius) * 3);
    background: color-mix(in oklab, var(--primary) 10%, var(--background));
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--primary) 18%, transparent);
}

.app-boot-piece {
    position: absolute;
    left: 1.25rem;
    border-radius: calc(var(--radius) * 0.5);
    background: var(--primary);
}

.app-boot-spine {
    top: 1.125rem;
    width: 0.625rem;
    height: 2.25rem;
    animation: app-boot-drop 2.4s cubic-bezier(0.3, 0.7, 0.3, 1) infinite;
}

.app-boot-bar {
    height: 0.5rem;
    animation: app-boot-slide 2.4s cubic-bezier(0.3, 0.7, 0.3, 1) infinite;
}

.app-boot-bar-1 {
    top: 1.125rem;
    width: 2rem;
    animation-delay: 0.15s;
}

.app-boot-bar-2 {
    top: 2rem;
    width: 1.5rem;
    animation-delay: 0.3s;
}

.app-boot-bar-3 {
    top: 2.875rem;
    width: 2rem;
    animation-delay: 0.45s;
}

.app-boot-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.app-boot-name {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.app-boot-tagline {
    margin: 0;
    max-width: 22rem;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--muted-foreground);
}

/* Progreso real de la descarga: Blazor pone --blazor-load-percentage y --blazor-load-percentage-text en <html>. */
.app-boot-progress {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    width: min(18rem, 100%);
}

.app-boot-track {
    position: relative;
    height: 0.25rem;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--muted);
}

.app-boot-fill {
    height: 100%;
    width: var(--blazor-load-percentage, 0%);
    min-width: 0.75rem;
    border-radius: inherit;
    background: var(--primary);
    transition: width 200ms ease-out;
}

/* Brillo que recorre la barra: indica que sigue trabajando aunque el porcentaje se pare (al iniciar el runtime). */
.app-boot-track::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 40%;
    background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--background) 45%, transparent), transparent);
    animation: app-boot-shine 1.6s ease-in-out infinite;
}

.app-boot-status {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

.app-boot-percent {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.app-boot-percent::after {
    content: var(--blazor-load-percentage-text, "");
}

/* Si tarda (primera visita o red lenta), se explica por qué; aparece sola a los 6 s. */
.app-boot-hint {
    margin: 0;
    max-width: 22rem;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--muted-foreground);
    opacity: 0;
    animation: app-boot-in 600ms ease-out 6s forwards;
}

/* Más aire en pantallas grandes (portátil y 24"). */
@media (min-width: 1280px) {
    .app-boot {
        gap: 2.5rem;
    }

    .app-boot-progress {
        width: 20rem;
    }
}

@keyframes app-boot-in {
    from {
        opacity: 0;
        transform: translateY(0.25rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes app-boot-drop {
    0% {
        opacity: 0;
        transform: translateY(-0.75rem);
    }

    15%, 80% {
        opacity: 1;
        transform: none;
    }

    100% {
        opacity: 0;
        transform: none;
    }
}

@keyframes app-boot-slide {
    0% {
        opacity: 0;
        transform: translateX(1rem);
    }

    18%, 80% {
        opacity: 1;
        transform: none;
    }

    100% {
        opacity: 0;
        transform: none;
    }
}

@keyframes app-boot-shine {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(250%);
    }
}

/* Sin movimiento si el sistema lo pide: la «E» queda montada y la barra solo avanza. */
@media (prefers-reduced-motion: reduce) {
    .app-boot,
    .app-boot-piece {
        animation: none;
    }

    .app-boot-track::after {
        display: none;
    }
}