/**
 * Stacking Features Widget
 * Matches the provided demo code EXACTLY.
 */

:root { 
    --primary-teal: #1db792; 
    --primary-teal-light: #e8f9f5; 
    --primary-teal-dark: #128266; 
    --text-dark: #0f172a; 
    --text-gray: #475569; 
} 

/* --- General Layout & Styling for Demo --- */ 
.sp-stacking-features-section { 
    background-color: #f4f5f6; 
    color: var(--text-dark); 
    font-family: var(--primaryFont); 
} 
 
.sp-stacking-features-section .spacer { 
    height: 10vh; /* Reduced for better preview */ 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    opacity: 0.5; 
} 

/* --- Sidebar Styles --- */ 
.sp-stacking-features-section .sticky-lg-top { 
    top: 2rem; /* Offset for the sticky left column */ 
} 
.sp-stacking-features-section .feature-caption { 
    color: var(--primary-teal); 
    font-weight: 600; 
    text-transform: uppercase; 
    font-size: 0.875rem; 
    letter-spacing: 1px; 
    display: block; 
    margin-bottom: 0.75rem; 
} 
.sp-stacking-features-section .feature-heading { 
    font-size: 2.75rem; 
    font-weight: 700; 
    line-height: 1.2; 
    margin-bottom: 1.5rem; 
    letter-spacing: -0.02em; 
} 
.sp-stacking-features-section .feature-description { 
    font-size: 1.125rem; 
    color: var(--text-gray); 
    margin-bottom: 2.5rem; 
    line-height: 1.6; 
} 
.sp-stacking-features-section .btn-feature { 
    display: inline-block; 
    padding: 0.75rem 1.75rem; 
    background-color: var(--primary-teal); 
    color: #fff; 
    border-radius: 0.5rem; 
    text-decoration: none; 
    font-weight: 600; 
    font-size: 1rem; 
    transition: background-color 0.2s ease; 
} 
.sp-stacking-features-section .btn-feature:hover { 
    background-color: var(--primary-teal-dark); 
    color: #fff; 
} 

/* --- STACKING CARDS LOGIC --- */ 
 
/* 1. The Container sets the timeline for the scroll tracking */ 
.sp-stacking-features-section .js-stack-trigger { 
    --card-top-offset: 35px; /* Distance between stacked cards */ 
    padding-bottom: calc(var(--numcards) * var(--card-top-offset)); 
    view-timeline-name: --feature-cards-timeline; 
} 

/* 2. The Wrapper makes the card sticky as you scroll past it */ 
.sp-stacking-features-section .js-stack-card { 
    position: sticky; 
    top: 2rem; /* Distance from top of screen when it sticks */ 
    padding-top: calc(var(--index) * var(--card-top-offset)); 
    margin-bottom: 2rem; /* Add breathing room to scroll */ 
     
    /* Calculate reverse index for the scale animation */ 
    --index0: calc(var(--index) - 1); 
    --reverse-index: calc(var(--numcards) - var(--index0)); 
} 

/* 3. The Inner Card holds the styling and the scaling animation */ 
.sp-stacking-features-section .feature-card-inner { 
    background: #ffffff; 
    border: 1px solid rgba(0,0,0,0.03); 
    border-radius: 1rem; 
    padding: 2.5rem 3rem; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.04), 0 2px 10px rgba(0,0,0,0.02); 
     
    /* Required for smooth scaling from the top center */ 
    transform-origin: 50% 0%; 
    will-change: transform; 

    /* Bind animation to the wrapper's scroll timeline */ 
    --start-range: calc(var(--index0) / var(--numcards) * 100%); 
    --end-range: calc(var(--index) / var(--numcards) * 100%); 
    animation: linear cardScale forwards; 
    animation-timeline: --feature-cards-timeline; 
    animation-range: exit-crossing var(--start-range) exit-crossing var(--end-range); 
} 

/* Scale down the cards slightly based on their reverse index */ 
@keyframes cardScale { 
    to { 
        transform: scale(calc(1 - calc(0.04 * var(--reverse-index)))); 
    } 
} 

/* Prevent animation on unsupported browsers, fallback gracefully */ 
@supports not (animation-timeline: view()) { 
    .sp-stacking-features-section .feature-card-inner { 
        animation: none; 
    } 
} 

/* --- Card Internal Styling --- */ 
.sp-stacking-features-section .feature-card-header { 
    display: flex; 
    align-items: center; 
    gap: 1.25rem; 
    margin-bottom: 1.5rem; 
} 
.sp-stacking-features-section .icon-box { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    width: 48px; 
    height: 48px; 
    background-color: var(--primary-teal-light); 
    color: var(--primary-teal-dark); 
    border-radius: 12px; 
    flex-shrink: 0; 
} 
.sp-stacking-features-section .feature-card-title { 
    font-size: 1.25rem; 
    font-weight: 700; 
    margin-bottom: 0; 
    color: var(--text-dark); 
} 
.sp-stacking-features-section .feature-list { 
    list-style-type: disc; 
    padding-left: 1.25rem; 
    margin-bottom: 0; 
    color: var(--text-gray); 
} 
.sp-stacking-features-section .feature-list li { 
    margin-bottom: 0.65rem; 
    font-size: 1rem; 
    line-height: 1.5; 
} 
.sp-stacking-features-section .feature-list li:last-child { 
    margin-bottom: 0; 
}