/* Shahmeer Custom Sections - Dual Phone Slider */

.scs-dual-phone-slider {
    display: flex;
    justify-content: center;
    padding: 60px 20px;
}

.scs-dual-phone-stage {
    position: relative;
    width: 320px;
    max-width: 100%;
    height: 560px;
    transform: scale( var( --scs-r-scale, 1 ) );
    transform-origin: top center;
}

.scs-dual-phone-stage .scs-phone-frame {
    width: 260px;
    height: 540px;
}

/* Back phone - static, positioned behind + offset via CSS vars set from Elementor controls */
.scs-dual-phone-stage .scs-back-frame {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transform:
        translate( var( --scs-back-x, -70px ), var( --scs-back-y, 30px ) )
        rotate( var( --scs-back-rot, -8deg ) )
        scale( var( --scs-back-scale, 0.9 ) );
    opacity: var( --scs-back-opacity, 0.85 );
    pointer-events: none;
}

/* Local entrance keyframe for the back phone - the shared .scs-entrance one
   (in scs-animations.css) ends at "transform: none", which would wipe out
   the offset/rotation/scale above once the animation finished. This local
   version keeps them, only adding the entrance offset/scale on top. Front
   phone has no persistent transform of its own, so it just uses the shared
   .scs-entrance class as-is (no override needed). */
.scs-back-frame.scs-entrance {
    animation-name: scs-back-frame-entrance-in;
}

@keyframes scs-back-frame-entrance-in {
    from {
        opacity: 0;
        transform:
            translate( calc( var( --scs-back-x, -70px ) + var( --scs-e-ox, 0px ) ), calc( var( --scs-back-y, 30px ) + var( --scs-e-oy, 0px ) ) )
            rotate( var( --scs-back-rot, -8deg ) )
            scale( calc( var( --scs-back-scale, 0.9 ) * var( --scs-e-oscale, 1 ) ) );
    }
    to {
        opacity: var( --scs-back-opacity, 0.85 );
        transform:
            translate( var( --scs-back-x, -70px ), var( --scs-back-y, 30px ) )
            rotate( var( --scs-back-rot, -8deg ) )
            scale( var( --scs-back-scale, 0.9 ) );
    }
}

/* Front phone - the sliding one, sits on top */
.scs-dual-phone-stage .scs-front-frame {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    cursor: grab;
}

.scs-dual-phone-stage .scs-front-frame:active {
    cursor: grabbing;
}

/* Fallback for content saved before "Stage Scale" existed / no tablet-mobile
   value set - the Elementor control above overrides this once a value is set. */
@media (max-width: 1024px) {
    .scs-dual-phone-stage {
        --scs-r-scale: 0.9;
    }
}

@media (max-width: 480px) {
    .scs-dual-phone-stage {
        --scs-r-scale: 0.7;
    }
}