@gambito-corp/mbs-library/src/components/atoms/Animated/Animated.css

Librería de componentes React reutilizables - Sistema de diseño modular y escalable

/* ===== ANIMACIONES DE ENTRADA (ENTRANCES) ===== */

/* FADE ENTRANCES */
.fade-in {
    animation: fade-in 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

@keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.fade-in-top {
    animation: fade-in-top 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

@keyframes fade-in-top {
    0% {
        transform: translateY(-50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.fade-in-bottom {
    animation: fade-in-bottom 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

@keyframes fade-in-bottom {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.fade-in-left {
    animation: fade-in-left 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

@keyframes fade-in-left {
    0% {
        transform: translateX(-50px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.fade-in-right {
    animation: fade-in-right 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

@keyframes fade-in-right {
    0% {
        transform: translateX(50px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.fade-in-top-left {
    animation: fade-in-top-left 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

@keyframes fade-in-top-left {
    0% {
        transform: translate(-50px, -50px);
        opacity: 0;
    }
    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

.fade-in-top-right {
    animation: fade-in-top-right 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

@keyframes fade-in-top-right {
    0% {
        transform: translate(50px, -50px);
        opacity: 0;
    }
    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

.fade-in-bottom-left {
    animation: fade-in-bottom-left 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

@keyframes fade-in-bottom-left {
    0% {
        transform: translate(-50px, 50px);
        opacity: 0;
    }
    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

.fade-in-bottom-right {
    animation: fade-in-bottom-right 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

@keyframes fade-in-bottom-right {
    0% {
        transform: translate(50px, 50px);
        opacity: 0;
    }
    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

/* SCALE ENTRANCES */
.scale-in-center {
    animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes scale-in-center {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.scale-in-top {
    animation: scale-in-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes scale-in-top {
    0% {
        transform: scale(0);
        transform-origin: 50% 0;
        opacity: 1;
    }
    100% {
        transform: scale(1);
        transform-origin: 50% 0;
        opacity: 1;
    }
}

.scale-in-bottom {
    animation: scale-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes scale-in-bottom {
    0% {
        transform: scale(0);
        transform-origin: 50% 100%;
        opacity: 1;
    }
    100% {
        transform: scale(1);
        transform-origin: 50% 100%;
        opacity: 1;
    }
}

.scale-in-left {
    animation: scale-in-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes scale-in-left {
    0% {
        transform: scale(0);
        transform-origin: 0 50%;
        opacity: 1;
    }
    100% {
        transform: scale(1);
        transform-origin: 0 50%;
        opacity: 1;
    }
}

.scale-in-right {
    animation: scale-in-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes scale-in-right {
    0% {
        transform: scale(0);
        transform-origin: 100% 50%;
        opacity: 1;
    }
    100% {
        transform: scale(1);
        transform-origin: 100% 50%;
        opacity: 1;
    }
}

.scale-in-hor-center {
    animation: scale-in-hor-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes scale-in-hor-center {
    0% {
        transform: scaleX(0);
        opacity: 1;
    }
    100% {
        transform: scaleX(1);
        opacity: 1;
    }
}

.scale-in-ver-center {
    animation: scale-in-ver-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes scale-in-ver-center {
    0% {
        transform: scaleY(0);
        opacity: 1;
    }
    100% {
        transform: scaleY(1);
        opacity: 1;
    }
}

/* SLIDE ENTRANCES */
.slide-in-top {
    animation: slide-in-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes slide-in-top {
    0% {
        transform: translateY(-1000px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.slide-in-bottom {
    animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes slide-in-bottom {
    0% {
        transform: translateY(1000px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.slide-in-left {
    animation: slide-in-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes slide-in-left {
    0% {
        transform: translateX(-1000px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.slide-in-right {
    animation: slide-in-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes slide-in-right {
    0% {
        transform: translateX(1000px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.slide-in-blurred-top {
    animation: slide-in-blurred-top 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
}

@keyframes slide-in-blurred-top {
    0% {
        transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
        transform-origin: 50% 0;
        filter: blur(40px);
        opacity: 0;
    }
    100% {
        transform: translateY(0) scaleY(1) scaleX(1);
        transform-origin: 50% 50%;
        filter: blur(0);
        opacity: 1;
    }
}

.slide-in-blurred-bottom {
    animation: slide-in-blurred-bottom 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
}

@keyframes slide-in-blurred-bottom {
    0% {
        transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
        transform-origin: 50% 100%;
        filter: blur(40px);
        opacity: 0;
    }
    100% {
        transform: translateY(0) scaleY(1) scaleX(1);
        transform-origin: 50% 50%;
        filter: blur(0);
        opacity: 1;
    }
}

.slide-in-blurred-left {
    animation: slide-in-blurred-left 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
}

@keyframes slide-in-blurred-left {
    0% {
        transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
        transform-origin: 0 50%;
        filter: blur(40px);
        opacity: 0;
    }
    100% {
        transform: translateX(0) scaleX(1) scaleY(1);
        transform-origin: 50% 50%;
        filter: blur(0);
        opacity: 1;
    }
}

.slide-in-blurred-right {
    animation: slide-in-blurred-right 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
}

@keyframes slide-in-blurred-right {
    0% {
        transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
        transform-origin: 100% 50%;
        filter: blur(40px);
        opacity: 0;
    }
    100% {
        transform: translateX(0) scaleX(1) scaleY(1);
        transform-origin: 50% 50%;
        filter: blur(0);
        opacity: 1;
    }
}

/* ROTATE ENTRANCES */
.rotate-in-center {
    animation: rotate-in-center 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes rotate-in-center {
    0% {
        transform: rotate(-360deg);
        opacity: 0;
    }
    100% {
        transform: rotate(0);
        opacity: 1;
    }
}

.rotate-in-left {
    animation: rotate-in-left 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes rotate-in-left {
    0% {
        transform: rotate(-360deg);
        transform-origin: left center;
        opacity: 0;
    }
    100% {
        transform: rotate(0);
        transform-origin: left center;
        opacity: 1;
    }
}

.rotate-in-right {
    animation: rotate-in-right 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes rotate-in-right {
    0% {
        transform: rotate(360deg);
        transform-origin: right center;
        opacity: 0;
    }
    100% {
        transform: rotate(0);
        transform-origin: right center;
        opacity: 1;
    }
}

.rotate-in-top {
    animation: rotate-in-top 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes rotate-in-top {
    0% {
        transform: rotate(-360deg);
        transform-origin: top center;
        opacity: 0;
    }
    100% {
        transform: rotate(0);
        transform-origin: top center;
        opacity: 1;
    }
}

.rotate-in-bottom {
    animation: rotate-in-bottom 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes rotate-in-bottom {
    0% {
        transform: rotate(360deg);
        transform-origin: bottom center;
        opacity: 0;
    }
    100% {
        transform: rotate(0);
        transform-origin: bottom center;
        opacity: 1;
    }
}

/* BOUNCE ENTRANCES */
.bounce-in-center {
    animation: bounce-in-center 1.1s both;
}

@keyframes bounce-in-center {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    55% {
        transform: scale(1.05);
    }
    60% {
        transform: scale(0.9);
    }
    80% {
        transform: scale(1.03);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.bounce-in-top {
    animation: bounce-in-top 1.1s both;
}

@keyframes bounce-in-top {
    0% {
        transform: translateY(-500px);
        animation-timing-function: ease-in;
        opacity: 0;
    }
    38% {
        transform: translateY(0);
        animation-timing-function: ease-out;
        opacity: 1;
    }
    55% {
        transform: translateY(-65px);
        animation-timing-function: ease-in;
    }
    72% {
        transform: translateY(0);
        animation-timing-function: ease-out;
    }
    81% {
        transform: translateY(-28px);
        animation-timing-function: ease-in;
    }
    90% {
        transform: translateY(0);
        animation-timing-function: ease-out;
    }
    95% {
        transform: translateY(-8px);
        animation-timing-function: ease-in;
    }
    100% {
        transform: translateY(0);
        animation-timing-function: ease-out;
    }
}

.bounce-in-bottom {
    animation: bounce-in-bottom 1.1s both;
}

@keyframes bounce-in-bottom {
    0% {
        transform: translateY(500px);
        animation-timing-function: ease-in;
        opacity: 0;
    }
    38% {
        transform: translateY(0);
        animation-timing-function: ease-out;
        opacity: 1;
    }
    55% {
        transform: translateY(65px);
        animation-timing-function: ease-in;
    }
    72% {
        transform: translateY(0);
        animation-timing-function: ease-out;
    }
    81% {
        transform: translateY(28px);
        animation-timing-function: ease-in;
    }
    90% {
        transform: translateY(0);
        animation-timing-function: ease-out;
    }
    95% {
        transform: translateY(8px);
        animation-timing-function: ease-in;
    }
    100% {
        transform: translateY(0);
        animation-timing-function: ease-out;
    }
}

.bounce-in-left {
    animation: bounce-in-left 1.1s both;
}

@keyframes bounce-in-left {
    0% {
        transform: translateX(-600px);
        animation-timing-function: ease-in;
        opacity: 0;
    }
    38% {
        transform: translateX(0);
        animation-timing-function: ease-out;
        opacity: 1;
    }
    55% {
        transform: translateX(-68px);
        animation-timing-function: ease-in;
    }
    72% {
        transform: translateX(0);
        animation-timing-function: ease-out;
    }
    81% {
        transform: translateX(-28px);
        animation-timing-function: ease-in;
    }
    90% {
        transform: translateX(0);
        animation-timing-function: ease-out;
    }
    95% {
        transform: translateX(-8px);
        animation-timing-function: ease-in;
    }
    100% {
        transform: translateX(0);
        animation-timing-function: ease-out;
    }
}

.bounce-in-right {
    animation: bounce-in-right 1.1s both;
}

@keyframes bounce-in-right {
    0% {
        transform: translateX(600px);
        animation-timing-function: ease-in;
        opacity: 0;
    }
    38% {
        transform: translateX(0);
        animation-timing-function: ease-out;
        opacity: 1;
    }
    55% {
        transform: translateX(68px);
        animation-timing-function: ease-in;
    }
    72% {
        transform: translateX(0);
        animation-timing-function: ease-out;
    }
    81% {
        transform: translateX(28px);
        animation-timing-function: ease-in;
    }
    90% {
        transform: translateX(0);
        animation-timing-function: ease-out;
    }
    95% {
        transform: translateX(8px);
        animation-timing-function: ease-in;
    }
    100% {
        transform: translateX(0);
        animation-timing-function: ease-out;
    }
}

/* PUFF ENTRANCES */
.puff-in-center {
    animation: puff-in-center 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) both;
}

@keyframes puff-in-center {
    0% {
        transform: scale(2);
        filter: blur(4px);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        filter: blur(0px);
        opacity: 1;
    }
}

.puff-in-top {
    animation: puff-in-top 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) both;
}

@keyframes puff-in-top {
    0% {
        transform: scale(2) translateY(-300px);
        transform-origin: 50% 0;
        filter: blur(4px);
        opacity: 0;
    }
    100% {
        transform: scale(1) translateY(0px);
        transform-origin: 50% 50%;
        filter: blur(0px);
        opacity: 1;
    }
}

.puff-in-bottom {
    animation: puff-in-bottom 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) both;
}

@keyframes puff-in-bottom {
    0% {
        transform: scale(2) translateY(300px);
        transform-origin: 50% 100%;
        filter: blur(4px);
        opacity: 0;
    }
    100% {
        transform: scale(1) translateY(0px);
        transform-origin: 50% 50%;
        filter: blur(0px);
        opacity: 1;
    }
}

.puff-in-left {
    animation: puff-in-left 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) both;
}

@keyframes puff-in-left {
    0% {
        transform: scale(2) translateX(-300px);
        transform-origin: 0 50%;
        filter: blur(4px);
        opacity: 0;
    }
    100% {
        transform: scale(1) translateX(0px);
        transform-origin: 50% 50%;
        filter: blur(0px);
        opacity: 1;
    }
}

.puff-in-right {
    animation: puff-in-right 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) both;
}

@keyframes puff-in-right {
    0% {
        transform: scale(2) translateX(300px);
        transform-origin: 100% 50%;
        filter: blur(4px);
        opacity: 0;
    }
    100% {
        transform: scale(1) translateX(0px);
        transform-origin: 50% 50%;
        filter: blur(0px);
        opacity: 1;
    }
}

/* FLIP ENTRANCES */
.flip-in-hor-bottom {
    animation: flip-in-hor-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes flip-in-hor-bottom {
    0% {
        transform: rotateX(80deg);
        opacity: 0;
    }
    100% {
        transform: rotateX(0);
        opacity: 1;
    }
}

.flip-in-hor-top {
    animation: flip-in-hor-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes flip-in-hor-top {
    0% {
        transform: rotateX(-80deg);
        opacity: 0;
    }
    100% {
        transform: rotateX(0);
        opacity: 1;
    }
}

.flip-in-ver-left {
    animation: flip-in-ver-left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes flip-in-ver-left {
    0% {
        transform: rotateY(-80deg);
        opacity: 0;
    }
    100% {
        transform: rotateY(0);
        opacity: 1;
    }
}

.flip-in-ver-right {
    animation: flip-in-ver-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes flip-in-ver-right {
    0% {
        transform: rotateY(80deg);
        opacity: 0;
    }
    100% {
        transform: rotateY(0);
        opacity: 1;
    }
}

/* SWING ENTRANCES */
.swing-in-top-fwd {
    animation: swing-in-top-fwd 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

@keyframes swing-in-top-fwd {
    0% {
        transform: rotateX(-100deg);
        transform-origin: top;
        opacity: 0;
    }
    100% {
        transform: rotateX(0deg);
        transform-origin: top;
        opacity: 1;
    }
}

.swing-in-bottom-fwd {
    animation: swing-in-bottom-fwd 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

@keyframes swing-in-bottom-fwd {
    0% {
        transform: rotateX(100deg);
        transform-origin: bottom;
        opacity: 0;
    }
    100% {
        transform: rotateX(0deg);
        transform-origin: bottom;
        opacity: 1;
    }
}

/* ===== ANIMACIONES DE ATENCIÓN (ATTENTION) ===== */

.bounce-top {
    animation: bounce-top 0.9s both;
}

@keyframes bounce-top {
    0% {
        transform: translateY(-45px);
        animation-timing-function: ease-in;
        opacity: 1;
    }
    24% {
        opacity: 1;
    }
    40% {
        transform: translateY(-24px);
        animation-timing-function: ease-in;
    }
    65% {
        transform: translateY(-12px);
        animation-timing-function: ease-in;
    }
    82% {
        transform: translateY(-6px);
        animation-timing-function: ease-in;
    }
    93% {
        transform: translateY(-4px);
        animation-timing-function: ease-in;
    }
    25%, 55%, 75%, 87% {
        transform: translateY(0px);
        animation-timing-function: ease-out;
    }
    100% {
        transform: translateY(0px);
        animation-timing-function: ease-out;
        opacity: 1;
    }
}

.bounce-bottom {
    animation: bounce-bottom 0.9s both;
}

@keyframes bounce-bottom {
    0% {
        transform: translateY(45px);
        animation-timing-function: ease-in;
        opacity: 1;
    }
    24% {
        opacity: 1;
    }
    40% {
        transform: translateY(24px);
        animation-timing-function: ease-in;
    }
    65% {
        transform: translateY(12px);
        animation-timing-function: ease-in;
    }
    82% {
        transform: translateY(6px);
        animation-timing-function: ease-in;
    }
    93% {
        transform: translateY(4px);
        animation-timing-function: ease-in;
    }
    25%, 55%, 75%, 87% {
        transform: translateY(0px);
        animation-timing-function: ease-out;
    }
    100% {
        transform: translateY(0px);
        animation-timing-function: ease-out;
        opacity: 1;
    }
}

.bounce-left {
    animation: bounce-left 0.9s both;
}

@keyframes bounce-left {
    0% {
        transform: translateX(-48px);
        animation-timing-function: ease-in;
        opacity: 1;
    }
    24% {
        opacity: 1;
    }
    40% {
        transform: translateX(-26px);
        animation-timing-function: ease-in;
    }
    65% {
        transform: translateX(-13px);
        animation-timing-function: ease-in;
    }
    82% {
        transform: translateX(-6.5px);
        animation-timing-function: ease-in;
    }
    93% {
        transform: translateX(-4px);
        animation-timing-function: ease-in;
    }
    25%, 55%, 75%, 87% {
        transform: translateX(0px);
        animation-timing-function: ease-out;
    }
    100% {
        transform: translateX(0px);
        animation-timing-function: ease-out;
        opacity: 1;
    }
}

.bounce-right {
    animation: bounce-right 0.9s both;
}

@keyframes bounce-right {
    0% {
        transform: translateX(48px);
        animation-timing-function: ease-in;
        opacity: 1;
    }
    24% {
        opacity: 1;
    }
    40% {
        transform: translateX(26px);
        animation-timing-function: ease-in;
    }
    65% {
        transform: translateX(13px);
        animation-timing-function: ease-in;
    }
    82% {
        transform: translateX(6.5px);
        animation-timing-function: ease-in;
    }
    93% {
        transform: translateX(4px);
        animation-timing-function: ease-in;
    }
    25%, 55%, 75%, 87% {
        transform: translateX(0px);
        animation-timing-function: ease-out;
    }
    100% {
        transform: translateX(0px);
        animation-timing-function: ease-out;
        opacity: 1;
    }
}

.flash {
    animation: flash 2s infinite;
}

@keyframes flash {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0;
    }
}

.pulse-1 {
    animation: pulse-1 2s infinite;
}

@keyframes pulse-1 {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.pulse-2 {
    animation: pulse-2 2s infinite;
}

@keyframes pulse-2 {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.shake-horizontal {
    animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
}

@keyframes shake-horizontal {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70% {
        transform: translateX(-10px);
    }
    20%, 40%, 60% {
        transform: translateX(10px);
    }
    80% {
        transform: translateX(8px);
    }
    90% {
        transform: translateX(-8px);
    }
}

.shake-vertical {
    animation: shake-vertical 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
}

@keyframes shake-vertical {
    0%, 100% {
        transform: translateY(0);
    }
    10%, 30%, 50%, 70% {
        transform: translateY(-8px);
    }
    20%, 40%, 60% {
        transform: translateY(8px);
    }
    80% {
        transform: translateY(6.4px);
    }
    90% {
        transform: translateY(-6.4px);
    }
}

.vibrate-1 {
    animation: vibrate-1 0.3s linear infinite both;
}

@keyframes vibrate-1 {
    0% {
        transform: translate(0);
    }
    20% {
        transform: translate(-2px, 2px);
    }
    40% {
        transform: translate(-2px, -2px);
    }
    60% {
        transform: translate(2px, 2px);
    }
    80% {
        transform: translate(2px, -2px);
    }
    100% {
        transform: translate(0);
    }
}

.vibrate-2 {
    animation: vibrate-2 0.3s linear infinite both;
}

@keyframes vibrate-2 {
    0% {
        transform: translate(0);
    }
    10% {
        transform: translate(-2px, -2px);
    }
    20% {
        transform: translate(2px, -2px);
    }
    30% {
        transform: translate(-2px, 2px);
    }
    40% {
        transform: translate(2px, 2px);
    }
    50% {
        transform: translate(-2px, -2px);
    }
    60% {
        transform: translate(2px, -2px);
    }
    70% {
        transform: translate(-2px, 2px);
    }
    80% {
        transform: translate(-2px, -2px);
    }
    90% {
        transform: translate(2px, -2px);
    }
    100% {
        transform: translate(0);
    }
}

.wobble-hor-bottom {
    animation: wobble-hor-bottom 0.8s both;
}

@keyframes wobble-hor-bottom {
    0%, 100% {
        transform: translateX(0%);
        transform-origin: 50% 50%;
    }
    15% {
        transform: translateX(-30px) rotate(-6deg);
    }
    30% {
        transform: translateX(15px) rotate(6deg);
    }
    45% {
        transform: translateX(-15px) rotate(-3.6deg);
    }
    60% {
        transform: translateX(9px) rotate(2.4deg);
    }
    75% {
        transform: translateX(-6px) rotate(-1.2deg);
    }
}

.wobble-hor-top {
    animation: wobble-hor-top 0.8s both;
}

@keyframes wobble-hor-top {
    0%, 100% {
        transform: translateX(0%);
        transform-origin: 50% 50%;
    }
    15% {
        transform: translateX(-30px) rotate(6deg);
    }
    30% {
        transform: translateX(15px) rotate(-6deg);
    }
    45% {
        transform: translateX(-15px) rotate(3.6deg);
    }
    60% {
        transform: translateX(9px) rotate(-2.4deg);
    }
    75% {
        transform: translateX(-6px) rotate(1.2deg);
    }
}

.jello-horizontal {
    animation: jello-horizontal 0.9s both;
}

@keyframes jello-horizontal {
    0% {
        transform: scale3d(1, 1, 1);
    }
    30% {
        transform: scale3d(1.25, 0.75, 1);
    }
    40% {
        transform: scale3d(0.75, 1.25, 1);
    }
    50% {
        transform: scale3d(1.15, 0.85, 1);
    }
    65% {
        transform: scale3d(0.95, 1.05, 1);
    }
    75% {
        transform: scale3d(1.05, 0.95, 1);
    }
    100% {
        transform: scale3d(1, 1, 1);
    }
}

.jello-vertical {
    animation: jello-vertical 0.9s both;
}

@keyframes jello-vertical {
    0% {
        transform: scale3d(1, 1, 1);
    }
    30% {
        transform: scale3d(0.75, 1.25, 1);
    }
    40% {
        transform: scale3d(1.25, 0.75, 1);
    }
    50% {
        transform: scale3d(0.85, 1.15, 1);
    }
    65% {
        transform: scale3d(1.05, 0.95, 1);
    }
    75% {
        transform: scale3d(0.95, 1.05, 1);
    }
    100% {
        transform: scale3d(1, 1, 1);
    }
}

.heartbeat {
    animation: heartbeat 1.5s ease-in-out infinite both;
}

@keyframes heartbeat {
    from {
        transform: scale(1);
        transform-origin: center center;
        animation-timing-function: ease-out;
    }
    10% {
        transform: scale(0.91);
        animation-timing-function: ease-in;
    }
    17% {
        transform: scale(0.98);
        animation-timing-function: ease-out;
    }
    33% {
        transform: scale(0.87);
        animation-timing-function: ease-in;
    }
    45% {
        transform: scale(1);
        animation-timing-function: ease-out;
    }
}

.swing {
    animation: swing 1s ease-in-out infinite alternate;
}

@keyframes swing {
    0% {
        transform: rotate(15deg);
    }
    100% {
        transform: rotate(-15deg);
    }
}

.rubber-band {
    animation: rubber-band 1s both;
}

@keyframes rubber-band {
    from {
        transform: scale3d(1, 1, 1);
    }
    30% {
        transform: scale3d(1.25, 0.75, 1);
    }
    40% {
        transform: scale3d(0.75, 1.25, 1);
    }
    50% {
        transform: scale3d(1.15, 0.85, 1);
    }
    65% {
        transform: scale3d(0.95, 1.05, 1);
    }
    75% {
        transform: scale3d(1.05, 0.95, 1);
    }
    to {
        transform: scale3d(1, 1, 1);
    }
}

.tada {
    animation: tada 1s ease-in-out;
}

@keyframes tada {
    from {
        transform: scale3d(1, 1, 1);
    }
    10%, 20% {
        transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    }
    30%, 50%, 70%, 90% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }
    40%, 60%, 80% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }
    to {
        transform: scale3d(1, 1, 1);
    }
}

.blink-1 {
    animation: blink-1 0.6s both;
}

@keyframes blink-1 {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0;
    }
}

.blink-2 {
    animation: blink-2 2s infinite both;
}

@keyframes blink-2 {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0;
    }
}

.glow {
    animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
    from {
        box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
    }
    to {
        box-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
    }
}

.flicker-1 {
    animation: flicker-1 2s linear infinite both;
}

@keyframes flicker-1 {
    0%, 100% {
        opacity: 1;
    }
    41.99% {
        opacity: 1;
    }
    42% {
        opacity: 0;
    }
    43% {
        opacity: 0;
    }
    43.01% {
        opacity: 1;
    }
    47.99% {
        opacity: 1;
    }
    48% {
        opacity: 0;
    }
    49% {
        opacity: 0;
    }
    49.01% {
        opacity: 1;
    }
}

/* ===== ANIMACIONES DE TEXTO (TEXT) ===== */

.tracking-in-expand {
    animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}

@keyframes tracking-in-expand {
    0% {
        letter-spacing: -0.5em;
        opacity: 0;
    }
    40% {
        opacity: 0.6;
    }
    100% {
        opacity: 1;
    }
}

.tracking-in-contract {
    animation: tracking-in-contract 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}

@keyframes tracking-in-contract {
    0% {
        letter-spacing: 1em;
        opacity: 0;
    }
    40% {
        opacity: 0.6;
    }
    100% {
        letter-spacing: normal;
        opacity: 1;
    }
}

.text-focus-in {
    animation: text-focus-in 1s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

@keyframes text-focus-in {
    0% {
        filter: blur(12px);
        opacity: 0;
    }
    100% {
        filter: blur(0px);
        opacity: 1;
    }
}

.text-shadow-drop-center {
    animation: text-shadow-drop-center 0.6s both;
}

@keyframes text-shadow-drop-center {
    0% {
        text-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
    100% {
        text-shadow: 0 0 18px rgba(0, 0, 0, 0.35);
    }
}

.text-flicker-in-glow {
    animation: text-flicker-in-glow 2.5s linear both;
}

@keyframes text-flicker-in-glow {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 0;
        text-shadow: none;
    }
    10.1% {
        opacity: 1;
        text-shadow: none;
    }
    10.2% {
        opacity: 0;
        text-shadow: none;
    }
    20% {
        opacity: 0;
        text-shadow: none;
    }
    20.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.25);
    }
    20.6% {
        opacity: 0;
        text-shadow: none;
    }
    30% {
        opacity: 0;
        text-shadow: none;
    }
    30.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
    }
    30.5% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
    }
    30.6% {
        opacity: 0;
        text-shadow: none;
    }
    45% {
        opacity: 0;
        text-shadow: none;
    }
    45.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
    }
    50% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
    }
    55% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
    }
    55.1% {
        opacity: 0;
        text-shadow: none;
    }
    57% {
        opacity: 0;
        text-shadow: none;
    }
    57.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35);
    }
    60% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35);
    }
    60.1% {
        opacity: 0;
        text-shadow: none;
    }
    65% {
        opacity: 0;
        text-shadow: none;
    }
    65.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
    }
    75% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
    }
    75.1% {
        opacity: 0;
        text-shadow: none;
    }
    77% {
        opacity: 0;
        text-shadow: none;
    }
    77.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);
    }
    85% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);
    }
    85.1% {
        opacity: 0;
        text-shadow: none;
    }
    86% {
        opacity: 0;
        text-shadow: none;
    }
    86.1% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
    }
    100% {
        opacity: 1;
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
    }
}

.typewriter {
    animation: typewriter 4s steps(40) 1s 1 normal both;
}

@keyframes typewriter {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

/* ===== ANIMACIONES ESPECIALES (SPECIAL) ===== */

.glitch {
    animation: glitch 1s linear infinite;
}

@keyframes glitch {
    2%, 64% {
        transform: translate(2px, 0) skew(0deg);
    }
    4%, 60% {
        transform: translate(-2px, 0) skew(0deg);
    }
    62% {
        transform: translate(0, 0) skew(5deg);
    }
}

.neon-flicker {
    animation: neon-flicker 1.5s infinite alternate;
}

@keyframes neon-flicker {
    0%, 18%, 22%, 25%, 53%, 57%, 100% {
        text-shadow:
                0 0 4px #fff,
                0 0 11px #fff,
                0 0 19px #fff,
                0 0 40px #0fa,
                0 0 80px #0fa,
                0 0 90px #0fa,
                0 0 100px #0fa,
                0 0 150px #0fa;
    }
    20%, 24%, 55% {
        text-shadow: none;
    }
}

.hologram {
    animation: hologram 2s ease-in-out infinite;
}

@keyframes hologram {
    0%, 100% {
        opacity: 1;
        transform: rotateY(0deg);
    }
    50% {
        opacity: 0.8;
        transform: rotateY(180deg);
    }
}

/* ===== UTILIDADES Y CONFIGURACIONES ===== */

.animated-element {
    animation-fill-mode: both;
}

.animated-infinite {
    animation-iteration-count: infinite;
}

.animated-paused {
    animation-play-state: paused;
}

.animated-delay-1s {
    animation-delay: 1s;
}

.animated-delay-2s {
    animation-delay: 2s;
}

.animated-delay-3s {
    animation-delay: 3s;
}

.animated-duration-fast {
    animation-duration: 0.3s;
}

.animated-duration-slow {
    animation-duration: 2s;
}

/* Responsive adjustments */
@media (prefers-reduced-motion: reduce) {
    .animated-element,
    [class*="fade-"],
    [class*="scale-"],
    [class*="slide-"],
    [class*="rotate-"],
    [class*="bounce-"],
    [class*="puff-"],
    [class*="flip-"],
    [class*="swing-"],
    [class*="shake-"],
    [class*="vibrate-"],
    [class*="wobble-"],
    [class*="jello-"],
    [class*="glow"],
    [class*="flicker-"],
    [class*="glitch"],
    [class*="neon-"],
    [class*="hologram"] {
        animation: none !important;
    }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .glow {
        filter: brightness(0.8);
    }

    .neon-flicker {
        filter: brightness(1.2);
    }
}