@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@600&display=swap');
:root{--yellow:#cdca65;--red:#8b3028;--ink:#191d17;--eye-yellow:#f0de59}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#11140f}body{color:var(--ink)}
.announcement{height:100svh;min-height:560px;padding:18px;display:grid}
.screen{position:relative;isolation:isolate;display:grid;place-items:center;overflow:hidden;border-radius:2.6% / 1.8%;background:var(--yellow);box-shadow:inset 0 0 24px #191d1718,inset 0 0 3px #11140f66;animation:transmission-cut .26s steps(1,end) both}
.screen:before{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.3;background:repeating-linear-gradient(0deg,#15161013 0 1px,transparent 1px 3px)}
.screen:after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.065;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.5' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}
.card{position:relative;width:100%;max-width:1050px;text-align:center;padding:35px 25px 40px;animation:signal-shift 8.7s steps(1,end) 2s infinite}
.opening-notice{font:600 clamp(23px,2.2vw,31px)/1.1 'IBM Plex Sans Condensed','Arial Narrow',Arial,sans-serif;letter-spacing:.07em;margin:0 0 32px;text-transform:uppercase;text-shadow:.5px 0 .7px #191d1745}
.emblem{display:inline-block;width:118px;height:118px;margin:0 0 22px;fill:none;stroke:var(--ink);stroke-width:1.4;overflow:visible}
.emblem>ellipse{stroke-width:2.8}.emblem>.inner-ring{stroke-width:.85}.bird-body,.bird-head{fill:var(--ink);stroke:var(--ink);stroke-width:.5}.eye{fill:var(--eye-yellow);stroke:none}.emblem .wing{fill:none;stroke:var(--yellow);stroke-width:1.15;opacity:.55}.feet{fill:none;stroke:var(--ink);stroke-width:2.3;stroke-linecap:round}
h1{font-weight:400;line-height:0;margin:0;color:var(--red);transform:scaleX(.97)}
.announcement-name{display:inline-block;width:min(590px,73vw);line-height:0;translate:2% 0}.announcement-films{display:block;width:min(590px,73vw);line-height:0;margin:7px auto 0;translate:.84% 0}.announcement-name svg,.announcement-films svg{display:block;width:100%;height:auto}
.message{font:400 clamp(16px,1.5vw,21px)/1.8 'Courier New',Courier,monospace;letter-spacing:-.045em;margin:27px 0 0;color:#34372c;text-shadow:.4px 0 .5px #34372c35}
.tracking-line{position:absolute;top:0;left:-1%;right:-1%;height:9px;z-index:4;opacity:0;pointer-events:none;background:repeating-linear-gradient(0deg,#191d1740 0 1px,transparent 1px 3px);animation:tracking-tear .3s steps(1,end) both}
@keyframes transmission-cut{0%,22%{background:#11140f;visibility:hidden}23%{background:var(--yellow);visibility:visible;transform:translateX(-2px)}45%{transform:translateX(2px)}70%,100%{transform:none}}
@keyframes tracking-tear{0%,18%{opacity:0;top:34%}23%{opacity:.8;top:34%;transform:skewX(-12deg)}48%{opacity:.45;top:67%}76%,100%{opacity:0;top:67%}}
@keyframes signal-shift{0%,1.5%,57%,59%,100%{transform:none}1%{transform:translateX(-1px)}57.5%{transform:translate(1px,-1px)}58%{transform:translateX(-1px)}}
@media(max-width:650px){.announcement{padding:10px;min-height:540px}.card{padding:30px 20px 35px}.opening-notice{font-size:24px;margin-bottom:27px}.emblem{width:98px;height:98px;margin-bottom:23px}.announcement-name,.announcement-films{width:min(440px,74vw)}.announcement-films{margin-top:5px}.message{font-size:16px;margin-top:26px}}
@media(prefers-reduced-motion:reduce){.screen,.card,.tracking-line{animation:none!important}.tracking-line{display:none}}

.message{white-space:pre-line;min-height:3.6em}.typing-cursor{display:inline-block;vertical-align:-.08em;width:2px;height:.95em;background:currentColor;margin-left:3px;animation:type-caret .9s steps(1,end) infinite}.typing-cursor[hidden]{display:none}@keyframes type-caret{50%{opacity:0}}@media(max-width:350px){.message{min-height:5.4em}}@media(prefers-reduced-motion:reduce){.typing-cursor{display:none}}

/* Brief analogue tracking faults, with long readable holds between them. */
.screen:before{animation:scan-drift 9s linear infinite}
.screen:after{animation:static-grain .24s steps(1,end) infinite}
.tracking-line{height:22px;animation:broadcast-tracking 7.8s steps(1,end) infinite;background:repeating-linear-gradient(0deg,#191d1766 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
.card{max-width:none;padding-left:0;padding-right:0;animation:broadcast-slip 7.8s steps(1,end) infinite}
.eye{transform-box:fill-box;transform-origin:center;animation:bird-wink 13s ease-in-out 7.5s infinite}
.logo-band{overflow:hidden;width:100%;transform:none;line-height:0;padding:8px 0}
.logo-track{display:flex;width:max-content;animation:station-band 24s linear infinite}
.logo-unit{display:flex;align-items:center;gap:clamp(18px,3vw,40px);padding-right:clamp(45px,8vw,110px);flex-shrink:0}
.announcement-name,.announcement-films{display:block;width:auto!important;margin:0!important;translate:none;flex-shrink:0}
.announcement-name svg,.announcement-films svg{width:auto;height:clamp(65px,11vw,142px)}
.message{padding:0 20px}
@keyframes station-band{to{transform:translateX(-50%)}}
@keyframes bird-wink{0%,2.6%,100%{transform:scaleY(1)}1.1%,1.7%{transform:scaleY(.1)}}
@keyframes scan-drift{to{background-position:0 24px}}
@keyframes static-grain{0%,100%{background-position:0 0;opacity:.065}33%{background-position:23px -17px;opacity:.085}66%{background-position:-11px 29px;opacity:.055}}
@keyframes broadcast-tracking{0%{top:28%;opacity:.65;transform:translateX(-6px) skewX(-16deg)}1.3%{top:67%;opacity:.5;transform:translateX(7px)}2.6%,44%{top:84%;opacity:0}44.5%{top:15%;opacity:.38}45.4%{top:62%;opacity:.6;transform:skewX(12deg)}46.2%,100%{top:88%;opacity:0;transform:none}}
@keyframes broadcast-slip{0%{transform:translate(-3px,1px) skewX(.25deg)}1.3%{transform:translate(3px,-1px)}2.6%,44%{transform:none}44.5%{transform:translateX(-2px)}45.4%{transform:translateX(3px) skewX(-.3deg)}46.2%,100%{transform:none}}
@media(prefers-reduced-motion:reduce){.screen:before,.screen:after,.eye,.logo-track{animation:none!important}.logo-track{width:100%;justify-content:center}.logo-unit{gap:14px;padding-right:0}.logo-unit+.logo-unit{display:none}.announcement-name svg,.announcement-films svg{height:clamp(40px,10vw,120px)}}

/* Keep the station emblem anchored while the signal moves around it. */
.card{animation:none!important}
.logo-band{animation:broadcast-slip 7.8s steps(1,end) infinite}
.screen{background:radial-gradient(ellipse at 48% 42%,#d7d477 0%,#cdca65 62%,#b9b658 100%);box-shadow:inset 0 0 3px #0009,inset 0 0 45px #15171024,0 0 0 1px #ffffff0a}
.screen:before{background-image:repeating-linear-gradient(0deg,#15161024 0 1px,transparent 1px 3px),linear-gradient(90deg,#ffffff03,#ffffff0a 45%,#00000005);opacity:.36}
.signal-roll{position:absolute;inset:-35% 0 auto;height:30%;z-index:2;pointer-events:none;background:linear-gradient(transparent,#191d170b 40%,#191d1715 75%,transparent);animation:signal-roll 11.3s linear infinite;mix-blend-mode:multiply}
.screen-register{position:absolute;inset:22px;pointer-events:none;opacity:.24;background:linear-gradient(var(--ink),var(--ink)) left top/13px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) left top/1px 13px no-repeat,linear-gradient(var(--ink),var(--ink)) right top/13px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) right top/1px 13px no-repeat,linear-gradient(var(--ink),var(--ink)) left bottom/13px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) left bottom/1px 13px no-repeat,linear-gradient(var(--ink),var(--ink)) right bottom/13px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) right bottom/1px 13px no-repeat}
@keyframes signal-roll{0%{transform:translateY(0)}100%{transform:translateY(480%)}}
@media(prefers-reduced-motion:reduce){.logo-band,.signal-roll{animation:none!important}.signal-roll{display:none}}

.announcement,.screen,.card,.logo-band{min-width:0}.card{max-width:100%}