/* ─── Transition Effects ─── */
/* Scale, Coverflow, Parallax: transforms driven by JS (effects.js).
   Fade: uses embla-carousel-fade plugin + CSS opacity transition.
   Flip: CSS class toggle with transition. */

/* ── Fade ── */
.embla-slider[data-effect="fade"] .embla__slide {
    transition: opacity var(--transition-speed, 300ms) ease;
}

/* ── Scale ── */
/* JS handles transform & opacity on every scroll frame. */

/* ── Parallax ── */
.embla-slider[data-effect="parallax"] .embla__slide {
    overflow: hidden;
}

/* ── Coverflow ── */
.embla-slider[data-effect="coverflow"] {
    perspective: 1200px;
}
.embla-slider[data-effect="coverflow"] .embla__container {
    transform-style: preserve-3d;
}
.embla-slider[data-effect="coverflow"] .embla__slide {
    backface-visibility: hidden;
}

/* ── Flip ── */
.embla-slider[data-effect="flip"] {
    perspective: 1200px;
}
.embla-slider[data-effect="flip"] .embla__slide {
    transition: transform var(--transition-speed, 300ms) ease;
    transform: rotateY(180deg);
    backface-visibility: hidden;
    transform-style: preserve-3d;
}
.embla-slider[data-effect="flip"] .embla__slide.is-snapped {
    transform: rotateY(0deg);
}