/* Ken Burns Effect CSS */

@keyframes kenBurns {
    0% {
        transform: scale(1) translate(0, 0);
    }
    25% {
        transform: scale(1.1) translate(-2%, -2%);
    }
    50% {
        transform: scale(1.05) translate(2%, -1%);
    }
    75% {
        transform: scale(1.15) translate(-1%, 2%);
    }
    100% {
        transform: scale(1) translate(0, 0);
    }
}

@keyframes kenBurnsReverse {
    0% {
        transform: scale(1.15) translate(-1%, 2%);
    }
    25% {
        transform: scale(1.05) translate(2%, -1%);
    }
    50% {
        transform: scale(1.1) translate(-2%, -2%);
    }
    75% {
        transform: scale(1) translate(0, 0);
    }
    100% {
        transform: scale(1.15) translate(-1%, 2%);
    }
}

@keyframes kenBurnsSlow {
    0% {
        transform: scale(1) translate(0, 0);
    }
    50% {
        transform: scale(1.08) translate(-1%, 1%);
    }
    100% {
        transform: scale(1) translate(0, 0);
    }
}

.ken-burns {
    animation: kenBurns 20s ease-in-out infinite;
}

.ken-burns-reverse {
    animation: kenBurnsReverse 25s ease-in-out infinite;
}

.ken-burns-slow {
    animation: kenBurnsSlow 30s ease-in-out infinite;
}

/* Banner blend modes */
.banner-blend {
    mix-blend-mode: overlay;
}

.banner-multiply {
    mix-blend-mode: multiply;
}

.banner-screen {
    mix-blend-mode: screen;
}

.banner-soft-light {
    mix-blend-mode: soft-light;
}

.banner-hard-light {
    mix-blend-mode: hard-light;
}

/* Gradient overlays for blending */
.gradient-overlay {
    background: linear-gradient(135deg, 
        rgba(59, 130, 246, 0.8) 0%, 
        rgba(37, 99, 235, 0.6) 50%, 
        rgba(29, 78, 216, 0.8) 100%);
}

.gradient-overlay-dark {
    background: linear-gradient(135deg, 
        rgba(15, 23, 42, 0.9) 0%, 
        rgba(30, 41, 59, 0.7) 50%, 
        rgba(15, 23, 42, 0.9) 100%);
}

.gradient-overlay-purple {
    background: linear-gradient(135deg, 
        rgba(124, 58, 237, 0.8) 0%, 
        rgba(139, 92, 246, 0.6) 50%, 
        rgba(109, 40, 217, 0.8) 100%);
}

/* Smooth transitions */
.banner-transition {
    transition: all 0.5s ease-in-out;
}

/* Image scaling for Ken Burns */
.banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    will-change: transform;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .ken-burns,
    .ken-burns-reverse,
    .ken-burns-slow {
        animation-duration: 15s;
    }
}