/* ============================================
   SCROLL STACK
============================================ */

.stack-wrapper {
    position: relative;
    background: #050505;
    perspective: 1800px;
    transform-style: preserve-3d;
    --stack-air-desktop: clamp(160px, 14vh, 240px);
}

.stack-card {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    transform-style: preserve-3d;
    background: transparent !important;
}

.stack-transition-overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease;
}

.stack-transition-overlay.is-active {
    opacity: 1;
}

.stack-transition-overlay__canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.stack-wrapper > .stack-card:not(:last-child) {
    height: calc(100vh + var(--stack-air-desktop));
}

.stack-card__surface {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    will-change: transform;
    transform-origin: top center;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

.stack-card:first-child {
    border-radius: 0;
    box-shadow: none;
}

.project-block.stack-card {
    height: 100vh;
    overflow: hidden;
}

.stack-wrapper > .stack-card:nth-child(1) { z-index: 1; }
.stack-wrapper > .stack-card:nth-child(2) { z-index: 2; }
.stack-wrapper > .stack-card:nth-child(3) { z-index: 3; }
.stack-wrapper > .stack-card:nth-child(4) { z-index: 4; }
.stack-wrapper > .stack-card:nth-child(5) { z-index: 5; }
.stack-wrapper > .stack-card:nth-child(6) { z-index: 6; }
.stack-wrapper > .stack-card:nth-child(7) { z-index: 7; }

@media (max-width: 768px) {
    .stack-wrapper {
        background: #0a0a0a;
        perspective: none;
        transform-style: flat;
        --stack-air-desktop: 24vh;
    }

    .stack-card {
        position: sticky;
        top: 0;
        height: 100vh;
        min-height: 100vh;
        overflow: hidden;
        pointer-events: none;
        transform-style: flat;
        backface-visibility: visible;
    }

    .stack-card:first-child,
    .stack-card.is-stack-interactive {
        pointer-events: auto;
    }

    .stack-wrapper > .stack-card:not(:last-child) {
        height: calc(100vh + var(--stack-air-desktop));
        min-height: calc(100vh + var(--stack-air-desktop));
    }

    .stack-card__surface {
        height: 100vh;
        min-height: 100vh;
        overflow: hidden;
        will-change: auto;
        transform: none !important;
        transform-style: flat;
        backface-visibility: visible;
        clip-path: none !important;
        border-radius: 0 !important;
        opacity: 1 !important;
        filter: none !important;
    }

    .project-block.stack-card {
        height: calc(100vh + var(--stack-air-desktop));
        min-height: calc(100vh + var(--stack-air-desktop));
        overflow: hidden;
    }

    .stack-transition-overlay {
        z-index: 70;
    }
}