/* ================================================
   TRANSITIONS WAOUH POUR BANNIÈRES
   ================================================ */

/* Base pour tous les bannières */
.banner-item-vertical,
.banner-item-horizontal {
    opacity: 0;
    visibility: hidden;
    transition: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.banner-item-vertical.active,
.banner-item-horizontal.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* ================================================
   TRANSITION: FADE (Fondu)
   ================================================ */
.banner-item-vertical[data-transition="fade"],
.banner-item-horizontal[data-transition="fade"] {
    transition: opacity 1s ease-in-out;
}

/* ================================================
   TRANSITION: SLIDE (Glissement)
   ================================================ */
.banner-item-vertical[data-transition="slide-left"]:not(.active),
.banner-item-horizontal[data-transition="slide-left"]:not(.active) {
    transform: translateX(100%);
}

.banner-item-vertical[data-transition="slide-left"],
.banner-item-horizontal[data-transition="slide-left"] {
    transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.8s;
}

.banner-item-vertical[data-transition="slide-right"]:not(.active),
.banner-item-horizontal[data-transition="slide-right"]:not(.active) {
    transform: translateX(-100%);
}

.banner-item-vertical[data-transition="slide-right"],
.banner-item-horizontal[data-transition="slide-right"] {
    transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.8s;
}

.banner-item-vertical[data-transition="slide-up"]:not(.active),
.banner-item-horizontal[data-transition="slide-up"]:not(.active) {
    transform: translateY(100%);
}

.banner-item-vertical[data-transition="slide-up"],
.banner-item-horizontal[data-transition="slide-up"] {
    transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.8s;
}

.banner-item-vertical[data-transition="slide-down"]:not(.active),
.banner-item-horizontal[data-transition="slide-down"]:not(.active) {
    transform: translateY(-100%);
}

.banner-item-vertical[data-transition="slide-down"],
.banner-item-horizontal[data-transition="slide-down"] {
    transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.8s;
}

/* ================================================
   TRANSITION: ZOOM
   ================================================ */
.banner-item-vertical[data-transition="zoom-in"]:not(.active),
.banner-item-horizontal[data-transition="zoom-in"]:not(.active) {
    transform: scale(0.3);
}

.banner-item-vertical[data-transition="zoom-in"],
.banner-item-horizontal[data-transition="zoom-in"] {
    transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.8s;
}

.banner-item-vertical[data-transition="zoom-out"]:not(.active),
.banner-item-horizontal[data-transition="zoom-out"]:not(.active) {
    transform: scale(1.5);
}

.banner-item-vertical[data-transition="zoom-out"],
.banner-item-horizontal[data-transition="zoom-out"] {
    transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.8s;
}

/* ================================================
   TRANSITION WAOUH: FLIP 3D
   ================================================ */
.banner-item-vertical[data-transition="flip-3d"],
.banner-item-horizontal[data-transition="flip-3d"] {
    transform-style: preserve-3d;
    transition: transform 1.2s ease-in-out, opacity 0.6s;
}

.banner-item-vertical[data-transition="flip-3d"]:not(.active),
.banner-item-horizontal[data-transition="flip-3d"]:not(.active) {
    transform: rotateY(180deg);
}

.banner-item-vertical[data-transition="flip-3d"].active,
.banner-item-horizontal[data-transition="flip-3d"].active {
    transform: rotateY(0deg);
}

/* ================================================
   TRANSITION WAOUH: ROTATE 3D
   ================================================ */
.banner-item-vertical[data-transition="rotate-3d"],
.banner-item-horizontal[data-transition="rotate-3d"] {
    transform-style: preserve-3d;
    transition: transform 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.8s;
}

.banner-item-vertical[data-transition="rotate-3d"]:not(.active),
.banner-item-horizontal[data-transition="rotate-3d"]:not(.active) {
    transform: rotate3d(1, 1, 0, 180deg) scale(0.5);
}

.banner-item-vertical[data-transition="rotate-3d"].active,
.banner-item-horizontal[data-transition="rotate-3d"].active {
    transform: rotate3d(0, 0, 0, 0deg) scale(1);
}

/* ================================================
   TRANSITION WAOUH: KEN BURNS (Zoom + Pan)
   ================================================ */
.banner-item-vertical[data-transition="ken-burns"] img,
.banner-item-horizontal[data-transition="ken-burns"] img {
    transition: transform 8s ease-out;
    transform-origin: center center;
}

.banner-item-vertical[data-transition="ken-burns"]:not(.active) img,
.banner-item-horizontal[data-transition="ken-burns"]:not(.active) img {
    transform: scale(1);
}

.banner-item-vertical[data-transition="ken-burns"].active img,
.banner-item-horizontal[data-transition="ken-burns"].active img {
    transform: scale(1.2) translate(5%, 5%);
}

.banner-item-vertical[data-transition="ken-burns"],
.banner-item-horizontal[data-transition="ken-burns"] {
    transition: opacity 1s ease-in-out;
    overflow: hidden;
}

/* ================================================
   TRANSITION WAOUH: BOUNCE (Rebond élastique)
   ================================================ */
.banner-item-vertical[data-transition="bounce"],
.banner-item-horizontal[data-transition="bounce"] {
    transition: transform 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.6s;
}

.banner-item-vertical[data-transition="bounce"]:not(.active),
.banner-item-horizontal[data-transition="bounce"]:not(.active) {
    transform: scale(0.1) translateY(-200%);
}

.banner-item-vertical[data-transition="bounce"].active,
.banner-item-horizontal[data-transition="bounce"].active {
    transform: scale(1) translateY(0);
    animation: bounce-in 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes bounce-in {
    0% { transform: scale(0.1) translateY(-200%); }
    60% { transform: scale(1.1) translateY(0); }
    80% { transform: scale(0.95) translateY(-10%); }
    100% { transform: scale(1) translateY(0); }
}

/* ================================================
   TRANSITION WAOUH: SPIRAL (Spirale)
   ================================================ */
.banner-item-vertical[data-transition="spiral"],
.banner-item-horizontal[data-transition="spiral"] {
    transition: transform 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 1s;
}

.banner-item-vertical[data-transition="spiral"]:not(.active),
.banner-item-horizontal[data-transition="spiral"]:not(.active) {
    transform: rotate(720deg) scale(0);
}

.banner-item-vertical[data-transition="spiral"].active,
.banner-item-horizontal[data-transition="spiral"].active {
    transform: rotate(0deg) scale(1);
}

/* ================================================
   TRANSITION WAOUH: CUBE 3D
   ================================================ */
.banner-item-vertical[data-transition="cube-3d"],
.banner-item-horizontal[data-transition="cube-3d"] {
    transform-style: preserve-3d;
    transition: transform 1.5s ease-in-out, opacity 0.8s;
}

.banner-item-vertical[data-transition="cube-3d"]:not(.active),
.banner-item-horizontal[data-transition="cube-3d"]:not(.active) {
    transform: rotateY(-90deg) translateZ(150px);
}

.banner-item-vertical[data-transition="cube-3d"].active,
.banner-item-horizontal[data-transition="cube-3d"].active {
    transform: rotateY(0deg) translateZ(0);
}

/* ================================================
   TRANSITION WAOUH: WAVE (Vague ondulante)
   ================================================ */
.banner-item-vertical[data-transition="wave"],
.banner-item-horizontal[data-transition="wave"] {
    transition: opacity 0.8s;
}

.banner-item-vertical[data-transition="wave"].active,
.banner-item-horizontal[data-transition="wave"].active {
    animation: wave-effect 1.2s ease-out;
}

@keyframes wave-effect {
    0% {
        clip-path: polygon(
            0% 100%, 10% 100%, 20% 100%, 30% 100%, 40% 100%,
            50% 100%, 60% 100%, 70% 100%, 80% 100%, 90% 100%, 100% 100%,
            100% 100%, 0% 100%
        );
    }
    25% {
        clip-path: polygon(
            0% 50%, 10% 30%, 20% 50%, 30% 70%, 40% 50%,
            50% 30%, 60% 50%, 70% 70%, 80% 50%, 90% 30%, 100% 50%,
            100% 100%, 0% 100%
        );
    }
    50% {
        clip-path: polygon(
            0% 30%, 10% 50%, 20% 30%, 30% 10%, 40% 30%,
            50% 50%, 60% 30%, 70% 10%, 80% 30%, 90% 50%, 100% 30%,
            100% 100%, 0% 100%
        );
    }
    100% {
        clip-path: polygon(
            0% 0%, 10% 0%, 20% 0%, 30% 0%, 40% 0%,
            50% 0%, 60% 0%, 70% 0%, 80% 0%, 90% 0%, 100% 0%,
            100% 100%, 0% 100%
        );
    }
}

/* ================================================
   TRANSITION WAOUH: EXPLODE (Explosion)
   ================================================ */
.banner-item-vertical[data-transition="explode"],
.banner-item-horizontal[data-transition="explode"] {
    transition: opacity 0.6s;
}

.banner-item-vertical[data-transition="explode"].active,
.banner-item-horizontal[data-transition="explode"].active {
    animation: explode-effect 1s ease-out;
}

@keyframes explode-effect {
    0% {
        transform: scale(0);
        opacity: 0;
        filter: blur(20px) brightness(3);
    }
    30% {
        transform: scale(1.3);
        opacity: 0.7;
        filter: blur(10px) brightness(2);
    }
    50% {
        transform: scale(0.9);
        opacity: 0.9;
        filter: blur(5px) brightness(1.5);
    }
    70% {
        transform: scale(1.05);
        opacity: 1;
        filter: blur(2px) brightness(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
        filter: blur(0) brightness(1);
    }
}

/* Effet de particules pour l'explosion */
.banner-item-vertical[data-transition="explode"].active::before,
.banner-item-horizontal[data-transition="explode"].active::before,
.banner-item-vertical[data-transition="explode"].active::after,
.banner-item-horizontal[data-transition="explode"].active::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
}

.banner-item-vertical[data-transition="explode"].active::before,
.banner-item-horizontal[data-transition="explode"].active::before {
    background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 70%);
    animation: explosion-flash 0.5s ease-out;
}

@keyframes explosion-flash {
    0% {
        opacity: 1;
        transform: scale(0);
    }
    50% {
        opacity: 0.5;
        transform: scale(2);
    }
    100% {
        opacity: 0;
        transform: scale(3);
    }
}

/* ================================================
   CONTENEURS DE BANNIÈRES
   ================================================ */
.banner-container-vertical,
.banner-container-horizontal {
    position: relative;
    overflow: hidden;
    perspective: 1000px;
}

/* Ajustement pour les transitions 3D */
.banner-container-vertical[data-has-3d="true"],
.banner-container-horizontal[data-has-3d="true"] {
    transform-style: preserve-3d;
}

/* Performance: activation de l'accélération GPU */
.banner-item-vertical,
.banner-item-horizontal {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform, opacity;
}