.container-xxl {
    transition: filter 0.25s;
    filter: blur(0px);
}

body.modal-open .container-xxl {
    transition: filter 1s;
    filter: blur(25px);
}

.modal-backdrop {
    --bs-backdrop-bg: transparent;
}

#video-title {
    position: relative;
    z-index: 10;
    .bi {
        transform: scale(1.25);
        transform-origin: center;
    }
    #video-badge,
    button {
        height: 32px;
    }
}
#video-description {
    white-space: pre-line;
}

#video-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16/9;

    #video-blur {
        position: absolute;
        top: -5%;
        left: -5%;
        width: 110%;
        height: 110%;
        filter: blur(120px) brightness(0.7);
        z-index: 0;
        pointer-events: none;
        animation: blurBreath 6s ease-in-out infinite;
    }

    #video {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 100%;
        border-radius: 12px;
        display: none;
    }

    /* subtitles */
    #video::cue {
        background-color: rgba(0, 0, 0, 0);
        color: #ffffff;
        text-shadow:
            -1px -1px 0 #000,
            1px -1px 0 #000,
            -1px 1px 0 #000,
            1px 1px 0 #000;
    }

    /* video-loader and video-error overlay */
    #video-loader {
        /* loading indicator */
        .dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: white;
            animation: bounce 0.6s infinite alternate;
        }
        .dot:nth-child(2) {
            animation-delay: 0.2s;
        }
        .dot:nth-child(3) {
            animation-delay: 0.4s;
        }
    }
    #video-loader,
    #video-error {
        position: absolute;
        inset: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
        background: black;
        border-radius: 12px;
        z-index: 99;
    }
    #video-error {
        display: none;
        flex-direction: column;
        color: white;
        text-align: center;
        font-family: monospace;
        padding: 1rem;
        white-space: pre-line;

        /* error indicator */
        .x-icon {
            position: relative;
            width: 60px;
            height: 60px;
            margin: 12px auto 0;
        }

        .x-line {
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 6px;
            background: white;
            border-radius: 3px;
        }

        .x-line:first-child {
            transform: rotate(45deg);
        }

        .x-line:last-child {
            transform: rotate(-45deg);
        }
    }

    /* video-unmute overlay */
    #video-unmute {
        position: absolute;
        inset: 0;
        z-index: 50;
        background: rgba(0, 0, 0, 0.45);
        cursor: pointer;
        user-select: none;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
    }
    #video-unmute-content {
        background: rgba(0, 0, 0, 0.25);
        backdrop-filter: blur(4px);
    }
}

/* loading indicator animation */
@keyframes bounce {
    from {
        transform: translateY(0);
        opacity: 0.6;
    }
    to {
        transform: translateY(-10px);
        opacity: 1;
    }
}

/* background blur breathing effect animation */
@keyframes blurBreath {
    0%,
    100% {
        filter: blur(120px) brightness(0.4);
    }
    50% {
        filter: blur(150px) brightness(0.85);
    }
}

#toast-container > :not(:last-child) {
    margin: 0 !important;
}