.use-cases {
    --message-font-size: var(--font-sm);
    --use-cases-pill-size: calc(var(--font-xs) * 2.25);
    --use-cases-grow: 5.2;
    --use-cases-body-start: calc(var(--spacing) / 4 + var(--use-cases-pill-size) + var(--spacing) / 8);
    --use-cases-body-end: calc(var(--spacing) / 3);
}

.use-cases-content { inline-size: 100%; }

.use-cases-cards {
    inline-size: 100%;
    display: flex;
    align-items: stretch;
    gap: calc(var(--spacing) / 6);
    block-size: calc(var(--font-md) * 36);
}

/* use-cases.ts sets --use-cases-open from 0 to 1 by each card's distance from the moving focus. */
@property --use-cases-open { syntax: "<number>"; inherits: false; initial-value: 0; }
.use-cases-card {
    position: relative;
    flex: 1 1 0;
    flex-grow: calc(1 + (var(--use-cases-grow) - 1) * var(--use-cases-open, 0));
    min-inline-size: 0;
    min-block-size: 0;
    overflow: hidden;
    border-radius: var(--border-radius-small);
    background: var(--background-dark-dark);
    color: var(--text-light-white);
    isolation: isolate;
}

.use-cases-video,
.use-cases-shade,
.use-cases-select {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
}

/* Laid out at the open card's size and centred: a narrow card is a window onto it, not a squeezed copy. */
.use-cases-video {
    inset: 0 auto;
    left: 50%;
    inline-size: var(--use-cases-open-width, 100%);
    translate: -50% 0;
    object-fit: cover;
    transform: scale(1.15);
    filter: blur(8px);
    transition: filter 0.7s, transform 1s;
}

.use-cases-card.is-active .use-cases-video {
    transform: scale(1.02);
    filter: none;
}

.use-cases-shade {
    pointer-events: none;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--background-dark-dark) 28%, transparent), color-mix(in srgb, var(--background-dark-dark) 60%, transparent) 40%, color-mix(in srgb, var(--background-dark-dark) 95%, transparent));
}

.use-cases-select {
    z-index: 1;
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
    color: inherit;
    appearance: none;
}

.use-cases-card:has(:focus-visible) {
    outline: calc(var(--font-xxs) / 3) solid var(--ncs-primary);
    outline-offset: calc(var(--font-xxs) / 3);
}

.use-cases-pill {
    position: absolute;
    left: 50%;
    inset-block-start: calc(var(--spacing) / 4);
    transform: translateX(-50%);
    display: grid;
    place-items: center;
    box-sizing: border-box;
    min-inline-size: var(--use-cases-pill-size);
    block-size: var(--use-cases-pill-size);
    padding: 0 calc(var(--font-xs) / 2);
    border: calc(var(--font-xxs) / 10) solid color-mix(in srgb, var(--text-light-white) 22%, transparent);
    border-radius: var(--button-border-radius);
    background: color-mix(in srgb, var(--text-light-white) 14%, transparent);
    color: color-mix(in srgb, var(--text-light-white) 85%, transparent);
    font-size: var(--font-xs);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    backdrop-filter: blur(calc(var(--spacing) / 12));
}

/* Over a compact card's blurred video the pill's own blur is invisible, so it is dropped once the wave has settled. */
.use-cases-card:not(.is-active) .use-cases-pill {
    backdrop-filter: none;
    transition: backdrop-filter 0s linear 0.8s;
}

.use-cases-label { display: none; }

.use-cases-card.is-active .use-cases-pill {
    left: auto;
    inset-inline-start: calc(var(--spacing) / 3);
    transform: none;

    &:has(.use-cases-label) {
        padding: 0 calc(var(--font-sm) * .8);
        color: var(--text-light-white);
        font-size: var(--font-sm);

        .use-cases-number { display: none; }
        .use-cases-label { display: inline; }
    }
}

.use-cases-audience {
    position: absolute;
    /* Physical axes stay centered when writing-mode changes the logical axes. */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(180deg);
    writing-mode: vertical-rl;
    white-space: nowrap;
    font-size: var(--font-xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    transition: opacity 0.2s ease 0.5s;
}

.use-cases-card.is-active .use-cases-audience {
    opacity: 0;
    transition: opacity 0.12s ease;
}

/* Starts below the pill, so a tall body squeezes its showcase rather than running into it. */
.use-cases-body {
    position: absolute;
    inset-inline: calc(var(--spacing) / 3);
    inset-block: var(--use-cases-body-start) var(--use-cases-body-end);
    inline-size: calc(var(--use-cases-open-width, 100%) - var(--spacing) / 3 * 2);
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: calc(var(--spacing) / 6);
    min-inline-size: 0;
    text-align: start;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(calc(var(--spacing) / 4));
    transition: opacity 0.16s ease, transform 0.2s ease, visibility 0s linear 0.16s;
}

.use-cases-card.is-active .use-cases-body {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: opacity 0.3s ease 0.22s, transform 0.45s cubic-bezier(.22, .9, .24, 1) 0.2s, visibility 0s linear 0.2s;
}

.use-cases-tag {
    display: inline-flex;
    padding: calc(var(--spacing) / 16) calc(var(--spacing) / 8);
    border: calc(var(--font-xxs) / 10) solid color-mix(in srgb, var(--text-light-white) 30%, transparent);
    border-radius: var(--button-border-radius);
    background: color-mix(in srgb, var(--text-light-white) 12%, transparent);
    color: var(--text-light-white);
    font-size: var(--font-xs);
    line-height: 1.4;
    backdrop-filter: blur(calc(var(--spacing) / 8));
}

.use-cases-title {
    margin: 0;
    color: inherit;
    font-size: var(--font-xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
}

.use-cases-description {
    margin: 0;
    color: color-mix(in srgb, var(--text-light-white) 86%, transparent);
    font-size: var(--font-md);
    line-height: 1.6;
}

.use-cases-tags {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing) / 12);
}

.use-cases-body > [data-showcase] {
    flex: 0 1 calc(var(--font-md) * 13);
    min-block-size: calc(var(--font-md) * 8);
    display: flex;
    flex-direction: column;
}

/* The captioner's own layout, on the card's dark glass instead of its white app background. */
.use-cases-body > [data-showcase="web-captioner"] {
    --wc-bg: color-mix(in srgb, var(--background-dark-dark) 55%, transparent);
    --wc-bg-navbar: transparent;
    --wc-text: var(--text-light-white);
    --wc-text-muted: color-mix(in srgb, var(--text-light-white) 60%, transparent);
    --wc-border: color-mix(in srgb, var(--text-light-white) 14%, transparent);
    --wc-primary: var(--ncs-transcription-primary-light);
    --wc-primary-10: color-mix(in srgb, var(--ncs-transcription-primary-light) 14%, transparent);
    --wc-control-bg: color-mix(in srgb, var(--text-light-white) 12%, transparent);
    --wc-frame-border: calc(var(--font-xxs) / 10) solid color-mix(in srgb, var(--text-light-white) 22%, transparent);
    --wc-radius: var(--border-radius-tiny);
    --wc-margin-top: 0;

    .landing-caption-demo-container {
        flex: 1;
        min-block-size: 0;
        display: flex;
        flex-direction: column;
        backdrop-filter: blur(calc(var(--spacing) / 8));
    }

    .landing-caption-demo-parent {
        flex: 1;
        block-size: auto;
        min-block-size: 0;
        mask-image: linear-gradient(transparent, var(--maestra-black) var(--font-md));
    }

    .landing-caption-demo-navbar {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: calc(var(--font-xs) * .8);

        .navbar-center {
            position: static;
            transform: none;
        }

        .navbar-right { justify-self: end; }

        .logo-text { font-size: 0; }
    }

    /* Too narrow for the language beside the controls: it moves above the captions, like the phone app. */
    @container caption-demo (max-width: 450px) {
        .landing-caption-demo-topbar {
            display: flex;
            padding: calc(var(--font-xs) * .8) calc(var(--font-xs) * .8) 0;
        }

        .landing-caption-demo-navbar .navbar-right { display: none; }
    }
}

.use-cases-body :is(.use-cases-title, .use-cases-description, .use-cases-tag) :where(*),
.use-cases-label :where(*) {
    color: inherit;
    font-size: inherit;
}

@media (min-width: 992px) and (max-width: 1360px) {
    .use-cases-cards { block-size: calc(var(--font-md) * 40); }
}

@media (max-width: 991px) {
    .use-cases {
        --use-cases-closed-height: calc(var(--spacing) * 1.25);
        --use-cases-open-height: calc(var(--font-md) * 40);
    }
    .use-cases-cards { flex-direction: column; block-size: auto; }
    .use-cases-card {
        flex: none;
        block-size: calc(var(--use-cases-closed-height) + (var(--use-cases-open-height) - var(--use-cases-closed-height)) * var(--use-cases-open, 0));
    }
    .use-cases-video {
        inset: auto 0;
        top: 50%;
        inline-size: 100%;
        block-size: var(--use-cases-open-height);
        translate: 0 -50%;
    }
    .use-cases-pill
    {
        left: auto;
        top: 50%;
        inset-inline-start: calc(var(--spacing) / 3);
        transform: translateY(-50%);
    }
    .use-cases-body {
        inset-block-start: auto;
        block-size: calc(var(--use-cases-open-height) - var(--use-cases-body-start) - var(--use-cases-body-end));
    }
    .use-cases-audience {
        writing-mode: horizontal-tb;
        transform: translate(-50%, -50%);
        inline-size: max-content;
        max-inline-size: calc(100% - var(--spacing) * 2);
        white-space: normal;
        text-align: center;
        font-size: var(--font-lg);
    }
}

@media (max-width: 360px) {
    .use-cases { --use-cases-open-height: calc(var(--font-md) * 44); }
}

@media (prefers-reduced-motion: reduce) {
    .use-cases-video,
    .use-cases-audience,
    .use-cases-card.is-active .use-cases-audience,
    .use-cases-body,
    .use-cases-card.is-active .use-cases-body { transition: none; }
}