/* Mainstage V4 — Left-aligned over background image with L→R legibility gradient */

.mstg.v4 {

    /* ── Spacing overrides ──────────────────────────── */

    --mstg-tls-pd-v-tp:      175;
    --mstg-tls-pd-v-tp-mbl:  75;
    --mstg-tls-pd-v-bt:      175;
    --mstg-tls-pd-v-bt-mbl:  75;

    /* ── Background image at full strength — legibility comes from the overlay ── */

    --mstg-img-bg-o: 1;

    /* ── Body text ──────────────────────────────────── */


    .inf {
        position: relative;
        z-index: 1;
    }

    /* ── Legibility overlay ─────────────────────────────
       Mobile/tablet: top-to-bottom (content spans full width).
       Desktop: dark on the left, faded out completely by ~70% so
       the left-aligned content reads against the background image. */
    .bg::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(
            to bottom,
            hsl(from black h s l / 0.6),
            hsl(from black h s l / 0.15)
        );
    }

    /* ── Content column ─────────────────────────────── */

    .mstg-v4-col {
        width: 100%;
    }

    /* ── Bottom-right overlay image ─────────────────────
       Sits above the background video/image (z-index 1, same
       as the gradient) but below the content column (.inf).
       Hidden below 1280 where the content spans full width and
       would collide with it. */
    .mstg-v4-overlay {
        display: none;
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 1;
        width: min(38rem, 50%);
        pointer-events: none;
    }

    .mstg-v4-overlay img {
        display: block;
        width: 100%;
        height: auto;
    }

    @media screen and (min-width: 1280px) {

        .bg::before {
            background: linear-gradient(
                90deg,
                rgba(0, 0, 0, 0.5) 5.05%,
                rgba(0, 0, 0, 0.3) 13.86%,
                rgba(0, 0, 0, 0.00) 100%
            );
        }

        .mstg-v4-col {
            max-width: min(46rem, 55%);
        }

        .mstg-v4-col p {
            margin-inline: 0;
        }

        .mstg-v4-cta {
            justify-content: flex-start;
        }

        .mstg-v4-overlay {
            display: block;
        }
    }


    /* ── Entrance animations ────────────────────────── */

    &.mstg-anm {
        @media (prefers-reduced-motion: no-preference) {
            .fnt_t-k                      { animation: mstg-v4-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0s    both; }
            .fnt_t-big                    { animation: mstg-v4-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s  both; }
            p                             { animation: mstg-v4-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both; }
            .mrg_tp-40                    { animation: mstg-v4-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s  both; }
        }
    }

}

@media (prefers-reduced-motion: no-preference) {
    @keyframes mstg-v4-fade-up {
        from { opacity: 0; transform: translateY(20px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}