/* Shahmeer Custom Sections - Triple Phone Slider */

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

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

.scs-triple-phone-stage .scs-phone-frame {
    width: 240px;
    height: 500px;
    position: absolute;
    top: 30px;
    left: 50%;
    cursor: grab;
}

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

/* Center phone - straight, sharp, on top */
.scs-triple-phone-stage .scs-phone-center {
    z-index: 3;
    transform: translateX(-50%);
    opacity: 1;
}

/* One local entrance keyframe reused by all 3 phones - they share the same
   custom-property names (--scs-x/-y/-rot/-scale/-opacity), just with
   different values (or none at all for center, which just falls back to
   0/0/0deg/1/1). Ends at each phone's own exact resting transform, so it
   never conflicts with the Position/Scale/Opacity controls above. */
.scs-phone-frame.scs-entrance {
    animation-name: scs-triple-entrance-in;
}

@keyframes scs-triple-entrance-in {
    from {
        opacity: 0;
        transform:
            translateX(-50%)
            translate( calc( var( --scs-x, 0px ) + var( --scs-e-ox, 0px ) ), calc( var( --scs-y, 0px ) + var( --scs-e-oy, 0px ) ) )
            rotate( var( --scs-rot, 0deg ) )
            scale( calc( var( --scs-scale, 1 ) * var( --scs-e-oscale, 1 ) ) );
    }
    to {
        opacity: var( --scs-opacity, 1 );
        transform:
            translateX(-50%)
            translate( var( --scs-x, 0px ), var( --scs-y, 0px ) )
            rotate( var( --scs-rot, 0deg ) )
            scale( var( --scs-scale, 1 ) );
    }
}

/* Left phone - offset via CSS vars set from Elementor controls */
.scs-triple-phone-stage .scs-phone-left {
    z-index: 1;
    transform:
        translateX(-50%)
        translate( var( --scs-x, -110px ), var( --scs-y, 50px ) )
        rotate( var( --scs-rot, -8deg ) )
        scale( var( --scs-scale, 0.85 ) );
    opacity: var( --scs-opacity, 0.9 );
}

/* Right phone */
.scs-triple-phone-stage .scs-phone-right {
    z-index: 2;
    transform:
        translateX(-50%)
        translate( var( --scs-x, 110px ), var( --scs-y, 30px ) )
        rotate( var( --scs-rot, 8deg ) )
        scale( var( --scs-scale, 0.9 ) );
    opacity: var( --scs-opacity, 0.95 );
}

/* 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-triple-phone-stage {
        --scs-r-scale: 0.85;
    }
}

@media (max-width: 600px) {
    .scs-triple-phone-stage {
        --scs-r-scale: 0.65;
    }
}