.stack-section {
    position: relative;
    background: #000;
}

.stack-wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh; /* 🔥 PRO TIP: Better for mobile address bars */
    overflow: hidden;
}

.panel {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: translateY(100px) scale(0.95);
    filter: blur(5px);
    transition: 
        transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 1.1s ease,
        filter 1.1s ease;
}

/* Overlay ensures text is always readable */
.panel-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.content {
    position: relative;
    z-index: 2; /* Sits above the overlay */
    text-align: center;
    color: #fff;
    padding: 0 10%;
    max-width: 1000px;
}

.content h2 {
    /* 🔥 PRO TIP: Clamp makes fonts responsive without media queries */
    font-size: clamp(2.5rem, 8vw, 5rem);
    margin-bottom: 20px;
    font-weight: 800;
    line-height: 1.1;
}

.info-text {
    font-size: clamp(1rem, 2vw, 1.5rem);
    opacity: 0.9;
}

/* Active State */
.panel.active {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    z-index: 5;
}

/* Previous State (Stacked underneath) */
.panel.prev {
    opacity: 0.6;
    transform: translateY(-100px) scale(0.9);
    filter: blur(2px);
    z-index: 4;
}