/* =====================================================
   TRANSICIONES - #MUJERESCONPODER
   CSS COMPARTIDO PARA LAS 4 TRANSICIONES
   ===================================================== */


/* =====================================================
   BASE
   ===================================================== */

.transition-page {
    position: relative;
}


/* =====================================================
   CONTENEDOR DE IMAGEN
   ===================================================== */

.transition-image-wrapper {
    position: relative;

    width: min(500px, 100%);
    max-width: 100%;

    margin: 0 auto 15px;

    isolation: isolate;

    /* Flotación independiente de la entrada */
    animation:
        transitionFloat
        4s
        ease-in-out
        1.2s
        infinite;
}


/* =====================================================
   HALO
   ===================================================== */

.transition-image-wrapper::before {
    content: "";

    position: absolute;

    width: 70%;
    aspect-ratio: 1;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(139, 92, 246, .18),
            rgba(236, 72, 153, .08),
            transparent 70%
        );

    filter: blur(20px);

    opacity: .7;

    z-index: -1;

    animation:
        haloPulse
        4s
        ease-in-out
        infinite;
}


/* =====================================================
   ANIMACIÓN DEL HALO
   ===================================================== */

@keyframes haloPulse {

    0%,
    100% {
        transform:
            translate(-50%, -50%)
            scale(.9);

        opacity: .55;
    }

    50% {
        transform:
            translate(-50%, -50%)
            scale(1.12);

        opacity: 1;
    }
}


/* =====================================================
   FLOTACIÓN GENERAL
   ===================================================== */

@keyframes transitionFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}


/* =====================================================
   BRILLO
   ===================================================== */

.transition-image-wrapper::after {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 45%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, .45),
            transparent
        );

    transform: skewX(-20deg);

    pointer-events: none;

    z-index: 2;

    animation:
        imageShine
        1.2s
        ease
        1s
        forwards;
}


@keyframes imageShine {

    from {
        left: -120%;
    }

    to {
        left: 140%;
    }
}


/* =====================================================
   IMAGEN - BASE
   ===================================================== */

.transition-img {
    mix-blend-mode: multiply;

    max-width: 500px !important;
    width: 100% !important;
    height: auto !important;

    display: block;

    margin: 0 auto !important;

    border-radius: 30px;

    opacity: 0;

    position: relative;

    z-index: 1;

    filter: blur(5px);
}


/* =====================================================
   TRANSICIÓN 1
   PERFIL DE LIDERAZGO
   ===================================================== */

.transition-1 .transition-img {
    animation:
        transitionOneImage
        .9s
        cubic-bezier(.2, .8, .2, 1)
        forwards;
}


@keyframes transitionOneImage {

    0% {
        opacity: 0;

        transform:
            translateY(30px)
            scale(.88);

        filter: blur(5px);
    }

    60% {
        opacity: 1;

        transform:
            translateY(-5px)
            scale(1.025);

        filter: blur(0);
    }

    100% {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        filter: blur(0);
    }
}


/* =====================================================
   TRANSICIÓN 2
   PODER DE TU VOZ
   ===================================================== */

.transition-2 .transition-img {
    animation:
        transitionTwoImage
        1s
        cubic-bezier(.2, .8, .2, 1)
        forwards;
}


@keyframes transitionTwoImage {

    0% {
        opacity: 0;

        transform:
            translateX(-35px)
            rotate(-4deg)
            scale(.88);

        filter: blur(6px);
    }

    55% {
        opacity: 1;

        transform:
            translateX(6px)
            rotate(1deg)
            scale(1.025);

        filter: blur(0);
    }

    100% {
        opacity: 1;

        transform:
            translateX(0)
            rotate(0)
            scale(1);

        filter: blur(0);
    }
}


/* =====================================================
   TRANSICIÓN 3
   CONSOLIDANDO TU LIDERAZGO
   ===================================================== */

.transition-3 .transition-img {
    animation:
        transitionThreeImage
        1s
        cubic-bezier(.2, .8, .2, 1)
        forwards;
}


@keyframes transitionThreeImage {

    0% {
        opacity: 0;

        transform:
            translateY(45px)
            scale(.84);

        filter: blur(6px);
    }

    55% {
        opacity: 1;

        transform:
            translateY(-7px)
            scale(1.035);

        filter: blur(0);
    }

    75% {
        transform:
            translateY(2px)
            scale(.995);
    }

    100% {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        filter: blur(0);
    }
}


/* =====================================================
   TRANSICIÓN 4
   PODER E IMPACTO TOTAL
   ===================================================== */

.transition-4 .transition-img {
    animation:
        transitionFourImage
        1.1s
        cubic-bezier(.2, .8, .2, 1)
        forwards;
}


@keyframes transitionFourImage {

    0% {
        opacity: 0;

        transform:
            scale(.72);

        filter:
            blur(8px)
            brightness(1.5);
    }

    50% {
        opacity: 1;

        transform:
            scale(1.06);

        filter:
            blur(0)
            brightness(1.08);
    }

    75% {
        transform:
            scale(.98);
    }

    100% {
        opacity: 1;

        transform:
            scale(1);

        filter:
            blur(0)
            brightness(1);
    }
}


/* =====================================================
   HALO ESPECÍFICO TRANSICIÓN 2
   ===================================================== */

.transition-2 .transition-image-wrapper::before {
    animation:
        voiceHalo
        3.8s
        ease-in-out
        infinite;
}


@keyframes voiceHalo {

    0%,
    100% {
        transform:
            translate(-50%, -50%)
            scale(.88);

        opacity: .55;
    }

    50% {
        transform:
            translate(-50%, -50%)
            scale(1.15);

        opacity: 1;
    }
}


/* =====================================================
   HALO ESPECÍFICO TRANSICIÓN 3
   ===================================================== */

.transition-3 .transition-image-wrapper::before {
    animation:
        leadershipHalo
        4s
        ease-in-out
        infinite;
}


@keyframes leadershipHalo {

    0%,
    100% {
        transform:
            translate(-50%, -50%)
            scale(.85);

        opacity: .5;
    }

    50% {
        transform:
            translate(-50%, -50%)
            scale(1.18);

        opacity: 1;
    }
}


/* =====================================================
   HALO ESPECÍFICO TRANSICIÓN 4
   ===================================================== */

.transition-4 .transition-image-wrapper::before {
    animation:
        impactHalo
        3.5s
        ease-in-out
        infinite;
}


@keyframes impactHalo {

    0%,
    100% {
        transform:
            translate(-50%, -50%)
            scale(.78);

        opacity: .5;
    }

    50% {
        transform:
            translate(-50%, -50%)
            scale(1.22);

        opacity: 1;
    }
}


/* =====================================================
   FLOTACIÓN TRANSICIÓN 2
   ===================================================== */

.transition-2 .transition-image-wrapper {
    animation:
        voiceFloat
        4s
        ease-in-out
        1.2s
        infinite;
}


@keyframes voiceFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(0);
    }

    50% {
        transform:
            translateY(-8px)
            rotate(.4deg);
    }
}


/* =====================================================
   FLOTACIÓN TRANSICIÓN 3
   ===================================================== */

.transition-3 .transition-image-wrapper {
    animation:
        leadershipFloat
        4.2s
        ease-in-out
        1.2s
        infinite;
}


@keyframes leadershipFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-10px);
    }
}


/* =====================================================
   FLOTACIÓN TRANSICIÓN 4
   ===================================================== */

.transition-4 .transition-image-wrapper {
    animation:
        impactFloat
        3.8s
        ease-in-out
        1.2s
        infinite;
}


@keyframes impactFloat {

    0%,
    100% {
        transform:
            translateY(0)
            scale(1);
    }

    50% {
        transform:
            translateY(-7px)
            scale(1.015);
    }
}


/* =====================================================
   TÍTULO
   ===================================================== */

.transition-title {
    opacity: 0;

    transform:
        translateY(16px);

    animation:
        textEnter
        .7s
        ease
        .45s
        forwards;
}


/* =====================================================
   TEXTO
   ===================================================== */

.transition-text {
    opacity: 0;

    transform:
        translateY(14px);

    animation:
        textEnter
        .7s
        ease
        .65s
        forwards;
}


/* =====================================================
   BOTÓN
   ===================================================== */

.btn-margin-top {
    opacity: 0;

    transform:
        translateY(14px);

    animation:
        textEnter
        .7s
        ease
        .85s
        forwards;
}


/* =====================================================
   ENTRADA DE TEXTOS
   ===================================================== */

@keyframes textEnter {

    from {
        opacity: 0;

        transform:
            translateY(15px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


/* =====================================================
   TABLET
   ===================================================== */

@media (max-width: 900px) {

    .transition-image-wrapper {
        width: min(440px, 100%);
    }

    .transition-img {
        max-width: 440px !important;
    }
}


/* =====================================================
   CELULAR
   ===================================================== */

@media (max-width: 600px) {

    .transition-image-wrapper {
        width: 100%;
        max-width: 100%;

        margin-bottom: 10px;
    }

    .transition-img {
        max-width: 340px !important;

        width: 100% !important;

        border-radius: 22px;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .transition-image-wrapper::before {
        width: 80%;

        filter: blur(15px);
    }
}


/* =====================================================
   CELULARES PEQUEÑOS
   ===================================================== */

@media (max-width: 380px) {

    .transition-img {
        max-width: 300px !important;

        border-radius: 18px;
    }

    .transition-image-wrapper::before {
        width: 85%;
    }
}


/* =====================================================
   ACCESIBILIDAD
   ===================================================== */

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

    .transition-img,
    .transition-image-wrapper,
    .transition-image-wrapper::before,
    .transition-image-wrapper::after,
    .transition-title,
    .transition-text,
    .btn-margin-top {
        animation: none !important;

        opacity: 1 !important;

        transform: none !important;

        filter: none !important;
    }
}