.live-event {
    position: relative;
    width: 100%;
    aspect-ratio: 1.1;
    perspective: calc(var(--page-max-width) * 1.2);
    isolation: isolate;

    .live-event-ribbons {
        position: absolute;
        inset: 0;
        width: 103%;
        height: 103%;
        pointer-events: none;
        z-index: -1;
    }

    .live-event-video-card {
        position: absolute;
        top: 0;
        left: 4%;
        width: 90%;
        height: 91%;
        overflow: hidden;
        border-radius: var(--border-radius-small);
        background: var(--maestra-app-dark-blue);

        .live-event-video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .live-event-shade {
            position: absolute;
            inset: 0;
            background: url("/static/showcases/live-event/media/shade.png") 0 0 / 100% 100% no-repeat;
            pointer-events: none;
        }

        .live-event-top {
            --live-event-language-height: calc(var(--font-xs) * 2.5);
            position: absolute;
            inset: calc(var(--font-xs) * 4 / 3) calc(var(--font-xs) * 1.5) auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: var(--font-sm);
            color: var(--maestra-white);
            font-size: var(--font-xs);

            @media (max-width: 767px) {
                --live-event-language-height: calc(var(--font-xs) * 2);
                inset: calc(var(--font-xs) * 2 / 3) calc(var(--font-xs) * 2 / 3) auto;
                gap: calc(var(--font-xs) / 2);
                font-size: var(--font-xxs);
            }

            .live-event-title,
            .live-event-languages {
                border: calc(var(--font-xs) / 12) solid color-mix(in srgb, var(--maestra-white) 22%, transparent);
                border-radius: var(--button-border-radius);
                background: color-mix(in srgb, var(--maestra-white) 16%, transparent);
                backdrop-filter: blur(calc(var(--font-xs) * 5 / 6));
            }

            .live-event-title {
                padding: 0 var(--font-xs);
                line-height: calc(var(--live-event-language-height) + var(--font-xs) * 2 / 3);
                max-width: 100%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: var(--font-sm);

                @media (max-width: 767px) {
                    padding: 0 calc(var(--font-xs) / 2);
                    font-size: inherit;
                }
            }

            .live-event-languages {
                --live-event-language-width: calc(var(--font-xs) * 10 / 3);
                --live-event-language-gap: calc(var(--font-xs) / 6);
                position: relative;
                display: flex;
                gap: var(--live-event-language-gap);
                padding: calc(var(--font-xs) / 3);
                direction: ltr;

                @media (max-width: 767px) {
                    --live-event-language-width: calc(var(--font-xs) * 2.5);
                }

                .live-event-language-thumb {
                    position: absolute;
                    top: calc(var(--font-xs) / 3);
                    left: calc(var(--font-xs) / 3);
                    width: var(--live-event-language-width);
                    height: var(--live-event-language-height);
                    border-radius: var(--button-border-radius);
                    background: var(--maestra-white);
                    box-shadow: 0 calc(var(--font-xs) / 3) var(--font-xs) calc(var(--font-xs) / -3) color-mix(in srgb, var(--maestra-black) 30%, transparent);
                    transform: translateX(calc(var(--live-event-language-index, 0) * (var(--live-event-language-width) + var(--live-event-language-gap))));
                    transition: transform .45s cubic-bezier(.3, 1.2, .5, 1);

                    @media (prefers-reduced-motion: reduce) {
                        transition: none;
                    }
                }

                button {
                    position: relative;
                    z-index: 1;
                    appearance: none;
                    border: none;
                    border-radius: var(--button-border-radius);
                    width: var(--live-event-language-width);
                    height: var(--live-event-language-height);
                    padding: 0;
                    color: color-mix(in srgb, var(--maestra-white) 85%, transparent);
                    background: transparent;
                    font: inherit;
                    font-weight: var(--font-weight-bold);
                    cursor: pointer;
                    transition: color .3s;

                    &[aria-pressed="true"] {
                        color: var(--ncs-transcription-primary-light);
                    }

                    &:focus-visible {
                        outline: calc(var(--font-xs) / 6) solid var(--maestra-white);
                        outline-offset: calc(var(--font-xs) / 6);
                    }
                }
            }
        }
    }

    [data-event-tilt] {
        transition: transform .35s ease-out;
        transform-style: preserve-3d;

        @media (prefers-reduced-motion: reduce) {
            transition: none;
        }
    }

    .live-event-phone {
        position: absolute;
        z-index: 2;
        width: min(42%, max((100cqi / 1.1 - var(--font-xs) * 9.5) / 1.886, 96cqi - var(--font-xs) * 20.5));
        right: 0;
        bottom: 0;

        @media (max-width: 767px) {
            width: min(42%, max((100cqi / 1.1 - var(--font-xs) * 6.6) / 1.886, 96cqi - var(--font-xs) * 15.4));
        }

        .phone-frame::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -1;
            border-radius: inherit;
            box-shadow: 0 calc(var(--spacing) / 10) calc(var(--spacing) / 10) color-mix(in srgb, var(--maestra-black) 20%, transparent);
        }

        .phone-screen {
            .screen-content,
            .screen-content-scaler,
            .showcase,
            .landing-caption-demo-container {
                border-radius: inherit;
            }

            .showcase {
                background: var(--wc-bg);
            }
        }
    }

    .live-event-qr-position {
        position: absolute;
        bottom: 4%;
        left: 0;
        z-index: 3;

        .live-event-qr {
            display: flex;
            align-items: center;
            gap: calc(var(--font-xs) * .8);
            padding: var(--font-xs) var(--font-sm);
            background: var(--background);
            color: var(--text);
            border-radius: var(--border-radius-smaller);
            box-shadow: 0 calc(var(--font-xs) / 3) var(--font-xs) color-mix(in srgb, var(--maestra-black) 15%, transparent);
            font-size: var(--font-xs);
            line-height: 1.4;
            text-decoration: none;
            animation: event-qr-float 5s ease-in-out infinite paused;

            @media (max-width: 767px) {
                font-size: var(--font-xxs);
                padding: calc(var(--font-xs) / 2);
                gap: calc(var(--font-xs) / 2);
                border-radius: var(--border-radius-tiny);
            }

            @media (prefers-reduced-motion: reduce) {
                animation: none;
            }

            svg {
                width: calc(var(--font-xs) * 3.5);
                height: calc(var(--font-xs) * 3.5);
                padding: calc(var(--font-xs) / 4);
                background: var(--maestra-white);

                @media (max-width: 767px) {
                    width: calc(var(--font-xs) * 2.5);
                    height: calc(var(--font-xs) * 2.5);
                }
            }

            b,
            > span > span {
                display: block;
            }

            b {
                font-size: var(--font-sm);

                @media (max-width: 767px) {
                    font-size: inherit;
                }
            }

            > span > span {
                color: var(--text-faded);
            }
        }
    }

    &.is-playing .live-event-qr {
        animation-play-state: running;
    }

    &[data-event-intro] {
        --live-event-intro-turn: 30deg;
        --live-event-intro-pop: cubic-bezier(.34, 1.4, .64, 1);

        @media (max-width: 767px) {
            --live-event-intro-turn: 15deg;
        }

        .live-event-video-card {
            animation: live-event-turn .75s cubic-bezier(.35, .1, .2, 1) backwards, live-event-slide .85s cubic-bezier(.2, .8, .2, 1) backwards;
        }

        .live-event-phone {
            animation: live-event-pop .6s .5s var(--live-event-intro-pop) backwards;
        }

        .live-event-top > * {
            animation: live-event-pop .5s .7s var(--live-event-intro-pop) backwards;

            &:nth-child(2) {
                animation-delay: .8s;
            }
        }

        .live-event-qr-position {
            animation: live-event-pop .6s .9s var(--live-event-intro-pop) backwards;
        }

        .live-event-ribbons path {
            stroke-dasharray: 1;
            animation: live-event-draw 1.2s .4s cubic-bezier(.65, 0, .35, 1) backwards;

            &:nth-child(even) {
                animation-delay: .55s;
            }
        }

        .landing-caption-demo-container {
            animation: live-event-screen-on .6s ease-out backwards;
        }

        .phone-screen .showcase {
            animation: live-event-screen-backdrop .6s step-end backwards;
        }

        &[data-event-intro="pending"] :is(.live-event-video-card, .live-event-phone, .live-event-top > *, .live-event-qr-position, .live-event-ribbons path),
        &:not([data-event-intro="captions"]) :is(.landing-caption-demo-container, .phone-screen .showcase) {
            animation-play-state: paused;
        }

        @media (prefers-reduced-motion: reduce) {
            :is(.live-event-video-card, .live-event-phone, .live-event-top > *, .live-event-qr-position, .live-event-ribbons path, .landing-caption-demo-container) {
                animation-name: live-event-fade;
            }
        }
    }
}

@keyframes event-qr-float {
    50% {
        transform: translateY(calc(var(--font-xs) * -.5));
    }
}

@keyframes live-event-turn {
    from {
        rotate: y var(--live-event-intro-turn);
    }
}

@keyframes live-event-slide {
    from {
        opacity: 0;
        translate: 25% 0;
    }

    20% {
        opacity: 1;
    }
}

@keyframes live-event-pop {
    from {
        opacity: 0;
        scale: .8;
        translate: 0 calc(var(--font-xs) * 1.5);
    }
}

@keyframes live-event-draw {
    from {
        opacity: 0;
        stroke-dashoffset: 1;
    }

    20% {
        opacity: 1;
    }
}

@keyframes live-event-screen-on {
    from {
        opacity: 0;
        scale: .96;
        filter: blur(calc(var(--font-xs) / 2));
    }
}

@keyframes live-event-screen-backdrop {
    from {
        background-color: transparent;
    }
}

@keyframes live-event-fade {
    from {
        opacity: 0;
    }
}