/*
 * Websly Features Carousel — 3D coverflow image carousel hero
 * Slides are <figure class="ws-coverflow-slide"> elements. JS owns the
 * --cv-pos integer offset each slide carries (negative = left of centre,
 * 0 = active, positive = right) and toggles data-cv-state.
 */

.websly-features-carousel {
    color: var(--text-base);
}

.websly-features-carousel .ws-coverflow-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2rem, 4vw, 3rem);
}

.websly-features-carousel .ws-coverflow-header { width: 100%; }
.websly-features-carousel .ws-cv-subtitle { color: rgba(var(--text-base-rgb), 0.7); }

/* Stage owns perspective + positions arrows */
.websly-features-carousel .ws-coverflow-stage {
    position: relative;
    width: 100%;
    min-height: 380px;
    perspective: 1200px;
    touch-action: pan-y;
}

@media (min-width: 768px) {
    .websly-features-carousel .ws-coverflow-stage { min-height: 500px; }
}

/* Aspect variants drive slide width */
.websly-features-carousel.ws-cv-aspect-portrait  .ws-coverflow-slide { width: clamp(180px, 22vw, 280px); aspect-ratio: 2 / 3; }
.websly-features-carousel.ws-cv-aspect-square    .ws-coverflow-slide { width: clamp(220px, 28vw, 360px); aspect-ratio: 1 / 1; }
.websly-features-carousel.ws-cv-aspect-landscape .ws-coverflow-slide { width: clamp(260px, 32vw, 420px); aspect-ratio: 3 / 2; }

.websly-features-carousel .ws-coverflow-track {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Intentionally NOT preserve-3d: we want z-index to control stacking
     * (so the centred slide draws above its neighbours). rotateY on each
     * slide still produces the 3D rotation visual. */
    outline: none;
}

.websly-features-carousel .ws-coverflow-slide {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    transform-origin: center center;
    transition:
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        opacity   0.55s ease,
        filter    0.55s ease;
    will-change: transform, opacity, filter;
    pointer-events: none;
    --cv-pos: 0;
    --cv-shift: calc(var(--cv-pos) * 45%);
    --cv-rot:   calc(var(--cv-pos) * -10deg);
    --cv-scale: 1;
    transform:
        translate(-50%, -50%)
        translateX(var(--cv-shift))
        scale(var(--cv-scale))
        rotateY(var(--cv-rot));
    opacity: 0;
    filter: blur(6px);
    visibility: hidden;
    z-index: 1;
}

.websly-features-carousel .ws-coverflow-slide[data-cv-state="center"] {
    --cv-scale: 1;
    opacity: 1;
    filter: blur(0);
    visibility: visible;
    z-index: 10;
    pointer-events: auto;
}
.websly-features-carousel .ws-coverflow-slide[data-cv-state="adjacent"] {
    --cv-scale: 0.85;
    opacity: 0.45;
    filter: blur(3px);
    visibility: visible;
    z-index: 5;
}
.websly-features-carousel .ws-coverflow-slide[data-cv-state="far"] {
    --cv-scale: 0.7;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
}

.websly-features-carousel .ws-coverflow-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1.5rem;
    border: 2px solid rgba(var(--text-base-rgb), 0.1);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.35);
    display: block;
}

/* Arrow buttons */
.websly-features-carousel .ws-coverflow-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--surface-bg-color-rgb, 255, 255, 255), 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(var(--text-base-rgb), 0.15);
    color: var(--text-base);
    cursor: pointer;
    z-index: 20;
    transition: background 0.2s ease, transform 0.2s ease;
}
.websly-features-carousel .ws-coverflow-arrow:hover {
    background: rgba(var(--surface-bg-color-rgb, 255, 255, 255), 0.85);
    transform: translateY(-50%) scale(1.06);
}
.websly-features-carousel .ws-coverflow-arrow:focus-visible {
    outline: 2px solid var(--theme-accent, currentColor);
    outline-offset: 2px;
}
.websly-features-carousel .ws-coverflow-prev { left: clamp(0.5rem, 2vw, 2rem); }
.websly-features-carousel .ws-coverflow-next { right: clamp(0.5rem, 2vw, 2rem); }
.websly-features-carousel .ws-coverflow-arrow svg { width: 20px; height: 20px; }

.websly-features-carousel[data-cv-dragging="1"] .ws-coverflow-slide {
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .websly-features-carousel .ws-coverflow-slide { transition: opacity 0.2s ease; }
}