/* Enable Global Scroll Snap for Magnetic Effect */


/* Sticky Scroll Section */
.sticky-features-section {
    background-color: #000;
    padding: 128px 0;
    position: relative;
}

.sticky-container {
    display: flex;
    justify-content: space-between;
    gap: 64px;
    align-items: flex-start;
    width: 100%;
    /* fallback */
    padding-right: 0;
}

/* Calculate left padding to align with standard container */
@media (min-width: 1280px) {
    .sticky-container {
        padding-left: calc((100vw - 1280px) / 2 + 32px);
    }
}

/* Left Column: STICKY TEXT */
.sticky-content-col {
    flex: 0 0 480px;
    /* Fixed width for text col */
    max-width: 480px;
    position: sticky;
    top: 0;
    /* Stick to top */
    height: 100vh;
    /* Full viewport height */
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Vertical Center */
}

.sticky-content-col .section-header-standard {
    margin-bottom: 64px;
}

.sticky-items-list {
    display: flex;
    flex-direction: column;
    position: relative;
}

/* List Items */
.sticky-item {
    padding: 32px 0;
    padding-left: 32px;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.4;
    position: relative;
}

/* Progress Line Track (Background) */
.sticky-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: rgba(255, 255, 255, 0.1);
}

/* Progress Line Fill (Active) */
.sticky-item::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 0;
    background-color: #fff;
    transition: height 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.sticky-item.active {
    opacity: 1;
}

.sticky-item.active::after {
    height: 100%;
}

.sticky-item-header h3 {
    margin: 0;
    transition: color 0.3s ease;
}

.sticky-item-body {
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateY(10px);
}

.sticky-item.active .sticky-item-body {
    height: auto;
    opacity: 1;
    margin-top: 16px;
    transform: translateY(0);
}

/* Link Arrow */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    text-decoration: none;
}

.link-arrow .arrow {
    transition: transform 0.2s ease;
}

.link-arrow:hover .arrow {
    transform: translateX(4px);
}


/* Right Column: SCROLLING IMAGES */
.sticky-visual-col {
    flex: 1;
    /* Take remaining space */
    display: flex;
    flex-direction: column;
    /* No gap, let 100vh define spacing */
    padding-top: 0;
    min-width: 0;
    /* Prevent flex overflow */
}

.sticky-viewport {
    width: 100%;
    /* No fixed height, let content flow */
    display: flex;
    flex-direction: column;
}

/* Clean cards, relative positioning */
.sticky-visual-card {
    position: relative;
    width: 100%;
    height: 100vh;
    /* Force full viewport height */
    display: flex;
    align-items: center;
    /* Center Vertically */
    justify-content: center;
    /* Center Horizontally */
    opacity: 0.2;
    /* Dimmed by default */
    transition: opacity 0.5s ease;
}



.sticky-visual-card img {
    width: 100%;
    height: auto;
    object-fit: cover;
    /* Cover to fill space if needed, or contain? Screenshot looks like it fills well. Let's use cover for consistency with 'touch' */
    border-radius: 24px 0 0 24px;
    /* Rounded Left, Flat Right */
}

.sticky-visual-card.active {
    opacity: 1;
    /* Fully visible when active */
}

/* Mobile Image Hidden on Desktop */
.mobile-visual {
    display: none;
    margin: 24px 0;
    border-radius: 16px;
    overflow: hidden;
}

.mobile-visual img {
    width: 100%;
    height: auto;
    display: block;
}

/* Mobile Responsive */
@media (max-width: 1024px) {
    .sticky-container {
        flex-direction: column;
        gap: 48px;
    }

    .sticky-visual-col {
        display: none;
    }

    .sticky-content-col {
        max-width: 100%;
        padding-bottom: 0;
        position: static;
        /* Disable sticky */
        height: auto;
        /* Disable fixed height */
    }

    .mobile-visual {
        display: block;
    }

    .sticky-item-body {
        height: auto;
        opacity: 1;
        margin-top: 16px;
        transform: none;
    }

    .sticky-item {
        opacity: 1;
        padding-left: 32px;
        padding-right: 32px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .sticky-item::before,
    .sticky-item::after {
        display: none;
    }
}