/* Shahmeer Custom Sections - Responsive Devices Slider (desktop + tablet + phone) */

.scs-responsive-devices-slider {
    display: flex;
    justify-content: center;
    padding: 70px 20px;
    overflow: visible;
}

.scs-rd-stage {
    position: relative;
    width: 640px;
    max-width: 100%;
    height: 460px;
}

.scs-rd-stage .scs-device-frame {
    position: absolute;
    top: 0;
    left: 50%;
    cursor: grab;
    box-sizing: border-box;
    background: #111;
    box-shadow: 0 0 0 3px #2b2b2b, 0 25px 50px rgba( 0, 0, 0, 0.45 );
}

.scs-rd-stage .scs-device-frame:active {
    cursor: grabbing;
}

.scs-rd-stage .scs-device-frame .scs-phone-screen {
    background: #fff;
    overflow: hidden;
}

/* ---- Desktop monitor (iMac-style: thin bezel, thick bottom chin with dots, tapered stand) ---- */
.scs-rd-stage .scs-device-desktop {
    z-index: 1;
    width: 430px;
    height: 300px;
    border-radius: 12px;
    padding: 12px 12px 46px 12px;
    /* Scale is applied via `zoom`, not inside `transform` - transform:scale()
       stretches an already-rasterized bitmap via the GPU compositor, which
       is what was causing the permanent blur on non-1 Scale values; zoom
       makes the browser lay out and rasterize the box (and the image inside
       it) fresh at the true final size, so it stays crisp at any scale. */
    transform:
        translateX(-50%)
        translate( var( --scs-x, -52px ), var( --scs-y, -55px ) )
        rotate( var( --scs-rot, 0deg ) );
    zoom: var( --scs-scale, 1 );
    opacity: var( --scs-opacity, 1 );
}

.scs-rd-stage .scs-device-desktop .scs-phone-screen {
    border-radius: 4px;
}

.scs-rd-stage .scs-device-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

.scs-rd-stage .scs-device-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3a3a3a;
    display: block;
}

.scs-rd-stage .scs-device-desktop::before {
    /* tapered neck */
    content: '';
    position: absolute;
    left: 50%;
    bottom: -38px;
    transform: translateX(-50%);
    width: 22px;
    height: 40px;
    background: #111;
}

.scs-rd-stage .scs-device-desktop::after {
    /* wide flared base */
    content: '';
    position: absolute;
    left: 50%;
    bottom: -50px;
    transform: translateX(-50%);
    width: 150px;
    height: 18px;
    border-radius: 10px;
    background: #111;
}

/* ---- Tablet ---- */
.scs-rd-stage .scs-device-tablet {
    z-index: 2;
    width: 221px;
    height: 304px;
    border-radius: 20px;
    padding: 15px 9px;
    transform:
        translateX(-50%)
        translate( var( --scs-x, 157px ), var( --scs-y, 27px ) )
        rotate( var( --scs-rot, 0deg ) );
    zoom: var( --scs-scale, 1 );
    opacity: var( --scs-opacity, 1 );
}

.scs-rd-stage .scs-device-tablet .scs-phone-screen {
    border-radius: 9px;
}

/* ---- Phone ---- */
.scs-rd-stage .scs-device-phone {
    z-index: 3;
    width: 130px;
    height: 235px;
    border-radius: 26px;
    padding: 10px;
    transform:
        translateX(-50%)
        translate( var( --scs-x, 9px ), var( --scs-y, 89px ) )
        rotate( var( --scs-rot, 0deg ) );
    zoom: var( --scs-scale, 1 );
    opacity: var( --scs-opacity, 1 );
}

.scs-rd-stage .scs-device-phone .scs-phone-screen {
    border-radius: 18px;
}

.scs-rd-stage .scs-device-phone .scs-device-notch {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 45%;
    height: 12px;
    border-radius: 0 0 8px 8px;
    background: #111;
    z-index: 2;
}

/* ---- Entry animation: self-playing CSS keyframe (no JS dependency at
   all). ONE local keyframe reused by all 3 device types, since they all
   share the same custom-property names (--scs-x/-y/-rot/-scale/-opacity,
   set per-device by the Position controls above) - it just adds the
   entrance offset/scale on top of whichever values are already on that
   specific device, and always ends at that exact same resting transform
   so it can never conflict with the Position/Scale/Opacity controls. */
.scs-device-frame.scs-entrance {
    animation-name: scs-device-entrance-in;
}

@keyframes scs-device-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( 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 ) );
    }
}