/* The vamps.wtf channel change (ported from vamps-site/src/styles/transitions.css): static, tear bands, power-on line, channel HUD. */
.tx{position:fixed;inset:0;z-index:200;pointer-events:none;overflow:hidden}
.tx__noise{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;opacity:0;transition:opacity .16s ease-out}
.tx.is-on .tx__noise{opacity:.34;transition-duration:.09s}
.tx__bands i{position:absolute;left:-15%;width:130%;opacity:0;mix-blend-mode:screen;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.45) 0 1px,transparent 1px 3px),linear-gradient(90deg,transparent 0%,rgba(255,42,61,.34) 18%,rgba(235,225,230,.2) 46%,rgba(60,200,255,.2) 70%,transparent 100%)}
.tx__bands i:nth-child(1){top:16%;height:7vh}.tx__bands i:nth-child(2){top:47%;height:13vh}.tx__bands i:nth-child(3){top:74%;height:5vh}
.tx.is-tearing .tx__bands i{animation:tx-tear .24s steps(5,end) both}
.tx.is-tearing .tx__bands i:nth-child(2){animation-delay:.03s;animation-direction:reverse}
.tx.is-tearing .tx__bands i:nth-child(3){animation-delay:.06s}
@keyframes tx-tear{0%{opacity:0;transform:translateX(-22%) skewX(-10deg)}25%{opacity:1}60%{opacity:.9;transform:translateX(10%) skewX(6deg)}100%{opacity:0;transform:translateX(26%) skewX(-4deg)}}
.tx__line{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;opacity:0;background:linear-gradient(90deg,transparent,#ffd6d9 12%,#fff4f5 50%,#ffd6d9 88%,transparent);box-shadow:0 0 12px 2px rgba(255,42,61,.85),0 0 40px 6px rgba(255,42,61,.45)}
.tx.is-powering .tx__line{animation:tx-line .3s cubic-bezier(.2,.9,.2,1) both}
@keyframes tx-line{0%{opacity:0;transform:scale(.02,1)}18%{opacity:1;transform:scale(1,1)}55%{opacity:.7;transform:scale(1,18)}100%{opacity:0;transform:scale(1,60)}}
.tx-power{animation:tx-power .28s cubic-bezier(.2,.9,.2,1) both}
@keyframes tx-power{0%{clip-path:inset(calc(50vh - 1px) 0 calc(100% - 50vh - 1px) 0);filter:brightness(2.2) saturate(.5)}30%{clip-path:inset(calc(50vh - 8px) 0 calc(100% - 50vh - 8px) 0);filter:brightness(1.8) saturate(.7)}100%{clip-path:inset(0 0 0 0);filter:none}}
.ch-hud{position:absolute;top:calc(84px + env(safe-area-inset-top));right:max(18px,env(safe-area-inset-right));display:flex;align-items:center;gap:12px;padding:8px 14px 8px 12px;font-family:var(--font-pixel),monospace;font-size:clamp(16px,1.4vw,22px);line-height:1;letter-spacing:.08em;color:#eafff0;text-shadow:0 0 6px rgba(160,255,190,.55),2px 0 0 rgba(255,42,61,.55),-2px 0 0 rgba(60,200,255,.4);background:rgba(6,5,8,.45);border-left:2px solid #ff2a3d;opacity:0}
.ch-hud__name{font-size:.72em;color:#f6f1ea}
.ch-hud__dot{width:9px;height:9px;border-radius:50%;background:#ff2a3d;box-shadow:0 0 10px #ff2a3d}
.ch-hud.is-on{animation:hud 1.2s linear both}
@keyframes hud{0%{opacity:0;transform:translateX(6px)}5%{opacity:1;transform:none}82%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.ch-hud.is-on{animation-name:hud-still}@keyframes hud-still{0%,85%{opacity:1}100%{opacity:0}}}
.hub.no-fade{transition:none}
.ch-hud{max-width:calc(100vw - 36px)}
.ch-hud__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
@media (max-width:560px){.ch-hud{top:calc(70px + env(safe-area-inset-top));font-size:14px;gap:8px}}