/* PyEngine Cyberpunk Banner Animationen */

.pyengine-banner {
    transition: all 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 24px #3ec6e022;
    border: 1.5px solid #2a2e36;
}

.pyengine-banner:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px #3ec6e044;
    border-color: #3ec6e0;
}

/* Cyberpunk Pulse Animation */
.pyengine-banner.animate-pulse {
    animation: cyberpunkPulse 2s infinite;
}

@keyframes cyberpunkPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 4px 24px #3ec6e022;
    }
    50% {
        opacity: 0.9;
        transform: scale(1.02);
        box-shadow: 0 6px 32px #ffe06633;
    }
}

/* Cyberpunk Glow Animation */
.pyengine-banner.animate-glow {
    animation: cyberpunkGlow 3s ease-in-out infinite alternate;
}

@keyframes cyberpunkGlow {
    from {
        box-shadow: 0 4px 24px #3ec6e022;
        border-color: #2a2e36;
    }
    to {
        box-shadow: 0 8px 32px #3ec6e044, 0 0 20px #ffe06644;
        border-color: #3ec6e0;
    }
}

/* Cyberpunk Fade In Animation */
.pyengine-banner.animate-fadein {
    animation: cyberpunkFadeIn 1s ease-in-out;
}

@keyframes cyberpunkFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
        box-shadow: none;
    }
    to {
        opacity: 1;
        transform: translateY(0);
        box-shadow: 0 4px 24px #3ec6e022;
    }
}

/* Cyberpunk Slide In Animation */
.pyengine-banner.animate-slidein {
    animation: cyberpunkSlideIn 0.8s ease-out;
}

@keyframes cyberpunkSlideIn {
    from {
        opacity: 0;
        transform: translateX(-30px);
        border-color: transparent;
    }
    to {
        opacity: 1;
        transform: translateX(0);
        border-color: #2a2e36;
    }
}

/* Cyberpunk Bounce Animation */
.pyengine-banner.animate-bounce {
    animation: cyberpunkBounce 2s infinite;
}

@keyframes cyberpunkBounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
        box-shadow: 0 4px 24px #3ec6e022;
    }
    40% {
        transform: translateY(-3px);
        box-shadow: 0 8px 32px #3ec6e044;
    }
    60% {
        transform: translateY(-1px);
        box-shadow: 0 6px 28px #3ec6e033;
    }
}

/* Cyberpunk Border Animation */
.pyengine-banner.animate-border {
    position: relative;
    background: linear-gradient(120deg, #23242a 60%, #181a20 100%);
    border: 2px solid;
    border-image: linear-gradient(45deg, #3ec6e0, #ffe066, #3ec6e0) 1;
    animation: cyberpunkBorderAnimation 3s linear infinite;
}

@keyframes cyberpunkBorderAnimation {
    0% {
        border-image-source: linear-gradient(0deg, #3ec6e0, #ffe066, #3ec6e0);
    }
    25% {
        border-image-source: linear-gradient(90deg, #3ec6e0, #ffe066, #3ec6e0);
    }
    50% {
        border-image-source: linear-gradient(180deg, #3ec6e0, #ffe066, #3ec6e0);
    }
    75% {
        border-image-source: linear-gradient(270deg, #3ec6e0, #ffe066, #3ec6e0);
    }
    100% {
        border-image-source: linear-gradient(360deg, #3ec6e0, #ffe066, #3ec6e0);
    }
}

/* Cyberpunk Shine Effect */
.pyengine-banner.animate-shine {
    position: relative;
    overflow: hidden;
}

.pyengine-banner.animate-shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(62, 198, 224, 0.3),
        rgba(255, 224, 102, 0.2),
        transparent
    );
    animation: cyberpunkShine 2s infinite;
}

@keyframes cyberpunkShine {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Responsive Banner Styles */
@media (max-width: 768px) {
    .pyengine-banner {
        max-width: 100%;
        height: auto;
    }
    
    .pyengine-banner:hover {
        transform: none;
    }
}

/* Banner Container im Cyberpunk-Style */
.banner-container {
    display: inline-block;
    margin: 10px;
    background: linear-gradient(120deg, #23242a 60%, #181a20 100%);
    border-radius: 18px;
    border: 1.5px solid #2a2e36;
    box-shadow: 0 4px 24px #3ec6e022;
    padding: 5px;
    transition: all 0.3s ease-in-out;
}

.banner-container:hover {
    box-shadow: 0 8px 32px #3ec6e044;
    border-color: #3ec6e0;
}

.banner-container.center {
    display: block;
    text-align: center;
    margin: 20px auto;
}

/* Cyberpunk Effects für verschiedene Banner-Größen */
.banner-mobile-leaderboard {
    animation: cyberpunkSlideInLeft 1s ease-out;
}

.banner-standard-banner {
    animation: cyberpunkFadeInUp 1s ease-out;
}

.banner-medium-rectangle {
    animation: cyberpunkZoomIn 0.8s ease-out;
}

.banner-fat-skyscraper {
    animation: cyberpunkSlideInRight 1s ease-out;
}

.banner-large-rectangle {
    animation: cyberpunkBounceIn 1s ease-out;
}

@keyframes cyberpunkSlideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
        box-shadow: none;
    }
    to {
        opacity: 1;
        transform: translateX(0);
        box-shadow: 0 4px 24px #3ec6e022;
    }
}

@keyframes cyberpunkFadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
        border-color: transparent;
    }
    to {
        opacity: 1;
        transform: translateY(0);
        border-color: #2a2e36;
    }
}

@keyframes cyberpunkZoomIn {
    from {
        opacity: 0;
        transform: scale(0.8);
        box-shadow: none;
    }
    to {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 4px 24px #3ec6e022;
    }
}

@keyframes cyberpunkSlideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
        border-color: transparent;
    }
    to {
        opacity: 1;
        transform: translateX(0);
        border-color: #2a2e36;
    }
}

@keyframes cyberpunkBounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
        box-shadow: none;
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
        box-shadow: 0 6px 32px #ffe06633;
    }
    70% {
        transform: scale(0.9);
        box-shadow: 0 4px 24px #3ec6e022;
    }
    100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 4px 24px #3ec6e022;
    }
}

/* Cyberpunk Click Animation */
.pyengine-banner:active {
    transform: scale(0.98);
    transition: transform 0.1s ease-in-out;
    box-shadow: 0 2px 16px #3ec6e044;
    border-color: #ffe066;
}