/**
 * Dynamic Slider - Transition Styles
 *
 * CSS transitions for slide and fade effects.
 */

/* ==========================================================================
   Slide Transition (Default)
   ========================================================================== */

/*
 * The slide transition uses native CSS scroll-snap.
 * No additional CSS is needed as scroll-behavior: smooth handles the animation.
 * The transition speed is controlled via JavaScript's scrollTo behavior.
 */

.ds-slider--slide .ds-slider__track {
    /* Smooth scrolling is defined in core.css */
}

/* ==========================================================================
   Fade Transition
   ========================================================================== */

.ds-slider--fade .ds-slider__track {
    display: block;
    position: relative;
    overflow: hidden;

    /* Disable scroll-snap for fade mode */
    scroll-snap-type: none;
    overflow-x: hidden;
}

.ds-slider--fade .ds-slider__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity var(--ds-transition-speed, 400ms) ease,
        visibility var(--ds-transition-speed, 400ms) ease;

    /* Reset flex-based width for fade mode */
    flex: none;
}

/* First slide takes up space to maintain container height */
.ds-slider--fade .ds-slider__slide:first-child {
    position: relative;
}

/* Active slide */
.ds-slider--fade .ds-slider__slide--active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

/* ==========================================================================
   Crossfade Variant (Optional)
   ========================================================================== */

/*
 * For a true crossfade effect where slides overlap during transition,
 * add the ds-slider--crossfade class.
 */

.ds-slider--fade.ds-slider--crossfade .ds-slider__slide {
    /* All slides positioned absolutely for overlap */
    position: absolute;
}

.ds-slider--fade.ds-slider--crossfade .ds-slider__slide:first-child {
    position: absolute;
}

/* Container needs explicit height for crossfade */
.ds-slider--fade.ds-slider--crossfade .ds-slider__track {
    /* Height should be set via inline style or JavaScript */
}

/* ==========================================================================
   Slide Entry/Exit Animations (Enhancement)
   ========================================================================== */

/*
 * These classes can be applied via JavaScript for more complex
 * entry/exit animations if desired.
 */

.ds-slider__slide--entering {
    animation: ds-slide-enter var(--ds-transition-speed, 400ms) ease forwards;
}

.ds-slider__slide--leaving {
    animation: ds-slide-leave var(--ds-transition-speed, 400ms) ease forwards;
}

@keyframes ds-slide-enter {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes ds-slide-leave {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-20px);
    }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .ds-slider--fade .ds-slider__slide {
        transition: none;
    }

    .ds-slider__slide--entering,
    .ds-slider__slide--leaving {
        animation: none;
    }

    /* Instant switch without animation */
    .ds-slider--fade .ds-slider__slide--active {
        opacity: 1;
        visibility: visible;
    }
}

/* ==========================================================================
   Loading State
   ========================================================================== */

.ds-slider--loading .ds-slider__track {
    opacity: 0;
}

.ds-slider--loaded .ds-slider__track {
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* ==========================================================================
   Hover Pause Indicator (Optional)
   ========================================================================== */

.ds-slider--autoplay.ds-slider--paused::after {
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M6 19h4V5H6v14zm8-14v14h4V5h-4z'/%3E%3C/svg%3E") center/16px no-repeat;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.7;
    z-index: 20;
}