/*
  Splash de arranque (antes de Angular). Geometría gemela de
  imperium-sic-animated-logo. Tokens con fallback: ThemeService
  todavía no pintó --imperium-* en este momento.
*/
.preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    margin: 0;
    opacity: 1;
    background: var(--imperium-surface, color-mix(in srgb, black 82%, white));
    color: var(--imperium-primary, color-mix(in srgb, white 68%, black));
}

.boot-crown {
    --boot-crown-duration: 4s;
    display: block;
    width: min(38vw, 14rem);
    height: auto;
    overflow: visible;
    aspect-ratio: 824 / 900;
}

.boot-crown__fill {
    fill: currentColor;
    opacity: 0;
    animation: boot-crown-fill-reveal var(--boot-crown-duration)
        cubic-bezier(0, 0, 0, 1) infinite;
}

.boot-crown__line {
    fill: none;
    stroke: currentColor;
    stroke-width: 5.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* Dash en espacio de usuario (pathLength=1). Sin non-scaling-stroke. */
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: 0;
    animation:
        boot-crown-draw var(--boot-crown-duration) cubic-bezier(0, 0, 0, 1)
            forwards infinite,
        boot-crown-opacity var(--boot-crown-duration) ease-in-out forwards
            infinite;
}

.boot-crown__stage {
    opacity: 1;
    animation: boot-crown-stage-fade var(--boot-crown-duration) ease-in-out
        infinite;
}

@keyframes boot-crown-draw {
    0% {
        stroke-dashoffset: 1;
    }

    /* Trazo cerrado; se sostiene un beat (~400ms de 4s) antes del relleno. */
    44%,
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes boot-crown-opacity {
    0% {
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    54% {
        opacity: 1;
    }

    66%,
    100% {
        opacity: 0;
    }
}

@keyframes boot-crown-fill-reveal {
    0%,
    54% {
        opacity: 0;
    }

    66% {
        opacity: 0.55;
    }

    76% {
        opacity: 0.88;
    }

    84%,
    92% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@keyframes boot-crown-stage-fade {
    0%,
    88% {
        opacity: 1;
    }

    96%,
    100% {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .boot-crown__stage,
    .boot-crown__fill,
    .boot-crown__line {
        animation: none;
    }

    .boot-crown__stage,
    .boot-crown__fill {
        opacity: 1;
    }

    .boot-crown__line {
        opacity: 0;
        stroke-dashoffset: 0;
    }
}

/* Low-power mata @keyframes vía styles.css; dejar la corona llena, no a medias. */
body.imperium-low-power-mode .boot-crown__stage,
body.imperium-low-power-mode .boot-crown__fill {
    opacity: 1;
}

body.imperium-low-power-mode .boot-crown__line {
    opacity: 0;
    stroke-dashoffset: 0;
}