/* Decorative artwork sits outside the interaction area on wide screens. */
.signup-scene {
    display: none;
}

@media (min-width: 1440px) {
    .signup-with-scene {
        position: relative;
        isolation: isolate;
        min-height: 100vh;
        overflow-x: clip;
    }

    .signup-with-scene::before {
        content: "";
        position: absolute;
        z-index: -1;
        pointer-events: none;
        inset: 0 auto 0 0;
        width: min(50vw, 920px);
        background: url("corporate-montage.jpg") left bottom / 100% auto no-repeat;
        opacity: .35;
        mask-image: radial-gradient(ellipse 98% 70% at 0% 100%, #000 38%, transparent 98%);
    }

    .signup-with-scene .card {
        position: relative;
    }

    .signup-scene {
        display: block;
        position: absolute;
        top: 24px;
        left: calc(100% - 5px);
        width: clamp(190px, calc(50vw - 525px), 410px);
        aspect-ratio: 1086 / 1448;
        pointer-events: none;
        background: url("corporate-advisor.png") center / contain no-repeat;
        mask-image: linear-gradient(#000 88%, transparent 100%);
    }

    .signup-scene::after {
        content: "";
        position: absolute;
        top: 41%;
        left: 72%;
        width: 13%;
        height: 4%;
        opacity: .82;
        background: url("/images/scylla-crm-logo.webp") center / contain no-repeat;
        filter: grayscale(1) invert(1) contrast(1.8) brightness(1.25);
        mix-blend-mode: screen;
        transform: rotate(-7deg);
    }
}