/* ==========================================================================
   SIGNAL — broadcast cold open (intro overlay)
   Everything here is scoped to html.intro-on / html.intro-playing, which the
   inline gate in <head> sets before first paint. Without those classes this
   sheet changes nothing on the page.
   Layer order while playing (root stacking context):
     page (cover wall, scrim)          z 0–3
     #intro  — WebGL CRT overlay       z 10001
     cover chrome + name (raised)      z 10003   <- the real cover elements
     #sg-front — type layer, scanline
                 veil, bloom, flare    z 10004
     #intro-skip                       z 10006
   ========================================================================== */

#intro,#sg-front,#intro-skip{display:none}

/* ---------- overlay ---------- */
html.intro-playing #intro{display:block;position:fixed;inset:0;z-index:10001;background:#07080A;overflow:hidden;contain:strict;pointer-events:auto}
html.intro-playing #intro.sg-live{background:transparent}
#intro canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

html.intro-playing #sg-front{display:block;position:fixed;inset:0;z-index:10004;pointer-events:none;overflow:hidden}
/* role line / location / timecode resolve here, glyph-for-glyph over the real text,
   which is shown on the frame each line resolves (the DOM text is never rewritten) */
#sg-front .sg-type{position:absolute;left:0;top:0;display:block;pointer-events:none}
#sg-front .sg-veil{position:absolute;inset:0;opacity:0;will-change:opacity;
  background:repeating-linear-gradient(180deg,rgba(3,4,6,.62) 0,rgba(3,4,6,.62) 1px,transparent 1px,transparent 3px)}
#sg-front .sg-bloom{position:absolute;left:0;top:0;width:100px;height:100px;border-radius:50%;opacity:0;will-change:transform,opacity;mix-blend-mode:screen;
  background:radial-gradient(closest-side,rgba(255,214,150,.95) 0%,rgba(236,166,74,.62) 22%,rgba(224,153,60,.2) 58%,rgba(224,153,60,0) 100%)}

/* anamorphic flare off the period: asymmetric, so it trails out to the right and
   barely touches the letters to its left (never reads as a strike-through) */
#sg-front .sg-streak{position:absolute;left:0;top:0;width:100px;height:4px;opacity:0;will-change:transform,opacity;mix-blend-mode:screen;border-radius:2px;
  background:linear-gradient(90deg,rgba(224,153,60,0) 0%,rgba(224,153,60,.06) 30%,rgba(255,222,170,1) 50%,rgba(224,153,60,.3) 70%,rgba(224,153,60,0) 100%)}
#sg-front .sg-streak::after{content:"";position:absolute;left:8%;right:8%;top:-10px;bottom:-10px;filter:blur(7px);border-radius:50%;
  background:linear-gradient(90deg,rgba(224,153,60,0) 0%,rgba(224,153,60,.04) 36%,rgba(224,153,60,.45) 52%,rgba(224,153,60,.18) 72%,rgba(224,153,60,0) 100%)}

/* ---------- skip ---------- */
html.intro-playing #intro-skip{display:inline-flex}
#intro-skip{position:fixed;z-index:10006;right:76px;bottom:max(24px,env(safe-area-inset-bottom));align-items:center;gap:12px;margin:0;padding:14px 2px 14px 14px;
  background:transparent;border:0;border-radius:0;color:rgba(219,212,197,.78);font:400 11px/1 'Space Mono',ui-monospace,monospace;letter-spacing:.28em;text-transform:uppercase;
  opacity:0;-webkit-tap-highlight-color:transparent;transition:color .25s ease;
  text-shadow:0 0 6px #07080A,0 0 2px #07080A,0 0 1px #07080A}
/* soft dark backing so the label holds up over bright snow */
#intro-skip::before{content:"";position:absolute;left:-16px;right:-22px;top:-10px;bottom:-10px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(7,8,10,.74),rgba(7,8,10,.38) 60%,rgba(7,8,10,0))}
#intro-skip .sg-sk-k{font-size:9px;letter-spacing:.14em;color:rgba(139,145,138,.85);border:1px solid rgba(92,98,94,.75);padding:4px 5px 3px;line-height:1;background:rgba(7,8,10,.55)}
#intro-skip .sg-sk-bar{position:absolute;left:14px;right:2px;bottom:6px;height:1px;background:rgba(219,212,197,.13);overflow:hidden}
#intro-skip .sg-sk-bar i{position:absolute;inset:0;background:rgba(219,212,197,.62);transform:scaleX(0);transform-origin:0 50%}
#intro-skip:hover,#intro-skip:focus-visible{color:#DBD4C5}
#intro-skip:focus{outline:none}
#intro-skip:focus-visible{outline:1px solid rgba(219,212,197,.7);outline-offset:4px}
@media (hover:none){#intro-skip .sg-sk-k{display:none}}
@media (max-width:560px){#intro-skip{right:70px}}
/* landscape phones: the name sits low on the short viewport, so Skip moves up and out of its row */
@media (max-height:500px) and (orientation:landscape){#intro-skip{top:max(10px,env(safe-area-inset-top));bottom:auto}}

/* ---------- page lock while playing ---------- */
html.intro-playing,html.intro-playing body{overflow:hidden!important;overscroll-behavior:none}
html.intro-playing nav,html.intro-playing #rail,html.intro-playing #prog,html.intro-playing #mnav,
html.intro-playing #cdot,html.intro-playing #cring{visibility:hidden!important;opacity:0!important}
html.intro-playing body,html.intro-playing body *{cursor:default!important}
html.intro-playing #intro-skip,html.intro-playing #intro-skip *{cursor:pointer!important}

/* ---------- the cover under/after the intro ---------- */
/* never re-run the cover's own flicker; keep intro-on for the life of the page */
html.intro-on .cover h1 .ch,html.intro-on .cover h1 .pd{animation:none;opacity:1}
html.intro-on .cover .fadein{animation:none;opacity:1;transform:none}
/* after a keyboard skip, focus lands on the title (tabindex -1) rather than <body> */
html.intro-on .cover h1[tabindex="-1"]:focus{outline:none}
/* while playing: the real cover chrome + name ride above the overlay, hidden until booted */
html.intro-playing .cover h1{animation:none}
html.intro-playing .cover .cv-center,html.intro-playing .cover .cv-top,
html.intro-playing .cover .bracket,html.intro-playing .cover .scroll{z-index:10003}
html.intro-playing .cover h1 .ch,html.intro-playing .cover h1 .pd,html.intro-playing .cover .cv-top,
html.intro-playing .cover .bracket,html.intro-playing .cover .ck,html.intro-playing .cover .ck-sub,
html.intro-playing .cover .scroll{opacity:0}
html.intro-playing .cover h1 .pd{transform-origin:50% 76%}

/* ---------- abort path (deps too slow / missing, no WebGL2, skip during the black hold) ----------
   The overlay dissolves over 300ms while the frame chrome fades up. The name and the
   .fadein lines stay hidden: when the gate then drops intro-on, the cover plays its own
   native entrance exactly as on a visit without the intro. */
html.intro-abort #intro,html.intro-abort #sg-front,html.intro-abort #intro-skip{opacity:0!important;transition:opacity .3s ease}
html.intro-abort .cover .cv-top,html.intro-abort .cover .bracket{opacity:1!important;transition:opacity .3s ease}