/* Shahmeer Custom Sections - Floating Cards Showcase */

.scs-floating-cards {
    display: flex;
    justify-content: center;
    padding: 80px 20px;
}

/* The stage's box IS the phone frame's box - floating cards position
   themselves in % relative to this, so cards + frame always scale together
   as one unit when the responsive Frame Width/Height controls kick in. */
.scs-fc-stage {
    position: relative;
    width: var( --scs-fc-frame-w, 260px );
    height: var( --scs-fc-frame-h, 540px );
    max-width: 100%;
}

/* ---- Built-in phone frame (same visual language as the rest of the
   plugin's phone widgets: dark bezel, notch, white screen) ---- */
.scs-fc-phone-frame {
    position: absolute;
    inset: 0;
    background: #111;
    border-radius: 42px;
    box-shadow: 0 0 0 4px #2b2b2b, 0 25px 50px rgba( 0, 0, 0, 0.45 );
    padding: 14px;
    box-sizing: border-box;
    z-index: 1;
}

.scs-fc-phone-notch {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX( -50% );
    width: 45%;
    height: 22px;
    background: #111;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
    z-index: 2;
}

.scs-fc-phone-screen {
    position: relative;
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 28px;
    overflow: hidden;
}

.scs-fc-phone-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* ---- Floating cards ----
   Position/size are set per-card via inline custom properties (--scs-fc-top /
   --scs-fc-left / --scs-fc-w / --scs-fc-rot) rather than a plain inline
   "transform"/"top"/"left" - that's deliberate: it lets the entrance-animation
   classes below add their own extra transform on top without ever fighting
   inline-style specificity (the same pattern used across this plugin).
   z-index is set inline per-card (default 5) so cards sit above the frame
   (z-index 1) and notch (z-index 2) without any extra setup needed. */
.scs-fc-card {
    position: absolute;
    top: var( --scs-fc-top, 50% );
    left: var( --scs-fc-left, 50% );
    width: var( --scs-fc-w, 45% );
    transform: translate( -50%, -50% ) rotate( var( --scs-fc-rot, 0deg ) );
    transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1), transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.scs-fc-card a {
    display: block;
}

.scs-fc-card img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 15px 35px rgba( 0, 0, 0, 0.25 );
}

/* ---- Entrance 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 shared scs-scroll-reveal.js
   system already used for every widget, so there's no separate observer
   here that could get stuck. Each direction adds its own extra transform
   on top of the card's own position/rotation (never replaces it). ---- */
.scs-anim-pending:not(.scs-in-view) .scs-fc-card {
    opacity: 0;
}

.scs-anim-pending:not(.scs-in-view) .scs-fc-anim-up {
    transform: translate( -50%, -50% ) rotate( var( --scs-fc-rot, 0deg ) ) translateY( 50px );
}

.scs-anim-pending:not(.scs-in-view) .scs-fc-anim-down {
    transform: translate( -50%, -50% ) rotate( var( --scs-fc-rot, 0deg ) ) translateY( -50px );
}

.scs-anim-pending:not(.scs-in-view) .scs-fc-anim-left {
    transform: translate( -50%, -50% ) rotate( var( --scs-fc-rot, 0deg ) ) translateX( 50px );
}

.scs-anim-pending:not(.scs-in-view) .scs-fc-anim-right {
    transform: translate( -50%, -50% ) rotate( var( --scs-fc-rot, 0deg ) ) translateX( -50px );
}

.scs-anim-pending:not(.scs-in-view) .scs-fc-anim-zoom {
    transform: translate( -50%, -50% ) rotate( var( --scs-fc-rot, 0deg ) ) scale( 0.6 );
}

.scs-anim-pending:not(.scs-in-view) .scs-fc-anim-fade {
    transform: translate( -50%, -50% ) rotate( var( --scs-fc-rot, 0deg ) );
}