/* Dynamic Banner Animations */
.dynamic-banner-animations {
    /* Bubble Animation Enhancements */
    animation-name: bubbleFloat;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes bubbleFloat {
    0%, 100% {
        transform: translateY(0px) scale(1);
        opacity: 0.7;
    }
    50% {
        transform: translateY(-10px) scale(1.05);
        opacity: 1;
    }
}

/* Enhanced Fade Animations */
@keyframes dynamicFadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes dynamicFadeInRight {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Slide Animations */
@keyframes dynamicSlideInLeft {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes dynamicSlideInRight {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes dynamicSlideInUp {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Zoom Animations */
@keyframes dynamicZoomIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes dynamicZoomOut {
    0% {
        opacity: 0;
        transform: scale(1.3);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Bounce Animations */
@keyframes dynamicBounceIn {
    0%, 20%, 40%, 60%, 80%, 100% {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
    }
    20% {
        transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        transform: scale3d(.9, .9, .9);
    }
    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        transform: scale3d(.97, .97, .97);
    }
    100% {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

/* Flip Animations */
@keyframes dynamicFlipInX {
    0% {
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        animation-timing-function: ease-in;
        opacity: 0;
    }
    40% {
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        animation-timing-function: ease-in;
    }
    60% {
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }
    80% {
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }
    100% {
        transform: perspective(400px);
    }
}

@keyframes dynamicFlipInY {
    0% {
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        animation-timing-function: ease-in;
        opacity: 0;
    }
    40% {
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        animation-timing-function: ease-in;
    }
    60% {
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
    }
    80% {
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }
    100% {
        transform: perspective(400px);
    }
}

/* Rotation Animations */
@keyframes dynamicRotateIn {
    0% {
        transform-origin: center;
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0;
    }
    100% {
        transform-origin: center;
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

/* Text-specific animations */
.dynamic-text-animation-typewriter {
    overflow: hidden;
    border-right: .15em solid orange;
    white-space: nowrap;
    animation: 
        dynamicTypewriter 3.5s steps(40, end),
        dynamicBlinkCaret .75s step-end infinite;
}

@keyframes dynamicTypewriter {
    from { width: 0 }
    to { width: 100% }
}

@keyframes dynamicBlinkCaret {
    from, to { border-color: transparent }
    50% { border-color: orange; }
}

/* Pulse animations for attention */
@keyframes dynamicPulse {
    0% {
        transform: scale3d(1, 1, 1);
    }
    50% {
        transform: scale3d(1.05, 1.05, 1.05);
    }
    100% {
        transform: scale3d(1, 1, 1);
    }
}

@keyframes dynamicHeartBeat {
    0% {
        transform: scale(1);
    }
    14% {
        transform: scale(1.3);
    }
    28% {
        transform: scale(1);
    }
    42% {
        transform: scale(1.3);
    }
    70% {
        transform: scale(1);
    }
}

/* Light animations */
@keyframes dynamicFlash {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0;
    }
}

/* Animation utility classes */
.banner-animation-fade { animation: dynamicFadeIn 1s ease-out; }
.banner-animation-slide-left { animation: dynamicSlideInLeft 1s ease-out; }
.banner-animation-slide-right { animation: dynamicSlideInRight 1s ease-out; }
.banner-animation-slide-up { animation: dynamicSlideInUp 1s ease-out; }
.banner-animation-slide-down { animation: dynamicSlideInDown 1s ease-out; }
.banner-animation-zoom-in { animation: dynamicZoomIn 1s ease-out; }
.banner-animation-zoom-out { animation: dynamicZoomOut 1s ease-out; }
.banner-animation-bounce { animation: dynamicBounceIn 1s ease-out; }
.banner-animation-flip-x { animation: dynamicFlipInX 1s ease-out; }
.banner-animation-flip-y { animation: dynamicFlipInY 1s ease-out; }
.banner-animation-rotate { animation: dynamicRotateIn 1s ease-out; }
.banner-animation-pulse { animation: dynamicPulse 2s infinite; }
.banner-animation-heartbeat { animation: dynamicHeartBeat 1.5s ease-in-out infinite both; }
.banner-animation-flash { animation: dynamicFlash 2s infinite; }

/* Staggered animation delays for elements */
.banner-stagger-1 { animation-delay: 0.1s; }
.banner-stagger-2 { animation-delay: 0.2s; }
.banner-stagger-3 { animation-delay: 0.3s; }
.banner-stagger-4 { animation-delay: 0.4s; }
.banner-stagger-5 { animation-delay: 0.5s; }

/* Responsive animation adjustments */
@media (max-width: 768px) {
    .banner-animation-fade,
    .banner-animation-slide-left,
    .banner-animation-slide-right,
    .banner-animation-slide-up,
    .banner-animation-slide-down,
    .banner-animation-zoom-in,
    .banner-animation-zoom-out,
    .banner-animation-bounce,
    .banner-animation-flip-x,
    .banner-animation-flip-y,
    .banner-animation-rotate {
        animation-duration: 0.8s;
    }
    
    .banner-animation-pulse,
    .banner-animation-heartbeat,
    .banner-animation-flash {
        animation-duration: 1.5s;
    }
}

/* Hover effects for interactive banners */
.banner-hover-lift:hover {
    transform: translateY(-5px);
    transition: transform 0.3s ease;
}

.banner-hover-scale:hover {
    transform: scale(1.02);
    transition: transform 0.3s ease;
}

.banner-hover-glow:hover {
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    transition: box-shadow 0.3s ease;
}

/* Dynamic background animations */
.banner-bg-gradient-animate {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: dynamicGradientShift 15s ease infinite;
}

@keyframes dynamicGradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Particle animation background */
.banner-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.banner-particles::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, #eee, transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 90px 40px, #fff, transparent);
    background-repeat: repeat;
    background-size: 100px 100px;
    animation: dynamicParticleFloat 20s linear infinite;
}

@keyframes dynamicParticleFloat {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(-100px, -100px) rotate(360deg); }
}

/* Performance optimizations */
.banner-will-change {
    will-change: transform, opacity;
}

.banner-hardware-accelerated {
    transform: translateZ(0);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .banner-animation-fade,
    .banner-animation-slide-left,
    .banner-animation-slide-right,
    .banner-animation-slide-up,
    .banner-animation-slide-down,
    .banner-animation-zoom-in,
    .banner-animation-zoom-out,
    .banner-animation-bounce,
    .banner-animation-flip-x,
    .banner-animation-flip-y,
    .banner-animation-rotate,
    .banner-animation-pulse,
    .banner-animation-heartbeat,
    .banner-animation-flash,
    .banner-bg-gradient-animate,
    .banner-particles::before {
        animation: none;
    }
    
    .banner-hover-lift:hover,
    .banner-hover-scale:hover {
        transform: none;
    }
}