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

Space Vanta Theme 1.0

Module:
Immediate Trust Bridge

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

Version:
2.1

Responsibility:
Spatial Image Frame / Perspective Surface

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

.sv-trust-bridge-slide__media {

    position:
        relative;

    z-index:
        2;

    width:
        100%;

    height:
        var(--sv-media-height, 420px);

    overflow:
        hidden;

    isolation:
        isolate;

    aspect-ratio:
        1.62 / 1;

    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.90),
            rgba(220, 224, 226, 0.58));

    /*
    C / wedge deformation.

    The media is one spatial object:
    frame + uploaded image + glass surface
    all transform together.

    The left side visually opens outward.
    The right side visually converges inward.
    */

    transform:
        perspective(1500px) rotateY(-9deg) rotateZ(-0.55deg);

    transform-origin:
        50% 50%;

    border:
        1px solid rgba(255, 255, 255, 0.72);

    box-shadow:
        0 48px 96px rgba(38, 44, 48, 0.20),
        0 18px 42px rgba(38, 44, 48, 0.12),
        0 4px 10px rgba(113, 139, 163, 0.07);

    transition:
        transform 900ms cubic-bezier(.18, .72, .18, 1),
        box-shadow 900ms ease;

}

.sv-trust-bridge-slide__media::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        2;

    background:
        linear-gradient(108deg,
            rgba(255, 255, 255, 0.30),
            rgba(255, 255, 255, 0.03) 30%,
            rgba(113, 139, 163, 0.06) 67%,
            rgba(255, 255, 255, 0.18));

    mix-blend-mode:
        screen;

    pointer-events:
        none;

}

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

    content:
        "";

    position:
        absolute;

    inset:
        8px;

    z-index:
        3;

    border:
        1px solid rgba(255, 255, 255, 0.62);

    box-shadow:
        inset 0 0 0 1px rgba(113, 139, 163, 0.08),
        inset 0 -18px 28px rgba(255, 255, 255, 0.08);

    pointer-events:
        none;

}

.sv-trust-bridge-slide__image {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

    object-position:
        center center;

    opacity:
        0.97;

    transform:
        scale(1.001) translateZ(0);

    filter:
        saturate(0.94) contrast(0.99);

    transition:
        filter 820ms ease,
        opacity 820ms ease;

}

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

    transform:
        perspective(1500px) rotateY(-9deg) rotateZ(-0.55deg) translateZ(0);

    box-shadow:
        0 56px 110px rgba(38, 44, 48, 0.23),
        0 20px 48px rgba(38, 44, 48, 0.13),
        0 5px 14px rgba(113, 139, 163, 0.09);

}

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

    filter:
        saturate(0.98) contrast(1);

}

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

    transform:
        perspective(1500px) rotateY(-12deg) rotateZ(-0.9deg);

}

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

    transform:
        perspective(1500px) rotateY(-12deg) rotateZ(-0.9deg);

}

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

    filter:
        saturate(0.48) contrast(0.88) brightness(1.05);

    opacity:
        0.62;

}

@media (max-width: 767px) {

    .sv-trust-bridge-slide__media {

        width:
            91%;

        height:
            auto;

        min-height:
            0;

        margin:
            0 auto;

        aspect-ratio:
            1.62 / 1;

        transform:
            perspective(1100px) rotateY(-6deg) rotateZ(-0.4deg);

    }

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

        transform:
            perspective(1100px) rotateY(-6deg) rotateZ(-0.4deg);

    }

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

        transform:
            perspective(1100px) rotateY(-8deg) rotateZ(-0.7deg);

    }

}

@media (max-width: 420px) {

    .sv-trust-bridge-slide__media {

        width:
            88%;

    }

}