.animation {
    position: absolute !important;
    transition: all 1000ms ease-in-out;
    z-index: 9999 !important;
}
.animation.chip {
    z-index: 4 !important;
}
.animation.rake-charge {
    z-index: 10 !important;
}
.anim_scaleInOut {
    animation: scaleInOut 1.0s ease-out;
}
.anim_scaleInOutTransform {
    animation: anim_scaleInOutTransform 2.0s ease-out;
    will-change: transform;
    animation-fill-mode: forwards;
}
.anim_scaleIn {
    transform: scale(0);
    animation: scaleIn 0.1s ease-out;
}
.rake-charge {
    font-size: calc(20px * var(--ui-scale));
    --stroke-size: calc(1px * var(--ui-scale));

    color: white;
    font-weight: 700;

    /* Full 8-direction text-shadow */
    text-shadow:
            calc(-1 * var(--stroke-size)) calc(-1 * var(--stroke-size)) 0 black,
            0                             calc(-1 * var(--stroke-size)) 0 black,
            calc(1 * var(--stroke-size))  calc(-1 * var(--stroke-size)) 0 black,
            calc(-1 * var(--stroke-size)) 0                             0 black,
            calc(1 * var(--stroke-size))  0                             0 black,
            calc(-1 * var(--stroke-size)) calc(1 * var(--stroke-size))  0 black,
            0                              calc(1 * var(--stroke-size)) 0 black,
            calc(1 * var(--stroke-size))  calc(1 * var(--stroke-size))  0 black;
}
@keyframes scaleIn {
    0%      { transform: scale(0); }
    100%    { transform: scale(1); }
}
@keyframes scaleInOut {
    0%      { opacity: 0; }
    30%    { opacity: 1; }
    90%    { opacity: 1; }
    100%    { opacity: 0;}
}
@keyframes anim_scaleInOutTransform {
    0%      { transform: scale(0)}
    20%    { transform: scale(1)}
    60%    { transform: scale(1); opacity: 1;}
    100%    { transform: scale(1); opacity: 0;}
}
.show-hint {
    animation: showHintBorder 0.75s ease-in-out;
    animation-iteration-count: 3;
}
@keyframes showHintBorder {
    0%, 100% {}
    33%, 67% {
        /*
        box-shadow: calc(5px * var(--canvas-scale)) calc(5px * var(--canvas-scale)) calc(10px * var(--canvas-scale)) rgba(255, 145, 0, 0.7),
            calc(-5px * var(--canvas-scale)) calc(5px * var(--canvas-scale)) calc(10px * var(--canvas-scale)) rgba(255, 145, 0, 0.7),
            calc(-5px * var(--canvas-scale)) calc(-5px * var(--canvas-scale)) calc(10px * var(--canvas-scale)) rgba(255, 145, 0, 0.7),
            calc(5px * var(--canvas-scale)) calc(-5px * var(--canvas-scale)) calc(10px * var(--canvas-scale)) rgba(255, 145, 0, 0.7);
        */

        outline: calc(5px * var(--canvas-scale)) solid rgba(255, 145, 0, 0.7);
    }
}

.card-drop-down {
    animation: cardDropDown 1s ease-in-out forwards;
    transform: translateY(-100vh);
}

@keyframes cardDropDown {
    0% {
        transform: translateY(-100vh);
    }
    80% {
        transform: translateY(1vh);
    }
    90% {
        transform: translateY(-1vh);
    }
    100% {
        transform: translateY(0);
    }
}


@keyframes from0To100Opacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes backgroundScalePulse {
    0%      { transform: scale(0.75, 0.67); }
    50%      { transform: scale(0.9, 0.8); }
    100%      { transform: scale(0.75, 0.67); }
}