/* ============================================
   DOOR REVEAL — Reusable scroll-driven component
   Three cards: center revealed as left/right doors slide away on scroll.
   Usage: <div class="door-reveal"> with .door-reveal__center, .door-reveal__door--left, .door-reveal__door--right
   ============================================ */

.door-reveal {
    position: relative;
    z-index: 2;
    padding-top: 0;
    padding-bottom: 8rem;
}

.door-reveal .container {
    max-width: 1440px;
    padding: 0 clamp(1.5rem, 4vw, 4rem);
}

/* Header — label + heading */
.door-reveal__header {
    padding-top: 0;
    padding-bottom: 0;
}

.door-reveal__label-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.door-reveal__label {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.door-reveal__label-line {
    flex: 1;
    height: 1px;
    background: var(--color-gray-200);
}

.door-reveal__heading {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tighter);
    color: var(--color-text-primary);
    max-width: 24ch;
}

/* Stage — holds all three cards, full viewport width */
.door-reveal__stage {
    position: sticky;
    top: 10vh;
    height: clamp(400px, 60vw, 700px);
    overflow: hidden;
    border-radius: 0;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

/* Center image — the main revealed card */
.door-reveal__center {
    position: relative;
    height: 100%;
    border: 14px solid var(--color-white);
    border-radius: 2rem;
    overflow: hidden;
    z-index: 1;
    box-sizing: border-box;
}

.door-reveal__center img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Side cards — independent image cards that overlap from left/right */
.door-reveal__door {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    z-index: 2;
    overflow: hidden;
    will-change: transform;
    border: 14px solid var(--color-white);
    border-radius: 1.25rem;
}

.door-reveal__door--left {
    left: 0;
}

.door-reveal__door--right {
    right: 0;
}

.door-reveal__door img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Responsive */
@media (max-width: 768px) {
    .door-reveal__stage {
        height: clamp(200px, 50vw, 300px);
    }

    .door-reveal__door {
        width: 25%;
    }
}