/*criterion*/

/*criterion END*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');

/* Global */

.criterion {
    /*font-size: 1.6rem;*/
    position: absolute;
    top: 50%;
    left: 53%;
    height: 0;
    width: 0;
    transform: translate(-20px, -20px);
}

/* Estilos para .text (base) */
.text {
    font-family: "Montserrat";
    font-weight: bolder;
    position: absolute;
    width: 40px;
    line-height: 40px;
    opacity: 0;
    overflow: hidden;
}

/* =========================
   Clases generadas para cada "text"
   ========================= */

/* Para i = 0 */
.text0 {
    left: -140px;
    top: 0;
    /* Delay: 1s + (0*200ms) = 1s */
    animation: text-animation0 1s ease-in-out 1s 1 normal forwards,
        text2-animation0 2s ease-in-out 5s 1 normal forwards;
}
.text0::after {
    animation: text-after-animation0 2s ease-in-out 3s 1 normal forwards;
}

/* Para i = 1 */
.text1 {
    left: -100px;
    top: 0;
    /* Delay: 1s + (1*200ms) = 1.2s */
    animation: text-animation1 1s ease-in-out 1.2s 1 normal forwards,
        text2-animation1 2s ease-in-out 5s 1 normal forwards;
}
.text1::after {
    animation: text-after-animation1 2s ease-in-out 3s 1 normal forwards;
}

/* Para i = 2 */
.text2 {
    left: -60px;
    top: 0;
    animation: text-animation2 1s ease-in-out 1.4s 1 normal forwards,
        text2-animation2 2s ease-in-out 5s 1 normal forwards;
}
.text2::after {
    animation: text-after-animation2 2s ease-in-out 3s 1 normal forwards;
}

/* Para i = 3 */
.text3 {
    left: -20px;
    top: 0;
    animation: text-animation3 1s ease-in-out 1.6s 1 normal forwards,
        text2-animation3 2s ease-in-out 5s 1 normal forwards;
}
.text3::after {
    animation: text-after-animation3 2s ease-in-out 3s 1 normal forwards;
}

/* Para i = 4 */
.text4 {
    left: 20px;
    top: 0;
    animation: text-animation4 1s ease-in-out 1.8s 1 normal forwards,
        text2-animation4 2s ease-in-out 5s 1 normal forwards;
}
.text4::after {
    animation: text-after-animation4 2s ease-in-out 3s 1 normal forwards;
}

/* Para i = 5 */
.text5 {
    left: 60px;
    top: 0;
    animation: text-animation5 1s ease-in-out 2s 1 normal forwards,
        text2-animation5 2s ease-in-out 5s 1 normal forwards;
}
.text5::after {
    animation: text-after-animation5 2s ease-in-out 3s 1 normal forwards;
}

/* Para i = 6 */
.text6 {
    left: 100px;
    top: 0;
    animation: text-animation6 1s ease-in-out 2.2s 1 normal forwards,
        text2-animation6 2s ease-in-out 5s 1 normal forwards;
}
.text6::after {
    animation: text-after-animation6 2s ease-in-out 3s 1 normal forwards;
}

/* Para i = 7 */
.text7 {
    left: 140px;
    top: 0;
    animation: text-animation7 1s ease-in-out 2.4s 1 normal forwards,
        text2-animation7 2s ease-in-out 5s 1 normal forwards;
}
.text7::after {
    animation: text-after-animation7 2s ease-in-out 3s 1 normal forwards;
}

/* =========================
   Keyframes para text-animation (comunes a todas)
   ========================= */
@keyframes text-animation0 {
    0% {
        transform: scale(0, 0);
        opacity: 0;
    }
    50% {
        transform: scale(3, 3);
    }
    100% {
        transform: scale(1, 1);
        opacity: 1;
    }
}
/* Repetir para text-animation1 a text-animation7 (idénticos al de text-animation0) */
@keyframes text-animation1 {
    0% {
        transform: scale(0, 0);
        opacity: 0;
    }
    50% {
        transform: scale(3, 3);
    }
    100% {
        transform: scale(1, 1);
        opacity: 1;
    }
}
@keyframes text-animation2 {
    0% {
        transform: scale(0, 0);
        opacity: 0;
    }
    50% {
        transform: scale(3, 3);
    }
    100% {
        transform: scale(1, 1);
        opacity: 1;
    }
}
@keyframes text-animation3 {
    0% {
        transform: scale(0, 0);
        opacity: 0;
    }
    50% {
        transform: scale(3, 3);
    }
    100% {
        transform: scale(1, 1);
        opacity: 1;
    }
}
@keyframes text-animation4 {
    0% {
        transform: scale(0, 0);
        opacity: 0;
    }
    50% {
        transform: scale(3, 3);
    }
    100% {
        transform: scale(1, 1);
        opacity: 1;
    }
}
@keyframes text-animation5 {
    0% {
        transform: scale(0, 0);
        opacity: 0;
    }
    50% {
        transform: scale(3, 3);
    }
    100% {
        transform: scale(1, 1);
        opacity: 1;
    }
}
@keyframes text-animation6 {
    0% {
        transform: scale(0, 0);
        opacity: 0;
    }
    50% {
        transform: scale(3, 3);
    }
    100% {
        transform: scale(1, 1);
        opacity: 1;
    }
}
@keyframes text-animation7 {
    0% {
        transform: scale(0, 0);
        opacity: 0;
    }
    50% {
        transform: scale(3, 3);
    }
    100% {
        transform: scale(1, 1);
        opacity: 1;
    }
}

/* =========================
   Keyframes para text-after-animation
   ========================= */
@keyframes text-after-animation0 {
    0% {
        width: 0px;
        background-color: hsl(0, 80%, 60%);
        opacity: 1;
    }
    50% {
        width: 40px;
        opacity: 1;
    }
    100% {
        left: 40px;
        opacity: 0;
    }
}
@keyframes text-after-animation1 {
    0% {
        width: 0px;
        background-color: hsl(45, 80%, 60%);
        opacity: 1;
    }
    50% {
        width: 40px;
        opacity: 1;
    }
    100% {
        left: 40px;
        opacity: 0;
    }
}
/* Repetir para text-after-animation2 a text-after-animation7 cambiando el ángulo: */
@keyframes text-after-animation2 {
    0% {
        width: 0px;
        background-color: hsl(90, 80%, 60%);
        opacity: 1;
    }
    50% {
        width: 40px;
        opacity: 1;
    }
    100% {
        left: 40px;
        opacity: 0;
    }
}
@keyframes text-after-animation3 {
    0% {
        width: 0px;
        background-color: hsl(135, 80%, 60%);
        opacity: 1;
    }
    50% {
        width: 40px;
        opacity: 1;
    }
    100% {
        left: 40px;
        opacity: 0;
    }
}
@keyframes text-after-animation4 {
    0% {
        width: 0px;
        background-color: hsl(180, 80%, 60%);
        opacity: 1;
    }
    50% {
        width: 40px;
        opacity: 1;
    }
    100% {
        left: 40px;
        opacity: 0;
    }
}
@keyframes text-after-animation5 {
    0% {
        width: 0px;
        background-color: hsl(225, 80%, 60%);
        opacity: 1;
    }
    50% {
        width: 40px;
        opacity: 1;
    }
    100% {
        left: 40px;
        opacity: 0;
    }
}
@keyframes text-after-animation6 {
    0% {
        width: 0px;
        background-color: hsl(270, 80%, 60%);
        opacity: 1;
    }
    50% {
        width: 40px;
        opacity: 1;
    }
    100% {
        left: 40px;
        opacity: 0;
    }
}
@keyframes text-after-animation7 {
    0% {
        width: 0px;
        background-color: hsl(315, 80%, 60%);
        opacity: 1;
    }
    50% {
        width: 40px;
        opacity: 1;
    }
    100% {
        left: 40px;
        opacity: 0;
    }
}
/*
@keyframes text2-animation0 {
  0% { left: -140px; opacity: 1; }
  50% { left: -100px; opacity: 0; }
  100% { left: -100px; opacity: 0; }
}
@keyframes text2-animation1 {
  0% { left: -100px; opacity: 1; }
  50% { left: -60px; opacity: 0; }
  100% { left: -60px; opacity: 0; }
}
@keyframes text2-animation2 {
  0% { left: -60px; opacity: 1; }
  50% { left: -20px; opacity: 0; }
  100% { left: -20px; opacity: 0; }
}
@keyframes text2-animation3 {
  0% { left: -20px; opacity: 1; }
  50% { left: 20px; opacity: 0; }
  100% { left: 20px; opacity: 0; }
}
@keyframes text2-animation4 {
  0% { left: 20px; opacity: 1; }
  50% { left: 60px; opacity: 0; }
  100% { left: 60px; opacity: 0; }
}*/
@keyframes text2-animation5 {
    0% {
        left: 140px;
        opacity: 1;
        top: 0;
        transform: scale(1, 1);
    }
    50% {
        left: 180px;
        opacity: 1;
        transform: scale(1, 1);
    }
    65% {
        top: 0;
        transform: scale(1, 1);
    }
    70% {
        transform: scale(3, 3) rotate(90deg);
        top: -30px;
    }
    75% {
        left: 180px;
        top: 0;
        opacity: 1;
        transform: scale(2, 2) rotate(90deg);
    }
    85% {
        left: 180px;
    }
    100% {
        left: 1000px;
        opacity: 0;
        transform: scale(2, 2) rotate(90deg);
    }
}/*
@keyframes text2-animation6 {
  0% { left: 100px; opacity: 1; }
  50% { left: 140px; opacity: 0; }
  100% { left: 140px; opacity: 0; }
}
*/

/* =========================
   Estilos para .frame
   ========================= */
.frame {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    opacity: 0;
}
.frame0 {
    left: -140px;
    top: 0;
    animation: frame-animation0 1s ease-in-out 0ms 1 normal forwards;
    background-color: hsl(0, 80%, 60%);
}
.frame1 {
    left: -100px;
    top: 0;
    animation: frame-animation1 1s ease-in-out 200ms 1 normal forwards;
    background-color: hsl(45, 80%, 60%);
}
.frame2 {
    left: -60px;
    top: 0;
    animation: frame-animation2 1s ease-in-out 400ms 1 normal forwards;
    background-color: hsl(90, 80%, 60%);
}
.frame3 {
    left: -20px;
    top: 0;
    animation: frame-animation3 1s ease-in-out 600ms 1 normal forwards;
    background-color: hsl(135, 80%, 60%);
}
.frame4 {
    left: 20px;
    top: 0;
    animation: frame-animation4 1s ease-in-out 800ms 1 normal forwards;
    background-color: hsl(180, 80%, 60%);
}
.frame5 {
    left: 60px;
    top: 0;
    animation: frame-animation5 1s ease-in-out 1000ms 1 normal forwards;
    background-color: hsl(225, 80%, 60%);
}
.frame6 {
    left: 100px;
    top: 0;
    animation: frame-animation6 1s ease-in-out 1200ms 1 normal forwards;
    background-color: hsl(270, 80%, 60%);
}
.frame7 {
    left: 140px;
    top: 0;
    animation: frame-animation7 1s ease-in-out 1400ms 1 normal forwards;
    background-color: hsl(315, 80%, 60%);
}

/* Keyframes para frame-animation (idénticos en cada caso) */
@keyframes frame-animation0 {
    0% {
        transform: translateY(-1000px);
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(0);
        opacity: 0;
    }
}
/* Repetir frame-animation1 a frame-animation7 con el mismo contenido */
@keyframes frame-animation1 {
    0% {
        transform: translateY(-1000px);
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(0);
        opacity: 0;
    }
}
@keyframes frame-animation2 {
    0% {
        transform: translateY(-1000px);
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(0);
        opacity: 0;
    }
}
@keyframes frame-animation3 {
    0% {
        transform: translateY(-1000px);
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(0);
        opacity: 0;
    }
}
@keyframes frame-animation4 {
    0% {
        transform: translateY(-1000px);
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(0);
        opacity: 0;
    }
}
@keyframes frame-animation5 {
    0% {
        transform: translateY(-1000px);
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(0);
        opacity: 0;
    }
}
@keyframes frame-animation6 {
    0% {
        transform: translateY(-1000px);
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(0);
        opacity: 0;
    }
}
@keyframes frame-animation7 {
    0% {
        transform: translateY(-1000px);
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(0);
        opacity: 0;
    }
}

/* =========================
   Estilos para .particle
   ========================= */
.particle {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

/* Ejemplo para partículas del grupo i = 0 */
/* Para j = 0 */
.particle00 {
    left: -140px;
    opacity: 0;
    background-color: hsl(0, 80%, 60%);
    /* Delay: 1s + (0*200ms) = 1s */
    animation: particle-animation00 1s ease-in-out 1s 1 normal forwards;
}
@keyframes particle-animation00 {
    0% {
        left: -140px;
        top: 0;
        opacity: 0;
        transform: scale(1, 1);
    }
    100% {
        /* Para j=0: cos(0*30)=1, sin(0)=0 */
        left: calc(-140px + 100px);
        top: calc(0px + 0px);
        opacity: 1;
        transform: scale(0, 0);
    }
}

/* Para j = 1 */
.particle01 {
    left: -140px;
    opacity: 0;
    background-color: hsl(0, 80%, 60%);
    animation: particle-animation01 1s ease-in-out 1s 1 normal forwards;
}
@keyframes particle-animation01 {
    0% {
        left: -140px;
        top: 0;
        opacity: 0;
        transform: scale(1, 1);
    }
    100% {
        /* Para j=1: cos(30)=0.8660, sin(30)=0.5 */
        left: calc(-140px + 86.6px);
        top: calc(0px + 50px);
        opacity: 1;
        transform: scale(0, 0);
    }
}

/* Se debe repetir el mismo patrón para j = 2 a 11 y para cada grupo i = 0 a 7 */
.has_gradient_25{
    min-height: 200px;
    background: none;
    opacity: 1;
    -webkit-mask-image: none;
    mask-image: none;
}
.text{
    color: #292A6D;
}

.text-last {
    /* Solo se ejecuta la animación principal (la primera) */
    animation: text-animation5 1s ease-in-out 2s 1 normal forwards;
}

.text-last::after {
    display: none;
}