/*
================================================

Space Vanta Theme 1.0

Module:
Immediate Trust Bridge

File:
public/trust-bridge/cs/player.css

Version:
2.0

Direction:
Spatial Cloud Player

Responsibility:
- Slide Composition
- Active / Previous / Next State
- Cloud-Layer Transition
- Content Focus
- Desktop Spatial Alignment

================================================
*/

.sv-trust-bridge__player {

    --sv-player-width:
        1120px;

    --sv-media-width:
        680px;

    --sv-media-height:
        420px;

    position:
        relative;

    min-height:
        540px;

    overflow:
        hidden;

    isolation:
        isolate;

    background:
        radial-gradient(
            ellipse at 28% 48%,
            rgba(255, 255, 255, 0.94) 0%,
            rgba(255, 255, 255, 0.60) 34%,
            rgba(243, 240, 232, 0.22) 65%,
            rgba(243, 240, 232, 0) 80%
        );

}

.sv-trust-bridge__player::before {

    content:
        "";

    position:
        absolute;

    inset:
        -18% -9%;

    z-index:
        -2;

    background:
        radial-gradient(
            ellipse at 24% 52%,
            rgba(255, 255, 255, 0.82),
            rgba(255, 255, 255, 0) 44%
        ),
        radial-gradient(
            ellipse at 77% 28%,
            rgba(218, 224, 228, 0.42),
            rgba(218, 224, 228, 0) 42%
        ),
        radial-gradient(
            ellipse at 55% 82%,
            rgba(113, 139, 163, 0.10),
            rgba(113, 139, 163, 0) 44%
        );

    filter:
        blur(28px);

    pointer-events:
        none;

}

.sv-trust-bridge__player::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    background:
        linear-gradient(
            110deg,
            rgba(255, 255, 255, 0.20),
            rgba(255, 255, 255, 0) 40%,
            rgba(255, 255, 255, 0.16)
        );

    pointer-events:
        none;

}

.sv-trust-bridge-slide {

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    width:
        min(var(--sv-player-width), 100%);

    min-height:
        460px;

    display:
        grid;

    grid-template-columns:
        var(--sv-media-width)
        minmax(300px, 1fr);

    column-gap:
        52px;

    align-items:
        center;

    transform:
        translate3d(-50%, -50%, 0)
        translate3d(82%, 0, 0);

    opacity:
        0;

    filter:
        blur(13px);

    pointer-events:
        none;

    visibility:
        hidden;

    z-index:
        1;

    transition:
        transform 900ms cubic-bezier(.18, .72, .18, 1),
        opacity 760ms ease,
        filter 820ms ease,
        visibility 0s linear 900ms;

}

.sv-trust-bridge-slide[data-slide-position="previous"] {

    transform:
        translate3d(-50%, -50%, 0)
        translate3d(-67%, 42px, 0)
        scale(0.84);

    opacity:
        0.26;

    filter:
        blur(13px);

    visibility:
        visible;

    z-index:
        2;

}

.sv-trust-bridge-slide[data-slide-position="next"] {

    transform:
        translate3d(-50%, -50%, 0)
        translate3d(66%, -38px, 0)
        scale(0.84);

    opacity:
        0.30;

    filter:
        blur(13px);

    visibility:
        visible;

    z-index:
        4;

}

.sv-trust-bridge-slide[data-slide-position="active"] {

    transform:
        translate3d(-50%, -50%, 0)
        translate3d(0, 0, 0)
        scale(1);

    opacity:
        1;

    filter:
        blur(0);

    pointer-events:
        auto;

    visibility:
        visible;

    z-index:
        6;

}

.sv-trust-bridge-slide[data-slide-position="hidden"] {

    visibility:
        hidden;

    pointer-events:
        none;

    z-index:
        0;

}

.sv-trust-bridge-slide__content {

    position:
        relative;

    z-index:
        3;

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        flex-start;

    padding:
        30px 20px 30px 0;

    opacity:
        0;

    transform:
        translate3d(28px, 0, 0);

    filter:
        blur(11px);

    transition:
        opacity 560ms ease 90ms,
        transform 820ms cubic-bezier(.18, .72, .18, 1) 60ms,
        filter 720ms ease 60ms;

}

.sv-trust-bridge-slide[data-slide-position="active"]
.sv-trust-bridge-slide__content {

    opacity:
        1;

    transform:
        translate3d(0, 0, 0);

    filter:
        blur(0);

}

.sv-trust-bridge-slide[data-slide-position="previous"]
.sv-trust-bridge-slide__content,
.sv-trust-bridge-slide[data-slide-position="next"]
.sv-trust-bridge-slide__content {

    opacity:
        0.28;

    transform:
        translate3d(22px, 0, 0);

    filter:
        blur(14px);

}

.sv-trust-bridge-slide__eyebrow {

    margin-bottom:
        14px;

    font-size:
        10px;

    line-height:
        1.2;

    font-weight:
        500;

    letter-spacing:
        0.20em;

    text-transform:
        uppercase;

    color:
        var(--sv-trust-muted);

}

.sv-trust-bridge-slide__title {

    margin:
        0;

    max-width:
        420px;

    font-size:
        clamp(34px, 3.8vw, 54px);

    line-height:
        0.98;

    font-weight:
        500;

    letter-spacing:
        -0.045em;

    color:
        var(--sv-trust-text);

}

.sv-trust-bridge-slide__description {

    max-width:
        420px;

    margin-top:
        20px;

    font-size:
        14px;

    line-height:
        1.68;

    color:
        var(--sv-trust-text-secondary);

}

.sv-trust-bridge-slide__content::after {

    content:
        "";

    position:
        absolute;

    right:
        -90px;

    bottom:
        -100px;

    width:
        250px;

    height:
        250px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(113, 139, 163, 0.14),
            rgba(113, 139, 163, 0) 70%
        );

    filter:
        blur(10px);

    pointer-events:
        none;

}

@media (max-width: 1023px) {

    .sv-trust-bridge__player {

        --sv-media-width:
            min(58vw, 620px);

        --sv-media-height:
            390px;

        min-height:
            510px;

    }

    .sv-trust-bridge-slide {

        column-gap:
            34px;

    }

}

@media (max-width: 767px) {

    .sv-trust-bridge__player {

        min-height:
            480px;

        background:
            radial-gradient(
                ellipse at 50% 22%,
                rgba(255, 255, 255, 0.96),
                rgba(255, 255, 255, 0.54) 40%,
                rgba(243, 240, 232, 0) 78%
            );

    }

    .sv-trust-bridge-slide {

        width:
            min(100%, 430px);

        min-height:
            440px;

        grid-template-columns:
            minmax(0, 1fr);

        grid-template-rows:
            auto auto;

        row-gap:
            22px;

        align-content:
            start;

    }

    .sv-trust-bridge-slide[data-slide-position="previous"] {

        transform:
            translate3d(-50%, -50%, 0)
            translate3d(-76%, 34px, 0)
            scale(0.82);

        opacity:
            0.23;

        filter:
            blur(13px);

    }

    .sv-trust-bridge-slide[data-slide-position="next"] {

        transform:
            translate3d(-50%, -50%, 0)
            translate3d(76%, -34px, 0)
            scale(0.82);

        opacity:
            0.27;

        filter:
            blur(13px);

    }

    .sv-trust-bridge-slide__content {

        padding:
            0 14px 0;

        align-items:
            center;

        text-align:
            center;

    }

    .sv-trust-bridge-slide__eyebrow {

        margin-bottom:
            10px;

    }

    .sv-trust-bridge-slide__title {

        max-width:
            340px;

        font-size:
            32px;

        line-height:
            1.02;

    }

    .sv-trust-bridge-slide__description {

        max-width:
            350px;

        margin-top:
            13px;

        font-size:
            13px;

        line-height:
            1.58;

    }

    .sv-trust-bridge-slide__content::after {

        right:
            -30px;

        bottom:
            -100px;

    }

}

@media (max-width: 420px) {

    .sv-trust-bridge__player {

        min-height:
            450px;

    }

    .sv-trust-bridge-slide {

        min-height:
            420px;

        row-gap:
            18px;

    }

    .sv-trust-bridge-slide__title {

        font-size:
            29px;

    }

    .sv-trust-bridge-slide__description {

        font-size:
            12px;

    }

}

@media (prefers-reduced-motion: reduce) {

    .sv-trust-bridge-slide,
    .sv-trust-bridge-slide__content {

        transition:
            none !important;

    }

}