/* 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;
    transform:
        translateX(-50%)
        translate( var( --scs-x, -52px ), var( --scs-y, -55px ) )
        rotate( var( --scs-rot, 0deg ) )
        scale( 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 ) )
        scale( 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 ) )
        scale( 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: default is fully visible. The hidden pre-animation
   state only applies while the WRAPPER carries .scs-anim-pending and does
   NOT yet have .scs-in-view - both managed by the same proven
   scs-scroll-reveal.js system already used for every widget, so there's
   no separate observer here that could get stuck. Once .scs-in-view lands,
   devices fade in one by one, back to front (desktop, then tablet, then phone). */
.scs-device-frame.scs-device-desktop,
.scs-device-frame.scs-device-tablet,
.scs-device-frame.scs-device-phone {
    transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.scs-responsive-devices-slider.scs-anim-pending:not(.scs-in-view) .scs-device-frame.scs-device-desktop,
.scs-responsive-devices-slider.scs-anim-pending:not(.scs-in-view) .scs-device-frame.scs-device-tablet,
.scs-responsive-devices-slider.scs-anim-pending:not(.scs-in-view) .scs-device-frame.scs-device-phone {
    opacity: 0;
}

.scs-in-view .scs-device-frame.scs-device-desktop { transition-delay: 0ms; }
.scs-in-view .scs-device-frame.scs-device-tablet { transition-delay: 240ms; }
.scs-in-view .scs-device-frame.scs-device-phone { transition-delay: 480ms; }