/*
 * El logotipo de SAGIT: el emblema circular con la constelación de Sagitario
 * y el wordmark S·A·G·I·T.
 *
 * Se carga sin condición en <head> (ver head.blade.php) porque el componente
 * vive tanto en el panel como en las pantallas públicas — antes esto era un
 * <style> inline con @once dentro del propio componente Blade, y las
 * pantallas públicas volvían a definir .logotipo__marca, .logotipo__lema,
 * etc. por su cuenta: dos copias del mismo estilo, una de ellas destinada a
 * desincronizarse.
 *
 * Los tokens de color (--sagit-*) siempre están presentes cuando esto carga:
 * los emite TenantBranding::tokens() o ::style() antes que este archivo.
 */

.logotipo {
    display: flex;
    align-items: center;
    gap: .46em;
    font-size: 1.25rem;
    line-height: 1;
}

.logotipo__emblema { width: 2em; height: 2em; flex: none; overflow: visible; }

.lg-halo { fill: url(#sagit-halo); }
.lg-anillo { stroke: var(--sagit-azul); stroke-width: 1.7; opacity: .55; }
/* El astil y sus derivados toman el degradado direccional del propio SVG. */
.lg-trazo path { stroke: url(#sagit-vector); stroke-width: 1.7; stroke-linecap: round; }
/* Todas las estrellas son blancas, incluida la punta: el azul queda para
   las líneas y el `IT`, que es donde el logo lo usa. La punta se
   distingue por tamaño, no por color. */
.lg-estrella circle,
.lg-punta { fill: var(--sagit-blanco); }

.logotipo__texto { display: grid; gap: .12em; }

/* Peso ligero y letras abiertas, como el original: en semibold el
   wordmark se veía macizo y perdía el aire del dibujo. */
.logotipo__marca {
    display: flex;
    align-items: center;
    margin: 0;
    font-size: 1em;
    font-weight: 300;
    letter-spacing: .04em;
    line-height: 1;
    color: var(--sagit-blanco);
}

.logotipo__marca b { font-weight: 300; color: var(--sagit-azul); }

/* Los separadores son elementos, no caracteres: así el punto mide y se
   centra exacto sin depender de cómo la fuente dibuje el interpunto. */
.logotipo__marca i {
    flex: none;
    width: .085em;
    height: .085em;
    margin-inline: .3em;
    border-radius: 50%;
    background: var(--sagit-azul);
}

.logotipo__lema {
    margin: 0;
    font-size: .27em;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: .005em;
    color: var(--sagit-blanco);
    opacity: .92;
}

/* ── Trazado ───────────────────────────────────────────────────────────── */

/* Una constelación es, literalmente, estrellas que alguien conectó: la
   animación dibuja eso. Anillo, después el astil de la cola a la punta,
   luego el travesaño, y las estrellas encendiéndose conforme la línea
   las alcanza. La punta remata al final. Sólo se activa con `.logotipo--
   animado` — en el acceso, que es el momento de llegada; en el panel, que
   se usa toda la jornada, el logo va quieto. */
@media (prefers-reduced-motion: no-preference) {
    .logotipo--animado .lg-halo { opacity: 0; animation: lg-aparecer .9s .35s ease-out forwards; }

    .logotipo--animado .lg-anillo,
    .logotipo--animado .lg-trazo path {
        stroke-dasharray: 100;
        stroke-dashoffset: 100;
        animation: lg-trazar .55s ease-out forwards;
    }

    .logotipo--animado .lg-trazo path:nth-child(1) { animation-duration: .5s; animation-delay: .3s; }
    .logotipo--animado .lg-trazo path:nth-child(2) { animation-duration: .3s; animation-delay: .68s; }
    .logotipo--animado .lg-trazo path:nth-child(3),
    .logotipo--animado .lg-trazo path:nth-child(4) { animation-duration: .25s; animation-delay: .72s; }

    .logotipo--animado .lg-estrella circle,
    .logotipo--animado .lg-punta {
        opacity: 0;
        transform-box: fill-box;
        transform-origin: center;
        animation: lg-encender .3s ease-out forwards;
    }

    /* El orden sigue el recorrido del trazo, no el del marcado. */
    .logotipo--animado .lg-estrella circle:nth-child(1) { animation-delay: .42s; }
    .logotipo--animado .lg-estrella circle:nth-child(2) { animation-delay: .62s; }
    .logotipo--animado .lg-estrella circle:nth-child(3) { animation-delay: .76s; }
    .logotipo--animado .lg-estrella circle:nth-child(4) { animation-delay: .8s; }
    .logotipo--animado .lg-estrella circle:nth-child(5) { animation-delay: .88s; }
    .logotipo--animado .lg-estrella circle:nth-child(6) { animation-delay: .92s; }
    .logotipo--animado .lg-punta { animation-delay: .96s; animation-duration: .38s; }
}

@keyframes lg-trazar { to { stroke-dashoffset: 0; } }
@keyframes lg-aparecer { to { opacity: 1; } }
@keyframes lg-encender {
    from { opacity: 0; scale: .4; }
    to { opacity: 1; scale: 1; }
}
