/* 255.255.255.255 — broadcast address. A mock Emergency Broadcast System test
   bar slides in and flashes. (loads only on /255.255.255.255)
   The attention tone is wired separately once the sound asset is decided. */

#eas-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    padding: 0.6rem 1rem;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    text-align: center;
    background: #111;
    color: #ffcc00;
    border-bottom: 3px solid #ffcc00;
    transform: translateY(-100%);
}
#eas-bar .sub { font-weight: 400; font-size: 0.78em; opacity: 0.85; }

/* Banner runs in sync with the EBS clip — started when the audio plays. */
body.egg-on #eas-bar {
    animation:
        eas-in 0.45s ease-out forwards,
        eas-flash 1s step-end 0.45s 6,
        eas-out 0.6s ease-in 7s forwards;
}

@keyframes eas-in   { to { transform: translateY(0); } }
@keyframes eas-out  { to { transform: translateY(-100%); } }
@keyframes eas-flash {
    0%, 100% { background: #111;    color: #ffcc00; }
    50%      { background: #ffcc00; color: #111; }
}

@media (prefers-reduced-motion: reduce) {
    body.egg-on #eas-bar { animation: eas-in 0.45s ease-out forwards, eas-out 0.6s ease-in 7s forwards; }
}