/* ============================================================
   MILE ZERO BROADCAST GRAPHICS
   V5.1 — REFINED BROADCAST LOOK
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');

:root {
    --blue: #2143BE;
    --blue-light: #4566E1;
    --purple: #5135B9;

    --show-colour: #2143BE;
    --show-colour-soft: rgba(33, 67, 190, 0.22);

    --black: #08090D;
    --panel: rgba(27, 28, 34, 0.94);
    --panel-soft: rgba(38, 39, 46, 0.82);

    --white: #FFFFFF;
    --muted: rgba(255,255,255,0.66);
    --faint: rgba(255,255,255,0.40);

    --red: #FF3D5A;
    --green: #36D98A;

    --radius: 17px;

    --font:
        "Montserrat",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;
}


/* ============================================================
   RESET
   ============================================================ */

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;

    overflow: hidden;

    background: transparent;

    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

body {
    color: var(--white);
}

.overlay {
    position: relative;

    width: 100vw;
    height: 100vh;

    overflow: hidden;
}

.graphic {
    pointer-events: none;
}


/* ============================================================
   STANDARD LOWER THIRD
   ============================================================ */

.lower-third {
    position: absolute;

    left: 48px;
    bottom: 48px;

    width: 900px;
    height: 136px;

    display: flex;
    align-items: stretch;

    overflow: hidden;

    opacity: 1;

    background:
        linear-gradient(
            105deg,
            rgba(31,32,38,0.97) 0%,
            rgba(43,44,51,0.96) 58%,
            rgba(34,35,42,0.96) 100%
        );

    border: 1px solid rgba(255,255,255,0.11);
    border-radius: var(--radius);

    box-shadow:
        0 24px 55px rgba(0,0,0,0.34),
        0 6px 18px rgba(0,0,0,0.25);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    transform: translateX(0);

    transition:
        opacity 0.2s ease,
        box-shadow 0.25s ease;
}


/* Fine blue edge */

.accent-line {
    position: absolute;

    left: 0;
    top: 16px;
    bottom: 16px;

    width: 3px;

    border-radius: 0 3px 3px 0;

    background:
        linear-gradient(
            180deg,
            var(--show-colour),
            var(--blue-light),
            var(--purple)
        );

    box-shadow:
        0 0 16px var(--show-colour-soft);
}


/* ============================================================
   SONG CHANGE
   ============================================================ */

.lower-third.song-changing {
    animation:
        song-slide-out
        0.40s
        cubic-bezier(.65,0,.35,1)
        forwards;
}

.lower-third.song-returning {
    animation:
        song-slide-in
        0.50s
        cubic-bezier(.22,1,.36,1)
        forwards;
}

@keyframes song-slide-out {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(-115vw);
        opacity: 0;
    }
}

@keyframes song-slide-in {
    from {
        transform: translateX(115vw);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}


/* ============================================================
   BRAND
   ============================================================ */

.brand {
    flex: 0 0 108px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 12px;
}

.brand img {
    width: 76px;
    max-height: 54px;

    object-fit: contain;
}


/* ============================================================
   LIVE / PRESENTER
   ============================================================ */

.live-block {
    flex: 0 0 150px;

    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 0 17px;

    border-left: 1px solid rgba(255,255,255,0.055);
    border-right: 1px solid rgba(255,255,255,0.055);
}

.live-status {
    display: flex;
    align-items: center;

    gap: 7px;

    margin-bottom: 7px;

    color: rgba(255,255,255,0.62);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.9px;
    text-transform: uppercase;
}

.live-dot {
    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;

    background: var(--red);

    box-shadow:
        0 0 9px rgba(255,61,90,0.7);

    animation:
        live-pulse
        1.5s
        ease-in-out
        infinite;
}

@keyframes live-pulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .45;
        transform: scale(.78);
    }
}

.lower-third.autodj .live-dot {
    background: var(--show-colour);

    box-shadow:
        0 0 10px var(--show-colour-soft);
}

.lower-third.autodj .live-status {
    color: rgba(255,255,255,0.55);
}

.lower-third.offline .live-dot {
    background: rgba(255,255,255,0.25);

    box-shadow: none;

    animation: none;
}

.lower-third.offline .live-status {
    color: rgba(255,255,255,0.35);
}

.presenter {
    color: var(--white);

    font-size: 15px;
    font-weight: 800;

    line-height: 1.15;

    white-space: nowrap;

    overflow: hidden;
    text-overflow: ellipsis;
}

.co-presenter {
    margin-top: 5px;

    color: rgba(255,255,255,0.43);

    font-size: 9px;
    font-weight: 600;

    white-space: nowrap;

    overflow: hidden;
    text-overflow: ellipsis;
}


/* ============================================================
   NOW PLAYING
   ============================================================ */

.now-playing {
    flex: 0 0 390px;

    min-width: 0;

    display: flex;
    align-items: center;

    gap: 14px;

    padding: 0 16px;
}

.track-art {
    width: 92px;
    height: 92px;

    flex: 0 0 92px;

    object-fit: cover;

    border-radius: 12px;

    background: #111217;

    box-shadow:
        0 9px 20px rgba(0,0,0,0.25);
}

.now-playing-info {
    min-width: 0;

    flex: 1;
}

.section-label {
    margin-bottom: 6px;

    color: var(--show-colour);

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 2px;
    line-height: 1;

    text-transform: uppercase;
}

.track-title {
    display: -webkit-box;

    overflow: hidden;

    color: var(--white);

    font-size: 17px;
    font-weight: 800;

    line-height: 1.12;

    letter-spacing: -0.25px;

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.track-artist {
    margin-top: 5px;

    color: rgba(255,255,255,0.60);

    font-size: 11px;
    font-weight: 500;

    line-height: 1.2;

    white-space: nowrap;

    overflow: hidden;
    text-overflow: ellipsis;
}


/* ============================================================
   NEXT SHOW
   ============================================================ */

.next-show {
    flex: 1;

    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 0 18px;

    border-left: 1px solid rgba(255,255,255,0.055);
}

.next-time {
    margin-bottom: 5px;

    color: rgba(255,255,255,0.42);

    font-size: 8px;
    font-weight: 600;

    line-height: 1.2;

    white-space: nowrap;
}

.next-title {
    display: -webkit-box;

    overflow: hidden;

    color: var(--white);

    font-size: 14px;
    font-weight: 800;

    line-height: 1.14;

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.next-presenter {
    margin-top: 5px;

    color: rgba(255,255,255,0.40);

    font-size: 9px;
    font-weight: 500;

    white-space: nowrap;

    overflow: hidden;
    text-overflow: ellipsis;
}


/* ============================================================
   SHOW CHANGE TAKEOVER
   ============================================================ */

.show-change-graphic {
    position: absolute;

    inset: 0;

    z-index: 100;

    overflow: hidden;

    opacity: 0;
    visibility: hidden;
}

.show-change-background {
    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 72% 42%,
            var(--show-colour-soft),
            transparent 40%
        ),
        radial-gradient(
            circle at 22% 70%,
            rgba(81,53,185,0.18),
            transparent 42%
        ),
        linear-gradient(
            135deg,
            #07080D 0%,
            #0D101B 50%,
            #111525 100%
        );

    opacity: 1;
}

.show-change-background::after {
    content: "";

    position: absolute;
    inset: 0;

    background: rgba(5,6,10,0.38);
}

.show-change-content {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 1100px;
    max-width: calc(100vw - 120px);

    transform:
        translate(
            115vw,
            -50%
        );
}


/* ============================================================
   SHOW CHANGE CONTENT
   ============================================================ */

.show-change-brand {
    margin-bottom: 48px;
}

.show-change-brand img {
    width: 155px;
    max-height: 70px;

    object-fit: contain;
}

.show-change-eyebrow {
    margin-bottom: 18px;

    color: var(--show-colour);

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 3px;

    text-transform: uppercase;
}

.show-change-main {
    display: flex;
    align-items: center;

    gap: 42px;
}

.show-change-art-wrap {
    width: 270px;
    height: 270px;

    flex: 0 0 270px;

    padding: 2px;

    overflow: hidden;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            var(--show-colour),
            var(--purple)
        );

    box-shadow:
        0 25px 70px rgba(0,0,0,0.45);
}

.show-change-art {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    border-radius: 16px;

    background: #08090C;
}

.show-change-info {
    min-width: 0;
}

.show-change-title {
    max-width: 700px;

    color: var(--white);

    font-size: 68px;
    font-weight: 900;

    line-height: .96;

    letter-spacing: -3px;
}

.show-change-presenter {
    margin-top: 22px;

    color: rgba(255,255,255,0.76);

    font-size: 23px;
    font-weight: 600;
}

.show-change-co {
    margin-top: 7px;

    color: rgba(255,255,255,0.43);

    font-size: 15px;
    font-weight: 500;
}

.show-change-footer {
    display: flex;
    justify-content: space-between;

    margin-top: 65px;

    padding-top: 14px;

    border-top: 1px solid rgba(255,255,255,0.08);

    color: rgba(255,255,255,0.34);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}


/* ============================================================
   SHOW CHANGE ANIMATION
   ============================================================ */

.show-change-graphic.show-changing {
    opacity: 1;
    visibility: visible;
}

.show-change-graphic.show-changing
.show-change-content {
    animation:
        show-in
        0.65s
        cubic-bezier(.22,1,.36,1)
        forwards;
}

.show-change-graphic.show-leaving {
    opacity: 1;
    visibility: visible;
}

.show-change-graphic.show-leaving
.show-change-content {
    animation:
        show-out
        0.50s
        cubic-bezier(.65,0,.35,1)
        forwards;
}

@keyframes show-in {
    from {
        transform:
            translate(
                115vw,
                -50%
            );
    }

    to {
        transform:
            translate(
                -50%,
                -50%
            );
    }
}

@keyframes show-out {
    from {
        transform:
            translate(
                -50%,
                -50%
            );
    }

    to {
        transform:
            translate(
                -115vw,
                -50%
            );
    }
}


/* ============================================================
   FULL-SCREEN GRAPHICS
   ============================================================ */

.full-graphic {
    position: absolute;

    inset: 0;

    z-index: 80;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    visibility: hidden;
    opacity: 0;

    background:
        radial-gradient(
            circle at 72% 32%,
            var(--show-colour-soft),
            transparent 42%
        ),
        radial-gradient(
            circle at 20% 80%,
            rgba(81,53,185,0.15),
            transparent 40%
        ),
        linear-gradient(
            135deg,
            #08090D,
            #10121B
        );
}

.full-graphic::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(8,9,13,0.72),
            transparent 55%
        );

    pointer-events: none;
}

.full-graphic-glow {
    position: absolute;

    width: 700px;
    height: 700px;

    right: -180px;
    top: -160px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            var(--show-colour-soft),
            transparent 68%
        );

    filter: blur(20px);
}

.full-graphic-content {
    position: relative;

    z-index: 2;

    width: 1120px;
    max-width: calc(100vw - 120px);
}

.full-brand {
    margin-bottom: 38px;
}

.full-brand img {
    width: 150px;
    max-height: 70px;

    object-fit: contain;
}

.full-eyebrow {
    margin-bottom: 20px;

    color: var(--show-colour);

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 3px;

    text-transform: uppercase;
}


/* ============================================================
   FULL NOW PLAYING
   ============================================================ */

.full-track {
    display: flex;
    align-items: center;

    gap: 40px;
}

.full-art {
    width: 330px;
    height: 330px;

    flex: 0 0 330px;

    object-fit: cover;

    border-radius: 22px;

    background: #0B0C10;

    box-shadow:
        0 30px 80px rgba(0,0,0,0.42);
}

.full-track-info {
    min-width: 0;
}

.full-title {
    color: var(--white);

    font-size: clamp(42px, 5vw, 76px);
    font-weight: 900;

    line-height: .98;

    letter-spacing: -3px;
}

.full-artist {
    margin-top: 16px;

    color: rgba(255,255,255,0.66);

    font-size: 24px;
    font-weight: 500;
}

.full-presenter {
    margin-top: 28px;

    color: rgba(255,255,255,0.42);

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


/* ============================================================
   FULL NEXT
   ============================================================ */

.full-next-time {
    margin-bottom: 14px;

    color: rgba(255,255,255,0.48);

    font-size: 16px;
    font-weight: 600;
}

.full-next-title {
    max-width: 900px;

    color: var(--white);

    font-size: clamp(50px, 6vw, 88px);
    font-weight: 900;

    line-height: .95;

    letter-spacing: -4px;
}

.full-next-presenter {
    margin-top: 25px;

    color: rgba(255,255,255,0.55);

    font-size: 19px;
    font-weight: 500;
}


/* ============================================================
   FULL PRESENTER
   ============================================================ */

.presenter-full-layout {
    display: flex;
    align-items: center;

    gap: 42px;
}

.full-presenter-art {
    width: 260px;
    height: 260px;

    flex: 0 0 260px;

    object-fit: cover;

    border-radius: 50%;

    background: #0B0C10;

    box-shadow:
        0 25px 70px rgba(0,0,0,0.4);
}

.presenter-full-info {
    min-width: 0;
}

.full-presenter-name {
    color: var(--white);

    font-size: clamp(44px, 5vw, 74px);
    font-weight: 900;

    line-height: .95;

    letter-spacing: -3px;
}

.full-co-presenter-name {
    margin-top: 13px;

    color: rgba(255,255,255,0.48);

    font-size: 20px;
    font-weight: 500;
}

.full-presenter-show {
    margin-top: 25px;

    color: var(--show-colour);

    font-size: 14px;
    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;
}


/* ============================================================
   ANNOUNCEMENT
   ============================================================ */

.announcement-content {
    text-align: left;
}

.announcement-content .full-brand {
    margin-bottom: 70px;
}

.announcement-title {
    max-width: 1050px;

    color: var(--white);

    font-size: clamp(48px, 6vw, 88px);
    font-weight: 900;

    line-height: .95;

    letter-spacing: -4px;
}

.announcement-text {
    max-width: 900px;

    margin-top: 24px;

    color: rgba(255,255,255,0.66);

    font-size: 24px;
    font-weight: 500;

    line-height: 1.35;
}


/* ============================================================
   MANUAL FULL-SCREEN MODES
   ============================================================ */

body.mode-nowplaying #nowPlayingGraphic,
body.mode-next #nextGraphic,
body.mode-presenter #presenterGraphic,
body.mode-announcement #announcementGraphic {
    visibility: visible;
    opacity: 1;
}

body.mode-nowplaying #lowerThird,
body.mode-next #lowerThird,
body.mode-presenter #lowerThird,
body.mode-announcement #lowerThird {
    opacity: 0;
    visibility: hidden;
}

body.mode-nowplaying .full-graphic-content,
body.mode-next .full-graphic-content,
body.mode-presenter .full-graphic-content,
body.mode-announcement .full-graphic-content {
    animation:
        full-graphic-in
        0.45s
        cubic-bezier(.22,1,.36,1)
        both;
}

@keyframes full-graphic-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ============================================================
   SHOW CHANGE TEST MODE
   ============================================================ */

body.mode-showchange #lowerThird {
    opacity: 0;
    visibility: hidden;
}

body.mode-showchange
#showChangeGraphic.show-changing {
    opacity: 1;
    visibility: visible;
}

body.mode-showchange
#showChangeGraphic.show-leaving {
    opacity: 1;
    visibility: visible;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {

    .lower-third {
        left: 32px;
        bottom: 32px;

        width: min(900px, calc(100vw - 64px));
    }

    .now-playing {
        flex-basis: 360px;
    }

    .show-change-content,
    .full-graphic-content {
        max-width: calc(100vw - 80px);
    }
}


@media (max-width: 850px) {

    .lower-third {
        left: 24px;
        bottom: 24px;

        width: calc(100vw - 48px);
        height: 124px;
    }

    .brand {
        flex-basis: 90px;
    }

    .brand img {
        width: 65px;
    }

    .live-block {
        flex-basis: 125px;
        padding: 0 12px;
    }

    .now-playing {
        flex-basis: 330px;
        gap: 11px;
        padding: 0 12px;
    }

    .track-art {
        width: 84px;
        height: 84px;
        flex-basis: 84px;
    }

    .next-show {
        padding: 0 13px;
    }

    .show-change-main {
        gap: 28px;
    }

    .show-change-art-wrap {
        width: 220px;
        height: 220px;
        flex-basis: 220px;
    }

    .show-change-title {
        font-size: 52px;
    }

    .full-art {
        width: 260px;
        height: 260px;
        flex-basis: 260px;
    }

    .full-track {
        gap: 28px;
    }
}


@media (max-width: 650px) {

    .lower-third {
        left: 15px;
        right: 15px;
        bottom: 15px;

        width: calc(100vw - 30px);
        height: 108px;
    }

    .brand {
        flex-basis: 72px;
        padding: 0 8px;
    }

    .brand img {
        width: 55px;
    }

    .live-block {
        flex-basis: 105px;
        padding: 0 10px;
    }

    .presenter {
        font-size: 12px;
    }

    .now-playing {
        flex: 1;
        flex-basis: 0;

        gap: 9px;
        padding: 0 10px;
    }

    .track-art {
        width: 76px;
        height: 76px;
        flex-basis: 76px;

        border-radius: 9px;
    }

    .track-title {
        font-size: 14px;
    }

    .track-artist {
        font-size: 9px;
    }

    .next-show {
        display: none;
    }

    .show-change-content,
    .full-graphic-content {
        max-width: calc(100vw - 40px);
    }

    .show-change-main,
    .full-track,
    .presenter-full-layout {
        flex-direction: column;
        align-items: flex-start;
    }

    .show-change-art-wrap {
        width: 160px;
        height: 160px;
        flex-basis: 160px;
    }

    .show-change-title {
        font-size: 42px;
    }

    .full-art {
        width: 210px;
        height: 210px;
        flex-basis: 210px;
    }

    .full-title,
    .full-next-title,
    .full-presenter-name,
    .announcement-title {
        font-size: 42px;
        letter-spacing: -2px;
    }
}