/**
 * WP Motion Design — Horizontal Scroll
 */

.wpmd-hscroll {
    position: relative;
    width: 100%;
}

.wpmd-hscroll-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    width: 100%;
}

.wpmd-hscroll-track {
    display: flex;
    height: 100%;
    will-change: transform;
}

.wpmd-hscroll-panel {
    flex: 0 0 100vw;
    min-height: 100vh;
    box-sizing: border-box;
    overflow: hidden;
}

/* WordPress alignment helpers */
.alignfull .wpmd-hscroll-sticky,
.alignwide .wpmd-hscroll-sticky {
    width: 100%;
}

.alignfull .wpmd-hscroll {
    margin-left: calc(-50vw + 50%);
    width: 100vw;
}

/* ── Dots Navigation ─────────────────────────────────────── */
.wpmd-hs-dots {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    gap: 10px;
    z-index: 100;
    pointer-events: auto;
}

.wpmd-hs-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--wpmd-hs-dot, #fff);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.wpmd-hs-dot:hover {
    transform: scale(1.3);
}
.wpmd-hs-dot.is-active {
    background: var(--wpmd-hs-dot-active, #6B5FE8);
    border-color: var(--wpmd-hs-dot-active, #6B5FE8);
    transform: scale(1.2);
}