/* ===================================================
   Card Swap — CSS-only 3D card stack animation
   Depth ordering is handled purely by the Z-axis of
   translate3d() within a preserve-3d context.
   No will-change or animated z-index needed.
   =================================================== */

/* --- Container --- */
.card-swap-container {
    position: relative;
    width: 500px;
    height: 350px;
    perspective: 1200px;
}

.card-swap-inner {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    position: relative;
}

/* --- Base card --- */
.swap-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 360px;
    height: 250px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    /* No will-change: transform — it creates a stacking context that
       breaks z-index relative to sibling cards */
    animation: cardCycle 20s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    animation-fill-mode: both; /* apply first/last keyframe before/after animation */
}

/* --- Card image fills card --- */
.swap-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/* --- Gradient overlay + label at bottom --- */
.swap-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
    display: flex;
    align-items: flex-end;
    padding: 1.25rem 1.5rem;
}

.swap-card-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.swap-card-label span {
    color: #FFB400;
    font-size: 1rem;
}

/* --- Stagger delays: each card offset by 25% of the 20s cycle = 5s ---
   Depth at t=0:
     card-0 → Slot 0 (FRONT, Z=0)
     card-1 → Slot 1  (Z=-75px)
     card-2 → Slot 2  (Z=-150px)
     card-3 → Slot 3  (BACK, Z=-225px)
   Visual depth order in preserve-3d is determined by translate3d Z values,
   not z-index. Static z-index only affects fallback / click targets.       --- */
.card-0 { z-index: 4; animation-delay: 0s; }
.card-1 { z-index: 3; animation-delay: -15s; }
.card-2 { z-index: 2; animation-delay: -10s; }
.card-3 { z-index: 1; animation-delay: -5s; }

/* ===================================================
   Keyframes: 20s cycle through 4 depth slots

   Slot offsets (cardDistance=50, verticalDistance=60):
     Slot 0 (front): translate3d(0,    0,     0)
     Slot 1:         translate3d(50px, -60px, -75px)
     Slot 2:         translate3d(100px,-120px,-150px)
     Slot 3 (back):  translate3d(150px,-180px,-225px)

   Z-axis values drive visual depth in preserve-3d.
   No animated z-index required.
   =================================================== */
@keyframes cardCycle {

    /* === SLOT 0: FRONT — hold (0–18%) === */
    0%, 18% {
        transform: translate(-50%, -50%) translate3d(0px, 0px, 0px) skewY(4deg);
    }

    /* === DROP: fall off screen downward (18–22%) === */
    22% {
        transform: translate(-50%, -50%) translate3d(0px, 520px, 0px) skewY(0deg);
    }

    /* === TELEPORT: snap to below-back position (22%) === */
    22.1% {
        transform: translate(-50%, -50%) translate3d(150px, 320px, -225px) skewY(4deg);
    }

    /* === SLOT 3: BACK — rise up and hold (25–45%) === */
    25%, 45% {
        transform: translate(-50%, -50%) translate3d(150px, -180px, -225px) skewY(4deg);
    }

    /* === SLOT 2 — transition and hold (50–70%) === */
    50%, 70% {
        transform: translate(-50%, -50%) translate3d(100px, -120px, -150px) skewY(4deg);
    }

    /* === SLOT 1 — transition and hold (75–95%) === */
    75%, 95% {
        transform: translate(-50%, -50%) translate3d(50px, -60px, -75px) skewY(4deg);
    }

    /* === Return to SLOT 0 / FRONT (100%) === */
    100% {
        transform: translate(-50%, -50%) translate3d(0px, 0px, 0px) skewY(4deg);
    }
}

/* ===================================================
   Responsive wrapper
   =================================================== */
.card-swap-wrapper {
    position: relative;
    z-index: 0; /* sits below the text column (z-index: 5) so buttons are always on top */
    display: flex;
    justify-content: center;
    align-items: center;
    isolation: isolate; /* cards' internal z-index is scoped — can't bleed into text column */
    /* Top padding: back cards shift up 180px, so we need space above */
    padding-top: 3rem;
    padding-bottom: 1rem;
}

/* --- Tablet 2-column (768–1023px) ---
   Both columns side-by-side, slightly smaller cards */
@media (max-width: 1023px) {
    .card-swap-container {
        width: 360px;
        height: 270px;
    }
    .swap-card {
        width: 280px;
        height: 195px;
    }
}

/* --- Mobile single-column (< 768px) ---
   Cards stack below text; constrain wrapper height so
   the section doesn't become excessively tall */
@media (max-width: 767px) {
    .card-swap-wrapper {
        padding-top: 2rem;
        /* Explicit height collapses the wrapper in the single-col flow.
           Cards overflow visually above/below but don't push layout. */
        height: 260px;
    }
    .card-swap-container {
        width: 330px;
        height: 250px;
    }
    .swap-card {
        width: 265px;
        height: 185px;
    }
}

/* --- Small mobile (< 480px) --- */
@media (max-width: 479px) {
    .card-swap-wrapper {
        padding-top: 1.5rem;
        height: 220px;
    }
    .card-swap-container {
        width: 280px;
        height: 210px;
    }
    .swap-card {
        width: 225px;
        height: 158px;
    }
}