/* A slower channel-ident stinger, using compositor transforms and opacity. The three layers are transformed, never the page. */
.broadcast-transition{position:fixed;inset:0;z-index:10000;visibility:hidden;pointer-events:none;overflow:hidden;contain:strict}
.broadcast-wipe{position:absolute;inset:0 -10vmax;transform:translate3d(-115%,0,0) skewX(-10deg);will-change:transform;backface-visibility:hidden}
.broadcast-wipe--red{background:var(--red)}
.broadcast-wipe--dark{background:var(--panel);background-image:linear-gradient(110deg,transparent 0 58%,#ffffff05 58% 58.2%,transparent 58.2% 64%,#ffffff04 64% 72%,transparent 72%)}
.broadcast-signature{position:absolute;inset:0;display:grid;place-content:center;gap:22px;justify-items:center;opacity:0;transform:translate3d(-14px,0,0);will-change:opacity,transform;backface-visibility:hidden}
.broadcast-signature img{width:min(210px,55vw);height:auto}
.broadcast-signature-track{display:block;width:72px;height:3px;overflow:hidden;background:#ffffff20}
.broadcast-signature-track::after{content:'';display:block;width:100%;height:100%;background:var(--red);transform:translate3d(-100%,0,0)}
html.broadcast-exiting .broadcast-transition,html.broadcast-arriving .broadcast-transition{visibility:visible;pointer-events:all}
html.broadcast-exiting .broadcast-wipe--red{animation:broadcast-cover 620ms cubic-bezier(.65,0,.25,1) both}
html.broadcast-exiting .broadcast-wipe--dark{animation:broadcast-cover 640ms 80ms cubic-bezier(.65,0,.25,1) both}
html.broadcast-exiting .broadcast-signature{animation:broadcast-ident-in 260ms 430ms ease-out both}
html.broadcast-exiting .broadcast-signature-track::after{animation:broadcast-track 320ms 430ms ease-out both}
html.broadcast-arriving .broadcast-wipe{transform:translate3d(0,0,0) skewX(-10deg)}
html.broadcast-arriving .broadcast-signature{opacity:1;transform:none}
html.broadcast-arriving .broadcast-signature-track::after{transform:none}
html.broadcast-revealing .broadcast-wipe--dark{animation:broadcast-reveal 700ms cubic-bezier(.65,0,.25,1) both}
html.broadcast-revealing .broadcast-wipe--red{animation:broadcast-reveal 720ms 80ms cubic-bezier(.65,0,.25,1) both}
html.broadcast-revealing .broadcast-signature{animation:broadcast-ident-out 220ms ease-in both}
@keyframes broadcast-cover{from{transform:translate3d(-115%,0,0) skewX(-10deg)}to{transform:translate3d(0,0,0) skewX(-10deg)}}
@keyframes broadcast-reveal{from{transform:translate3d(0,0,0) skewX(-10deg)}to{transform:translate3d(115%,0,0) skewX(-10deg)}}
@keyframes broadcast-ident-in{from{opacity:0;transform:translate3d(-14px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes broadcast-ident-out{from{opacity:1;transform:translate3d(0,0,0)}to{opacity:0;transform:translate3d(20px,0,0)}}
@keyframes broadcast-track{from{transform:translate3d(-100%,0,0)}to{transform:translate3d(0,0,0)}}
@media(prefers-reduced-motion:reduce){.broadcast-transition{display:none!important}.broadcast-transition *,.broadcast-signature-track::after{animation:none!important}}