:root {
    --width-bar: 0;
}

.shine-text {
    color: #000000;
    padding:  0 20px;
    background: linear-gradient(
        to right,
        rgb(0, 0, 0) 0%,
        rgba(255, 255, 255, 0.842) 16%,
        rgb(0, 0, 0) 32%
    );

    -webkit-background-clip: text;
    color: transparent;
    background-position: -20px;
}

.shine-text-container:hover .shine-text {
    animation: shineText 2000ms ;
}

@keyframes shineText {
    to {
        background-position: 80px;
    }
}

.homepage-banner {
    animation: opacity 2000ms;
}

@keyframes opacity {
    from {
        opacity: 0%;
    }
    to {
        opacity: 100%;
    }
}

.homepage-item {
    animation: opacity 2000ms 2000ms forwards;
}

.play-button {
    animation: opacity 2000ms forwards;
}

.training-title {
    animation: text-width 4000ms forwards ease-in-out;
}


/* .homepage-item-content {
    animation: opacity 2000ms 2000ms forwards;
}

@media screen and (min-width: 1028px) {
    .homepage-item {
        animation: movement 1000ms 2000ms forwards;
    }
    .homepage-item-content {
        animation: opacity 2000ms 3000ms forwards;
    }
} */

@keyframes  text-width {
    0% {
        white-space: nowrap;
        width: 0;
    } 
    85% {
        width: 100%;
    }
    100% {
        width: 100%;
        white-space: wrap;
    }
}

@keyframes movement {
    from {
        height: 0;
    }
    to {
        height: 100%;
    }
}

@keyframes width {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}

.ball-1 {
    animation: movetop2 2000ms infinite ease-in-out;
}

.ball-2 {
    animation: movetop2 2000ms 100ms infinite ease-in-out;
}

.ball-3 {
    animation: movetop2 2000ms 200ms infinite ease-in-out;
}

@keyframes movetop {
    0% {
        height: 5px;
    } 
    25% {
        height: 12px;
    }
    50% {
        height: 24px;
    }
    75% {
        height: 12px;
    }
    100% {
        height: 5px;
    }
}

@keyframes movetop2 {
    
    from {
        height: 8px;
    } 
    50%{
        height: 34px;
    }
    to {
        height: 8px;
    }
}

.move-text::after {
    background-color: black;
    height: 100%;
    width: 0%;
    animation: width 1000ms;
}
.move-text::before {
    background-color: black;
    height: 100%;
    width: 0%;
    animation: width 1000ms 1000ms;
}

.training-link::after{
    background-color: black;
    width: 100%;
    height: 1px;
}

.popup-section {
    transform: translateX(-100%);
}

.popup-in-animation {
    animation: popupin 2000ms forwards;
}

.popup-out-animation {
    animation: popupout 2000ms forwards;
}

@keyframes popupin {
    from {
        transform: translateX(-100%);
    } to {
        transform: translateX(0);
    }
}

@keyframes popupout {
    from {
        transform: translateX(0);
    } to {
        transform: translateX(-100%);
    }
}

.bronze-animation {
    animation: medal 1500ms forwards;
}

.silver-animation {
    animation: medal 1500ms forwards 1500ms;
}

.gold-animation {
    animation: medal 1500ms forwards 3000ms;
}

.diamond-animation {
    animation: medal 1500ms forwards 4500ms;
}

.delay-3000 {
    animation-delay: 3000ms;
}

@keyframes medal {
    from {
        opacity: 20%;
    } to {
        opacity: 100%;
    }
}