/* ==================================================
   FLATLAND RADIO
================================================== */


/* ==================================================
   PAGE
================================================== */

html,
body {
    margin: 0;
    padding: 0;
    background: #141219;
}


.radio-page {
    width: min(1000px, var(--page-width));
    margin: 0 auto 80px;
    text-align: center;
}


.radio-page h1 {
    margin: 15px 0 8px;

    color: #b8675a;

    font-family: var(--font-display);

    font-size: clamp(2.7rem, 6vw, 4rem);

    font-weight: 400;

    line-height: 1.1;
}


.radio-intro {
    margin: 0 0 35px;

    color: var(--text-soft);

    font-family: var(--font-mono);

    font-size: .7rem;

    letter-spacing: .08em;

    text-transform: uppercase;
}



/* ==================================================
   RADIO WRAPPER
================================================== */

.radio-wrap {

    
    background-color: #1f1d34;
    position: relative;

    width: 100%;

    display:flex;

    justify-content: center;

    align-items: center;

    border-radius: 2%;
    margin: 20px auto 60px 
}



/* ==================================================
   RADIO UNIT

   container-type makes this unit the measuring
   context for everything inside it: the display
   text below is sized in cqw (percent of the
   chassis width), so on a phone the text shrinks
   with the chassis instead of overflowing it.
================================================== */

.radio-unit {
    position: relative;

    width: min(95vw, 1000px);

    aspect-ratio: 1920 / 1080;

    margin: 0 auto;

    overflow: hidden;

    container-type: inline-size;
}



/* ==================================================
   MAIN SCREEN
================================================== */

.screen {
    position: absolute;

    left: calc(75 / 1900 * 100%);
    top: calc(69 / 1080 * 100%);

    width: calc(1265 / 1800 * 100%);
    height: calc(962 / 1080 * 100%);

    background: black;

    overflow: hidden;

    opacity: 0;

    z-index: 1;

    transition: opacity .1s;

    box-shadow:
        0 0 20px rgba(0, 255, 120, .25),
        inset 0 0 30px rgba(0, 0, 0, .8);
}


.screen.on {
    opacity: 1;

    animation: crtBoot .5s ease;
}



/* ==================================================
   VIDEOS
================================================== */

.screen video {
    position: absolute;

    left: 0;
    top: 0;

    width: 99%;
    height: 100%;

    display: block;

    object-fit: cover;

    opacity: 0;
}


.screen video.active {
    opacity: 1;
}

/* ==================================================
   RETUNE GHOST FRAME
================================================== */

.ghost-frame {
    position: absolute;

    left: 0;
    top: 0;

    width: 99%;
    height: 100%;

    object-fit: cover;

    opacity: 0;

    pointer-events: none;

    z-index: 1;

    filter:
        brightness(.65)
        contrast(.9)
        saturate(.65);

    transition: opacity .25s ease;
}


.ghost-frame.visible {
    opacity: .5;
}


/* ==================================================
   CRT SCANLINES
================================================== */

.screen::after {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255, 255, 255, .04),
            rgba(255, 255, 255, .04) 1px,
            transparent 2px,
            transparent 4px
        );

    mix-blend-mode: overlay;

    z-index: 2;
}



/* ==================================================
   CRT BOOT
================================================== */

@keyframes crtBoot {

    0% {
        transform: scaleY(.05);
        filter: brightness(3);
    }

    50% {
        transform: scaleY(1.05);
    }

    100% {
        transform: scaleY(1);
        filter: brightness(1);
    }

}



/* ==================================================
   SCREEN FLICKER
================================================== */

.screen.flicker {
    animation: screenFlicker .15s linear 4;
}


@keyframes screenFlicker {

    0% {
        opacity: 1;
    }

    20% {
        opacity: .5;
    }

    40% {
        opacity: 1;
    }

    60% {
        opacity: .8;
    }

    100% {
        opacity: 1;
    }

}



/* ==================================================
   CHASSIS
================================================== */

.radio-unit > .radio-frame {
    position: absolute !important;

    left: 0 !important;
    top: 0 !important;

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

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

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

    display: block !important;

    object-fit: fill !important;

    z-index: 3 !important;

    pointer-events: none;
}



/* ==================================================
   DIGITAL DISPLAY
================================================== */

.digital-display {
    position: absolute;

    left: calc(1454 / 1920 * 100%);
    top: calc(85 / 1080 * 100%);

    width: calc(350 / 1920 * 100%);
    height: calc(250 / 1080 * 100%);

    overflow: hidden;

    background: #050505;

    z-index: 7;

    pointer-events: none;

    opacity: 0;

    transition: opacity .15s ease;
}


.digital-display.on {
    opacity: 1;
}



/* ==================================================
   DIGITAL DISPLAY CONTENT
================================================== */

.display-content {
    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    font-family: var(--font-mono);

    color: #9fb85a;

    text-shadow:
        0 0 3px rgba(170, 210, 80, .8),
        0 0 8px rgba(170, 210, 80, .45);

    pointer-events: none;

    z-index: 8;
}



/* ==================================================
   DISPLAY TITLE
================================================== */

.display-title {
    margin-bottom: -2cqw;

    font-size: 1cqw;

    line-height: 1.2;

    letter-spacing: .1em;

    opacity: .75;
}



/* ==================================================
   DISPLAY CODE
================================================== */

.display-code {
    min-height: 5.5cqw;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.5cqw;

    line-height: 1;

    letter-spacing: .18em;

    white-space: nowrap;

    text-shadow:
        0 0 4px rgba(170, 210, 80, .9),
        0 0 12px rgba(170, 210, 80, .5);
}



/* ==================================================
   DISPLAY STATUS
================================================== */

.display-status {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 1.2cqw;

    margin-top: 1cqw;

    font-size: 1.2cqw;

    line-height: 1;

    opacity: .5;
}


.display-status span {
    display: inline-block;

    min-width: 1.3cqw;

    transition:
        opacity .15s ease,
        transform .15s ease;
}



/* ==================================================
   DISPLAY SIGNAL
================================================== */

.display-signal {
    margin-top: -2cqw;

    margin-bottom: 1cqw;

    margin-left: 1cqw;

    margin-right: 1cqw;

    font-size: 1cqw;

    letter-spacing: .15em;

    opacity: .35;
}



/* ==================================================
   TUNING ANIMATION
================================================== */

.digital-display.tuning .display-code {
    animation:
        displayFlicker .12s linear infinite;
}


.digital-display.tuning .display-title {
    opacity: .45;
}


.digital-display.tuning .display-signal {
    animation:
        signalFlicker .18s steps(2, end) infinite;
}


@keyframes displayFlicker {

    0% {
        opacity: .65;
        transform: translateX(-1px);
    }

    50% {
        opacity: 1;
        transform: translateX(1px);
    }

    100% {
        opacity: .8;
        transform: translateX(0);
    }

}


@keyframes signalFlicker {

    0% {
        opacity: .2;
    }

    50% {
        opacity: .8;
    }

    100% {
        opacity: .35;
    }

}



/* ==================================================
   DISPLAY LOCK
================================================== */

.digital-display.locked .display-code {
    animation: displayLock .25s ease-out;
}


@keyframes displayLock {

    0% {
        opacity: .2;

        transform:
            scaleX(1.08);
    }

    50% {
        opacity: 1;

        transform:
            scaleX(.96);
    }

    100% {
        opacity: 1;

        transform:
            scaleX(1);
    }

}



/* ==================================================
   DIGITAL DISPLAY GLASS - TOP
================================================== */

.display-glass {
    position: absolute;

    left: calc(1445 / 1920 * 100%);
    top: calc(69 / 1080 * 100%);

    width: calc(368 / 1920 * 100%);
    height: calc(290 / 1080 * 100%);

    z-index: 5;

    opacity: 1;

    pointer-events: none;
}



/* ==================================================
   DIGITAL DISPLAY GLASS - BOTTOM
================================================== */

.display-glass-bottom {
    position: absolute;

    left: calc(1430 / 1920 * 100%);
    top: calc(602 / 1080 * 100%);

    width: calc(376/ 1490 * 100%);
    height: calc(470 / 1080 * 100%);

    z-index: 5;

    opacity: 1;

    pointer-events: none;
}



/* ==================================================
   POWER BUTTON
================================================== */

.button {
    position: absolute;

    left: calc(1434 / 1920 * 100%);
    top: calc(355 / 1080 * 100%);

    width: calc(144 / 1920 * 100%);
    height: calc(77 / 1080 * 100%);

    display: block;

    cursor: pointer;

    z-index: 8;
}



/* ==================================================
   BUTTON PRESS EFFECT
================================================== */

.button.pressed,
.button-2.pressed,
.button-3.pressed,
.button-4.pressed {
    transform:
        translateY(3px)
        scale(.96);

    filter:
        brightness(.7)
        drop-shadow(
            0 0 20px rgba(255, 90, 150, .9)
        );
}



/* ==================================================
   OTHER BUTTONS
================================================== */

.button-2 {
    top: calc(437 / 1080 * 100%);
}


.button-3 {
    top: calc(514 / 1080 * 100%);
}


.button-4 {
    top: calc(591 / 1080 * 100%);
}


.button-2,
.button-3,
.button-4 {
    cursor: pointer;
}



/* ==================================================
   MAIN SCREEN GLASS / SCRATCH
================================================== */

.scratch-layer {
    position: absolute;

    left: calc(77 / 1920 * 100%);
    top: calc(69 / 1080 * 100%);

    width: calc(1746 / 1920 * 100%);
    height: calc(966 / 1080 * 100%);

    z-index: 6;

    pointer-events: none;

    opacity: 75%;

    mix-blend-mode: color-burn;
}



/* ==================================================
   MOBILE
================================================== */

@media (max-width: 600px) {

    .radio-page {
        margin-bottom: 50px;
    }


    .radio-intro {
        padding: 0 15px;
    }


    .radio-unit {
        width: 95vw;
    }

}

/* ==================================================
   BOTTOM INFORMATION DISPLAY
================================================== */

.bottom-display {
    position: absolute;

    left: calc(1450 / 1920 * 100%);
    top: calc(670 / 1080 * 100%);

    width: calc(290 / 1490 * 100%);
    height: calc(470 / 1080 * 100%);

    z-index: 6;

    overflow: hidden;

    pointer-events: none;

    color: #9fb85a;

    font-family: var(--font-mono);

    text-shadow:
        0 0 3px rgba(170, 210, 80, .8),
        0 0 8px rgba(170, 210, 80, .45);

    opacity: 0;

    transition: opacity .2s ease;
}


.digital-display.on ~ .bottom-display {
    opacity: 1;
}


/* --------------------------------------------------
   FIXED INFORMATION
-------------------------------------------------- */

.bottom-display-fixed {
    position: absolute;

    left: 8%;
    right: 8%;
    top: 8%;

    text-align: left;

    line-height: 1.25;
}


.bottom-channel {
    margin-bottom: 0.8cqw;

    font-size: 1.1cqw;

    letter-spacing: .18em;

    opacity: .55;
}


.bottom-title {
    margin-bottom: 0.6cqw;

    font-size: 1.5cqw;

    line-height: 1.15;

    letter-spacing: .08em;

    text-transform: uppercase;
}


.bottom-artist {
    font-size: 1.1cqw;

    letter-spacing: .1em;

    opacity: .75;
}


.bottom-date {
    margin-top: 0.3cqw;

    font-size: 0.9cqw;

    letter-spacing: .12em;

    opacity: .5;
}


/* --------------------------------------------------
   DIVIDER
-------------------------------------------------- */

.bottom-display-fixed::after {
    content: "";

    display: block;

    width: 100%;

    margin-top: 1.2cqw;

    border-top:
        1px solid rgba(159, 184, 90, .25);
}


/* --------------------------------------------------
   SCROLLING TICKER
-------------------------------------------------- */

.bottom-ticker {
    position: absolute;

    top:50%;
    left: 1.5cqw;
    right: 1.5cqw;

    bottom: 5%;

    overflow: hidden;

    white-space: nowrap;

    border-top:
        1px solid rgba(159, 184, 90, .15);

    border-bottom:
        1px solid rgba(159, 184, 90, .15);

    padding: 0.6cqw 0;
}


.bottom-ticker-track {
    display: inline-block;

    padding-left: 100%;

    font-size: 1.4cqw;

    letter-spacing: .12em;

    opacity: .7;

    animation:
        bottomTickerScroll
        22s linear infinite;
}


@keyframes bottomTickerScroll {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }

}