/* 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%;
    right: auto;
    bottom: auto;
    object-fit: cover;
    object-position: center center;
    image-rendering: auto;
    /* backface-visibility:hidden was permanently promoting this image to its
       own GPU layer, whose raster resolution stayed frozen at the animation's
       starting scale -> permanent blur. Left as visible so the browser
       re-rasterizes it sharply after the entrance. Layout is unchanged. */
    backface-visibility: visible;
}

/* ---- 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 1.3s cubic-bezier(0.22, 1, 0.36, 1), transform 1.3s cubic-bezier(0.22, 1, 0.36, 1);
}

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

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

/* ---- Entrance animation: pure CSS, plays automatically on mount - does
   NOT depend on the shared scs-anim-pending/scs-in-view/scs-scroll-reveal.js
   system (unlike every other widget here). This widget's cards were getting
   stuck invisible in the Elementor editor because that shared script can
   throw before it reaches this widget's element, so it never adds
   .scs-in-view - leaving .scs-anim-pending's opacity:0 stuck forever. A
   self-playing keyframe animation has no such failure mode.
   Style (fade/slide/zoom/bounce) + Direction (up/down/left/right/none) +
   Duration are all picked per-card in the panel and passed in as inline
   custom properties / animation-duration / animation-timing-function -
   this one keyframe covers every combination. */
.scs-fc-card {
    opacity: 0;
    animation-name: scs-fc-in;
    animation-fill-mode: both;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier( 0.22, 1, 0.36, 1 );
    animation-play-state: paused;
}

.scs-fc-card.scs-in-view {
    animation-play-state: running;
}

@keyframes scs-fc-in {
    from {
        opacity: 0;
        transform: translate( -50%, -50% ) rotate( var( --scs-fc-rot, 0deg ) ) translate( var( --scs-fc-ox, 0px ), var( --scs-fc-oy, 0px ) ) scale( var( --scs-fc-oscale, 1 ) );
    }
    to {
        opacity: 1;
        transform: translate( -50%, -50% ) rotate( var( --scs-fc-rot, 0deg ) );
    }
}