/* =========================================================
   Sifency Modal — Base Layout
   ========================================================= */
.sifency-modal-overlay-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    display: none;           /* JS controls display */
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .35s ease;
}

.sifency-modal-overlay-wrapper.is-open {
    opacity: 1;
}

.sifency-modal-overlay-wrapper.is-closing {
    opacity: 0;
}

.sifency-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .72);
    cursor: pointer;
}

.sifency-modal-container {
    position: relative;
    z-index: 10;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
    display: flex;
    flex-direction: column;
    background: var(--sifency-addons-whitecolor, #fff);
}

.sifency-modal-body {
    overflow-y: auto;
    width: 100%;
    box-sizing: border-box;
}

body.sifency-noscroll {
    overflow: hidden !important;
}

.sifency-modal-trigger-btn {
    cursor: pointer;
}

html {
    scrollbar-gutter: stable;
}

/* =========================================================
   1. FADE — overlay opacity only, container stays put
   ========================================================= */
/* No container rule needed; the wrapper opacity handles it */

/* =========================================================
   2. ZOOM IN / OUT
   ========================================================= */
.sifency-anim-zoom .sifency-modal-container {
    transform: scale(.7);
    opacity: 0;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1),
                opacity   .35s cubic-bezier(.4, 0, .2, 1);
}

.sifency-anim-zoom.is-open .sifency-modal-container {
    transform: scale(1);
    opacity: 1;
}

.sifency-anim-zoom.is-closing .sifency-modal-container {
    transform: scale(.7);
    opacity: 0;
}

/* =========================================================
   3. SLIDE UP (enter from below)
   ========================================================= */
.sifency-anim-slide_up .sifency-modal-container {
    transform: translateY(70px);
    opacity: 0;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1),
                opacity   .35s cubic-bezier(.4, 0, .2, 1);
}

.sifency-anim-slide_up.is-open .sifency-modal-container {
    transform: translateY(0);
    opacity: 1;
}

.sifency-anim-slide_up.is-closing .sifency-modal-container {
    transform: translateY(70px);
    opacity: 0;
}

/* =========================================================
   4. SLIDE DOWN (enter from above)
   ========================================================= */
.sifency-anim-slide_down .sifency-modal-container {
    transform: translateY(-70px);
    opacity: 0;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1),
                opacity   .35s cubic-bezier(.4, 0, .2, 1);
}

.sifency-anim-slide_down.is-open .sifency-modal-container {
    transform: translateY(0);
    opacity: 1;
}

.sifency-anim-slide_down.is-closing .sifency-modal-container {
    transform: translateY(-70px);
    opacity: 0;
}

/* =========================================================
   5. SLIDE FROM RIGHT
   ========================================================= */
.sifency-anim-slide_left .sifency-modal-container {
    transform: translateX(110px);
    opacity: 0;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1),
                opacity   .35s cubic-bezier(.4, 0, .2, 1);
}

.sifency-anim-slide_left.is-open .sifency-modal-container {
    transform: translateX(0);
    opacity: 1;
}

.sifency-anim-slide_left.is-closing .sifency-modal-container {
    transform: translateX(110px);
    opacity: 0;
}

/* =========================================================
   6. SLIDE FROM LEFT
   ========================================================= */
.sifency-anim-slide_right .sifency-modal-container {
    transform: translateX(-110px);
    opacity: 0;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1),
                opacity   .35s cubic-bezier(.4, 0, .2, 1);
}

.sifency-anim-slide_right.is-open .sifency-modal-container {
    transform: translateX(0);
    opacity: 1;
}

.sifency-anim-slide_right.is-closing .sifency-modal-container {
    transform: translateX(-110px);
    opacity: 0;
}

/* =========================================================
   7. FLIP X — 3D rotate around horizontal axis
   ========================================================= */
.sifency-anim-flip_x {
    perspective: 1400px;
}

.sifency-anim-flip_x .sifency-modal-container {
    transform: rotateX(-85deg) scale(.9);
    opacity: 0;
    transform-origin: top center;
    transition: transform .42s cubic-bezier(.34, 1.56, .64, 1),
                opacity   .3s  ease;
}

.sifency-anim-flip_x.is-open .sifency-modal-container {
    transform: rotateX(0deg) scale(1);
    opacity: 1;
}

.sifency-anim-flip_x.is-closing .sifency-modal-container {
    transform: rotateX(-85deg) scale(.9);
    opacity: 0;
}

/* =========================================================
   8. FLIP Y — 3D rotate around vertical axis
   ========================================================= */
.sifency-anim-flip_y {
    perspective: 1400px;
}

.sifency-anim-flip_y .sifency-modal-container {
    transform: rotateY(-85deg) scale(.9);
    opacity: 0;
    transform-origin: left center;
    transition: transform .42s cubic-bezier(.34, 1.56, .64, 1),
                opacity   .3s  ease;
}

.sifency-anim-flip_y.is-open .sifency-modal-container {
    transform: rotateY(0deg) scale(1);
    opacity: 1;
}

.sifency-anim-flip_y.is-closing .sifency-modal-container {
    transform: rotateY(-85deg) scale(.9);
    opacity: 0;
}

/* =========================================================
   9. BOUNCE / ELASTIC
   ========================================================= */
@keyframes sifency-bounce-in {
    0%   { transform: scale(.25);  opacity: 0; }
    45%  { transform: scale(1.10); opacity: 1; }
    65%  { transform: scale(.95); }
    80%  { transform: scale(1.04); }
    92%  { transform: scale(.98); }
    100% { transform: scale(1);    opacity: 1; }
}

@keyframes sifency-bounce-out {
    0%   { transform: scale(1);    opacity: 1; }
    20%  { transform: scale(1.06); }
    55%  { transform: scale(.82);  opacity: .6; }
    100% { transform: scale(.25);  opacity: 0; }
}

.sifency-anim-bounce .sifency-modal-container {
    opacity: 0;
    transform: scale(.25);
    /* reset any leftover transition so keyframes take over */
    transition: none;
}

.sifency-anim-bounce.is-open .sifency-modal-container {
    animation: sifency-bounce-in .55s cubic-bezier(.34, 1.56, .64, 1) forwards;
}

.sifency-anim-bounce.is-closing .sifency-modal-container {
    animation: sifency-bounce-out .35s ease forwards;
}