/*
 * MIX365 LIVE SECTION THEME
 *
 * Uses the same dark shard / star presentation as the Mix365
 * homepage, but gives each real Live-page content group its own
 * background without changing any functional element IDs.
 */

body.mix365-native-live-active
#mix365LiveNativeApp {
    background: transparent !important;
}

body.mix365-native-live-active
#mix365LiveNativeApp
.live-page-section,
body.mix365-native-live-active
#mix365LiveNativeApp
.live-page-section > .container-fluid {
    background: transparent !important;
}

body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-themed-section {
    position: relative !important;
    z-index: 1 !important;
    isolation: isolate !important;

    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;

    margin-top: 0 !important;
    margin-bottom: clamp(26px, 3vw, 46px) !important;
    padding-top: clamp(18px, 2.1vw, 30px) !important;
    padding-bottom: clamp(20px, 2.4vw, 34px) !important;

    overflow: hidden !important;

    border-top: 1px solid rgba(255,255,255,0.075) !important;
    border-bottom: 1px solid rgba(255,0,72,0.15) !important;

    background-color: #050506 !important;
    background-image:
        radial-gradient(
            circle at 18% 30%,
            rgba(231,0,65,0.13),
            transparent 31%
        ),
        radial-gradient(
            circle at 82% 70%,
            rgba(255,255,255,0.045),
            transparent 28%
        ) !important;

    box-shadow:
        0 28px 82px rgba(0,0,0,0.34),
        inset 0 1px 0 rgba(255,255,255,0.025) !important;
}

body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-themed-section:nth-of-type(even) {
    background-image:
        radial-gradient(
            circle at 76% 28%,
            rgba(231,0,65,0.15),
            transparent 30%
        ),
        radial-gradient(
            circle at 22% 74%,
            rgba(255,255,255,0.04),
            transparent 28%
        ) !important;
}

/*
 * All visual layers are absolutely positioned and therefore
 * cannot increase the height of a row or create blank gaps.
 */
body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-row-effects {
    position: absolute !important;
    z-index: 0 !important;
    inset: 0 !important;

    display: block !important;
    width: 100% !important;
    height: 100% !important;

    overflow: hidden !important;
    pointer-events: none !important;
}

body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-row-effects__canvas {
    position: absolute !important;
    z-index: 0 !important;
    inset: 0 !important;

    display: block !important;
    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 0.92 !important;
    visibility: visible !important;
    pointer-events: none !important;
}

body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-row-effects__glow {
    position: absolute;
    z-index: 1;

    top: 10%;
    left: -18%;

    width: 64%;
    height: 80%;

    opacity: 0.24;
    filter: blur(54px);

    background:
        radial-gradient(
            ellipse at center,
            rgba(235,0,67,0.58) 0%,
            rgba(235,0,67,0.17) 38%,
            transparent 72%
        );

    animation:
        mix365LiveSectionGlowMove
        14s ease-in-out infinite alternate;
}

body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-row-effects__scanlines {
    position: absolute;
    z-index: 2;
    inset: 0;

    opacity: 0.07;
    mix-blend-mode: screen;

    background:
        repeating-linear-gradient(
            180deg,
            rgba(255,255,255,0.055) 0,
            rgba(255,255,255,0.055) 1px,
            transparent 1px,
            transparent 5px
        );

    background-size: 100% 10px;

    animation:
        mix365LiveSectionScanlines
        11s linear infinite;
}

body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-row-effects__vignette {
    position: absolute;
    z-index: 3;
    inset: 0;

    background:
        radial-gradient(
            ellipse at center,
            transparent 28%,
            rgba(0,0,0,0.27) 72%,
            rgba(0,0,0,0.62) 100%
        );
}

/* Keep every real control and card above the effects. */
body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-themed-section
> :not(.mix365-live-row-effects) {
    position: relative;
    z-index: 5;
}

body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-themed-section
.live-card,
body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-themed-section
.mix365-live-extras-head,
body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-themed-section
.mix365-live-extras-pane {
    position: relative;
    z-index: 6;
}

/*
 * Let the homepage-style background show through the functional
 * cards while retaining strong contrast and all current controls.
 */
body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-themed-section
.live-card:not(.live-player-card):not(.live-chat-card) {
    border-color: rgba(255,255,255,0.105) !important;

    background:
        linear-gradient(
            145deg,
            rgba(30,33,36,0.82),
            rgba(4,5,6,0.91)
        ) !important;

    box-shadow:
        0 24px 68px rgba(0,0,0,0.37),
        inset 0 1px 0 rgba(255,255,255,0.025) !important;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-themed-section
.live-player-card,
body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-themed-section
.live-chat-card {
    background: transparent !important;
    box-shadow: none !important;
}

body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-themed-section
.live-player-wrap,
body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-themed-section
.live-chat-mount {
    background: rgba(2,3,4,0.92) !important;

    box-shadow:
        0 24px 72px rgba(0,0,0,0.46) !important;
}

/* Heading accents carried through every section. */
body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-themed-section
.live-card-header {
    position: relative;

    border-bottom-color:
        rgba(255,255,255,0.10)
        !important;
}

body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-themed-section
.live-card-header::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -1px;

    width: clamp(58px, 9vw, 125px);
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #ff0048,
            transparent
        );

    box-shadow:
        0 0 18px rgba(255,0,72,0.46);
}

body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-themed-section
.live-card-title,
body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-themed-section
.mix365-live-extras-title {
    color: #ffffff !important;

    text-shadow:
        2px 0 0 rgba(255,0,72,0.16),
        0 0 24px rgba(255,0,72,0.08);
}

/* Empty source rows created by the existing card rearrangement stay hidden. */
body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-final-empty-row,
body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-reflow-source-empty {
    display: none !important;
}

@keyframes mix365LiveSectionGlowMove {
    from {
        transform: translate3d(0, -2%, 0) scale(0.94);
    }

    to {
        transform: translate3d(52%, 3%, 0) scale(1.08);
    }
}

@keyframes mix365LiveSectionScanlines {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 110px;
    }
}

@media (max-width: 991.98px) {
    body.mix365-native-live-active
    #mix365LiveNativeApp
    .mix365-live-themed-section {
        margin-bottom: 24px !important;
        padding-top: 14px !important;
        padding-bottom: 20px !important;
    }

    body.mix365-native-live-active
    #mix365LiveNativeApp
    .mix365-live-themed-section
    .live-card:not(.live-player-card):not(.live-chat-card) {
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.mix365-native-live-active
    #mix365LiveNativeApp
    .mix365-live-row-effects__glow,
    body.mix365-native-live-active
    #mix365LiveNativeApp
    .mix365-live-row-effects__scanlines {
        animation: none !important;
    }
}

/* MIX365_LIVE_FINAL_VISUAL_RESTORE_START */

/*
 * Final authoritative Live-page visual layer.
 *
 * This consolidates all earlier transparency and cleanup patches
 * into one block so older theme rules cannot reintroduce nested
 * panels, duplicate borders or inconsistent section backgrounds.
 */

/* ------------------------------------------------------------
 * TOP [ LIVE ] TITLE — MATCH SCHEDULE HEADING SCALE
 * ------------------------------------------------------------ */

body.mix365-native-live-active
#mix365LiveHero
.mix365-glitch-title {
    font-size: clamp(45px, 7vw, 98px) !important;
    line-height: 0.90 !important;
    font-weight: 900 !important;
    letter-spacing: -0.045em !important;
}

body.mix365-native-live-active
#mix365LiveHero
.mix365-title-frame {
    gap: clamp(18px, 3vw, 44px) !important;
}

body.mix365-native-live-active
#mix365LiveHero
.mix365-frame-edge {
    width: clamp(28px, 4vw, 62px) !important;
    height: clamp(52px, 7vw, 98px) !important;
}

/* ------------------------------------------------------------
 * PAGE AND SECTION SHELLS — FULLY TRANSPARENT
 * ------------------------------------------------------------ */

body.mix365-native-live-active
#mix365LiveNativeApp,
body.mix365-native-live-active
#mix365LiveNativeApp
.live-page-section,
body.mix365-native-live-active
#mix365LiveNativeApp
.live-page-section > .container-fluid,
body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-native-live-section,
body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-native-live-shell,
body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-themed-section,
body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-themed-section:nth-of-type(even) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    clip-path: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-themed-section::before,
body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-themed-section::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ------------------------------------------------------------
 * STRUCTURAL WRAPPERS — NO BORDERS WITHIN BORDERS
 * ------------------------------------------------------------ */

body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-themed-section
:is(
    .row,
    .mix365-dj-schedule-layout,
    .mix365-final-content-row,
    .mix365-live-primary-row,
    .mix365-final-player-chat-row,
    .mix365-system-restart-grid,
    .mix365-live-extras-shell,
    .mix365-live-extras-head,
    .mix365-live-extras-pane,
    .live-actions-grid,
    .live-stats-grid,
    .live-dj-stats-grid,
    .live-visitors-grid,
    .live-avatars-wrap,
    .mix365-feature-stack,
    .mix365-promo-pills,
    .mix365-station-social-links
) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    clip-path: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ------------------------------------------------------------
 * NORMAL CONTENT CARDS — TRANSPARENT AND BORDERLESS
 * ------------------------------------------------------------ */

body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-themed-section
:is(
    .live-card,
    .live-info-card,
    .live-track-card,
    .live-mini-section,
    .mix365-newsletter-section-card,
    .mix365-social-section-card,
    .mix365-station-card,
    .mix365-promo-card,
    .mix365-system-restart-card,
    .mix365-cdn-stat-card,
    .mix365-feature-item,
    .mix365-trackid-nowplaying,
    #requestSongCard,
    #listenersCard,
    #leaderboardCard,
    #listenerGlobeCard,
    #stationPromoCard,
    #moreFromMix365Card
) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    clip-path: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-themed-section
:is(
    .live-card,
    .live-info-card,
    .live-track-card,
    .live-mini-section,
    .mix365-newsletter-section-card,
    .mix365-social-section-card,
    .mix365-station-card,
    .mix365-promo-card,
    .mix365-system-restart-card,
    .mix365-cdn-stat-card,
    .mix365-feature-item,
    .mix365-trackid-nowplaying,
    #requestSongCard,
    #listenersCard,
    #leaderboardCard,
    #listenerGlobeCard,
    #stationPromoCard,
    #moreFromMix365Card
)::before,
body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-themed-section
:is(
    .live-card,
    .live-info-card,
    .live-track-card,
    .live-mini-section,
    .mix365-newsletter-section-card,
    .mix365-social-section-card,
    .mix365-station-card,
    .mix365-promo-card,
    .mix365-system-restart-card,
    .mix365-cdn-stat-card,
    .mix365-feature-item,
    .mix365-trackid-nowplaying,
    #requestSongCard,
    #listenersCard,
    #leaderboardCard,
    #listenerGlobeCard,
    #stationPromoCard,
    #moreFromMix365Card
)::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ------------------------------------------------------------
 * AUTODJ / LIVE DJ AND NEXT 2 SHOWS — IDENTICAL SURFACES
 * ------------------------------------------------------------ */

body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-dj-schedule-left
.live-info-card,
body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-dj-schedule-right
#nextShowCard,
body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-next-two-shows-card {
    background: rgba(255, 255, 255, 0.035) !important;
    background-color: rgba(255, 255, 255, 0.035) !important;
    background-image: none !important;

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    clip-path: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-dj-schedule-left
.live-info-card::before,
body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-dj-schedule-left
.live-info-card::after,
body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-dj-schedule-right
#nextShowCard::before,
body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-dj-schedule-right
#nextShowCard::after,
body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-next-two-shows-card::before,
body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-next-two-shows-card::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ------------------------------------------------------------
 * LEADERBOARD — FULLY TRANSPARENT
 * ------------------------------------------------------------ */

body.mix365-native-live-active
#mix365LiveNativeApp
#leaderboardCard,
body.mix365-native-live-active
#mix365LiveNativeApp
.live-leaderboard-card {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    clip-path: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.mix365-native-live-active
#mix365LiveNativeApp
#leaderboardCard::before,
body.mix365-native-live-active
#mix365LiveNativeApp
#leaderboardCard::after,
body.mix365-native-live-active
#mix365LiveNativeApp
.live-leaderboard-card::before,
body.mix365-native-live-active
#mix365LiveNativeApp
.live-leaderboard-card::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ------------------------------------------------------------
 * HEADERS — NO DIVIDER LINES OR DECORATIVE FRAMES
 * ------------------------------------------------------------ */

body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-themed-section
:is(
    .live-card-header,
    .live-mini-section-head,
    .live-visitors-head,
    .mix365-live-extras-head,
    .mix365-trackid-nowplaying__head
) {
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    clip-path: none !important;
}

body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-themed-section
:is(
    .live-card-header,
    .live-mini-section-head,
    .live-visitors-head,
    .mix365-live-extras-head,
    .mix365-trackid-nowplaying__head
)::before,
body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-themed-section
:is(
    .live-card-header,
    .live-mini-section-head,
    .live-visitors-head,
    .mix365-live-extras-head,
    .mix365-trackid-nowplaying__head
)::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ------------------------------------------------------------
 * VISITORS / STATS — NO RED BOTTOM LINE
 * ------------------------------------------------------------ */

body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-themed-section:has(#liveVisitorsMount),
body.mix365-native-live-active
#mix365LiveNativeApp
#liveVisitorsMount,
body.mix365-native-live-active
#mix365LiveNativeApp
.live-visitors-head,
body.mix365-native-live-active
#mix365LiveNativeApp
.live-visitors-grid,
body.mix365-native-live-active
#mix365LiveNativeApp
.live-visitors-empty {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-themed-section:has(#liveVisitorsMount)::before,
body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-themed-section:has(#liveVisitorsMount)::after,
body.mix365-native-live-active
#mix365LiveNativeApp
#liveVisitorsMount::before,
body.mix365-native-live-active
#mix365LiveNativeApp
#liveVisitorsMount::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ------------------------------------------------------------
 * EFFECT LAYERS — TRANSPARENT CANVAS, NO RECTANGULAR OVERLAYS
 * ------------------------------------------------------------ */

body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-row-effects,
body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-row-effects__canvas {
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-row-effects__glow,
body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-row-effects__scanlines,
body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-row-effects__vignette {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* ------------------------------------------------------------
 * PLAYER AND CHAT — NO OUTER FRAME, DARK USABLE SURFACE
 * ------------------------------------------------------------ */

body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-themed-section
.live-player-card,
body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-themed-section
.live-chat-card {
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-themed-section
.live-player-wrap,
body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-themed-section
.live-chat-mount {
    background: rgba(2, 3, 4, 0.88) !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.26) !important;
}

/* ------------------------------------------------------------
 * CONSISTENT SPACING
 * ------------------------------------------------------------ */

body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-themed-section {
    margin-bottom: clamp(34px, 4vw, 64px) !important;
    padding-top: clamp(10px, 1.3vw, 18px) !important;
    padding-bottom: clamp(12px, 1.6vw, 22px) !important;
}

body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-themed-section
.live-card {
    padding-top: clamp(12px, 1.2vw, 18px) !important;
    padding-bottom: clamp(12px, 1.2vw, 18px) !important;
}

body.mix365-native-live-active
#mix365LiveNativeApp
.mix365-live-themed-section
:is(.live-player-card, .live-chat-card) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

@media (max-width: 991.98px) {
    body.mix365-native-live-active
    #mix365LiveNativeApp
    .mix365-live-themed-section {
        margin-bottom: 30px !important;
        padding-top: 8px !important;
        padding-bottom: 14px !important;
    }

    body.mix365-native-live-active
    #mix365LiveNativeApp
    .mix365-live-themed-section
    .live-card {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}

@media (max-width: 640px) {
    body.mix365-native-live-active
    #mix365LiveHero
    .mix365-glitch-title {
        font-size: clamp(38px, 14vw, 68px) !important;
        letter-spacing: -0.04em !important;
    }

    body.mix365-native-live-active
    #mix365LiveHero
    .mix365-title-frame {
        gap: 14px !important;
    }

    body.mix365-native-live-active
    #mix365LiveHero
    .mix365-frame-edge {
        width: clamp(20px, 8vw, 38px) !important;
        height: clamp(46px, 14vw, 68px) !important;
    }
}

/* MIX365_LIVE_FINAL_VISUAL_RESTORE_END */

/* MIX365_LIVE_SUBTLE_COLOUR_LINE_GLITCH_START */

/*
 * Subtle heading glitch:
 * - one short burst roughly every seven seconds
 * - only one or two pixels of movement
 * - visible red and cyan scan lines through the text
 * - CSS only; no JavaScript or DOM class required
 */

body.mix365-native-live-active
#mix365LiveHero
.mix365-glitch-title,

body.mix365-native-live-active
#mix365LiveNativeApp
:is(
    h2,
    h3,
    h4,
    h5,
    .top-title,
    .live-card-title,
    .mobile-stats-overlay-title,
    .mix365-live-admin-title,
    .mix365-live-admin-section-title,
    .mix365-cleanchat-locks-title,
    .live-genres-label,
    .live-support-label,
    .mix365-trackid-nowplaying__label,
    .live-visitors-title,
    .mix365-live-extras-title
) {
    position: relative !important;
    display: inline-block !important;
    isolation: isolate;
    overflow: visible !important;

    transform-origin: left center;

    text-shadow:
        1px 0 0 rgba(255, 22, 79, 0.28),
        -1px 0 0 rgba(99, 230, 255, 0.10)
        !important;

    animation:
        mix365SubtleHeadingGlitch
        7.2s
        steps(1, end)
        infinite
        !important;
}

/*
 * Two actual colour lines. These are empty pseudo-elements, so
 * they do not depend on copied text or data attributes.
 */

body.mix365-native-live-active
#mix365LiveHero
.mix365-glitch-title::before,

body.mix365-native-live-active
#mix365LiveNativeApp
:is(
    h2,
    h3,
    h4,
    h5,
    .top-title,
    .live-card-title,
    .mobile-stats-overlay-title,
    .mix365-live-admin-title,
    .mix365-live-admin-section-title,
    .mix365-cleanchat-locks-title,
    .live-genres-label,
    .live-support-label,
    .mix365-trackid-nowplaying__label,
    .live-visitors-title,
    .mix365-live-extras-title
)::before {
    content: "" !important;

    position: absolute;
    z-index: 5;

    left: -4%;
    right: -4%;
    top: 34%;

    height: 2px;

    pointer-events: none;

    opacity: 0;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            transparent 7%,
            rgba(255, 22, 79, 0.96) 20%,
            rgba(255, 22, 79, 0.96) 47%,
            rgba(99, 230, 255, 0.96) 56%,
            rgba(99, 230, 255, 0.96) 78%,
            transparent 93%,
            transparent 100%
        )
        !important;

    box-shadow:
        0 0 7px rgba(255, 22, 79, 0.54),
        0 0 11px rgba(99, 230, 255, 0.34);

    transform:
        translateX(-22%)
        scaleX(0.25);

    transform-origin:
        center center;

    animation:
        mix365HeadingColourLineOne
        7.2s
        linear
        infinite
        !important;
}

body.mix365-native-live-active
#mix365LiveHero
.mix365-glitch-title::after,

body.mix365-native-live-active
#mix365LiveNativeApp
:is(
    h2,
    h3,
    h4,
    h5,
    .top-title,
    .live-card-title,
    .mobile-stats-overlay-title,
    .mix365-live-admin-title,
    .mix365-live-admin-section-title,
    .mix365-cleanchat-locks-title,
    .live-genres-label,
    .live-support-label,
    .mix365-trackid-nowplaying__label,
    .live-visitors-title,
    .mix365-live-extras-title
)::after {
    content: "" !important;

    position: absolute;
    z-index: 5;

    left: -3%;
    right: -3%;
    top: 68%;

    height: 1px;

    pointer-events: none;

    opacity: 0;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(99, 230, 255, 0.94) 16%,
            rgba(99, 230, 255, 0.94) 43%,
            rgba(255, 22, 79, 0.96) 55%,
            rgba(255, 22, 79, 0.96) 82%,
            transparent 100%
        )
        !important;

    box-shadow:
        0 0 6px rgba(99, 230, 255, 0.48),
        0 0 9px rgba(255, 22, 79, 0.26);

    transform:
        translateX(20%)
        scaleX(0.30);

    transform-origin:
        center center;

    animation:
        mix365HeadingColourLineTwo
        7.2s
        linear
        infinite
        !important;
}

/*
 * Stagger a few common headings so the whole page does not
 * glitch at exactly the same moment.
 */

body.mix365-native-live-active
#mix365LiveNativeApp
.top-title,
body.mix365-native-live-active
#mix365LiveNativeApp
.top-title::before,
body.mix365-native-live-active
#mix365LiveNativeApp
.top-title::after {
    animation-delay: -1.1s !important;
}

body.mix365-native-live-active
#mix365LiveNativeApp
.live-card-title,
body.mix365-native-live-active
#mix365LiveNativeApp
.live-card-title::before,
body.mix365-native-live-active
#mix365LiveNativeApp
.live-card-title::after {
    animation-delay: -2.7s !important;
}

body.mix365-native-live-active
#mix365LiveNativeApp
:is(
    .live-genres-label,
    .live-support-label,
    .live-visitors-title,
    .mix365-live-extras-title
),
body.mix365-native-live-active
#mix365LiveNativeApp
:is(
    .live-genres-label,
    .live-support-label,
    .live-visitors-title,
    .mix365-live-extras-title
)::before,
body.mix365-native-live-active
#mix365LiveNativeApp
:is(
    .live-genres-label,
    .live-support-label,
    .live-visitors-title,
    .mix365-live-extras-title
)::after {
    animation-delay: -4.3s !important;
}

/*
 * Calm for most of the cycle. The visible burst lasts for only
 * about 0.35 seconds.
 */

@keyframes mix365SubtleHeadingGlitch {
    0%,
    76%,
    81%,
    100% {
        transform: translate3d(0, 0, 0) skewX(0);
        filter: none;

        text-shadow:
            1px 0 0 rgba(255, 22, 79, 0.28),
            -1px 0 0 rgba(99, 230, 255, 0.10);
    }

    77% {
        transform:
            translate3d(-1px, 0, 0)
            skewX(-0.45deg);

        text-shadow:
            3px 0 0 rgba(255, 22, 79, 0.72),
            -2px 0 0 rgba(99, 230, 255, 0.55);

        filter:
            contrast(1.08);
    }

    78% {
        transform:
            translate3d(2px, 0, 0)
            skewX(0.35deg);

        text-shadow:
            -3px 0 0 rgba(255, 22, 79, 0.66),
            2px 0 0 rgba(99, 230, 255, 0.60);

        filter:
            brightness(1.08);
    }

    79% {
        transform:
            translate3d(-1px, 0, 0);

        text-shadow:
            2px 0 0 rgba(255, 22, 79, 0.58),
            -2px 0 0 rgba(99, 230, 255, 0.44);

        filter:
            none;
    }
}

@keyframes mix365HeadingColourLineOne {
    0%,
    75.5%,
    81.5%,
    100% {
        opacity: 0;

        transform:
            translateX(-22%)
            scaleX(0.25);
    }

    76.6% {
        opacity: 0.92;

        transform:
            translateX(-7%)
            scaleX(0.72);
    }

    77.8% {
        opacity: 1;

        transform:
            translateX(1%)
            scaleX(1);
    }

    79.2% {
        opacity: 0.84;

        transform:
            translateX(7%)
            scaleX(0.82);
    }

    80.4% {
        opacity: 0;

        transform:
            translateX(18%)
            scaleX(0.36);
    }
}

@keyframes mix365HeadingColourLineTwo {
    0%,
    76.2%,
    82%,
    100% {
        opacity: 0;

        transform:
            translateX(20%)
            scaleX(0.30);
    }

    77.2% {
        opacity: 0.76;

        transform:
            translateX(8%)
            scaleX(0.68);
    }

    78.6% {
        opacity: 0.96;

        transform:
            translateX(-1%)
            scaleX(1);
    }

    80% {
        opacity: 0.72;

        transform:
            translateX(-8%)
            scaleX(0.76);
    }

    81.2% {
        opacity: 0;

        transform:
            translateX(-18%)
            scaleX(0.32);
    }
}

/*
 * The larger hero gets slightly thicker scan lines.
 */

body.mix365-native-live-active
#mix365LiveHero
.mix365-glitch-title::before {
    height: 3px;
}

body.mix365-native-live-active
#mix365LiveHero
.mix365-glitch-title::after {
    height: 2px;
}

/*
 * Immediate preview when hovering over a heading.
 */

body.mix365-native-live-active
#mix365LiveHero
.mix365-glitch-title:hover::before,

body.mix365-native-live-active
#mix365LiveNativeApp
:is(
    h2,
    h3,
    h4,
    h5,
    .top-title,
    .live-card-title,
    .live-genres-label,
    .live-support-label,
    .live-visitors-title,
    .mix365-live-extras-title
):hover::before {
    opacity: 1 !important;

    transform:
        translateX(0)
        scaleX(1)
        !important;
}

body.mix365-native-live-active
#mix365LiveHero
.mix365-glitch-title:hover::after,

body.mix365-native-live-active
#mix365LiveNativeApp
:is(
    h2,
    h3,
    h4,
    h5,
    .top-title,
    .live-card-title,
    .live-genres-label,
    .live-support-label,
    .live-visitors-title,
    .mix365-live-extras-title
):hover::after {
    opacity: 0.90 !important;

    transform:
        translateX(0)
        scaleX(1)
        !important;
}

@media (prefers-reduced-motion: reduce) {
    body.mix365-native-live-active
    #mix365LiveHero
    .mix365-glitch-title,

    body.mix365-native-live-active
    #mix365LiveHero
    .mix365-glitch-title::before,

    body.mix365-native-live-active
    #mix365LiveHero
    .mix365-glitch-title::after,

    body.mix365-native-live-active
    #mix365LiveNativeApp
    :is(
        h2,
        h3,
        h4,
        h5,
        .top-title,
        .live-card-title,
        .mobile-stats-overlay-title,
        .mix365-live-admin-title,
        .mix365-live-admin-section-title,
        .mix365-cleanchat-locks-title,
        .live-genres-label,
        .live-support-label,
        .mix365-trackid-nowplaying__label,
        .live-visitors-title,
        .mix365-live-extras-title
    ),

    body.mix365-native-live-active
    #mix365LiveNativeApp
    :is(
        h2,
        h3,
        h4,
        h5,
        .top-title,
        .live-card-title,
        .mobile-stats-overlay-title,
        .mix365-live-admin-title,
        .mix365-live-admin-section-title,
        .mix365-cleanchat-locks-title,
        .live-genres-label,
        .live-support-label,
        .mix365-trackid-nowplaying__label,
        .live-visitors-title,
        .mix365-live-extras-title
    )::before,

    body.mix365-native-live-active
    #mix365LiveNativeApp
    :is(
        h2,
        h3,
        h4,
        h5,
        .top-title,
        .live-card-title,
        .mobile-stats-overlay-title,
        .mix365-live-admin-title,
        .mix365-live-admin-section-title,
        .mix365-cleanchat-locks-title,
        .live-genres-label,
        .live-support-label,
        .mix365-trackid-nowplaying__label,
        .live-visitors-title,
        .mix365-live-extras-title
    )::after {
        animation: none !important;
    }
}

/* MIX365_LIVE_SUBTLE_COLOUR_LINE_GLITCH_END */