//-----------------------------------
//Keyframes
//-----------------------------------
@import "effects/effects";

@include fadeZoomIn;
@include fadeZoomOut;

@include keyframes(close_cover) {
    0% {
        @include wh(96.8%, 95%);
        opacity: 1;
    }

    99% {
        display: block;
    }

    100% {
        @include wh(0%, 0%);
        display: none;
        opacity: 0;
    }
}

@include keyframes(marquee_1) {
    0% { transform: translateX(0vw); }
    100% { transform: translateX(-100vw); }
}

@include keyframes(marquee_2) {
    0% { transform: translateX(-100vw); }
    100% { transform: translateX(0vw); }
}

@include keyframes(open_tooltip) {
    0% {
        width: 0;
        opacity: 0;
    }

    100% {
        opacity: 1;
        width: clamp(250px, 23.44vw, 450px);
    }
}

@include keyframes(close_tooltip) {
    0% {
        opacity: 1;
        width: clamp(250px, 23.44vw, 450px);
    }

    100% {
        width: 0;
        opacity: 0;
    }
}

@include keyframes(op) {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@include keyframes(opc) {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@include keyframes(text1) {
    0% { opacity: 0; }
    12.5% { opacity: 1; }
    87.5% { opacity: 1; }
    100% { opacity: 0; }
}

@include keyframes(text2) {
    0% { opacity: 0; }
    12.5% { opacity: 0; }
    25% { opacity: 1; }
    75% { opacity: 1; }
    87.5% { opacity: 0; }
    100% { opacity: 0; }
}

@include keyframes(text3) {
    0% { opacity: 0; }
    25% { opacity: 0; }
    37.5% { opacity: 1; }
    62.5% { opacity: 1; }
    75% { opacity: 0; }
    100% { opacity: 0; }
}

@include keyframes(rotate_clockwise) {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@include keyframes(fadeInNone) {
    0% {
        display: block;
        opacity: 0;
    }

    100% { opacity: 1; }
}

@include keyframes(fadeOutNone) {
    0% { opacity: 1; }
    100% {
        opacity: 0;
        display: none;
    }

};

@include keyframes(showcase_jersey_text1) {
    0% { opacity: 0; }
    12.5% { opacity: 0.15; }
    87.5% { opacity: 0.15; }
    100% { opacity: 0; }
}

@include keyframes(showcase_jersey_text2) {
    0% { opacity: 0; }
    12.5% { opacity: 0; }
    25% { opacity: 0.15; }
    75% { opacity: 0.15; }
    87.5% { opacity: 0; }
    100% { opacity: 0; }
}

@include keyframes(showcase_jersey_text3) {
    0% { opacity: 0; }
    25% { opacity: 0; }
    37.5% { opacity: 0.15; }
    62.5% { opacity: 0.15; }
    75% { opacity: 0; }
    100% { opacity: 0; }
}

@include keyframes(showcase_jersey_text1_mobile) {
    0%   { opacity: 0; }
    7%   { opacity: 0.15; }
    70%  { opacity: 0.15; }
    100% { opacity: 0; }
}

@include keyframes(showcase_jersey_text2_mobile) {
    0%   { opacity: 0; }
    7%   { opacity: 0; }
    14%  { opacity: 0.15; }
    63%  { opacity: 0.15; }
    84%  { opacity: 0; }
    100% { opacity: 0; }
}

@include keyframes(showcase_jersey_text3_mobile) {
    0%   { opacity: 0; }
    14%  { opacity: 0; }
    21%  { opacity: 0.15; }
    56%  { opacity: 0.15; }
    77%  { opacity: 0; }
    100% { opacity: 0; }
}

@include keyframes(showcase_jersey_text4) {
    0%   { opacity: 0; }
    21%  { opacity: 0; }
    28%  { opacity: 0.15; }
    49%  { opacity: 0.15; }
    70%  { opacity: 0; }
    100% { opacity: 0; }
}

@include keyframes(showcase_jersey_text5) {
    0%   { opacity: 0; }
    28%  { opacity: 0; }
    35%  { opacity: 0.15; }
    42%  { opacity: 0.15; }
    63%  { opacity: 0; }
    100% { opacity: 0; }
}

@include keyframes(showcase_jersey_text6) {
    0%   { opacity: 0; }
    35%  { opacity: 0; }
    42%  { opacity: 0.15; }
    49%  { opacity: 0.15; }
    56%  { opacity: 0; }
    100% { opacity: 0; }
}
//-----------------------------------
//End Keyframes
//-----------------------------------