/* ============================================
   Pretpot Scroll Expand Sticky Card
   ============================================ */

/* ---- Wrapper ---- */
.pretpot-sesc-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* Style 1 wrapper: card lives in normal flow, expands as it scrolls */
.pretpot-sesc-wrapper.pretpot-sesc-style-style_1 {
    padding: 0 20px;
}

/* Style 2 wrapper must never clip its sticky child */
.pretpot-sesc-wrapper.pretpot-sesc-style-style_2 {
    overflow: visible !important;
    padding: 0;
}

/* ---- Sticky viewport panel (Style 2 only — injected by JS) ---- */
.pretpot-sesc-sticky-wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    pointer-events: none;
}

.pretpot-sesc-sticky-wrapper .pretpot-sesc-container {
    pointer-events: auto;
}

/* ---- Card container ---- */
.pretpot-sesc-container {
    position: relative;
    background: #1a1a1a;
    overflow: hidden;
    border-style: solid;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.05),
                0 20px 60px rgba(0,0,0,0.5);
    will-change: width, height, border-radius, transform, opacity;
    transform-origin: center center;
    /* width & height driven entirely by JS */
}

/* ---- Heading Area ---- */
.pretpot-sesc-heading-area {
    position: relative;
    z-index: 2;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.pretpot-sesc-heading-text {
    display: block;
    margin: 0;
    font-weight: 600;
    line-height: 1.3;
    will-change: font-size;
}

/* ---- Media Area ---- */
.pretpot-sesc-media-area {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.pretpot-sesc-media-inner {
    position: relative;
    width: 100%;
    /* height is set as a px value by JS */
}

.pretpot-sesc-media-image,
.pretpot-sesc-media-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    /* object-fit and object-position driven by JS from widget settings */
}

.pretpot-sesc-media-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* ---- Body Area ---- */
.pretpot-sesc-body-area {
    position: relative;
    z-index: 2;
}

.pretpot-sesc-body-text {
    font-size: 14px;
    line-height: 1.6;
}

/* ---- Character Animation ---- */
.pretpot-sesc-body-text .pretpot-sesc-char {
    display: inline-block;
    opacity: 0;
    will-change: opacity, transform;
}

.pretpot-sesc-body-text.pretpot-sesc-animated .pretpot-sesc-char {
    opacity: 1;
}

/* Initial transform per direction */
.pretpot-sesc-body-text[data-animation="swipe_up"]    .pretpot-sesc-char { transform: translateY(30px); }
.pretpot-sesc-body-text[data-animation="swipe_down"]  .pretpot-sesc-char { transform: translateY(-30px); }
.pretpot-sesc-body-text[data-animation="swipe_left"]  .pretpot-sesc-char { transform: translateX(30px); }
.pretpot-sesc-body-text[data-animation="swipe_right"] .pretpot-sesc-char { transform: translateX(-30px); }
.pretpot-sesc-body-text[data-animation="fade"]        .pretpot-sesc-char { transform: none; }

/* Animated transform reset */
.pretpot-sesc-body-text.pretpot-sesc-animated[data-animation="swipe_up"]    .pretpot-sesc-char,
.pretpot-sesc-body-text.pretpot-sesc-animated[data-animation="swipe_down"]  .pretpot-sesc-char { transform: translateY(0); }
.pretpot-sesc-body-text.pretpot-sesc-animated[data-animation="swipe_left"]  .pretpot-sesc-char,
.pretpot-sesc-body-text.pretpot-sesc-animated[data-animation="swipe_right"] .pretpot-sesc-char { transform: translateX(0); }

/* ---- Responsive ---- */
@media (max-width: 767px) {
    .pretpot-sesc-wrapper.pretpot-sesc-style-style_1 {
        padding: 0 15px;
    }
}