/* public/app/css/dash-ad-cube.css
 * Synopsis: Transition cube 3D bannière pub.
 * Objectif: Rotation rotateY douce entre vignettes.
 */

.dash .dash-ad__viewport {
    perspective: 1280px;
    perspective-origin: 50% 46%;
}

.dash .dash-ad__viewport::after {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--dash-bg) 42%, transparent),
        transparent 16%,
        transparent 84%,
        color-mix(in srgb, var(--dash-bg) 42%, transparent)
    );
    content: '';
    inset: 0;
    opacity: .5;
    pointer-events: none;
    position: absolute;
    z-index: 3;
}

.dash .dash-ad__track {
    transform: translateZ(calc(-1 * var(--ad-cube-z, 220px)));
    transform-style: preserve-3d;
}

.dash .dash-ad__slide {
    backface-visibility: hidden;
    filter: brightness(.78);
    left: 0;
    position: absolute;
    top: 0;
    transform: rotateY(90deg) translateZ(var(--ad-cube-z, 220px));
    transform-style: preserve-3d;
    transition:
        transform .78s cubic-bezier(.42, .02, .22, 1),
        filter .78s cubic-bezier(.42, .02, .22, 1);
    z-index: 0;
}

.dash .dash-ad__slide--busy {
    will-change: transform, filter;
}


.dash .dash-ad__slide--active {
    filter: brightness(1);
    transform: rotateY(0deg) translateZ(var(--ad-cube-z, 220px));
    z-index: 2;
}

.dash .dash-ad__slide--from-right {
    transform: rotateY(90deg) translateZ(var(--ad-cube-z, 220px));
    z-index: 1;
}

.dash .dash-ad__slide--from-left {
    transform: rotateY(-90deg) translateZ(var(--ad-cube-z, 220px));
    z-index: 1;
}

.dash .dash-ad__slide--to-left {
    filter: brightness(.62);
    transform: rotateY(-90deg) translateZ(var(--ad-cube-z, 220px));
    z-index: 1;
}

.dash .dash-ad__slide--to-right {
    filter: brightness(.62);
    transform: rotateY(90deg) translateZ(var(--ad-cube-z, 220px));
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .dash .dash-ad__viewport::after {
        display: none;
    }

    .dash .dash-ad__track {
        transform: none;
    }

    .dash .dash-ad__slide {
        filter: none;
        transform: none;
        transition: none;
        will-change: auto;
    }
}