/* Animations */

/* Fix for ios safari flicker? */
#wrapper {
    -webkit-backface-visibility: hidden;
}

/* Makes things flash */
.blink {
    animation-name: blinker;
    animation-duration: 2.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@keyframes blinker {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Makes things spin forever */
.spin {
    animation-name: spin;
    animation-duration: 10000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    display: inline-block;
}
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* CSS replica of <marquee> - requires and internal span */
.marquee span {
    width: max-content;
    display: inline-block;
    animation: marquee 25s linear infinite;
    padding-left: 100%;
}

.marquee span:hover {
    animation-play-state: paused;
}

.marquee-reverse span {
    width: max-content;
    display: inline-block;
    padding-left: 100%;
    animation-play-state: paused;
}

.marquee-reverse span:hover {
    animation: marquee 25s linear infinite;
}

@keyframes marquee {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-100%, 0);
    }
}

/* Dumb Safari Filter for dumb safari being dumb */
@supports (-webkit-backdrop-filter: blur(1px)) {
    .marquee span {
        width: 100%;
        animation: marquee-basic 40s linear infinite;
        padding-left: unset;
    }
    @keyframes marquee-basic {
        0% {
            transform: translate(100%, 0);
        }
        100% {
            transform: translate(-100%, 0);
        }
    }
}

/* Diagonal background animation */
.diagonal {
    animation: diagonal 120s linear infinite;
}
@keyframes diagonal {
    0% {
        background-position-x: 0%;
        background-position-y: 0%;
    }
    100% {
        background-position-x: 100%;
        background-position-y: 100%;
    }
}

/* Hovers Effects */
.fade {
    transition: 0.2s;
}
.fade:hover {
    opacity: 0.5;
}

.glow {
    transition: 0.2s;
}
.glow:hover {
    filter: brightness(1.5);
}

.inset {
    transition: 0.1s;
}
.inset:hover {
    border-style: inset !important;
}

.tilt {
    transition: 0.2s;
}
.tilt:hover {
    transform: rotate(6deg);
}

.twist {
    transition: 1s;
}
.twist:hover {
    transform: rotate(360deg);
}

.wiggle:hover {
    animation: wiggle 0.33s linear infinite;
}
@keyframes wiggle {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(5deg);
    }

    50% {
        transform: rotate(0deg);
    }

    75% {
        transform: rotate(-5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.flip:hover img {
    backface-visibility: visible;
    animation: flip 1.1s;
}
@keyframes flip {
    from {
        transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        animation-timing-function: ease-out;
    }

    40% {
        transform: perspective(700px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        animation-timing-function: ease-out;
    }

    50% {
        transform: perspective(700px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        animation-timing-function: ease-in;
    }

    80% {
        transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
        animation-timing-function: ease-in;
    }

    to {
        transform: perspective(400px);
        animation-timing-function: ease-in;
    }
}