.stream-intro-pending:before{content:'';position:fixed;inset:0;z-index:500;background:#08080c;pointer-events:none}
.stream-intro{position:fixed;inset:0;z-index:501;display:grid;place-items:center;overflow:hidden;background:#08080c;color:white;isolation:isolate;transition:opacity .36s ease}
.stream-intro.is-leaving{opacity:0;pointer-events:none}
.stream-intro-brand{display:grid;justify-items:center;gap:30px;animation:stream-brand-arrive 2.5s cubic-bezier(.2,.7,.2,1) both}
.stream-intro-brand img{display:block;width:144px;height:114px;object-fit:contain;filter:brightness(0) invert(1);position:relative}
.stream-intro-brand span{font:600 14px/1.2 system-ui,sans-serif;letter-spacing:.65em;padding-left:.65em;animation:stream-name-arrive 2.1s ease both}
.stream-intro-light{position:absolute;inset:-35%;z-index:-1;background:conic-gradient(from 40deg,transparent 0 20%,#a5b6f93a 24%,#b393df5c 30%,transparent 39% 76%,#b393df28 81%,transparent 88%);filter:blur(55px);animation:stream-light-arrive 2.5s ease both;transform-origin:center}
.stream-intro-skip{position:absolute;right:max(24px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));border:1px solid #ffffff45;border-radius:30px;padding:10px 18px;color:#fff;background:#ffffff0b;font:500 12px system-ui;cursor:pointer}
.stream-intro-skip:hover,.stream-intro-skip:focus-visible{background:#ffffff22;outline:2px solid #bca5e7;outline-offset:3px}
@keyframes stream-brand-arrive{0%{opacity:0;transform:scale(.91);filter:blur(8px)}30%{opacity:1;filter:blur(0)}75%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1.025)}}
@keyframes stream-name-arrive{0%,20%{opacity:0;transform:translateY(8px)}60%,100%{opacity:1;transform:translateY(0)}}
@keyframes stream-light-arrive{0%{opacity:0;transform:rotate(-30deg) scale(.8)}40%{opacity:1}100%{opacity:.6;transform:rotate(45deg) scale(1.15)}}
@media(prefers-reduced-motion:reduce){.stream-intro,.stream-intro-pending:before{display:none}}