/*:::: DIALOGUE ::::*/
@keyframes typing {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }

}

/*:::: ICONS ::::*/
/*:::: guide :::*/
@keyframes guide_icon_open {
    0% {
        background-image: url('../icons/guide_1.png');
    }
    32% {
        background-image: url('../icons/guide_1.png');
    }

    33% {
        background-image: url('../icons/guide_2.png');
    }
    65% {
        background-image: url('../icons/guide_2.png');
    }
    66% {
        background-image: url('../icons/guide_3.png');

    }
    100% {
        background-image: url('../icons/guide_3.png');

    }
}

@keyframes guide_icon_open_delayed {
    0% {
        background-image: url('../icons/guide_1.png');
    }
    24% {
        background-image: url('../icons/guide_1.png');
    }

    25% {
        background-image: url('../icons/guide_2.png');
    }
    49% {
        background-image: url('../icons/guide_2.png');
    }
    50% {
        background-image: url('../icons/guide_3.png');

    }
    100% {
        background-image: url('../icons/guide_3.png');

    }
}

/*:::: community :::*/
@keyframes community_icon_open {
    0% {
        background-image: url('../icons/community_1.png');
    }
    32% {
        background-image: url('../icons/community_1.png');
    }

    33% {
        background-image: url('../icons/community_2.png');
    }
    65% {
        background-image: url('../icons/community_2.png');
    }
    66% {
        background-image: url('../icons/community_3.png');

    }
    100% {
        background-image: url('../icons/community_3.png');

    }
}

/*:::: facilitation :::*/
@keyframes facilitation_icon_open {
    0% {
        background-image: url('../icons/seeking facilitation.png');
    }
    32% {
        background-image: url('../icons/seeking facilitation.png');
    }

    33% {
        background-image: url('../icons/seeking facilitation_2.png');
    }
    65% {
        background-image: url('../icons/seeking facilitation_2.png');
    }
    66% {
        background-image: url('../icons/seeking facilitation_3.png');

    }
    100% {
        background-image: url('../icons/seeking facilitation_3.png');

    }
}

/*:::: resources :::*/
@keyframes resources_icon_open {
    0% {
        background-image: url('../icons/play_resources_1.png');
    }
    32% {
        background-image: url('../icons/play_resources_1.png');
    }

    33% {
        background-image: url('../icons/play_resources_2.png');
    }
    65% {
        background-image: url('../icons/play_resources_2.png');
    }
    66% {
        background-image: url('../icons/play_resources_3.png');

    }
    100% {
        background-image: url('../icons/play_resources_3.png');

    }
}
/*:::: shuffle :::*/
@keyframes shuffle_icon_open {
    0% {
        background-image: url('../icons/shuffle_1.png');
    }
    32% {
        background-image: url('../icons/shuffle_1.png');
    }

    33% {
        background-image: url('../icons/shuffle_2.png');
    }
    65% {
        background-image: url('../icons/shuffle_2.png');
    }
    66% {
        background-image: url('../icons/shuffle_3.png');

    }
    100% {
        background-image: url('../icons/shuffle_3.png');

    }
}
@keyframes shuffle_icon_open_delayed {
    0% {
        background-image: url('../icons/shuffle_1.png');
    }
    24% {
        background-image: url('../icons/shuffle_1.png');
    }

    25% {
        background-image: url('../icons/shuffle_2.png');
    }
    49% {
        background-image: url('../icons/shuffle_2.png');
    }
    50% {
        background-image: url('../icons/shuffle_3.png');

    }
    100% {
        background-image: url('../icons/shuffle_3.png');

    }
}
/*:::: CARDS ::::*/

/*:::: SHUFFLE ::::*/
@property --progress {
    initial-value: 0;
    inherits: false;
    syntax: "<number>";
}

@keyframes shuffle {
    0% {
        --progress: -1;
        z-index: 1;
    }

    50% {
        --progress: 0;
        z-index: 2;
    }

    100% {
        --progress: 1;
        z-index: 1;
    }
}


@keyframes flipToBack {
    0% {
        transform: rotate3d(0, 1, 0, 0deg);

    }

    25% {
        transform: rotate3d(0, 1, 0, 90deg);

    }

    50% {
        transform: rotate3d(0, 1, 0, 0deg);
        background-image: url('../cards/Back.jpg');
    }

    100% {
        transform: rotate3d(0, 1, 0, 0deg);
        background-image: url('../cards/Back.jpg');
    }
}

@keyframes flipToFront {
    0% {
        transform: rotate3d(0, 1, 0, 0deg);
        background-image: url('../cards/Back.jpg');
    }

    45% {
        background-image: url('../cards/Back.jpg');
    }

    50% {
        transform: rotate3d(0, 1, 0, 90deg);
        /* background-image: url('../cards/back.jpg'); */
    }

    100% {
        transform: rotate3d(0, 1, 0, 0deg);
        /* background-image: url('../cards/back.jpg'); */
    }
}

@keyframes flipToFront_title {
    0% {
        display: block;
        /* background-color: #96BAF8; */
    }

    100% {
        display: none;
        /* background-color: #96BAF8; */
    }
}

@keyframes flipToBack_title {
    0% {
        display: none;
        /* background-color: #96BAF8; */
    }

    100% {
        display: block;
        /* background-color: #96BAF8; */
    }
}

/*:::: UI ::::*/
@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }

}

@keyframes glow {
    0% {
        /* background-color: rgba(243, 255, 199,0); */
        box-shadow: 0px 0px 0px 0px rgba(243, 255, 199, 0);

    }

    33% {
        /* background-color: var( --col_primary); */
        box-shadow: 0px 0px 3px 5px var(--col_primary);

    }

    100% {
        /* background-color: rgba(243, 255, 199,0); */
        box-shadow: 0px 0px 3px 5px rgba(243, 255, 199, 0);
    }
}

@keyframes sellect {
    0% {
        background-color: rgba(243, 255, 199, 0);
        border-color: var(--col_secondary);
        box-shadow: 0px 0px 0px 0px rgba(243, 255, 199, 0);

    }

    33% {
        background-color: rgba(243, 255, 199,0.3);
        border-color: rgba(243, 255, 199,0.3);
        box-shadow: 0px 0px 10px 10px rgba(243, 255, 199,0.3);
    }

    100% {
        background-color: rgba(243, 255, 199, 0);
        border-color: var(--col_secondary);
        box-shadow: 0px 0px 0px 0px rgba(243, 255, 199, 0);
    }
}