:where(.showcase[data-showcase="browser-extension"]) {
    --be-bg: #0a0e13;
    --be-el1: #12181f;
    --be-el2: #1a222b;
    --be-el3: #222c36;
    --be-border: #222c36;
    --be-text: #e6e1e5;
    --be-text-2: #cac4d0;
    --be-text-3: #938f99;
    --be-primary: #a9d5ff;
    --be-primary-o1: rgba(169, 213, 255, 0.1);
    --be-on-primary: #002e6a;
    --be-error: #e73a4b;
    --be-error-h: #f05a6b;
    --be-popup-shadow: 0 22px 60px rgba(0, 0, 0, 0.45);
}

:where(.showcase[data-showcase="browser-extension"][data-showcase-fit="fill"]) {
    display: grid;
    place-items: center;
}

.showcase[data-showcase="browser-extension"] {
    .be-stage {
        position: relative;
        width: 100%;
        max-width: 720px;
        container-type: inline-size;
        container-name: be-stage;
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                    transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);

        &.animate-in {
            opacity: 1;
            transform: translateY(0);

            .be-laptop {
                opacity: 1;
                transform: translateX(0) rotateY(0) rotate(0);
            }

            .be-laptop-screenshot {
                opacity: 1;
            }

            .be-popup {
                opacity: 1;
                transform: translateX(0) scale(1);
                direction: ltr;
                font-family: 'Plus Jakarta Sans', sans-serif;

                &.shifted {
                    transform: translateX(22%) scale(1);
                    transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1);
                }
            }
        }

        .be-laptop {
            position: relative;
            z-index: 1;
            width: 100%;
            opacity: 0;
            transform: translateX(-30px) rotateY(8deg) rotate(2deg);
            transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
                        transform 1s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
        }

        .be-laptop-frame {
            position: relative;
            aspect-ratio: 3560 / 2200;
            width: 100%;

            &::before {
                content: "";
                position: absolute;
                inset: 0;
                background: url("/static/showcases/devices/mbp-13-spacegrey.png") center / contain no-repeat;
                z-index: 2;
                pointer-events: none;
            }
        }

        .be-laptop-screen {
            position: absolute;
            left: 14.08%;
            top: 13.59%;
            width: 71.91%;
            height: 72.73%;
            overflow: hidden;
            background: #000;
        }

        .be-laptop-screenshot {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            margin-top: -2px;
            opacity: 0;
            transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.6s;
        }

        .be-subtitle {
            direction: ltr;
            font-family: 'Plus Jakarta Sans', sans-serif;
            position: absolute;
            left: 50%;
            bottom: 6%;
            width: clamp(240px, 92%, 600px);
            transform: translate(-50%, 10px);
            background: rgba(0, 0, 0, 0.82);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            padding: 0.55rem 0.8rem;
            opacity: 0;
            transition: opacity 0.4s ease, transform 0.4s ease;
            pointer-events: none;
            z-index: 3;
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);

            &.visible {
                opacity: 1;
                transform: translate(-50%, 0);
            }
        }

        .be-subtitle-original,
        .be-subtitle-translated {
            text-align: center;
            margin: 0;
            font-size: 0;
            line-height: 0;
        }

        .be-subtitle-original {
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 2px;
            font-weight: var(--font-weight-regular);
        }

        .be-subtitle-translated {
            color: #fff;
            font-weight: var(--font-weight-bold);
        }

        .be-word {
            display: inline;
            font-size: clamp(0.44rem, 1vw, 0.72rem);
            line-height: 1.35;
            opacity: 0;
            transition: opacity 0.22s ease;

            &.visible {
                opacity: 1;
            }

            & + &::before {
                content: " ";
                white-space: pre-wrap;
            }
        }

        .be-popup {
            position: absolute;
            top: -4%;
            right: -5%;
            z-index: 4;
            width: 40cqi;
            font-size: 1.75cqi;
            background: var(--be-bg);
            color: var(--be-text);
            border-radius: 1em;
            overflow: visible;
            box-shadow: var(--be-popup-shadow);
            border: 1px solid var(--be-border);
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-weight: var(--font-weight-medium);
            opacity: 0;
            transform: translateX(50px) scale(0.9);
            transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.6s,
                        transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.6s;
            padding: 1.5em;
            display: flex;
            flex-direction: column;
            gap: 0.5em;
            text-align: left;

            --cPrimaryText: var(--be-text);

            .be-popup-head {
                display: flex;
                align-items: center;
                gap: 0.5em;
            }

            .be-brand {
                display: inline-flex;
                align-items: center;
                min-width: 0;

                .be-wordmark {
                    height: 2em;
                    width: auto;
                    flex-shrink: 0;
                    display: block;
                }
            }

            .be-tabs {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 0.5em;
                padding: 0.15em;
                margin: 0.5em 0;
                border: 1px solid var(--be-border);
                border-radius: 2em;
                background: var(--be-el1);
            }

            .be-tab {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 0.3em;
                padding: 0.5em;
                border-radius: 3em;
                color: var(--be-text);
                background: transparent;
                transition: background-color 0.25s ease, color 0.25s ease;

                &.active {
                    background: var(--be-bg);
                    color: var(--be-primary);
                    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.08);
                }

                svg {
                    width: 1em;
                    height: 1em;
                    flex-shrink: 0;
                }
            }

            .be-actionable {
                display: flex;
                flex-direction: column;
                gap: 0.3em;
                transition: opacity 0.4s ease;

                &.dimmed {
                    opacity: 0.6;
                }
            }

            .be-languages {
                display: grid;
                grid-template-columns: 1fr 0fr 0fr;
                gap: 0.5em;
                align-items: center;
                transition: grid-template-columns 0.5s cubic-bezier(0.4, 0, 0.2, 1);

                .be-swap,
                .be-target-field {
                    opacity: 0;
                    overflow: hidden;
                    transition: opacity 0.35s ease;
                }

                &.translate {
                    grid-template-columns: 1fr auto 1fr;

                    .be-swap,
                    .be-target-field {
                        opacity: 1;
                    }

                    .be-target-field {
                        overflow: visible;
                    }
                }
            }

            .be-swap {
                display: flex;
                align-items: center;
                justify-content: center;
                color: var(--be-text-3);

                svg {
                    width: 1em;
                    height: 1em;
                }
            }

            .be-dropdown-field {
                position: relative;
                min-width: 0;
            }

            .be-trigger {
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 100%;
                min-height: 2em;
                box-sizing: border-box;
                padding: 0.5em 0.75em;
                border: 1px solid var(--be-border);
                border-radius: 2em;
                font-size: 0.87em;
                color: var(--be-text);
                cursor: default;
                transition: border-color 0.2s ease, background-color 0.2s ease;

                .be-trigger-label {
                    margin: 0;
                    color: var(--be-text);
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    transition: color 0.3s ease;

                    &[data-placeholder] {
                        color: var(--be-text-3);
                    }
                }

                .dropdown-trigger-icon {
                    flex-shrink: 0;
                    width: 1.25em;
                    height: 1.25em;
                    margin-left: 0.5em;
                    opacity: 0.7;
                    transition: transform 0.2s ease;
                }

                &.open {
                    border-color: var(--be-primary);
                    background: var(--be-el1);

                    .dropdown-trigger-icon {
                        transform: rotate(180deg);
                    }

                    .be-dropdown-menu {
                        opacity: 1;
                        transform: translateY(0);
                        pointer-events: auto;
                    }
                }
            }

            .be-dropdown-menu {
                position: absolute;
                top: calc(100% + 0.3em);
                left: 0;
                right: auto;
                min-width: 100%;
                width: max-content;
                max-width: 14em;
                background: var(--be-el1);
                border: 1px solid var(--be-border);
                border-radius: 0.9em;
                box-shadow: 0 0.55em 1.1em rgba(0, 0, 0, 0.45);
                opacity: 0;
                transform: translateY(-0.3em);
                pointer-events: none;
                transition: opacity 0.2s ease, transform 0.2s ease;
                z-index: 6;
                overflow: hidden;
            }

            .be-dropdown-search {
                padding: 0.5em 0.75em;
                border-bottom: 2px solid var(--be-el3);
                background: var(--be-el1);
                color: var(--be-text-3);
                white-space: nowrap;
            }

            .be-dropdown-item {
                padding: 0.4em 0.75em;
                color: var(--be-text);
                transition: background-color 0.15s ease;

                &[data-hover],
                &.pressed {
                    background: var(--be-el3);
                }
            }

            .be-reveal {
                display: grid;
                grid-template-rows: 0fr;
                opacity: 0;
                overflow: hidden;
                transition: grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                            opacity 0.3s ease;

                &.revealed {
                    grid-template-rows: 1fr;
                    opacity: 1;
                }

                &.overflowing {
                    overflow: visible;
                }
            }

            .be-reveal-inner {
                min-height: 0;
                padding-top: 0.3em;
            }

            .be-switch {
                position: relative;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 0.3em;
                margin: 0.3em 0;
            }

            .be-switch-check {
                position: absolute;
                right: 0.55em;
                top: 50%;
                width: 0.6em;
                height: 0.6em;
                transform: translateY(-50%);
                color: var(--be-primary);
                opacity: 0;
                pointer-events: none;
                transition: opacity 0.18s ease-in-out;
            }

            [data-checked] > .be-switch-check {
                opacity: 1;
            }

            .be-switch-label {
                font-size: 0.95em;
                color: var(--be-text);
            }

            .be-switch-slider {
                position: relative;
                box-sizing: border-box;
                width: 2.8em;
                height: 1.5em;
                flex-shrink: 0;
                border: 0.09em solid var(--be-border);
                border-radius: 1em;
                background: var(--be-el1);
                transition: background-color 0.18s ease-in-out, border-color 0.18s ease-in-out;

                &::before {
                    content: "";
                    position: absolute;
                    width: 0.55em;
                    height: 0.55em;
                    top: 50%;
                    left: 0.42em;
                    margin-top: -0.275em;
                    background: var(--be-text-3);
                    border-radius: 0.3em;
                    transition: width 0.18s ease-in-out, height 0.18s ease-in-out,
                                left 0.18s ease-in-out, margin-top 0.18s ease-in-out,
                                background-color 0.18s ease-in-out;
                }
            }

            [data-checked] > .be-switch-slider {
                background: var(--be-primary);
                border-color: var(--be-primary);

                &::before {
                    width: 1.16em;
                    height: 1.16em;
                    left: calc(100% - 1.34em);
                    margin-top: -0.58em;
                    border-radius: 1em;
                    background: var(--be-on-primary);
                }
            }

            .be-button-row {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 0.5em;
                margin-top: 0.5em;
            }

            .be-bubble {
                display: inline-flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 2.15em;
                height: 2.15em;
                flex-shrink: 0;
                margin: 0 0.3em;
                border-radius: 100%;
                background: var(--be-primary-o1);
                color: var(--be-primary);
                font-size: 0.87em;
                font-weight: var(--font-weight-bold);
                line-height: 1.1;
            }

            .be-bubble-label {
                font-size: 0.6em;
                font-weight: var(--font-weight-regular);
            }

            .be-settings svg {
                width: 1.15em;
                height: 1.15em;
            }

            .be-record {
                position: relative;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 4.5em;
                height: 4.5em;
                flex-shrink: 0;
                padding: 0;
                border: none;
                border-radius: 50%;
                background: var(--be-error);
                color: #fff;
                cursor: default;
                font: inherit;
                transition: background-color 0.25s ease, transform 0.12s ease;

                &.pressed {
                    transform: scale(0.94);
                }

                &.recording {
                    background: var(--be-error-h);

                    .be-record-mic {
                        display: none;
                    }

                    .be-record-stop {
                        display: block;
                    }

                    &::after {
                        content: "";
                        position: absolute;
                        inset: -0.3em;
                        border-radius: 50%;
                        border: 0.12em solid color-mix(in srgb, var(--be-error) 55%, transparent);
                        animation: be-record-pulse 1.6s ease-out infinite;
                    }
                }

                .be-record-mic {
                    display: block;

                    svg {
                        width: 2em;
                        height: 2em;
                        display: block;
                    }
                }

                .be-record-stop {
                    display: none;
                    width: 1.75em;
                    height: 1.75em;
                    border-radius: 0.45em;
                    background: #fff;
                }
            }
        }

    }
}

@keyframes be-record-pulse {
    0% {
        opacity: 0.75;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(1.22);
    }
}

@media (prefers-reduced-motion: reduce) {
    .be-stage,
    .be-laptop,
    .be-laptop-screenshot,
    .be-popup,
    .be-subtitle,
    .be-record,
    .be-languages,
    .be-switch-slider,
    .be-reveal {
        transition: none;
    }

    .be-record.recording::after {
        animation: none;
    }
}