/*
╔═══════════════════════════════════════════════════════════════════╗
║ NEURALSTACK ANIMATION LIBRARY                                    ║
║ Clean, semantic animation classes for all components             ║
╚═══════════════════════════════════════════════════════════════════╝

USAGE:
    Add class to any element: <div class="FADE_IN">
    Combine with your components: <div class="wishlist-container SLIDE_UP">

CATEGORIES:
    1. FADE ANIMATIONS        - Simple opacity transitions
    2. SLIDE ANIMATIONS       - Directional slides with fade
    3. BOUNCE ANIMATIONS      - Bouncy elastic entries/exits
    4. SCALE ANIMATIONS       - Zoom effects
    5. FLIP ANIMATIONS        - 3D rotation effects
    6. SWING ANIMATIONS       - Pendulum rotations
    7. BLUR ANIMATIONS        - Blurred motion
    8. SPECIAL EFFECTS        - Complex combinations
    9. CONTINUOUS ANIMATIONS  - Infinite loops (pulse, heartbeat, etc)



FADE_IN
FADE_OUT
FADE_OUT_BACK
SLIDE_UP
SLIDE_DOWN
SLIDE_LEFT
SLIDE_RIGHT
SLIDE_OUT_UP
SLIDE_OUT_DOWN
SLIDE_OUT_LEFT
SLIDE_OUT_RIGHT
BOUNCE_IN
BOUNCE_IN_UP
BOUNCE_IN_DOWN
BOUNCE_IN_LEFT
BOUNCE_IN_RIGHT
BOUNCE_OUT_RIGHT
SCALE_IN
SCALE_IN_CENTER
SCALE_IN_TOP
SCALE_IN_BOTTOM
SCALE_OUT
SCALE_OUT_BOTTOM
FLIP_IN_X
FLIP_IN_Y
FLIP_OUT_Y
FLIP_SCALE_TOP
SWING_IN_TOP
SWING_IN_BOTTOM
SWING_OUT_RIGHT
BLUR_IN
BLUR_IN_UP
BLUR_IN_DOWN
BLUR_IN_LEFT
BLUR_IN_RIGHT
BLUR_OUT_RIGHT
PUFF_IN
PUFF_OUT
ROLL_IN
JELLO
TILT_IN
SLIDE_ROTATE_IN
SLIDE_ROTATE_OUT
SLIT_IN
SLIT_OUT
HEARTBEAT
PULSE
FLOAT
ROTATE
SHAKE
GLOW
ANIM_FAST
ANIM_SLOW
ANIM_DELAY_1
ANIM_DELAY_2
ANIM_DELAY_3
*/

/* ====================================================================
   1. FADE ANIMATIONS - Simple opacity
   ==================================================================== */

.FADE_IN {
    animation: fadeIn 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.FADE_OUT {
    animation: fadeOut 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.FADE_OUT_BACK {
    animation: fadeOutBack 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes fadeOutBack {
    from { transform: translateZ(0); opacity: 1; }
    to { transform: translateZ(-80px); opacity: 0; }
}

/* ====================================================================
   2. SLIDE ANIMATIONS - Directional movement
   ==================================================================== */

.SLIDE_UP {
    animation: slideUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes slideUp {
    from { transform: translateY(60px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.SLIDE_DOWN {
    animation: slideDown 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes slideDown {
    from { transform: translateY(-60px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.SLIDE_LEFT {
    animation: slideLeft 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes slideLeft {
    from { transform: translateX(60px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.SLIDE_RIGHT {
    animation: slideRight 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes slideRight {
    from { transform: translateX(-60px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Exit slides */
.SLIDE_OUT_UP {
    animation: slideOutUp 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}
@keyframes slideOutUp {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(-1000px); opacity: 0; }
}

.SLIDE_OUT_DOWN {
    animation: slideOutDown 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}
@keyframes slideOutDown {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(1000px); opacity: 0; }
}

.SLIDE_OUT_LEFT {
    animation: slideOutLeft 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}
@keyframes slideOutLeft {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(-1000px); opacity: 0; }
}

.SLIDE_OUT_RIGHT {
    animation: slideOutRight 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}
@keyframes slideOutRight {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(1000px); opacity: 0; }
}

/* ====================================================================
   3. BOUNCE ANIMATIONS - Elastic entries
   ==================================================================== */

.BOUNCE_IN {
    animation: bounceIn 1.1s both;
}
@keyframes bounceIn {
    0% { transform: scale(7); opacity: 0; }
    38% { transform: scale(1); opacity: 1; }
    55% { transform: scale(1.5); }
    72% { transform: scale(1); }
    81% { transform: scale(1.24); }
    89% { transform: scale(1); }
    95% { transform: scale(1.04); }
    100% { transform: scale(1); }
}

.BOUNCE_IN_UP {
    animation: bounceInUp 1.1s both;
}
@keyframes bounceInUp {
    0% { transform: translateY(500px); opacity: 0; }
    38% { transform: translateY(0); opacity: 1; }
    55% { transform: translateY(65px); }
    72% { transform: translateY(0); }
    81% { transform: translateY(28px); }
    90% { transform: translateY(0); }
    95% { transform: translateY(8px); }
    100% { transform: translateY(0); }
}

.BOUNCE_IN_DOWN {
    animation: bounceInDown 1.1s both;
}
@keyframes bounceInDown {
    0% { transform: translateY(-500px); opacity: 0; }
    38% { transform: translateY(0); opacity: 1; }
    55% { transform: translateY(-65px); }
    72% { transform: translateY(0); }
    81% { transform: translateY(-28px); }
    90% { transform: translateY(0); }
    95% { transform: translateY(-8px); }
    100% { transform: translateY(0); }
}

.BOUNCE_IN_LEFT {
    animation: bounceInLeft 1.1s both;
}
@keyframes bounceInLeft {
    0% { transform: translateX(-1200px); opacity: 0; }
    38% { transform: translateX(0); opacity: 1; }
    55% { transform: translateX(-68px); }
    72% { transform: translateX(0); }
    81% { transform: translateX(-32px); }
    90% { transform: translateX(0); }
    95% { transform: translateX(-8px); }
    100% { transform: translateX(0); }
}

.BOUNCE_IN_RIGHT {
    animation: bounceInRight 1.1s both;
}
@keyframes bounceInRight {
    0% { transform: translateX(1200px); opacity: 0; }
    38% { transform: translateX(0); opacity: 1; }
    55% { transform: translateX(68px); }
    72% { transform: translateX(0); }
    81% { transform: translateX(32px); }
    90% { transform: translateX(0); }
    95% { transform: translateX(8px); }
    100% { transform: translateX(0); }
}

.BOUNCE_OUT_RIGHT {
    animation: bounceOutRight 1.5s both;
}
@keyframes bounceOutRight {
    0% { transform: translateX(0); }
    5% { transform: translateX(30px); }
    15% { transform: translateX(0); }
    25% { transform: translateX(38px); }
    38% { transform: translateX(0); }
    52% { transform: translateX(80px); }
    65% { transform: translateX(0); }
    85% { opacity: 1; }
    100% { transform: translateX(1000px); opacity: 0; }
}

/* ====================================================================
   4. SCALE ANIMATIONS - Zoom effects
   ==================================================================== */

.SCALE_IN {
    animation: scaleIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes scaleIn {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.SCALE_IN_CENTER {
    animation: scaleInCenter 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}
@keyframes scaleInCenter {
    from { transform: scale(0.5); }
    to { transform: scale(1); }
}

.SCALE_IN_TOP {
    animation: scaleInTop 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes scaleInTop {
    from { transform: scale(0); transform-origin: 50% 0%; opacity: 1; }
    to { transform: scale(1); transform-origin: 50% 0%; opacity: 1; }
}

.SCALE_IN_BOTTOM {
    animation: scaleInBottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes scaleInBottom {
    from { transform: scaleY(0); transform-origin: 0% 100%; opacity: 1; }
    to { transform: scaleY(1); transform-origin: 0% 100%; opacity: 1; }
}

.SCALE_OUT {
    animation: scaleOut 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}
@keyframes scaleOut {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(0); opacity: 0; }
}

.SCALE_OUT_BOTTOM {
    animation: scaleOutBottom 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}
@keyframes scaleOutBottom {
    from { transform: scaleY(1); transform-origin: 0% 100%; opacity: 1; }
    to { transform: scaleY(0); transform-origin: 0% 100%; opacity: 1; }
}

/* ====================================================================
   5. FLIP ANIMATIONS - 3D rotation
   ==================================================================== */

.FLIP_IN_X {
    animation: flipInX 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes flipInX {
    from { transform: rotateX(80deg); opacity: 0; }
    to { transform: rotateX(0); opacity: 1; }
}

.FLIP_IN_Y {
    animation: flipInY 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes flipInY {
    from { transform: rotateY(-80deg); opacity: 0; }
    to { transform: rotateY(0); opacity: 1; }
}

.FLIP_OUT_Y {
    animation: flipOutY 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}
@keyframes flipOutY {
    from { transform: rotateY(0); opacity: 1; }
    to { transform: rotateY(90deg); opacity: 0; }
}

.FLIP_SCALE_TOP {
    animation: flipScaleTop 0.5s linear both;
}
@keyframes flipScaleTop {
    0% { transform: translateY(0) rotateX(0) scale(1); transform-origin: 50% 0%; }
    50% { transform: translateY(-50%) rotateX(-90deg) scale(2); transform-origin: 50% 50%; }
    100% { transform: translateY(-100%) rotateX(-180deg) scale(1); transform-origin: 50% 100%; }
}

/* ====================================================================
   6. SWING ANIMATIONS - Pendulum rotations
   ==================================================================== */

.SWING_IN_TOP {
    animation: swingInTop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
@keyframes swingInTop {
    from { transform: rotateX(-100deg); transform-origin: top; opacity: 0; }
    to { transform: rotateX(0deg); transform-origin: top; opacity: 1; }
}

.SWING_IN_BOTTOM {
    animation: swingInBottom 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
@keyframes swingInBottom {
    from { transform: rotateX(100deg); transform-origin: bottom; opacity: 0; }
    to { transform: rotateX(0); transform-origin: bottom; opacity: 1; }
}

.SWING_OUT_RIGHT {
    animation: swingOutRight 0.45s cubic-bezier(0.6, -0.28, 0.735, 0.045) both;
}
@keyframes swingOutRight {
    from { transform: rotateY(0); transform-origin: right; opacity: 1; }
    to { transform: rotateY(-100deg); transform-origin: right; opacity: 0; }
}

.SWING_IN_RIGHT{animation:swing-in-right-bck .6s cubic-bezier(.175,.885,.32,1.275) both}
@keyframes swing-in-right-bck{0%{transform:rotateY(70deg);transform-origin:right;opacity:0}100%{transform:rotateY(0);transform-origin:right;opacity:1}}
/* ====================================================================
   7. BLUR ANIMATIONS - Motion blur effects
   ==================================================================== */

.BLUR_IN {
    animation: blurIn 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
}
@keyframes blurIn {
    from { filter: blur(12px); opacity: 0; }
    to { filter: blur(0px); opacity: 1; }
}

.BLUR_IN_UP {
    animation: blurInUp 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
}
@keyframes blurInUp {
    from {
        transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
        transform-origin: 50% 100%;
        filter: blur(40px);
        opacity: 0;
    }
    to {
        transform: translateY(0) scaleY(1) scaleX(1);
        transform-origin: 50% 50%;
        filter: blur(0);
        opacity: 1;
    }
}

.BLUR_IN_DOWN {
    animation: blurInDown 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
}
@keyframes blurInDown {
    from {
        transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
        transform-origin: 50% 0%;
        filter: blur(40px);
        opacity: 0;
    }
    to {
        transform: translateY(0) scaleY(1) scaleX(1);
        transform-origin: 50% 50%;
        filter: blur(0);
        opacity: 1;
    }
}

.BLUR_IN_LEFT {
    animation: blurInLeft 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
}
@keyframes blurInLeft {
    from {
        transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
        transform-origin: 100% 50%;
        filter: blur(40px);
        opacity: 0;
    }
    to {
        transform: translateX(0) scaleX(1) scaleY(1);
        transform-origin: 50% 50%;
        filter: blur(0);
        opacity: 1;
    }
}

.BLUR_IN_RIGHT {
    animation: blurInRight 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
}
@keyframes blurInRight {
    from {
        transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
        transform-origin: 0% 50%;
        filter: blur(40px);
        opacity: 0;
    }
    to {
        transform: translateX(0) scaleX(1) scaleY(1);
        transform-origin: 50% 50%;
        filter: blur(0);
        opacity: 1;
    }
}

.BLUR_OUT_RIGHT {
    animation: blurOutRight 0.45s cubic-bezier(0.755, 0.05, 0.855, 0.06) both;
}
@keyframes blurOutRight {
    from {
        transform: translateX(0) scaleY(1) scaleX(1);
        transform-origin: 50% 50%;
        filter: blur(0);
        opacity: 1;
    }
    to {
        transform: translateX(1000px) scaleX(2) scaleY(0.2);
        transform-origin: 0% 50%;
        filter: blur(40px);
        opacity: 0;
    }
}

/* ====================================================================
   8. SPECIAL EFFECTS - Complex animations
   ==================================================================== */

.PUFF_IN {
    animation: puffIn 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) both;
}
@keyframes puffIn {
    from { transform: scale(2); filter: blur(4px); opacity: 0; }
    to { transform: scale(1); filter: blur(0px); opacity: 1; }
}

.PUFF_OUT {
    animation: puffOut 1s cubic-bezier(0.165, 0.84, 0.44, 1) both;
}
@keyframes puffOut {
    from { transform: scale(1); filter: blur(0px); opacity: 1; }
    to { transform: scale(2); filter: blur(4px); opacity: 0; }
}

.ROLL_IN {
    animation: rollIn 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
}
@keyframes rollIn {
    from { transform: translateY(-800px) rotate(-720deg); filter: blur(50px); opacity: 0; }
    to { transform: translateY(0) rotate(0deg); filter: blur(0px); opacity: 1; }
}

.JELLO {
    animation: jello 0.9s both;
}
@keyframes jello {
    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); }
}

.TILT_IN {
    animation: tiltIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes tiltIn {
    from {
        transform: rotateY(30deg) translateY(-300px) skewY(-30deg);
        opacity: 0;
    }
    to {
        transform: rotateY(0deg) translateY(0) skewY(0deg);
        opacity: 1;
    }
}

.SLIDE_ROTATE_IN {
    animation: slideRotateIn 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes slideRotateIn {
    from {
        transform: translateY(600px) rotateX(30deg) scale(0);
        transform-origin: 50% 100%;
        opacity: 0;
    }
    to {
        transform: translateY(0) rotateX(0) scale(1);
        transform-origin: 50% -1400px;
        opacity: 1;
    }
}

.SLIDE_ROTATE_OUT {
    animation: slideRotateOut 0.7s ease-in both;
}
@keyframes slideRotateOut {
    from {
        transform: translateY(0) rotateX(0) scale(1);
        transform-origin: 50% -1400px;
        opacity: 1;
    }
    to {
        transform: translateY(600px) rotateX(30deg) scale(0);
        transform-origin: 50% 100%;
        opacity: 1;
    }
}

.SLIT_IN {
    animation: slitIn 0.5s ease-out both;
}
@keyframes slitIn {
    from {
        transform: translateZ(-800px) rotateY(90deg);
        opacity: 0;
    }
    54% {
        transform: translateZ(-160px) rotateY(87deg);
        opacity: 1;
    }
    to {
        transform: translateZ(0) rotateY(0);
        opacity: 1;
    }
}

.SLIT_OUT {
    animation: slitOut 0.5s ease-in both;
}
@keyframes slitOut {
    from {
        transform: translateZ(0) rotateY(0);
        opacity: 1;
    }
    54% {
        transform: translateZ(-160px) rotateY(87deg);
        opacity: 1;
    }
    to {
        transform: translateZ(-800px) rotateY(90deg);
        opacity: 0;
    }
}

/* ====================================================================
   9. CONTINUOUS ANIMATIONS - Infinite loops
   ==================================================================== */

.HEARTBEAT {
    animation: heartbeat 1.5s ease-in-out infinite both;
}
@keyframes heartbeat {
    from { transform: scale(1); }
    10% { transform: scale(0.91); }
    17% { transform: scale(0.98); }
    33% { transform: scale(0.87); }
    45% { transform: scale(1); }
}

.PULSE {
    animation: pulse 2s ease-in-out infinite both;
}
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.FLOAT {
    animation: float 3s ease-in-out infinite both;
}
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0px); }
}

.ROTATE {
    animation: rotate 2s linear infinite both;
}
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.SHAKE {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) infinite both;
}
@keyframes shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}

.GLOW {
    animation: glow 2s ease-in-out infinite both;
}
@keyframes glow {
    0% { box-shadow: 0 0 5px rgba(0, 255, 255, 0.5); }
    50% { box-shadow: 0 0 20px rgba(0, 255, 255, 1); }
    100% { box-shadow: 0 0 5px rgba(0, 255, 255, 0.5); }
}

/* ====================================================================
   UTILITY CLASSES - Quick modifiers
   ==================================================================== */

.ANIM_FAST {
    animation-duration: 0.3s !important;
}

.ANIM_SLOW {
    animation-duration: 1s !important;
}

.ANIM_DELAY_1 {
    animation-delay: 0.1s !important;
}

.ANIM_DELAY_2 {
    animation-delay: 0.2s !important;
}

.ANIM_DELAY_3 {
    animation-delay: 0.3s !important;
}