/* =============================================================================
   xplay-player-ticker.css
   Scrolling text ticker overlay for Video.js
   ============================================================================= */

/* ------------------------------------------------------------------
 * Ticker wrapper — full-width bar across the player
 * ------------------------------------------------------------------ */
.xplay-player-ticker {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 4;           /* above logo (z-index 3) */
    overflow: hidden;
    white-space: nowrap;
    pointer-events: none; /* JS enables this when a link is set */
    /* Height, colours, font-size set inline by JS from theme options */
}

/* Position variants */
.xplay-ticker-top {
    top: 0;
}

.xplay-ticker-bottom {
    /* Sits just above the Video.js control bar (approx 44px tall) */
    bottom: 44px;
}

/* ------------------------------------------------------------------
 * Inner scrolling track
 * The track holds two identical copies of the text side-by-side.
 * Animating translateX(0) → translateX(-50%) scrolls the first copy
 * out while the second seamlessly takes its place — true infinite loop.
 * ------------------------------------------------------------------ */
.xplay-player-ticker__track {
    display: inline-flex;
    width: max-content;
    animation-name: xplay-ticker-scroll;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
}

@keyframes xplay-ticker-scroll {
    0%   { transform: translateX(0);    }
    100% { transform: translateX(-50%); }
}

/* ------------------------------------------------------------------
 * Text span — each of the two copies
 * ------------------------------------------------------------------ */
.xplay-player-ticker__text {
    display: inline-block;
    padding: 0 4em;   /* gap between loop repetitions */
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
    /* color & font-size set inline by JS */
}

/* ------------------------------------------------------------------
 * Clickable variant — pointer cursor on the whole bar
 * ------------------------------------------------------------------ */
.xplay-player-ticker--linked {
    pointer-events: auto;
    cursor: pointer;
    text-decoration: none;
}

.xplay-player-ticker--linked:hover .xplay-player-ticker__text {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ------------------------------------------------------------------
 * Ad playback — hide ticker entirely (JS also handles this)
 * ------------------------------------------------------------------ */
.vjs-ad-playing .xplay-player-ticker {
    display: none !important;
}

/* ------------------------------------------------------------------
 * User-inactive (controls hidden) — fade ticker out slightly
 * to keep the video watchable
 * ------------------------------------------------------------------ */
.vjs-user-inactive.vjs-playing .xplay-player-ticker {
    opacity: 0.35;
    transition: opacity 0.5s ease;
}

.vjs-user-active .xplay-player-ticker,
.vjs-paused     .xplay-player-ticker {
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* ------------------------------------------------------------------
 * Fullscreen — keep bottom ticker above the taller control bar
 * ------------------------------------------------------------------ */
.vjs-fullscreen .xplay-ticker-bottom {
    bottom: 55px;
}

/* ------------------------------------------------------------------
 * Responsive — Tablet (max 768px)
 * ------------------------------------------------------------------ */
@media (max-width: 768px) {

    .xplay-ticker-bottom {
        bottom: 40px;
    }

    .vjs-fullscreen .xplay-ticker-bottom {
        bottom: 50px;
    }

    /* Scale down font and bar — overrides JS inline styles */
    .xplay-player-ticker {
        font-size: 11px !important;
        line-height: 20px !important;
        height: 20px !important;
    }

    .xplay-player-ticker__text {
        padding: 0 2.5em;
    }
}

/* ------------------------------------------------------------------
 * Responsive — Mobile (max 480px)
 * ------------------------------------------------------------------ */
@media (max-width: 480px) {

    .xplay-ticker-bottom {
        bottom: 36px;
    }

    .vjs-fullscreen .xplay-ticker-bottom {
        bottom: 46px;
    }

    /* Further reduce on small phones */
    .xplay-player-ticker {
        font-size: 9px !important;
        line-height: 17px !important;
        height: 17px !important;
    }

    .xplay-player-ticker__text {
        padding: 0 1.5em;
        letter-spacing: 0;
    }
}