.stormcore-advanced-title {
    margin: 0;
    line-height: 1.1;
    word-break: break-word;
}

.stormcore-advanced-title .stormcore-title-link {
    color: inherit;
    text-decoration: none;
}

.stormcore-advanced-title .stormcore-title-item {
    display: inline;
}

/* block-layout item: precede with a line break (handled in PHP with <br>) */

/* ── Wrapper (always present) ───────────────────────────────────────────── */

.stormcore-title-bp-wrap {
    --stormcore-marquee-gap: 60px;
    --stormcore-marquee-duration: 10s;
    --stormcore-marquee-play-state: running;
    /* Manual drag-to-scroll offset, added on top of the animation's own
       position (see keyframes below) — 0px when nothing is being dragged. */
    --stormcore-marquee-drag: 0px;
}

/* ── Marquee mode (class added by JS) ───────────────────────────────────── */

.stormcore-title-bp-wrap.stormcore-marquee-active {
    overflow: hidden;
    display: block;
    width: 100%;
}

/*
 * Inner track holds two identical copies side by side.
 * Animating to -50% shifts by exactly one copy's width — both endpoints
 * show identical content so the loop reset is invisible.
 */
.stormcore-title-marquee-inner {
    display: flex;
    width: max-content;
    animation: stormcore-marquee-ltr var(--stormcore-marquee-duration) linear infinite;
    animation-play-state: var(--stormcore-marquee-play-state);
}

.stormcore-title-marquee-inner.stormcore-marquee-reverse {
    animation-name: stormcore-marquee-rtl;
}

@keyframes stormcore-marquee-ltr {
    from { transform: translateX(var(--stormcore-marquee-drag, 0px)); }
    to   { transform: translateX(calc(-50% + var(--stormcore-marquee-drag, 0px))); }
}

/* Reverse: start at -50% so the loop reset is equally seamless */
@keyframes stormcore-marquee-rtl {
    from { transform: translateX(calc(-50% + var(--stormcore-marquee-drag, 0px))); }
    to   { transform: translateX(var(--stormcore-marquee-drag, 0px)); }
}

/* Drag-to-scroll affordance — only added when "Pause on hover" is enabled */
.stormcore-title-bp-wrap.stormcore-marquee-draggable {
    cursor: grab;
    touch-action: pan-y; /* let vertical page scroll through; JS handles horizontal */
}

.stormcore-title-bp-wrap.stormcore-marquee-draggable.stormcore-marquee-dragging {
    cursor: grabbing;
    user-select: none;
}

.stormcore-title-bp-wrap.stormcore-marquee-active .stormcore-advanced-title {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
    word-break: normal;
    /* Right padding creates the gap between each repeated block */
    padding-right: var(--stormcore-marquee-gap);
}