/* ******************************************** */
/** HOME: GLOBE
/* ******************************************** */

/* STARS */

.c-globe{
    --color-heading: var(--color-lightest);
    position: relative;
    z-index: 0;
    background: var(--color-primary);
    /* background: linear-gradient(248deg, #0D0564 15%, #2141B1); */
    overflow: hidden;
}
.c-globe:before{
    content: "";
    display: block;
    width: 72vw;
    aspect-ratio: 1;
    position: absolute;
    top: -3vw;
    right: -5vw;
    background: radial-gradient(circle, #3272f0 0%, rgba(50,114,240,0) 50%);
    opacity: 0.6;
    filter: blur(100px);
}

.c-globe__section{
    height: 100vh;
    position: relative;
}


/* GLOBE */

.c-globe__holder{
    width: 150vw;
    height: 150vh;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    z-index: 0;
}
.c-globe__viewport{
    width: 100%;
    height: 100%;
    position: relative;
    transform: translate(20%, 10%);
}

.c-globe__holder canvas{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    pointer-events: none;
}



/* GEO */

.c-globe-geo{
    height: 200vh;
    z-index: -1;
    background: linear-gradient(100deg, rgb(130 213 255 / 22%), rgb(255 255 255 / 0%));
    display: none;
}



/* SELLING */

.c-globe-selling{
    height: auto;
    position: static;
    background: linear-gradient(100deg, rgb(130 213 255 / 22%), rgb(255 255 255 / 0%));
}
.c-globe-selling__info{
    max-width: 50%;
    padding-top: 25vh;
    padding-bottom: 100vh;
    position: relative;
    z-index: 10;
}

/* Ripples */

.c-globe__ripples,
.c-globe__ripple,
.c-globe__pin{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}
.c-globe__ripples{
    display: none;
    opacity: 0;
}
.c-globe__ripples[data-visible="true"]{
    display: block !important;
    animation: fadeIn 400ms ease-out forwards;
}
.c-globe__ripples[data-visible="false"]{
    display: block;
    animation: fadeOut 400ms ease-out forwards;
}
.c-globe__ripples[data-visible] .c-globe__ripple{
    --duration: 4.25s;

    display: block;
    width: 4vw;
    aspect-ratio: 1;
    border: 2px solid #00d6ff;
    border-radius: 50%;
    transform: translate(-50%,-50%) scale3d(0,0,1);
    opacity: 1;
    /* background-color: rgba(0, 213, 255, 0.1); */
    background: radial-gradient(rgba(0, 213, 255, 0.2), rgba(0, 213, 255, 0.4) 70%);
    animation: ripple1 var(--duration) ease-out infinite;
    /* animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); */
}
.c-globe__ripples[data-visible] .c-globe__ripple:nth-child(2){
    animation-name: ripple2;
}
.c-globe__ripples[data-visible] .c-globe__ripple:nth-child(3){
    animation-name: ripple3;
}
.c-globe__ripples[data-visible] .c-globe__ripple:nth-child(4){
    animation-name: ripple4;
}
.c-globe__ripples[data-visible] .c-globe__ripple--delay{
    animation-delay: calc( var(--duration) * 0.8 )
}
.c-globe__pin{
    display: block;
    width: 10px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.6);
    background-color: rgba(0, 213, 255,0.5);
}

@keyframes ripple1{
    0%{
        transform: translate(-50%,-50%) scale3d(0,0,1);
        opacity: 1;
    }
    40%,
    100%{
        transform: translate(-50%,-50%) scale3d(2,2,1);
        opacity: 0;
    }
}
@keyframes ripple2{
    0%,
    20%{
        transform: translate(-50%,-50%) scale3d(0,0,1);
        opacity: 1;
    }
    60%,
    100%{
        transform: translate(-50%,-50%) scale3d(2,2,1);
        opacity: 0;
    }
}
@keyframes ripple3{
    0%,
    40%{
        transform: translate(-50%,-50%) scale3d(0,0,1);
        opacity: 1;
    }
    80%,
    100%{
        transform: translate(-50%,-50%) scale3d(2,2,1);
        opacity: 0;
    }
}
@keyframes ripple4{
    0%,
    60%{
        transform: translate(-50%,-50%) scale3d(0,0,1);
        opacity: 1;
    }
    100%{
        transform: translate(-50%,-50%) scale3d(2,2,1);
        opacity: 0;
    }
}


@keyframes fadeIn{
    from { opacity: 0 }
    to { opacity: 1 }
}
@keyframes fadeOut{
    from { opacity: 1 }
    to { opacity: 0 }
}




/* ********************** TALL MOBILE PORTRAIT ********************** */

@media (max-width: 767px) and (min-height: 730px){
}

 



/* ********************** MOBILE LANDSCAPE ********************** */

@media (orientation: landscape) and (min-width: 500px) and (max-width: 767px) {
}




/* ********************** de Mobile a TABLET ********************** */

@media (min-width: 768px) {
}




/* ********************** de Tablet a DESKTOP ********************** */

@media (min-width: 980px) {
}




/* ********************** de Desktop a DESKTOP 2 ********************** */

@media (min-width: 1200px) {
}
@media (min-width: 1200px) and (min-height: 790px){
}




/* ********************** de Desktop 2 a HD ********************** */

@media (min-width: 1400px) {
}
@media (min-width: 1400px) and (min-height: 790px){
}




/* ********************** de Hd a FULL HD ********************** */

@media (min-width: 1600px) {
}
@media (min-width: 1600px) and (min-height: 790px){
}
@media (min-width: 1600px) and (min-height: 900px){
}

@media (min-width: 1800px) {
}




/* ********************** 4K ********************** */

@media (min-width: 2048px) {
}