[data-cinematic-group] {
    perspective: 1200px;
    perspective-origin: 50% 45%;
    isolation: isolate;
}

[data-cinematic-card] {
    --cinematic-rotate-x: 0deg;
    --cinematic-rotate-y: 0deg;
    --cinematic-media-x: 0px;
    --cinematic-media-y: 0px;
    --cinematic-active-scale: 1.12;
    --cinematic-selected-scale: 1.28;
    position: relative;
    z-index: 0;
    transform-origin: center;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transition:
        transform .48s cubic-bezier(.16, 1, .3, 1),
        border-color .35s ease,
        box-shadow .48s cubic-bezier(.16, 1, .3, 1),
        filter .4s ease,
        opacity .4s ease;
}

.cinematic-has-focus [data-cinematic-card]:not(.is-cinematic-active):not(.is-cinematic-selected) {
    z-index: 0;
    opacity: .62;
    filter: saturate(.62) brightness(.72);
    transform: translate3d(0, 2px, -35px) scale(.94) !important;
}

[data-cinematic-card].is-cinematic-active {
    z-index: 100;
    box-shadow: 0 34px 72px rgba(2,8,23,.72) !important;
    transform: translate3d(0, -16px, 80px) rotateX(var(--cinematic-rotate-x)) rotateY(var(--cinematic-rotate-y)) scale(var(--cinematic-active-scale)) !important;
    will-change: transform, filter;
}

[data-cinematic-card].is-cinematic-selected {
    z-index: 110;
    box-shadow: 0 48px 105px rgba(2,8,23,.82) !important;
    transform: translate3d(0, -22px, 140px) rotateX(0) rotateY(0) scale(var(--cinematic-selected-scale)) !important;
    transition-duration: .32s;
    will-change: transform, filter;
}

[data-cinematic-card] [data-cinematic-media] img,
[data-cinematic-card] [data-cinematic-media] video,
[data-cinematic-card] img[data-cinematic-media],
[data-cinematic-card] video[data-cinematic-media] {
    transition: transform .7s cubic-bezier(.16, 1, .3, 1), filter .45s ease;
}

[data-cinematic-card].is-cinematic-active [data-cinematic-media] img,
[data-cinematic-card].is-cinematic-active [data-cinematic-media] video,
[data-cinematic-card].is-cinematic-active img[data-cinematic-media],
[data-cinematic-card].is-cinematic-active video[data-cinematic-media] {
    transform: translate3d(var(--cinematic-media-x), var(--cinematic-media-y), 0) scale(1.13) !important;
    filter: saturate(1.13) contrast(1.04);
    will-change: transform;
}

[data-cinematic-card].is-cinematic-selected [data-cinematic-media] img,
[data-cinematic-card].is-cinematic-selected [data-cinematic-media] video,
[data-cinematic-card].is-cinematic-selected img[data-cinematic-media],
[data-cinematic-card].is-cinematic-selected video[data-cinematic-media] {
    transform: translate3d(0, 0, 0) scale(1.18) !important;
    filter: saturate(1.18) contrast(1.06);
    transition: transform .32s cubic-bezier(.16, 1, .3, 1), filter .32s ease;
}

[data-cinematic-card]:focus-visible {
    outline: 3px solid rgba(165,243,252,.96);
    outline-offset: 4px;
}

@media (max-width: 640px) {
    [data-cinematic-card] {
        --cinematic-active-scale: 1.035;
        --cinematic-selected-scale: 1.075;
    }

    [data-cinematic-card].is-cinematic-active {
        transform: translate3d(0, -7px, 28px) rotateX(0) rotateY(0) scale(var(--cinematic-active-scale)) !important;
    }

    [data-cinematic-card].is-cinematic-selected {
        transform: translate3d(0, -10px, 52px) rotateX(0) rotateY(0) scale(var(--cinematic-selected-scale)) !important;
    }

    .cinematic-has-focus [data-cinematic-card]:not(.is-cinematic-active):not(.is-cinematic-selected) {
        opacity: .76;
        transform: scale(.98) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-cinematic-card],
    [data-cinematic-card] [data-cinematic-media] img,
    [data-cinematic-card] [data-cinematic-media] video,
    [data-cinematic-card] img[data-cinematic-media],
    [data-cinematic-card] video[data-cinematic-media] {
        transition-duration: .01ms !important;
    }

    [data-cinematic-card].is-cinematic-active,
    [data-cinematic-card].is-cinematic-selected,
    .cinematic-has-focus [data-cinematic-card]:not(.is-cinematic-active):not(.is-cinematic-selected) {
        opacity: 1;
        filter: none;
        transform: none !important;
    }
}