/* =====================================================
   Akcadmia — wwwroot/css/componentes/franja-marca.css
   Franja de apertura de las páginas públicas
   ===================================================== */

/* La superficie de marca con la que abren las páginas públicas: lavanda con una trama
   de puntos en claro e índigo profundo en oscuro, la misma del panel del registro y del
   inicio de sesión, con dos manchas de luz que derivan despacio por detrás del texto y
   una entrada escalonada de lo que lleva dentro.

   El movimiento usa las animaciones globales de componentes/acceso.css, así que la
   página que pinte la franja carga también ese archivo; sin él, la franja se ve igual
   pero quieta.

   Marcado: la franja en .edu-franja-marca, su contenido en .edu-franja-marca__contenido
   (sus hijos directos son los que entran escalonados) y el título con
   .edu-franja-marca__titulo. */
.edu-franja-marca {
    --edu-franja-titulo: var(--edu-oscuro);
    --edu-franja-texto: var(--edu-texto);
    --edu-franja-mancha-1: rgba(165, 180, 252, .4);
    --edu-franja-mancha-2: rgba(163, 230, 53, .22);
    --edu-franja-mezcla: normal;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--edu-franja-texto);
    background-color: #EDEBFD;
    background-image: radial-gradient(rgba(79, 70, 229, .09) 1px, transparent 1.5px), linear-gradient(150deg, #E3E1FC 0%, #EDEBFD 45%, #F7F7FF 100%);
    background-size: 1.375rem 1.375rem, auto;
}

    /* Dos clases de especificidad para ganar al color que sitio.css y acadmia.css dan a
       todos los encabezados, el del tema oscuro incluido. */
    .edu-franja-marca .edu-franja-marca__titulo {
        color: var(--edu-franja-titulo);
    }

    /* Las manchas, con z-index negativo dentro del apilamiento que aísla la franja:
       quedan detrás del contenido y no detrás de la página. */
    .edu-franja-marca::before,
    .edu-franja-marca::after {
        content: "";
        position: absolute;
        z-index: -1;
        border-radius: 50%;
        mix-blend-mode: var(--edu-franja-mezcla);
        pointer-events: none;
    }

    .edu-franja-marca::before {
        top: -10rem;
        right: -8rem;
        width: 24rem;
        height: 24rem;
        background: radial-gradient(circle, var(--edu-franja-mancha-1), transparent 68%);
        animation: edu-acceso-deriva 16s ease-in-out infinite alternate;
    }

    .edu-franja-marca::after {
        bottom: -12rem;
        left: -9rem;
        width: 28rem;
        height: 28rem;
        background: radial-gradient(circle, var(--edu-franja-mancha-2), transparent 68%);
        animation: edu-acceso-deriva 20s ease-in-out -7s infinite alternate-reverse;
    }

/* Entrada escalonada al cargar, un hijo detrás de otro. backwards y no both: al
   terminar, la animación suelta las propiedades y no queda nada fijado encima de los
   estilos normales. */
.edu-franja-marca__contenido > * {
    animation: edu-acceso-aparece .6s cubic-bezier(.2, .7, .2, 1) backwards;
}

.edu-franja-marca__contenido > :nth-child(2) {
    animation-delay: .1s;
}

.edu-franja-marca__contenido > :nth-child(3) {
    animation-delay: .2s;
}

.edu-franja-marca__contenido > :nth-child(4) {
    animation-delay: .3s;
}

/* Mientras la franja es estrecha, el texto la ocupa casi entera y las manchas pasarían
   por debajo de las letras restándoles contraste; ahí se quedan fuera. */
@media (max-width: 767.98px) {
    .edu-franja-marca::before,
    .edu-franja-marca::after {
        display: none;
    }
}

/* Tema oscuro: el índigo profundo del panel del registro, texto claro y manchas que se
   suman a la luz en lugar de teñir. */
[data-tema="oscuro"] .edu-franja-marca {
    --edu-franja-titulo: #FFFFFF;
    --edu-franja-texto: #E0E7FF;
    --edu-franja-mancha-1: rgba(237, 235, 253, .24);
    --edu-franja-mancha-2: rgba(129, 140, 248, .5);
    --edu-franja-mezcla: screen;
    background-color: #312E81;
    background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.5px), linear-gradient(150deg, #1E1B4B 0%, #312E81 60%, #3730A3 100%);
}

/* Con movimiento reducido la franja queda quieta y su contenido en su sitio desde el
   principio. */
@media (prefers-reduced-motion: reduce) {
    .edu-franja-marca::before,
    .edu-franja-marca::after,
    .edu-franja-marca__contenido > * {
        animation: none;
    }
}