/* ─────────────────────────────────────────────────────────
   Bulli CTA Stack v1.0
   Animation 1: Card-Stack mit Recycle-Loop
   Re-uses .bulli-cta-card aus bulli-cta-fan.css (dependency).
   ───────────────────────────────────────────────────────── */

.bulli-cta-anim--stack {
    overflow: visible;
}

/* ── Showcase (links, Hintergrund-Element) ─────────────── */
.bulli-cta-stack__showcase {
    position: absolute;
    top: 50%;
    left: 8%;
    transform: translateY(-50%);
    width: 38%;
    aspect-ratio: 1 / 1;
    z-index: 0;
    pointer-events: none;
}
.bulli-cta-stack__showcase .bulli-showcase {
    width: 100% !important;
    height: 100% !important;
}

/* ── Stack-Cards-Wrapper (rechts) ──────────────────────── */
.bulli-cta-stack__cards {
    position: absolute;
    top: 50%;
    right: 0;
    width: 50%;
    height: 100%;
    transform: translateY(-50%);
    z-index: 2;
}

/* ── Slot-Wrapper ─────────────────────────────────────── */
/* Innerhalb des rechten Cards-Wrappers zentriert. Back-Cards scalieren
   kleiner + translaten UP → "in die Tiefe" wirken. */
.bulli-cta-stack-slot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: 50% 50%;
    transition:
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Card-Override: kompakter, damit die Showcase links Platz hat */
.bulli-cta-stack-slot .bulli-cta-card {
    width: 360px;
    min-height: 110px;
    padding: 16px 22px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

/* ── Stack-Positionen (5 sichtbar) ────────────────────── */
.bulli-cta-stack-slot[data-stack-pos="0"] {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    z-index: 5;
}
.bulli-cta-stack-slot[data-stack-pos="0"] .bulli-cta-card {
    border-color: var(--e-global-color-text);
    box-shadow: 0 0 0 1px var(--e-global-color-text), 0 8px 28px rgba(0, 0, 0, 0.28);
}
.bulli-cta-stack-slot[data-stack-pos="1"] {
    transform: translate(-50%, calc(-50% - 38px)) scale(0.94);
    opacity: 0.45;
    z-index: 4;
}
.bulli-cta-stack-slot[data-stack-pos="2"] {
    transform: translate(-50%, calc(-50% - 76px)) scale(0.88);
    opacity: 0.25;
    z-index: 3;
}
.bulli-cta-stack-slot[data-stack-pos="3"] {
    transform: translate(-50%, calc(-50% - 114px)) scale(0.82);
    opacity: 0.13;
    z-index: 2;
}
.bulli-cta-stack-slot[data-stack-pos="4"] {
    transform: translate(-50%, calc(-50% - 152px)) scale(0.76);
    opacity: 0.06;
    z-index: 1;
}

/* Pool-Cards: hinter pos 4, unsichtbar */
.bulli-cta-stack-slot[data-stack-pos="pool"] {
    transform: translate(-50%, calc(-50% - 190px)) scale(0.7);
    opacity: 0;
    z-index: 0;
    pointer-events: none;
}

/* Exit: pure forward (scale up + fade), kein translate weg vom Center */
.bulli-cta-stack-slot[data-stack-pos="exit"] {
    transform: translate(-50%, -50%) scale(1.15);
    opacity: 0;
    z-index: 6;
    transition:
        transform 0.4s ease-out,
        opacity 0.35s ease-out;
}



/* ── Mobile ──────────────────────────────────────────── */
@media (max-width: 767px) {
    .bulli-cta-stack__showcase {
        left: 2%;
        width: 28%;
    }
    .bulli-cta-stack__cards {
        width: 65%;
        right: 2%;
    }
    .bulli-cta-stack-slot .bulli-cta-card {
        width: 180px;
        min-height: 72px;
        padding: 9px 12px;
        gap: 8px;
    }
    .bulli-cta-stack-slot .bulli-cta-card__head {
        font-size: 10px;
    }
    .bulli-cta-stack-slot .bulli-cta-card__chip {
        width: 22px;
        height: 22px;
    }
    .bulli-cta-stack-slot .bulli-cta-card__indicators {
        gap: 5px;
    }
    /* Y-Versatz schrumpft mit Card-Höhe */
    .bulli-cta-stack-slot[data-stack-pos="1"] {
        transform: translate(-50%, calc(-50% - 24px)) scale(0.94);
    }
    .bulli-cta-stack-slot[data-stack-pos="2"] {
        transform: translate(-50%, calc(-50% - 48px)) scale(0.88);
    }
    .bulli-cta-stack-slot[data-stack-pos="3"],
    .bulli-cta-stack-slot[data-stack-pos="4"] {
        display: none;
    }
}