/*==================================================
=                 ANIMACIONES
==================================================*/
/*==============================
SCROLL ANIMATION SUPPORT PROMOTIONS
==============================*/
.fade-section{
    opacity:0;
    transform:translateY(60px);
    transition:
        opacity var(--motion-upperslow) var(--ease-smooth),
        transform var(--motion-upperslow) var(--ease-smooth);
}

.fade-change{
    opacity: 0;
    transition: opacity var(--motion-slow) var(--ease-smooth);
}

.fade-section.show{
    opacity:1;
    transform:translateY(0);
}

@keyframes equalizer{
    0%,100%{
        transform:scaleY(.35);
    }
    
    50%{
        transform:scaleY(1);
    }
}

@keyframes skeleton-loading{
    0%,100%{
        transform:scaleY(.25);
    }

    50%{
        transform:scaleY(1);
    }

    0%{
        background-position: -200px 0;
    }

    100%{
        background-position: calc(200px + 100%) 0;
    }
}

@keyframes keyPress{
    0%{
        transform: scale(1);
    }

    50%{
        box-shadow: 0px 0px 18px var(--color-primary-hover);
        color: var(--color-primary-light);
        border-color: var(--color-primary);
        background-color: var(--color-active-button);
        transform: scale(0.95);
    }

    100%{
        transform: scale(1);
    }
}

@keyframes keyPressMute{
    0%{
        transform: scale(1);
    }

    50%{
        transform: scale(0.88);
    }

    100%{
        transform: scale(1);
    }
}


@keyframes heroFade{
    from{
        opacity:0;
        transform:translateX(20px);
    }

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

/*=========================================
ABOUT ANIMATIONS
=========================================*/
@keyframes floatIllustration{
    0%{
        transform:
            translateY(0);
    }

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

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

/*==============================
ANIMATIONS
==============================*/
@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(45px);
    }

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

@keyframes pulseGlow{
    0%{
        box-shadow:
        0 0 0 rgba(255,0,0,0);
    }

    50%{
        box-shadow:
        0 0 40px rgba(255,0,0,.25);
    }

    100%{
        box-shadow:
        0 0 0 rgba(255,0,0,0);
    }
}

/*==================================================
ACCESSIBILITY
==================================================*/
@media (prefers-reduced-motion: reduce){
    .fade-section{
        opacity:1;
        transform:none;
        transition:none;
    }

    .about-illustration,
    .featured,
    .hero-content,
    .hero-left,
    .hero-right,
    .playlist,
    .beatlist,
    .moreinfo,
    .volume-container,
    #visualizer,
    #running{
        animation:none;
    }
}

@media (hover: hover) and (pointer: fine){

    .crtl:hover{
        transform: scale(.94);
        box-shadow: 0 0 18px var(--color-primary-hover);
        color: var(--color-primary-light);
        border-color: var(--color-primary);
        background-color: var(--color-active-button);
    }

}

@media (hover: none){

    .crtl:hover{
        transform: none;
        background-color: inherit;
    }

    .crtl.fake-hover{
        transform: scale(.94);
        box-shadow: 0 0 18px var(--color-primary-hover);
        color: var(--color-primary-light);
        border-color: var(--color-primary);
        background-color: var(--color-active-button);
    }

}