@font-face {
    font-family: 'Orbitron';
    src: url('/assets/fonts/Orbitron-Bold.ttf') format('truetype');
    font-weight: 700;
}

@font-face {
    font-family: 'Bebas Neue';
    src: url('/assets/fonts/BebasNeue-Regular.ttf') format('truetype');
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    background: #000;
    overflow: hidden;
}

#stage {
    position: relative;
    width: 100vw;
    height: 100vh;
}

#stage {
    background: radial-gradient(ellipse at center, #0a1030 0%, #050818 100%);
}

.frame-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

/* The alert crawl overlays the frame's footer base strip - the bottom
   66px of every rendered frame is kept free of text (crawl-safe zone) */

.frame-layer.visible {
    opacity: 1;
}

/* --- Standby screen --- */
#standby {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    background: radial-gradient(ellipse at center, #1a2d6b 0%, #0a1030 70%, #050818 100%);
    transition: opacity 0.8s ease-in-out;
    z-index: 5;
}

#standby.hidden {
    opacity: 0;
    pointer-events: none;
}

.standby-logo {
    font-family: 'Orbitron', sans-serif;
    font-size: 4.5vw;
    color: #fff;
    letter-spacing: 0.12em;
    text-shadow: 0 0 24px rgba(80, 160, 255, 0.8), 3px 3px 0 #000;
}

.standby-logo .highlight {
    color: #ffd23f;
}

.standby-text {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.6vw;
    color: #7fd4ff;
    letter-spacing: 0.35em;
    animation: blink 1.6s steps(1) infinite;
}

.standby-sub {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.1vw;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.15em;
}

@keyframes blink {
    50% { opacity: 0.15; }
}

/* --- Live clock in the banner (original design: bare cream text,
   right-aligned, no box). Bahnschrift matches the rendered frames. --- */
#clock-bug {
    position: absolute;
    top: 7.8vh;
    right: 16vw;
    text-align: right;
    z-index: 10;
}

#clock-time {
    font-family: 'Bahnschrift', 'D-DIN Condensed', 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-stretch: 87.5%;
    font-size: 5.2vh;
    line-height: 1.05;
    color: #FFF5E6;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.65);
    letter-spacing: 0.05em;
}

#clock-date {
    font-family: 'Bahnschrift', 'D-DIN Condensed', 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-stretch: 87.5%;
    font-size: 4vh;
    line-height: 1.15;
    color: #FFF5E6;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.65);
    letter-spacing: 0.06em;
}

/* --- Severe weather crawl --- */
#alert-crawl {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6.5vh;
    display: flex;
    align-items: stretch;
    background: linear-gradient(to bottom, #c41220 0%, #8f0a14 100%);
    border-top: 3px solid #ffd23f;
    z-index: 15;
}

#alert-crawl.hidden {
    display: none;
}

.crawl-label {
    display: flex;
    align-items: center;
    padding: 0 1.2vw;
    background: #6e050c;
    font-family: 'Orbitron', sans-serif;
    font-size: 2.4vh;
    color: #ffd23f;
    letter-spacing: 0.1em;
    white-space: nowrap;
    text-shadow: 1px 1px 0 #000;
    animation: alert-pulse 1.4s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes alert-pulse {
    50% { color: #fff; }
}

.crawl-track {
    position: relative;
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
}

#crawl-text {
    position: absolute;
    white-space: nowrap;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3.4vh;
    color: #fff;
    letter-spacing: 0.06em;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
    will-change: transform;
}

/* Test hook: ?nofade=1 disables transitions for screenshot verification */
.nofade .frame-layer,
.nofade #standby {
    transition: none;
}

/* --- Temperature ticker (same strip as the crawl; alerts take priority) --- */
#temp-ticker {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6.5vh;
    display: flex;
    align-items: stretch;
    background: linear-gradient(to bottom, #24418f 0%, #16295c 100%);
    border-top: 3px solid rgba(150, 150, 150, 0.9);
    z-index: 14;
}

#temp-ticker.hidden {
    display: none;
}

.ticker-label {
    display: flex;
    align-items: center;
    padding: 0 1.2vw;
    background: #0f1d42;
    font-family: 'Orbitron', sans-serif;
    font-size: 2.2vh;
    color: #ffd23f;
    letter-spacing: 0.1em;
    white-space: nowrap;
    text-shadow: 1px 1px 0 #000;
    flex-shrink: 0;
}

#ticker-text {
    position: absolute;
    white-space: nowrap;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3.4vh;
    color: #fff;
    letter-spacing: 0.08em;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
    will-change: transform;
}

#ticker-text .ticker-temp {
    color: #ffd23f;
}

/* --- CRT / retro broadcast effects --- */
#crt {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 20;
    background:
        radial-gradient(ellipse at center, rgba(0,0,0,0) 62%, rgba(0,0,0,0.28) 100%),
        repeating-linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 0px,
            rgba(0, 0, 0, 0) 2px,
            rgba(0, 0, 0, 0.09) 3px,
            rgba(0, 0, 0, 0) 4px
        );
}

.hidden {
    display: none;
}