.component-video-player-cinematic {
    --video-player-thumb: none;
    --cinematic-video-shadow-color: transparent;

    --trigger-button-size: 140px;
    --trigger-button-icon-size: 80px;
    --trigger-button-translate-x: 6px;

    @container video-player-cinematic (width <= 720px) {
        --trigger-button-size: 120px;
        --trigger-button-icon-size: 60px;
    }

    @container video-player-cinematic (width <= 576px) {
        --trigger-button-size: 100px;
        --trigger-button-icon-size: 50px;
        --trigger-button-translate-x: 4px;
    }

    @container video-player-cinematic (width <= 440px) {
        --trigger-button-size: 80px;
    }

    &[data-video-state="playing"] {
        --cinematic-video-shadow-color: rgb(from #000 r g b / 0.5);
    }

    &[data-video-state="paused"] {

    }

    position: relative;
    z-index: 9;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    aspect-ratio: 16/9;

    container-type: inline-size;
    container-name: video-player-cinematic;

    border-radius: 16px;
    background-color: var(--color-btm-dark-blue);
    background-image: var(--video-player-thumb);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow:
        0 0 0 4px rgb(from var(--color-btm-orange) r g b / 0.5),
        0 0 0 10000px var(--cinematic-video-shadow-color)
    ;

    transition: box-shadow 1s linear;

    .video-trigger {
        --trigger-color: var(--color-da-purple);
        --trigger-background-color: rgb(from #fff r g b / 0.5);

        position: relative;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        &:hover {
            --trigger-color: var(--color-btm-orange);
            --trigger-background-color: rgb(from #fff r g b / 0.75);
        }

        &:before {
            content: '';
            position: absolute;
            z-index: 2;
            display: block;
            width: var(--trigger-button-icon-size);
            aspect-ratio: 1;
            transform: translateX(var(--trigger-button-translate-x));
            transition: all 0.2s linear;
            background-color: var(--trigger-color);
            mask: url('/assets/svg/controls-play-snA9QmY.svg') no-repeat center center / contain;
        }

        &:after {
            content: '';
            position: absolute;
            z-index: 1;
            display: block;
            width: var(--trigger-button-size);
            aspect-ratio: 1;
            border-radius: 50%;
            transition: all 0.2s linear;
            background-color: var(--trigger-background-color);
            box-shadow: 0 0 4px 0 rgb(from #000 r g b / 0.25);
        }
    }

    video {
        width: 100%;
        aspect-ratio: 16/9;
        border-radius: 16px;
    }
}