/* Shahmeer Custom Sections - shared scroll entrance animation for every widget.
   Elements fade + rise into place the first time they scroll into view. */

/* Default state: fully visible. Nothing here hides content by default -
   if JS never runs (blocked, errors, editor iframe, etc.) the widget is
   still shown, just without the entrance animation. */
.scs-phone-showcase,
.scs-dual-phone-slider,
.scs-triple-phone-slider,
.scs-stacked-cards,
.scs-phone-stack,
.scs-responsive-devices-slider,
.scs-desktop-monitor-slider {
    opacity: 1;
    transform: none;
}

/* Only elements JS has explicitly armed for animation start hidden.
   This class is added by scs-scroll-reveal.js right before it starts
   observing, so the hidden state only ever exists when JS is confirmed
   running and about to reveal the element. */
.scs-anim-pending {
    opacity: 0;
    transform: translateY(45px);
    transition: opacity 1.8s cubic-bezier(0.22, 1, 0.36, 1), transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.scs-anim-pending.scs-in-view {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Per-element entrance animation (Style/Direction/Duration/Delay) ----
   Shared by every widget in the plugin: each animated element (icon-box,
   phone, card, slide, etc.) gets class="scs-entrance" plus inline custom
   properties (--scs-e-ox / --scs-e-oy / --scs-e-oscale) and
   animation-duration/delay/timing-function, all computed per-item from that
   item's Entrance Style (Fade/Slide/Zoom/Bounce) + Direction (Up/Down/Left/
   Right/None) + Duration + Delay controls in the panel. Pure CSS, plays on
   mount automatically - never depends on scs-scroll-reveal.js, so it can
   never get stuck invisible if that shared script errors. */
.scs-entrance {
    opacity: 0;
    animation-name: scs-entrance-in;
    animation-fill-mode: both;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier( 0.22, 1, 0.36, 1 );
    animation-play-state: paused;
}

/* Frontend animations are triggered when the widget enters the viewport.
   This prevents the animation from finishing while the widget is still below
   the fold. Elementor preview is explicitly armed by the JS below. */
.scs-entrance.scs-in-view {
    animation-play-state: running;
}

@keyframes scs-entrance-in {
    from {
        opacity: 0;
        transform: translate( var( --scs-e-ox, 0px ), var( --scs-e-oy, 0px ) ) scale( var( --scs-e-oscale, 1 ) );
    }
    to {
        opacity: 1;
        transform: none;
    }
}