/**
 * Hero slider — professional transition effects
 * (fade-slide default lives in home.css)
 */

.hero-slider:not([data-transition="fade-slide"]) .hero-slide.dir-next.active:not(.is-leaving) .hero-slide__media,
.hero-slider:not([data-transition="fade-slide"]) .hero-slide.dir-prev.active:not(.is-leaving) .hero-slide__media {
    animation: none;
}

.hero-slider:not([data-transition="fade-slide"]) .hero-slide.is-leaving.dir-next .hero-slide__media,
.hero-slider:not([data-transition="fade-slide"]) .hero-slide.is-leaving.dir-prev .hero-slide__media {
    transform: none;
    opacity: 1;
}

/* ── 1. Crossfade — تلاشي كلاسيكي ── */
.hero-slider[data-transition="crossfade"] .hero-slide {
    transition:
        opacity 1s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-slider[data-transition="crossfade"] .hero-slide.is-leaving {
    opacity: 0;
    z-index: 3;
}

.hero-slider[data-transition="crossfade"] .hero-slide.active:not(.is-leaving) {
    z-index: 2;
}

/* ── 2. Slide push — دفع أفقي ── */
.hero-slider[data-transition="slide-push"] .hero-slide {
    opacity: 1;
    visibility: visible;
    transition: none;
    transform: translate3d(0, 0, 0);
}

.hero-slider[data-transition="slide-push"] .hero-slide.active:not(.is-leaving) {
    z-index: 3;
}

.hero-slider[data-transition="slide-push"] .hero-slide.is-leaving {
    z-index: 2;
}

.hero-slider[data-transition="slide-push"].dir-next .hero-slide.active:not(.is-leaving) {
    animation: heroProPushInNext 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-slider[data-transition="slide-push"].dir-next .hero-slide.is-leaving {
    animation: heroProPushOutNext 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-slider[data-transition="slide-push"].dir-prev .hero-slide.active:not(.is-leaving) {
    animation: heroProPushInPrev 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-slider[data-transition="slide-push"].dir-prev .hero-slide.is-leaving {
    animation: heroProPushOutPrev 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes heroProPushInNext {
    from { transform: translate3d(100%, 0, 0); }
    to { transform: translate3d(0, 0, 0); }
}

@keyframes heroProPushOutNext {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-28%, 0, 0); opacity: 0.55; }
}

@keyframes heroProPushInPrev {
    from { transform: translate3d(-100%, 0, 0); }
    to { transform: translate3d(0, 0, 0); }
}

@keyframes heroProPushOutPrev {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(28%, 0, 0); opacity: 0.55; }
}

/* ── 3. Slide up — صعود أنيق ── */
.hero-slider[data-transition="slide-up"] .hero-slide {
    transition:
        opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-slider[data-transition="slide-up"] .hero-slide.is-leaving {
    opacity: 0;
}

.hero-slider[data-transition="slide-up"] .hero-slide.active:not(.is-leaving) .hero-slide__media {
    animation: heroProSlideUpIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-slider[data-transition="slide-up"] .hero-slide.is-leaving .hero-slide__media {
    animation: heroProSlideUpOut 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes heroProSlideUpIn {
    from {
        opacity: 0;
        transform: translate3d(0, 5%, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes heroProSlideUpOut {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    to {
        opacity: 0;
        transform: translate3d(0, -4%, 0);
    }
}

/* ── 4. Dissolve — ذوبان ناعم ── */
.hero-slider[data-transition="dissolve"] .hero-slide {
    transition:
        opacity 1.05s ease-in-out,
        visibility 1.05s ease-in-out;
}

.hero-slider[data-transition="dissolve"] .hero-slide.is-leaving {
    opacity: 0;
    z-index: 3;
}

.hero-slider[data-transition="dissolve"] .hero-slide.active:not(.is-leaving) .hero-slide__media {
    animation: heroProDissolveIn 1.05s ease-in-out forwards;
}

.hero-slider[data-transition="dissolve"] .hero-slide.is-leaving .hero-slide__media {
    animation: heroProDissolveOut 1.05s ease-in-out forwards;
}

@keyframes heroProDissolveIn {
    from {
        opacity: 0;
        filter: brightness(1.04);
    }
    to {
        opacity: 1;
        filter: brightness(1);
    }
}

@keyframes heroProDissolveOut {
    from {
        opacity: 1;
        filter: brightness(1);
    }
    to {
        opacity: 0;
        filter: brightness(0.96);
    }
}

/* ── 5. Reveal — كشف أفقي ── */
.hero-slider[data-transition="reveal"] .hero-slide {
    opacity: 1;
    visibility: visible;
    transition: none;
}

.hero-slider[data-transition="reveal"] .hero-slide.is-leaving {
    z-index: 2;
}

.hero-slider[data-transition="reveal"] .hero-slide.active:not(.is-leaving) {
    z-index: 3;
}

.hero-slider[data-transition="reveal"].dir-next .hero-slide.active:not(.is-leaving) .hero-slide__media {
    animation: heroProRevealInNext 0.92s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-slider[data-transition="reveal"].dir-prev .hero-slide.active:not(.is-leaving) .hero-slide__media {
    animation: heroProRevealInPrev 0.92s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-slider[data-transition="reveal"] .hero-slide.is-leaving .hero-slide__media {
    animation: heroProRevealOut 0.92s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes heroProRevealInNext {
    from { clip-path: inset(0 0 0 100%); }
    to { clip-path: inset(0 0 0 0); }
}

@keyframes heroProRevealInPrev {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
}

@keyframes heroProRevealOut {
    from { opacity: 1; }
    to { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slider[data-transition="slide-push"] .hero-slide,
    .hero-slider[data-transition="slide-up"] .hero-slide__media,
    .hero-slider[data-transition="dissolve"] .hero-slide__media,
    .hero-slider[data-transition="reveal"] .hero-slide__media {
        animation: none !important;
        transform: none !important;
        clip-path: none !important;
        filter: none !important;
    }
}