/* =========================================================
   TERRASCOPE — GLOBO ANIMADO
   Versión dinámica
   ========================================================= */


/* =========================================================
   NODOS PRINCIPALES
   ========================================================= */

.world-node-major{
    transform-box:fill-box;
    transform-origin:center;

    animation:
        globe-node-pulse 3.8s ease-in-out infinite;
}

.world-node-major:nth-child(2n){
    animation-delay:-1.2s;
}

.world-node-major:nth-child(3n){
    animation-delay:-2.4s;
}

.world-node-major:nth-child(5n){
    animation-delay:-3.1s;
}


/* =========================================================
   PUNTOS SECUNDARIOS
   ========================================================= */

.world-dots circle{
    animation:
        globe-dot-breathe 5s ease-in-out infinite;
}

.world-dots circle:nth-child(3n){
    animation-delay:-1.3s;
}

.world-dots circle:nth-child(5n){
    animation-delay:-2.7s;
}

.world-dots circle:nth-child(7n){
    animation-delay:-3.8s;
}

.world-dots circle:nth-child(11n){
    animation-delay:-4.4s;
}


/* =========================================================
   CONEXIONES
   ========================================================= */

.world-connections line{
    stroke-dasharray:18 12;

    animation:
        globe-line-flow 5s linear infinite;
}

.world-connections line:nth-child(2n){
    animation-delay:-1.7s;
}

.world-connections line:nth-child(3n){
    animation-delay:-3.2s;
}

.world-connections line:nth-child(5n){
    animation-delay:-4.1s;
}


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

.globe-light{
    animation:
        globe-light-breathe 6s ease-in-out infinite;
}


/* =========================================================
   ANIMACIONES
   ========================================================= */

@keyframes globe-node-pulse{

    0%,
    100%{
        opacity:.65;
        transform:scale(1);
        filter:drop-shadow(0 0 0 transparent);
    }

    45%{
        opacity:1;
        transform:scale(1.18);
        filter:drop-shadow(0 0 5px currentColor);
    }

    55%{
        opacity:1;
        transform:scale(1.08);
        filter:drop-shadow(0 0 3px currentColor);
    }

}


@keyframes globe-dot-breathe{

    0%,
    100%{
        opacity:.42;
    }

    40%{
        opacity:.95;
    }

    55%{
        opacity:.72;
    }

}


@keyframes globe-line-flow{

    0%{
        stroke-dashoffset:90;
        opacity:.28;
    }

    35%{
        opacity:.70;
    }

    70%{
        opacity:.48;
    }

    100%{
        stroke-dashoffset:0;
        opacity:.28;
    }

}


@keyframes globe-light-breathe{

    0%,
    100%{
        opacity:.12;
    }

    45%{
        opacity:.30;
    }

    55%{
        opacity:.24;
    }

}


/* =========================================================
   REDUCIR MOVIMIENTO SI EL USUARIO LO SOLICITA
   ========================================================= */

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

    .world-node-major,
    .world-dots circle,
    .world-connections line,
    .globe-light{
        animation:none !important;
    }

}


/* Reducir movimiento si el usuario lo solicita */
@media (prefers-reduced-motion:reduce){

    .world-globe{
        animation:none !important;
    }

}