/* BASIC SETUP - Scoped to the widget */
.wml-split-screen {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #000;
    font-family: 'Arial Black', 'Impact', sans-serif;
    overflow-x: hidden;
    position: relative;
    width: 100%;
}

.wml-split-screen * {
    box-sizing: border-box;
}

/* 1. SCROLL AREA
   GSAP handles height/pinning, so we just need this to be the container 
   that initially fills the viewport or just acts as the wrapper.
   We set it to 100vh so it takes full screen when pinned.
*/
.wml-ss-scroll-container {
    height: 100vh;
    width: 100%;
    position: relative;
    overflow: hidden;
    /* Hide overflow from moving panels */
}

/* 2. STICKY VIEWPORT 
   Just a full size wrapper now. GSAP pins the parent, so this stays relative to parent.
*/
.wml-ss-sticky-view {
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
}

/* 3. THE IMAGE (Hidden behind curtains initially) */
.wml-ss-center-image {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.wml-ss-center-image img {
    width: 600px;
    max-width: 90%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
}

/* Button that appears later */
.wml-ss-cta-btn {
    margin-top: 30px;
    padding: 15px 30px;
    background: #f00;
    color: white;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bold;
    letter-spacing: 1px;
    opacity: 0;
    transform: translateY(20px);
    position: relative;
    z-index: 20;
    /* Above panels */
    pointer-events: none;
    /* Disabled until visible */
}

/* When GSAP makes button visible, enable clicks */
.wml-ss-cta-btn[style*="opacity: 1"],
.wml-ss-cta-btn[style*="opacity:1"] {
    pointer-events: auto;
}

/* 4. THE SPLIT PANELS (The "Curtains") */
.wml-ss-panel {
    position: absolute;
    top: 0;
    width: 50%;
    /* Each takes half the screen */
    height: 100%;
    background: #000;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    will-change: transform;
}

/* LEFT PANEL CONFIGURATION */
.wml-ss-panel.wml-ss-left {
    left: 0;
    align-items: flex-end;
    border-right: 0px solid rgba(255, 255, 255, 0.05);
}

/* RIGHT PANEL CONFIGURATION */
.wml-ss-panel.wml-ss-right {
    right: 0;
    align-items: flex-start;
    border-left: 0px solid rgba(255, 255, 255, 0.05);
}

/* TEXT STYLING */
.wml-ss-text-block {
    font-size: 7vw;
    line-height: 1;
    color: #fff;
    text-transform: uppercase;
    white-space: nowrap;
}

.wml-ss-panel.wml-ss-left .wml-ss-text-block {
    text-align: right;
    padding-right: 10px;
}

.wml-ss-panel.wml-ss-right .wml-ss-text-block {
    text-align: left;
    padding-left: 10px;
}

/* Spacer area after the split */
.wml-ss-spacer {
    height: 50vh;
    background-color: #111;
}