/* ====================================================================
   BRUTAL SURFACES - ANIMATIONS
   All entrance/exit animation keyframes and classes
   ==================================================================== */

/* FADE ANIMATIONS */
@keyframes brutal-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes brutal-fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.brutal-surface-fade-in {
    animation: brutal-fade-in 300ms ease-out;
}

.brutal-surface-fade-out {
    animation: brutal-fade-out 300ms ease-out;
}

/* BOUNCE ANIMATIONS */
@keyframes brutal-bounce-in {
    0% {
        opacity: 0;
        transform: scale(0.3) translateY(-100px);
    }
    50% {
        opacity: 1;
        transform: scale(1.05) translateY(0);
    }
    70% {
        opacity: 1;
        transform: scale(0.9) translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes brutal-bounce-out {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    30% {
        transform: scale(1.1) translateY(-20px);
    }
    100% {
        opacity: 0;
        transform: scale(0.3) translateY(100px);
    }
}

.brutal-surface-bounce-in {
    animation: brutal-bounce-in 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.brutal-surface-bounce-out {
    animation: brutal-bounce-out 500ms ease-in;
}

/* SLIDE UP ANIMATIONS */
@keyframes brutal-slide-up-in {
    from {
        opacity: 0;
        transform: translateY(100vh);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes brutal-slide-up-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-100vh);
    }
}

.brutal-surface-slide-up-in {
    animation: brutal-slide-up-in 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.brutal-surface-slide-up-out {
    animation: brutal-slide-up-out 400ms ease-in;
}

/* SLIDE DOWN ANIMATIONS */
@keyframes brutal-slide-down-in {
    from {
        opacity: 0;
        transform: translateY(-100vh);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes brutal-slide-down-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(100vh);
    }
}

.brutal-surface-slide-down-in {
    animation: brutal-slide-down-in 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.brutal-surface-slide-down-out {
    animation: brutal-slide-down-out 400ms ease-in;
}

/* SLIDE LEFT ANIMATIONS */
@keyframes brutal-slide-left-in {
    from {
        opacity: 0;
        transform: translateX(100vw);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes brutal-slide-left-out {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-100vw);
    }
}

.brutal-surface-slide-left-in {
    animation: brutal-slide-left-in 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.brutal-surface-slide-left-out {
    animation: brutal-slide-left-out 400ms ease-in;
}

/* SLIDE RIGHT ANIMATIONS */
@keyframes brutal-slide-right-in {
    from {
        opacity: 0;
        transform: translateX(-100vw);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes brutal-slide-right-out {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100vw);
    }
}

.brutal-surface-slide-right-in {
    animation: brutal-slide-right-in 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.brutal-surface-slide-right-out {
    animation: brutal-slide-right-out 400ms ease-in;
}

/* SCALE ANIMATIONS */
@keyframes brutal-scale-in {
    from {
        opacity: 0;
        transform: scale(0);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes brutal-scale-out {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0);
    }
}

.brutal-surface-scale-in {
    animation: brutal-scale-in 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.brutal-surface-scale-out {
    animation: brutal-scale-out 350ms ease-in;
}

/* FLIP ANIMATIONS */
@keyframes brutal-flip-in {
    from {
        opacity: 0;
        transform: perspective(400px) rotateY(90deg);
    }
    to {
        opacity: 1;
        transform: perspective(400px) rotateY(0deg);
    }
}

@keyframes brutal-flip-out {
    from {
        opacity: 1;
        transform: perspective(400px) rotateY(0deg);
    }
    to {
        opacity: 0;
        transform: perspective(400px) rotateY(-90deg);
    }
}

.brutal-surface-flip-in {
    animation: brutal-flip-in 600ms ease-out;
    transform-style: preserve-3d;
}

.brutal-surface-flip-out {
    animation: brutal-flip-out 600ms ease-in;
    transform-style: preserve-3d;
}

/* GLITCH ANIMATIONS */
@keyframes brutal-glitch-in {
    0% {
        opacity: 0;
        transform: translateX(-100px) skewX(-30deg);
        filter: hue-rotate(0deg);
    }
    20% {
        transform: translateX(100px) skewX(30deg);
        filter: hue-rotate(90deg);
    }
    40% {
        transform: translateX(-50px) skewX(-15deg);
        filter: hue-rotate(180deg);
    }
    60% {
        transform: translateX(50px) skewX(15deg);
        filter: hue-rotate(270deg);
    }
    80% {
        transform: translateX(-10px) skewX(-5deg);
        filter: hue-rotate(360deg);
    }
    100% {
        opacity: 1;
        transform: translateX(0) skewX(0deg);
        filter: hue-rotate(0deg);
    }
}

@keyframes brutal-glitch-out {
    0% {
        opacity: 1;
        transform: translateX(0) skewX(0deg);
        filter: hue-rotate(0deg);
    }
    20% {
        transform: translateX(10px) skewX(5deg);
        filter: hue-rotate(90deg);
    }
    40% {
        transform: translateX(-50px) skewX(15deg);
        filter: hue-rotate(180deg);
    }
    60% {
        transform: translateX(100px) skewX(-30deg);
        filter: hue-rotate(270deg);
    }
    80% {
        transform: translateX(-100px) skewX(30deg);
        filter: hue-rotate(360deg);
    }
    100% {
        opacity: 0;
        transform: translateX(100px) skewX(-30deg);
        filter: hue-rotate(0deg);
    }
}

.brutal-surface-glitch-in {
    animation: brutal-glitch-in 800ms ease-out;
}

.brutal-surface-glitch-out {
    animation: brutal-glitch-out 800ms ease-in;
}

/* MATRIX ANIMATIONS */
@keyframes brutal-matrix-in {
    0% {
        opacity: 0;
        transform: translateY(-100vh) scaleY(0.1);
        filter: blur(10px) hue-rotate(0deg);
    }
    50% {
        opacity: 0.5;
        filter: blur(5px) hue-rotate(180deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scaleY(1);
        filter: blur(0px) hue-rotate(360deg);
    }
}

@keyframes brutal-matrix-out {
    0% {
        opacity: 1;
        transform: translateY(0) scaleY(1);
        filter: blur(0px) hue-rotate(0deg);
    }
    50% {
        opacity: 0.5;
        filter: blur(5px) hue-rotate(180deg);
    }
    100% {
        opacity: 0;
        transform: translateY(100vh) scaleY(0.1);
        filter: blur(10px) hue-rotate(360deg);
    }
}

.brutal-surface-matrix-in {
    animation: brutal-matrix-in 1000ms ease-out;
}

.brutal-surface-matrix-out {
    animation: brutal-matrix-out 1000ms ease-in;
}

/* ZOOM ANIMATIONS */
@keyframes brutal-zoom-in {
    from {
        opacity: 0;
        transform: scale(0) rotate(180deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

@keyframes brutal-zoom-out {
    from {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
    to {
        opacity: 0;
        transform: scale(0) rotate(-180deg);
    }
}

.brutal-surface-zoom-in {
    animation: brutal-zoom-in 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.brutal-surface-zoom-out {
    animation: brutal-zoom-out 300ms ease-in;
}

/* ROTATE ANIMATIONS */
@keyframes brutal-rotate-in {
    from {
        opacity: 0;
        transform: rotate(-720deg) scale(0);
    }
    to {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}

@keyframes brutal-rotate-out {
    from {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
    to {
        opacity: 0;
        transform: rotate(720deg) scale(0);
    }
}

.brutal-surface-rotate-in {
    animation: brutal-rotate-in 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.brutal-surface-rotate-out {
    animation: brutal-rotate-out 500ms ease-in;
}