#dima-band,
#dima-band * {
    box-sizing: border-box;
}

#dima-band {
    position: relative !important;

    width: 650px !important;
    max-width: calc(100vw - 30px) !important;

    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    background: rgba(70, 30, 90, .10) !important;

    border: 2px solid rgba(190, 140, 220, .85) !important;
    border-radius: 14px !important;

    box-shadow:
        0 0 0 1px rgba(120, 70, 160, .45),
        0 8px 24px rgba(60, 20, 80, .28) !important;

    overflow: hidden !important;
}

#dima-band .dima-band__stage {
    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;

    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 auto !important;
    padding: 0 !important;

    background: transparent !important;
    overflow: hidden !important;

    perspective: 1200px;
}

/* =========================================================
   VIDEO
   ========================================================= */

#dima-band .dima-band__video,
#dima-band video#dima-video {
    display: block !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    margin: 0 auto !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    transform-origin: center center;
    backface-visibility: hidden;
    will-change: opacity, transform, filter;
}

/* =========================================================
   COLOMBE
   Toujours centrée dans la même zone que la vidéo.
   Elle a UNE animation fixe :
   gauche -> centre -> pause -> droite.
   ========================================================= */

#dima-band .dima-band__dove,
#dima-band img#dima-dove {
    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: 92% !important;

    object-fit: contain !important;
    object-position: center center !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translate(-50%, -50%);
    transform-origin: center center;

    backface-visibility: hidden;
    will-change: opacity, transform;
}

#dima-band.dima-band--show-dove .dima-band__video {
    visibility: hidden !important;
}

#dima-band.dima-band--show-dove .dima-band__dove {
    visibility: visible !important;
}

/* Entrée fixe de la colombe : gauche -> centre */
#dima-band .dima-dove-enter {
    animation: dimaDoveEnter 700ms cubic-bezier(.22,.61,.36,1) forwards;
}

/* Sortie fixe de la colombe : centre -> droite */
#dima-band .dima-dove-exit {
    animation: dimaDoveExit 700ms cubic-bezier(.4,0,.2,1) forwards;
}

@keyframes dimaDoveEnter {
    from {
        opacity: 0;
        transform: translate(calc(-50% - 180px), -50%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

@keyframes dimaDoveExit {
    from {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
    to {
        opacity: 0;
        transform: translate(calc(-50% + 180px), -50%);
    }
}

/* =========================================================
   TRANSITIONS ALEATOIRES : VIDEOS UNIQUEMENT
   ========================================================= */

#dima-band .dima-transition-out-fade {
    animation: dimaOutFade 650ms ease forwards;
}

#dima-band .dima-transition-out-zoom {
    animation: dimaOutZoom 700ms cubic-bezier(.4,0,.2,1) forwards;
}

#dima-band .dima-transition-out-slide-left {
    animation: dimaOutSlideLeft 700ms cubic-bezier(.4,0,.2,1) forwards;
}

#dima-band .dima-transition-out-slide-up {
    animation: dimaOutSlideUp 700ms cubic-bezier(.4,0,.2,1) forwards;
}

#dima-band .dima-transition-out-blur {
    animation: dimaOutBlur 700ms ease forwards;
}

#dima-band .dima-transition-out-tilt {
    animation: dimaOutTilt 750ms cubic-bezier(.4,0,.2,1) forwards;
}

#dima-band .dima-transition-in-fade {
    animation: dimaInFade 650ms ease forwards;
}

#dima-band .dima-transition-in-zoom {
    animation: dimaInZoom 700ms cubic-bezier(.4,0,.2,1) forwards;
}

#dima-band .dima-transition-in-slide-right {
    animation: dimaInSlideRight 700ms cubic-bezier(.4,0,.2,1) forwards;
}

#dima-band .dima-transition-in-slide-down {
    animation: dimaInSlideDown 700ms cubic-bezier(.4,0,.2,1) forwards;
}

#dima-band .dima-transition-in-blur {
    animation: dimaInBlur 700ms ease forwards;
}

#dima-band .dima-transition-in-tilt {
    animation: dimaInTilt 750ms cubic-bezier(.4,0,.2,1) forwards;
}

@keyframes dimaOutFade {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes dimaInFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes dimaOutZoom {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(.88); }
}

@keyframes dimaInZoom {
    from { opacity: 0; transform: scale(1.12); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes dimaOutSlideLeft {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(-70px); }
}

@keyframes dimaInSlideRight {
    from { opacity: 0; transform: translateX(70px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes dimaOutSlideUp {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-45px); }
}

@keyframes dimaInSlideDown {
    from { opacity: 0; transform: translateY(45px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes dimaOutBlur {
    from { opacity: 1; filter: blur(0); }
    to   { opacity: 0; filter: blur(10px); }
}

@keyframes dimaInBlur {
    from { opacity: 0; filter: blur(10px); }
    to   { opacity: 1; filter: blur(0); }
}

@keyframes dimaOutTilt {
    from { opacity: 1; transform: rotateZ(0deg) scale(1); }
    to   { opacity: 0; transform: rotateZ(-4deg) scale(.92); }
}

@keyframes dimaInTilt {
    from { opacity: 0; transform: rotateZ(4deg) scale(.92); }
    to   { opacity: 1; transform: rotateZ(0deg) scale(1); }
}

#dima-band .dima-band__message {
    width: 100% !important;
    height: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 1rem !important;
    text-align: center !important;

    background: rgba(0,0,0,.35) !important;
    color: #fff !important;
}

@media (max-width: 700px) {
    #dima-band {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;

        height: 220px !important;
        min-height: 220px !important;
        max-height: 220px !important;
    }

    #dima-band .dima-band__video,
    #dima-band video#dima-video {
        max-width: 100% !important;
        max-height: 100% !important;
    }

    #dima-band .dima-band__dove,
    #dima-band img#dima-dove {
        max-width: 100% !important;
        max-height: 90% !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #dima-band .dima-dove-enter,
    #dima-band .dima-dove-exit,
    #dima-band .dima-transition-out-fade,
    #dima-band .dima-transition-out-zoom,
    #dima-band .dima-transition-out-slide-left,
    #dima-band .dima-transition-out-slide-up,
    #dima-band .dima-transition-out-blur,
    #dima-band .dima-transition-out-tilt,
    #dima-band .dima-transition-in-fade,
    #dima-band .dima-transition-in-zoom,
    #dima-band .dima-transition-in-slide-right,
    #dima-band .dima-transition-in-slide-down,
    #dima-band .dima-transition-in-blur,
    #dima-band .dima-transition-in-tilt {
        animation-duration: 1ms !important;
    }
}