/* ============================================
   Sticky Scroll Text and Media Style 1
   Pretpot Massive Addons Kit PRO
   ============================================ */

.pretpot-sticky-scroll-text-media-1 {
    position: relative;
    width: 100%;
}

/* ── Scroll Wrapper ──────────────────────────
   This block provides the total scroll distance.
   Its height is set inline from the widget setting.
   ──────────────────────────────────────────── */
.pretpot-sstm-scroll-wrapper {
    position: relative;
    width: 100%;
    /* height set inline: e.g. height: 300vh */
}

/* ── Sticky Stage ────────────────────────────
   Single sticky container that holds BOTH the
   text layer and all media cards together.
   ──────────────────────────────────────────── */
.pretpot-sstm-sticky-stage {
    position: sticky;
    /* top is set inline from widget_offset setting */
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* ── Text Layer ──────────────────────────────
   Sits inside the sticky stage, full size,
   centered via flex. Cards are positioned
   absolutely on top of this.
   ──────────────────────────────────────────── */
.pretpot-sstm-text-layer {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    pointer-events: none;
    z-index: 1;
}

.pretpot-sstm-text-layer > * {
    pointer-events: auto;
}

/* ── Text Elements ───────────────────────────*/
.pretpot-sstm-heading,
.pretpot-sstm-subheading,
.pretpot-sstm-body {
    margin: 0;
    position: relative;
    /* z-index set per-element from Elementor control */
}

.pretpot-sstm-heading {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 400;
    line-height: 1.1;
}

.pretpot-sstm-subheading {
    font-size: clamp(1rem, 2vw, 1.4rem);
    font-weight: 400;
    opacity: 0.8;
}

.pretpot-sstm-body {
    font-size: clamp(1.1rem, 2.5vw, 1.6rem);
    line-height: 1.6;
    font-style: italic;
}

/* Spacer between text items */
.pretpot-sstm-spacer {
    display: block;
    width: 100%;
    flex-shrink: 0;
}

/* ── Text Fill Animation ─────────────────────
   Elements with .pretpot-sstm-fill-target use a
   clip-path / background-clip technique so the
   fill sweeps left-to-right as the user scrolls.

   --fill-progress  : 0 → 1  (set by JS)
   --fill-from      : starting colour  (set inline)
   --fill-to        : ending colour    (set inline)
   ──────────────────────────────────────────── */
.pretpot-sstm-fill-target {
    --fill-progress: 0;
    position: relative;
    /* We layer two pseudo-elements: the base colour
       and the filled colour revealed by a clip */
    color: transparent !important;
}

/* Base (unfilled) colour via text-stroke trick –
   we paint it with a pseudo that sits behind */
.pretpot-sstm-fill-target::before {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    color: var(--fill-from, rgba(139,21,56,0.2));
    /* Match alignment from parent */
    display: flex;
    align-items: inherit;
    justify-content: inherit;
    pointer-events: none;
    white-space: pre-wrap;
    /* inherit every typography property */
    font: inherit;
    letter-spacing: inherit;
    text-align: inherit;
}

/* Actually, we use a simpler and more reliable
   approach: background-clip on the element itself
   using a two-stop linear-gradient controlled by
   --fill-progress. No pseudo needed. */
.pretpot-sstm-fill-target {
    background-image: linear-gradient(
        to right,
        var(--fill-to,   #8b1538) 0%,
        var(--fill-to,   #8b1538) calc(var(--fill-progress, 0) * 100%),
        var(--fill-from, rgba(139,21,56,0.2)) calc(var(--fill-progress, 0) * 100%),
        var(--fill-from, rgba(139,21,56,0.2)) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent !important; /* fallback */
}

/* Remove the pseudo entirely since we use bg-clip */
.pretpot-sstm-fill-target::before {
    content: none;
}

/* ── Media Cards ─────────────────────────────
   All cards are absolutely positioned inside
   .pretpot-sstm-sticky-stage. Their width, height,
   left, top are applied by JS per breakpoint.
   They start off-screen (translateY 100vh) and
   JS drives them to their final X/Y/tilt position.
   ──────────────────────────────────────────── */
.pretpot-sstm-media-card {
    position: absolute;
    overflow: hidden;
    opacity: 0;
    /* Initial off-screen state — JS overrides this */
    transform: translateY(100vh) rotate(var(--card-tilt, 0deg));
    will-change: transform, opacity;
    pointer-events: auto;
    box-sizing: border-box;
    /* z-index is set inline from widget control */
}

.pretpot-sstm-media-card img,
.pretpot-sstm-media-card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Video wrapper */
.pretpot-sstm-media-card .pretpot-sstm-video-wrap {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Play button overlay */
.pretpot-sstm-media-card .pretpot-sstm-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    transition: background 0.3s ease;
}

.pretpot-sstm-media-card .pretpot-sstm-play-btn:hover {
    background: rgba(0, 0, 0, 0.8);
}

.pretpot-sstm-media-card .pretpot-sstm-play-btn::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 18px solid #fff;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    margin-left: 4px;
}

.pretpot-sstm-media-card video {
    cursor: pointer;
}

/* ── Responsive ──────────────────────────────*/
@media (max-width: 1024px) {
    .pretpot-sstm-text-layer {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (max-width: 767px) {
    .pretpot-sstm-text-layer {
        padding-left: 15px;
        padding-right: 15px;
    }

    .pretpot-sstm-media-card .pretpot-sstm-play-btn {
        width: 48px;
        height: 48px;
    }

    .pretpot-sstm-media-card .pretpot-sstm-play-btn::after {
        border-left: 14px solid #fff;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
    }
}