/*
 * Card Rotator plugin contract. Runtime state is represented by classes and
 * data attributes so JS can switch slides and variants without inline styles.
 */
.ix-card-rotator {
    --ix-card-rotator-duration: 900ms;
    --ix-card-rotator-ease: ease;
    --ix-card-rotator-hidden-transform: translateY(14px) scale(.985);
    --ix-card-rotator-before-transform: var(--ix-card-rotator-hidden-transform);
    --ix-card-rotator-after-transform: var(--ix-card-rotator-hidden-transform);
    --ix-card-rotator-indicator-gap: .4rem;
    --ix-card-rotator-indicator-width: .5rem;
    --ix-card-rotator-indicator-height: .5rem;
    --ix-card-rotator-indicator-radius: 999px;
    --ix-card-rotator-indicator-opacity: .32;
    --ix-card-rotator-indicator-scale: .92;
    --ix-card-rotator-indicator-active-scale: 1;
    position: relative;
}

.ix-card-rotator[data-ix-card-motion="soft"] {
    --ix-card-rotator-hidden-transform: translateY(6px) scale(.994);
}

.ix-card-rotator[data-ix-card-motion="slide"] {
    --ix-card-rotator-hidden-transform: translate3d(7%, 0, 0) scale(.99);
    --ix-card-rotator-before-transform: translate3d(-7%, 0, 0) scale(.99);
    --ix-card-rotator-after-transform: translate3d(7%, 0, 0) scale(.99);
}

.ix-card-rotator[data-ix-card-motion="none"] {
    --ix-card-rotator-hidden-transform: none;
}

.ix-card-rotator[data-ix-card-indicators="pill"] {
    --ix-card-rotator-indicator-gap: .52rem;
    --ix-card-rotator-indicator-width: .86rem;
    --ix-card-rotator-indicator-height: .38rem;
    --ix-card-rotator-indicator-scale: 1;
}

.ix-card-rotator__viewport {
    display: grid;
}

.ix-card-rotator__slide {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: var(--ix-card-rotator-hidden-transform);
    transition:
        opacity var(--ix-card-rotator-duration) var(--ix-card-rotator-ease),
        transform var(--ix-card-rotator-duration) var(--ix-card-rotator-ease),
        visibility 0s linear var(--ix-card-rotator-duration);
}

.ix-card-rotator__slide.is-before {
    transform: var(--ix-card-rotator-before-transform);
}

.ix-card-rotator__slide.is-after {
    transform: var(--ix-card-rotator-after-transform);
}

.ix-card-rotator__slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition-delay: 0s;
}

/* A scene supplies a clipping/stacking context; the host allocates its dimensions and each layer's position.
   Layers can contain ordinary markup or another plugin without copying that plugin's rendering or motion. */
.ix-card-rotator__scene {
    position: relative;
    isolation: isolate;
    overflow: clip;
}

[data-ix-card-background] {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: clip;
    pointer-events: none;
}

.ix-card-rotator [data-ix-card-background] > img {
    position: absolute;
    inset: calc(-1 * var(--ix-card-background-overscan, 0px));
    width: calc(100% + 2 * var(--ix-card-background-overscan, 0px));
    height: calc(100% + 2 * var(--ix-card-background-overscan, 0px));
    max-width: none;
    object-fit: cover;
    object-position: var(--ix-card-background-position, center);
    filter: blur(var(--ix-card-background-blur, 0px));
}

.ix-card-rotator__slide [data-ix-card-layer] {
    --ix-card-layer-direction: 1;
    --ix-card-layer-hidden-transform: translate3d(
        calc(var(--ix-card-layer-x, 2.5rem) * var(--ix-card-layer-direction)),
        var(--ix-card-layer-y, 0px), 0);
    opacity: 0;
    transform: var(--ix-card-layer-hidden-transform);
    transition:
        opacity var(--ix-card-layer-duration, 760ms) var(--ix-card-layer-fade-ease, linear),
        transform var(--ix-card-layer-duration, 760ms) var(--ix-card-rotator-ease);
}

.ix-card-rotator__slide [data-ix-card-layer="left"] {
    --ix-card-layer-x: -2.5rem;
}

.ix-card-rotator__slide [data-ix-card-layer="rise"] {
    --ix-card-layer-x: 0px;
    --ix-card-layer-y: 2rem;
}

.ix-card-rotator__slide [data-ix-card-layer="fade"] {
    --ix-card-layer-x: 0px;
}

/* Composed scenes can preserve authored entry sides when navigating either way. */
.ix-card-rotator__slide.is-before:not([data-ix-card-layer-direction="fixed"]) [data-ix-card-layer] {
    --ix-card-layer-direction: -1;
}

.ix-card-rotator__slide.is-active [data-ix-card-layer] {
    opacity: 1;
    transform: none;
    transition-delay: var(--ix-card-layer-delay, 0ms);
}

@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
    @starting-style {
        /* The authored opening slide has no previous paint; supply its entry pose for the same layer transition. */
        .ix-card-rotator__slide.is-active [data-ix-card-layer] {
            opacity: 0;
            transform: var(--ix-card-layer-hidden-transform);
        }
    }

    /* Do not spend the fade on unloaded artwork. The background remains visible while the scene prepares.
       Scripting-disabled and reduced-motion visitors retain the static, visible active slide. */
    .ix-card-rotator__slide:not(.is-layer-ready) [data-ix-card-layer] {
        opacity: 0;
        transform: var(--ix-card-layer-hidden-transform);
        transition: none;
    }
}

.ix-card-rotator__slide:not(.is-active) [data-ix-card-layer] * {
    animation-play-state: paused;
}

.ix-card-rotator__indicators {
    display: flex;
    align-items: center;
    gap: var(--ix-card-rotator-indicator-gap);
}

.ix-card-rotator__indicator {
    appearance: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    width: var(--ix-card-rotator-indicator-width);
    height: var(--ix-card-rotator-indicator-height);
    border-radius: var(--ix-card-rotator-indicator-radius);
    background: currentColor;
    opacity: var(--ix-card-rotator-indicator-opacity);
    transform: scale(var(--ix-card-rotator-indicator-scale));
    transition:
        width 220ms ease,
        height 220ms ease,
        opacity 220ms ease,
        transform 220ms ease;
}

.ix-card-rotator__indicator.is-active {
    opacity: 1;
    transform: scale(var(--ix-card-rotator-indicator-active-scale));
}

.ix-card-rotator__indicator:focus-visible,
.ix-card-rotator__nav:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.ix-card-rotator[data-ix-card-indicators="pill"] .ix-card-rotator__indicator.is-active {
    width: 2rem;
}

.ix-card-rotator__nav {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(16, 24, 18, .24);
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition:
        background 220ms ease,
        border-color 220ms ease,
        transform 220ms ease;
}

.ix-card-rotator__nav:hover {
    background: rgba(16, 24, 18, .38);
    border-color: rgba(255, 255, 255, .34);
}

.ix-card-rotator__nav:active {
    transform: scale(.97);
}

.ix-card-rotator__nav i,
.ix-card-rotator__nav svg {
    width: 1rem;
    height: 1rem;
}

@media (prefers-reduced-motion: reduce) {
    .ix-card-rotator__slide,
    .ix-card-rotator__slide.is-before,
    .ix-card-rotator__slide.is-after,
    .ix-card-rotator__slide [data-ix-card-layer] {
        transform: none;
        transition: none;
    }
}