/* ── Container ── */
.slide-engine {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
}

/* ── Base frame ── */
.slide-frame {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.slide-frame--active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

.slide-frame--prev {
    z-index: 0;
}

/* ── SVG fills frame ── */
.slide-frame > svg {
    width: 100%;
    height: 100%;
}

/* ── Letterbox bg extension ── */
.slide-frame[data-extend-bg] {
    background-color: var(--slide-bg, transparent);
}

/* ── 1. Fade ── */
.slide-engine--fade .slide-frame {
    transition: opacity .6s ease;
}

/* ── 2. Slide ── */
.slide-engine--slide .slide-frame {
    transform: translateX(100%);
    transition: transform .6s ease, opacity .3s ease;
}

.slide-engine--slide .slide-frame--active {
    transform: translateX(0);
    opacity: 1;
}

.slide-engine--slide .slide-frame--prev {
    transform: translateX(-100%);
    opacity: 0;
}

/* ── 3. Zoom ── */
.slide-engine--zoom .slide-frame {
    transform: scale(.85);
    transition: transform .6s ease, opacity .5s ease;
}

.slide-engine--zoom .slide-frame--active {
    transform: scale(1);
    opacity: 1;
}

.slide-engine--zoom .slide-frame--prev {
    transform: scale(1.15);
    opacity: 0;
}

/* ── 4. None ── */
.slide-engine--none .slide-frame {
    transition: none;
}

/* ── 5. Clip Circle ── */
.slide-engine--clip-circle .slide-frame {
    clip-path: circle(0% at 50% 50%);
    transition: clip-path .8s ease, opacity .3s ease;
}

.slide-engine--clip-circle .slide-frame--active {
    clip-path: circle(100% at 50% 50%);
    opacity: 1;
}

/* ── 6. Wipe ── */
.slide-engine--wipe .slide-frame {
    clip-path: inset(0 100% 0 0);
    transition: clip-path .7s ease;
}

.slide-engine--wipe .slide-frame--active {
    clip-path: inset(0 0 0 0);
    opacity: 1;
}

/* ── 7. Blur ── */
.slide-engine--blur .slide-frame {
    filter: blur(20px);
    transition: filter .6s ease, opacity .6s ease;
}

.slide-engine--blur .slide-frame--active {
    filter: blur(0);
    opacity: 1;
}

.slide-engine--blur .slide-frame--prev {
    filter: blur(20px);
    opacity: 0;
}

/* ── Rapid navigation: disable all transitions ──
   Must come AFTER every transition variant so it wins the cascade. */
.slide-engine--rapid .slide-frame {
    transition: none !important;
}