/* Shahmeer Custom Sections - Dynamic Phone Stack (hover to pop out) */

.scs-phone-stack {
    display: flex;
    justify-content: center;
    padding: 60px 40px;
    max-width: 100%;
    overflow-x: clip;
    --scs-card-width: 220px;
    --scs-card-height: 440px;
    --scs-step-x: 100px;
    --scs-step-y: 0px;
    --scs-scale-step: 0.05;
    --scs-hover-scale: 1.05;
    --scs-count: 1;
    --scs-transition-duration: 600ms;
    --scs-transition-easing: cubic-bezier(0.22, 1, 0.36, 1);
}

.scs-phone-stack-wrap {
    position: relative;
    /* front phone (i=0) is full size; each one behind adds --scs-step-x of extra width.
       max-width keeps this from forcing a horizontal scrollbar if a client adds many
       phones on a narrow screen - the outer overflow-x: clip on .scs-phone-stack is the
       actual safety net for that case. */
    width: var( --scs-wrap-width, 100% );
    max-width: none;
    height: var( --scs-card-height );
    overflow: visible;
}

.scs-phone-stack-item {
    position: absolute;
    left: 0;
    bottom: 0;
    width: var( --scs-card-width );
    height: var( --scs-card-height );
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    /* bottom-left anchor so every phone behind stays on the same baseline
       and only shrinks inward from the top - matches the reference composition */
    transform-origin: left bottom;
    transform: translate( var( --scs-x, 0px ), var( --scs-y, 0px ) ) scale( var( --scs-stack-scale, 1 ) );
    transition: transform var( --scs-transition-duration ) var( --scs-transition-easing ), filter var( --scs-transition-duration ) ease;
    filter: brightness( var( --scs-brightness, 1 ) );
}

/* ---- Entry animation: self-playing CSS keyframe (opacity only - the
   stacking transform above must stay purely CSS-driven so :hover keeps
   working, so this never touches transform). No JS dependency at all. */
.scs-phone-stack-item {
    /* JS adds scs-anim-pending only after IntersectionObserver is ready. */
    animation-name: scs-phone-stack-in;
    animation-fill-mode: both;
    animation-duration: 1.1s;
    animation-timing-function: ease;
    animation-play-state: paused;
    will-change: opacity, transform;
}

.scs-phone-stack-item.scs-anim-pending {
    opacity: 0;
}

/* Resting position after reveal - kept at a HIGHER specificity than the
   shared .scs-anim-pending.scs-in-view rule (scs-animations.css) by
   including the .scs-phone-stack ancestor, instead of !important. That
   guarantees this always wins regardless of stylesheet load order, WITHOUT
   also beating :hover below - hover/touch-active use the exact same
   specificity level and come later in this file, so normal cascade order
   lets them win back on interaction like before. */
.scs-phone-stack .scs-phone-stack-item.scs-in-view {
    opacity: 1;
    animation-play-state: running;
    transform: translate( var( --scs-x, 0px ), var( --scs-y, 0px ) ) scale( var( --scs-stack-scale, 1 ) );
}

.scs-phone-stack.scs-reversed .scs-phone-stack-item.scs-anim-pending,
.scs-phone-stack.scs-reversed .scs-phone-stack-item.scs-in-view {
    transform: translate( var( --scs-x-negative, 0px ), var( --scs-y, 0px ) ) scale( var( --scs-stack-scale, 1 ) );
}

@keyframes scs-phone-stack-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.scs-phone-stack-item .scs-phone-frame {
    width: 100%;
    height: 100%;
    box-shadow: 0 20px 45px rgba( 0, 0, 0, 0.3 );
    backface-visibility: hidden;
}

/* Hovered (desktop) OR touch-held (mobile/tablet) phone pushes itself forward,
   full size, on top of the rest. Same specificity as .scs-in-view above
   (ancestor + item + one more selector), so it wins on hover purely by
   coming later in the file - exactly how it worked before the collapsing-
   stack fix, no !important needed on either side. */
.scs-phone-stack .scs-phone-stack-item:hover,
.scs-phone-stack .scs-phone-stack-item.is-touch-active {
    transform: translate( 0px, 0px ) scale( var( --scs-hover-scale ) );
    filter: brightness( 1 );
    /* Always above every stack item's base z-index (JS sets 1000 down to
       1000-i for however many phones exist, so 1000 is the highest any of
       them start at) - hardcoding 999 here was the bug: it happened to be
       LOWER than the front phone's own resting z-index of 1000, so hovering
       the front phone actually sent it behind the very next one instead of
       bringing it forward. */
    z-index: 1500 !important;
}

/* ---- Reversed variant: stack goes right-to-left instead of left-to-right ---- */
.scs-phone-stack.scs-reversed {
    justify-content: flex-end;
}

.scs-phone-stack.scs-reversed .scs-phone-stack-item {
    left: auto;
    right: 0;
    transform-origin: right bottom;
    transform: translate( var( --scs-x-negative, 0px ), var( --scs-y, 0px ) ) scale( var( --scs-stack-scale, 1 ) );
}

.scs-phone-stack.scs-reversed .scs-phone-stack-item:hover,
.scs-phone-stack.scs-reversed .scs-phone-stack-item.is-touch-active {
    transform: translate( 0px, 0px ) scale( var( --scs-hover-scale ) );
}

@media (max-width: 600px) {
    .scs-phone-stack {
        --scs-card-width: 160px;
        --scs-card-height: 320px;
        --scs-step-x: 70px;
        padding: 40px 20px;
    }
}