/**
 * WP Marquee Pro — Frontend Styles
 * Smooth, GPU-accelerated CSS marquee animation with full customisation support.
 */

/* ── Reset & Base ─────────────────────────────────────────────────────────── */
.wmp-marquee-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    /* Prevent text selection during scroll */
    user-select: none;
    -webkit-user-select: none;
}

/* ── Fade Edges (soft gradient mask) ─────────────────────────────────────── */
.wmp-marquee-wrapper::before,
.wmp-marquee-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 2;
    pointer-events: none;
}

.wmp-marquee-wrapper::before {
    left: 0;
    background: linear-gradient(to right, var(--wmp-bg, #0f0f0f) 0%, transparent 100%);
}

.wmp-marquee-wrapper::after {
    right: 0;
    background: linear-gradient(to left, var(--wmp-bg, #0f0f0f) 0%, transparent 100%);
}

/* ── Track: Flex container that holds two copies of content ──────────────── */
.wmp-track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: max-content;
    will-change: transform;
    /* Animation applied via JavaScript for dynamic speed */
}

/* ── Content block ────────────────────────────────────────────────────────── */
.wmp-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
}

/* ── Individual Items ─────────────────────────────────────────────────────── */
.wmp-item {
    display: inline-flex;
    align-items: center;
    line-height: 1.4;
    padding: 0 8px;
    transition: opacity 0.2s ease;
}

/* ── Separator ───────────────────────────────────────────────────────────── */
.wmp-separator {
    display: inline-flex;
    align-items: center;
    opacity: 0.5;
    padding: 0 12px;
    font-size: 0.75em;
}

/* ── Pause on hover ───────────────────────────────────────────────────────── */
.wmp-marquee-wrapper[data-pause="true"]:hover .wmp-track {
    animation-play-state: paused !important;
}

/* ── Animations (injected dynamically, these are fallback defaults) ───────── */
@keyframes wmp-scroll-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes wmp-scroll-right {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

/* ── Direction modifier ───────────────────────────────────────────────────── */
.wmp-marquee-wrapper .wmp-track {
    animation: wmp-scroll-left linear infinite;
}

.wmp-marquee-wrapper.wmp-direction-right .wmp-track {
    animation: wmp-scroll-right linear infinite;
}

/* ── Responsive: reduce fade width on mobile ─────────────────────────────── */
@media (max-width: 640px) {
    .wmp-marquee-wrapper::before,
    .wmp-marquee-wrapper::after {
        width: 40px;
    }
}

/* ── Accessibility: respect reduced motion ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .wmp-track {
        animation: none !important;
        overflow-x: auto;
    }

    .wmp-marquee-wrapper::before,
    .wmp-marquee-wrapper::after {
        display: none;
    }
}

/* ── Gutenberg Editor Preview ────────────────────────────────────────────── */
.editor-styles-wrapper .wmp-marquee-wrapper {
    pointer-events: none;
}