/* AP Neural Web — Activación Neural */

.ap-logo-intro {
    position: fixed;
    inset: 0;
    z-index: 100000;

    display: grid;
    place-items: center;

    width: 100%;
    min-height: 100vh;
    min-height: 100svh;

    overflow: hidden;
    isolation: isolate;

    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(181, 32, 74, .14),
            transparent 28%
        ),
        radial-gradient(
            circle at 50% 52%,
            rgba(92, 13, 37, .11),
            transparent 46%
        ),
        #08090b;

    opacity: 1;
    visibility: visible;
}


/* Retícula */

.ap-logo-intro__grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(243,243,241,.022) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(243,243,241,.022) 1px,
            transparent 1px
        );

    background-size: 7rem 7rem;

    mask-image:
        radial-gradient(
            circle at center,
            #000 0 34%,
            transparent 74%
        );

    opacity: 0;
}


/* Escena */

.ap-logo-intro__scene {
    position: relative;
    z-index: 1;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: min(94vw, 64rem);

    min-height: 100vh;
    min-height: 100svh;

    padding: 2rem;
}


/*
 * CORE
 *
 * Logo, halo, órbitas y nodos comparten
 * exactamente el mismo centro.
 */

.ap-logo-intro__core {
    position: relative;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    width:
        clamp(
            20rem,
            42vw,
            31rem
        );

    aspect-ratio: 1;
}


/* Halo */

.ap-logo-intro__halo {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 108%;
    aspect-ratio: 1;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(181,32,74,.16),
            rgba(139,21,56,.055) 40%,
            transparent 70%
        );

    transform:
        translate(-50%, -50%)
        scale(.72);

    opacity: 0;
}


/* Logo */

.ap-logo-intro__mark {
    --logo-y: 1%;

    position: relative;
    z-index: 4;

    display: grid;
    place-items: center;

    width: 76%;
    aspect-ratio: 1;

    opacity: 0;

    transform:
        translateY(
            calc(
                var(--logo-y)
                + .45rem
            )
        )
        scale(.92);
}


.ap-logo-intro__logo {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    user-select: none;
    pointer-events: none;
}


/* Órbitas */

.ap-logo-intro__orbit {
    position: absolute;

    left: 50%;
    top: 50%;

    z-index: 2;

    aspect-ratio: 1;

    border-radius: 50%;

    pointer-events: none;

    opacity: 0;
}


.ap-logo-intro__orbit::before,
.ap-logo-intro__orbit::after {
    content: "";

    position: absolute;
    inset: 0;

    border-radius: inherit;
}


.ap-logo-intro__orbit::before {
    border:
        1px solid
        rgba(243,243,241,.15);
}


.ap-logo-intro__orbit::after {
    border-top:
        1px solid
        rgba(214,77,116,.74);

    border-right:
        1px solid
        rgba(181,32,74,.27);
}


.ap-logo-intro__orbit--outer {
    width: 100%;

    transform:
        translate(-50%, -50%)
        rotate(-14deg)
        scale(.84);
}


.ap-logo-intro__orbit--inner {
    width: 85%;

    transform:
        translate(-50%, -50%)
        rotate(23deg)
        scale(.88);
}


/* Nodos */

.ap-logo-intro__node {
    position: absolute;
    z-index: 3;

    display: block;

    width: .6rem;
    aspect-ratio: 1;

    border-radius: 50%;

    background: #b5204a;

    border:
        1px solid
        rgba(243,243,241,.46);

    box-shadow:
        0 0 0 .28rem
        rgba(181,32,74,.07),

        0 0 1.1rem
        rgba(181,32,74,.46);

    transform: scale(.2);

    opacity: 0;
}


.ap-logo-intro__node--a {
    left: 8%;
    top: 24%;
}


.ap-logo-intro__node--b {
    right: 9%;
    bottom: 27%;
}


.ap-logo-intro__node--c {
    right: 14%;
    top: 11%;

    background: #f3f3f1;

    box-shadow:
        0 0 0 .24rem
        rgba(243,243,241,.05),

        0 0 1rem
        rgba(243,243,241,.2);
}


.ap-logo-intro__node--d {
    left: 14%;
    bottom: 13%;
}


/* Identidad */

.ap-logo-intro__identity {
    position: relative;
    z-index: 5;

    display: grid;
    justify-items: center;

    gap: .55rem;

    margin-top: -.55rem;

    text-align: center;

    opacity: 0;

    transform:
        translateY(.65rem);
}


.ap-logo-intro__identity strong {
    font-family:
        var(
            --font-display,
            "Segoe UI",
            sans-serif
        );

    font-size:
        clamp(
            1.12rem,
            1rem + 1vw,
            1.95rem
        );

    font-weight: 650;

    line-height: 1;

    letter-spacing: .15em;

    text-transform: uppercase;

    color: #f3f3f1;
}


.ap-logo-intro__identity span {
    max-width: 31rem;

    font-family:
        var(
            --font-body,
            "Segoe UI",
            sans-serif
        );

    font-size:
        clamp(
            .72rem,
            .68rem + .22vw,
            .9rem
        );

    line-height: 1.5;

    letter-spacing: .055em;

    color: #979aa2;
}


/* Línea final */

.ap-logo-intro__signal {
    position: relative;
    z-index: 5;

    width:
        min(
            15rem,
            54vw
        );

    height: 1px;

    margin-top: 1.25rem;

    overflow: hidden;

    background:
        rgba(243,243,241,.07);

    opacity: 0;
}


.ap-logo-intro__signal i {
    position: absolute;
    inset: 0 auto 0 0;

    display: block;

    width: 36%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            #b5204a 43%,
            #f3f3f1 50%,
            #b5204a 57%,
            transparent
        );

    transform:
        translateX(-120%);
}


/* Entrada */

.ap-logo-intro.is-running
.ap-logo-intro__grid {
    animation:
        ap-grid-in
        800ms
        ease-out
        both;
}


.ap-logo-intro.is-running
.ap-logo-intro__halo {
    animation:
        ap-halo-in
        1150ms
        80ms
        cubic-bezier(.22,1,.36,1)
        both;
}


.ap-logo-intro.is-running
.ap-logo-intro__mark {
    animation:
        ap-logo-in
        850ms
        150ms
        cubic-bezier(.22,1,.36,1)
        both;
}


.ap-logo-intro.is-running
.ap-logo-intro__orbit--outer {
    animation:
        ap-orbit-outer
        1000ms
        110ms
        cubic-bezier(.22,1,.36,1)
        both;
}


.ap-logo-intro.is-running
.ap-logo-intro__orbit--inner {
    animation:
        ap-orbit-inner
        1000ms
        210ms
        cubic-bezier(.22,1,.36,1)
        both;
}


.ap-logo-intro.is-running
.ap-logo-intro__node {
    animation:
        ap-node-in
        420ms
        630ms
        cubic-bezier(.22,1,.36,1)
        both;
}


.ap-logo-intro.is-running
.ap-logo-intro__node--b {
    animation-delay: 710ms;
}


.ap-logo-intro.is-running
.ap-logo-intro__node--c {
    animation-delay: 790ms;
}


.ap-logo-intro.is-running
.ap-logo-intro__node--d {
    animation-delay: 870ms;
}


.ap-logo-intro.is-running
.ap-logo-intro__identity {
    animation:
        ap-copy-in
        620ms
        850ms
        cubic-bezier(.22,1,.36,1)
        both;
}


.ap-logo-intro.is-running
.ap-logo-intro__signal {
    animation:
        ap-grid-in
        350ms
        1080ms
        ease-out
        both;
}


.ap-logo-intro.is-running
.ap-logo-intro__signal i {
    animation:
        ap-signal
        760ms
        1110ms
        cubic-bezier(.22,1,.36,1)
        both;
}


/* Salida */

.ap-logo-intro.is-leaving {
    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity
        420ms
        cubic-bezier(.22,1,.36,1),

        visibility
        420ms
        linear;
}


/* Keyframes */

@keyframes ap-grid-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


@keyframes ap-halo-in {
    from {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(.72);
    }

    to {
        opacity: .72;

        transform:
            translate(-50%, -50%)
            scale(1);
    }
}


@keyframes ap-logo-in {
    from {
        opacity: 0;

        transform:
            translateY(
                calc(
                    var(--logo-y)
                    + .45rem
                )
            )
            scale(.92);
    }

    to {
        opacity: 1;

        transform:
            translateY(
                var(--logo-y)
            )
            scale(1);
    }
}


@keyframes ap-orbit-outer {
    from {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            rotate(-24deg)
            scale(.84);
    }

    to {
        opacity: .92;

        transform:
            translate(-50%, -50%)
            rotate(-14deg)
            scale(1);
    }
}


@keyframes ap-orbit-inner {
    from {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            rotate(32deg)
            scale(.88);
    }

    to {
        opacity: .67;

        transform:
            translate(-50%, -50%)
            rotate(23deg)
            scale(1);
    }
}


@keyframes ap-node-in {
    from {
        opacity: 0;
        transform: scale(.2);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}


@keyframes ap-copy-in {
    from {
        opacity: 0;
        transform: translateY(.65rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes ap-signal {
    from {
        transform: translateX(-120%);
    }

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


/* ==========================================================
   MÓVIL
   ========================================================== */

@media (max-width: 600px) {

    .ap-logo-intro {
        background:
            radial-gradient(
                circle at 50% 51%,
                rgba(181,32,74,.14),
                transparent 32%
            ),
            #08090b;
    }


    .ap-logo-intro__scene {
        width: 100%;

        /*
         * Más espacio arriba que abajo mueve
         * ópticamente todo el conjunto hacia abajo.
         */
        padding:
            clamp(
                3.8rem,
                9svh,
                5.4rem
            )
            1rem
            1.25rem;
    }


    .ap-logo-intro__core {
        width:
            min(
                88vw,
                22rem
            );
    }


    /*
     * Pequeña corrección óptica:
     * el dibujo del emblema queda ligeramente
     * más bajo sin mover la rueda.
     */
    .ap-logo-intro__mark {
        --logo-y: 3.5%;

        width: 75%;
    }


    .ap-logo-intro__orbit--inner {
        width: 84%;
    }


    .ap-logo-intro__identity {
        margin-top: -.25rem;
    }


    .ap-logo-intro__identity strong {
        font-size:
            clamp(
                1rem,
                5vw,
                1.3rem
            );

        letter-spacing: .11em;
    }


    .ap-logo-intro__identity span {
        max-width: 18rem;

        font-size: .74rem;

        line-height: 1.45;
    }


    .ap-logo-intro__signal {
        margin-top: 1rem;
    }


    .ap-logo-intro__grid {
        background-size:
            5rem 5rem;
    }

}


/* Teléfonos muy pequeños */

@media (max-width: 380px) {

    .ap-logo-intro__core {
        width: 84vw;
    }


    .ap-logo-intro__mark {
        width: 74%;
    }


    .ap-logo-intro__identity {
        margin-top: -.1rem;
    }

}


/* Accesibilidad */

@media (prefers-reduced-motion: reduce) {

    .ap-logo-intro__grid,
    .ap-logo-intro__halo,
    .ap-logo-intro__orbit,
    .ap-logo-intro__node,
    .ap-logo-intro__signal {
        display: none;
    }


    .ap-logo-intro__mark,
    .ap-logo-intro__identity {
        opacity: 1;

        animation: none !important;
    }


    .ap-logo-intro__mark {
        transform:
            translateY(
                var(--logo-y)
            );
    }


    .ap-logo-intro__identity {
        transform: none;
    }


    .ap-logo-intro.is-leaving {
        transition-duration: 140ms;
    }

}