/* ============================================
   Infinite Scroll Ticker — v1.6
   ============================================ */

.ist-ticker {
    --ist-gap: 60px;
    --ist-color: #ffffff;
    --ist-bg: #000000;
    --ist-size: 1rem;
    --ist-weight: 600;
    --ist-border-top: 0px;
    --ist-border-bottom: 0px;
    --ist-border-color: #333333;
    --ist-padding-y: 14px;
    --ist-letter-spacing: 0.02em;
    --ist-direction: normal;
    --ist-fade-width: 120px;
    --ist-opacity: 1;
    --ist-shadow-color: #ffffff;

    position: relative;
    width: 100%;
    /* NO overflow:hidden here — it breaks mask-image */
    background-color: var(--ist-bg);
    border-top: var(--ist-border-top) solid var(--ist-border-color);
    border-bottom: var(--ist-border-bottom) solid var(--ist-border-color);
    padding: var(--ist-padding-y) 0;
    box-sizing: border-box;
    opacity: var(--ist-opacity);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* overflow:hidden lives here — clips the scrolling text */
.ist-ticker__inner {
    display: flex;
    width: 100%;
    overflow: hidden;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
}

.ist-ticker__track {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
    animation: ist-scroll linear infinite;
    animation-duration: var(--ist-duration, 10s);
    animation-direction: var(--ist-direction, normal);
    gap: 0;
}

.ist-ticker__item {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--ist-color);
    font-size: var(--ist-size);
    font-weight: var(--ist-weight);
    font-family: var(--ist-font, inherit);
    letter-spacing: var(--ist-letter-spacing);
    line-height: 1.2;
    padding-right: calc(var(--ist-gap) / 2);
    padding-left: calc(var(--ist-gap) / 2);
}

.ist-ticker__sep {
    display: inline-block;
    margin-left: calc(var(--ist-gap) / 2);
    opacity: 0.6;
}

/* ── Variants ── */
.ist-uppercase .ist-ticker__item { text-transform: uppercase; }
.ist-pause-hover:hover .ist-ticker__track { animation-play-state: paused; }

/* ══════════════════════════════════════════════
   FADE — mask-image on .ist-ticker (no overflow
   on same element, so mask works correctly and
   composites through to whatever is behind,
   including background images).
   ══════════════════════════════════════════════ */

.ist-fade--fade {
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0px,
        black var(--ist-fade-width),
        black calc(100% - var(--ist-fade-width)),
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0px,
        black var(--ist-fade-width),
        black calc(100% - var(--ist-fade-width)),
        transparent 100%
    );
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/* Softer easing with blur_edges */
.ist-blur-edges.ist-fade--fade {
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0,0,0,0.08) calc(var(--ist-fade-width) * 0.2),
        rgba(0,0,0,0.4)  calc(var(--ist-fade-width) * 0.5),
        rgba(0,0,0,0.8)  calc(var(--ist-fade-width) * 0.8),
        black            var(--ist-fade-width),
        black            calc(100% - var(--ist-fade-width)),
        rgba(0,0,0,0.8)  calc(100% - var(--ist-fade-width) * 0.8),
        rgba(0,0,0,0.4)  calc(100% - var(--ist-fade-width) * 0.5),
        rgba(0,0,0,0.08) calc(100% - var(--ist-fade-width) * 0.2),
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0,0,0,0.08) calc(var(--ist-fade-width) * 0.2),
        rgba(0,0,0,0.4)  calc(var(--ist-fade-width) * 0.5),
        rgba(0,0,0,0.8)  calc(var(--ist-fade-width) * 0.8),
        black            var(--ist-fade-width),
        black            calc(100% - var(--ist-fade-width)),
        rgba(0,0,0,0.8)  calc(100% - var(--ist-fade-width) * 0.8),
        rgba(0,0,0,0.4)  calc(100% - var(--ist-fade-width) * 0.5),
        rgba(0,0,0,0.08) calc(100% - var(--ist-fade-width) * 0.2),
        transparent 100%
    );
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/* ── Other edge styles (overlay-based, work with solid bg) ── */
.ist-fade--glow::before,  .ist-fade--glow::after,
.ist-fade--hard::before,  .ist-fade--hard::after,
.ist-fade--slice::before, .ist-fade--slice::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: var(--ist-fade-width);
    z-index: 2;
    pointer-events: none;
}
.ist-fade--glow::before, .ist-fade--hard::before, .ist-fade--slice::before { left: 0; }
.ist-fade--glow::after,  .ist-fade--hard::after,  .ist-fade--slice::after  { right: 0; }

.ist-fade--glow::before { background: linear-gradient(to right, color-mix(in srgb, var(--ist-shadow-color) 80%, transparent) 0%, transparent 100%); mix-blend-mode: screen; }
.ist-fade--glow::after  { background: linear-gradient(to left,  color-mix(in srgb, var(--ist-shadow-color) 80%, transparent) 0%, transparent 100%); mix-blend-mode: screen; }
.ist-fade--hard::before, .ist-fade--hard::after { background: var(--ist-bg); width: calc(var(--ist-fade-width) * 0.5); }
.ist-fade--slice::before { background: var(--ist-bg); clip-path: polygon(0 0, 100% 0, calc(100% - 30px) 100%, 0 100%); }
.ist-fade--slice::after  { background: var(--ist-bg); clip-path: polygon(30px 0, 100% 0, 100% 100%, 0 100%); }

.ist-fade--vignette .ist-ticker__inner::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    box-shadow: inset 0 0 var(--ist-fade-width) calc(var(--ist-fade-width) * 0.5) var(--ist-bg);
}

/* ── Unique FX ── */
.ist-shadow .ist-ticker__item {
    text-shadow: 0 0 6px var(--ist-shadow-color), 0 0 16px var(--ist-shadow-color), 0 0 40px var(--ist-shadow-color);
}
.ist-outline .ist-ticker__item { -webkit-text-stroke: 1.5px var(--ist-color); color: transparent; }
.ist-gradient-text .ist-ticker__item {
    background: var(--ist-gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.ist-tilt { overflow: visible; }
.ist-tilt .ist-ticker__inner { overflow: hidden; }
.ist-scanlines::after {
    content: '';
    position: absolute;
    inset: 0; z-index: 3; pointer-events: none;
    background: repeating-linear-gradient(to bottom, transparent 0px, transparent 3px, rgba(0,0,0,0.25) 3px, rgba(0,0,0,0.25) 4px);
}
.ist-stripe::before {
    content: '';
    position: absolute;
    inset: 0; z-index: 0; pointer-events: none;
    background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 2px, transparent 2px, transparent 12px);
}
.ist-stripe .ist-ticker__inner { position: relative; z-index: 1; }

/* ── Keyframes ── */
@keyframes ist-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .ist-ticker__track { animation-duration: 60s !important; }
}

/* ── Responsive visibility ── */
@media (max-width: 767px) {
    .ist-hide-mobile { display: none !important; }
}
@media (min-width: 768px) {
    .ist-hide-desktop { display: none !important; }
}