/* Our Sitcom — the studio cue lights (logo kit "06 · Applause signs"). A secondary brand element, never a replacement
   for the wordmark. The drawings are the handoff's SVGs (brand/signs/, outlined: never retype a sign); this file only
   stacks the off and lit states and switches between them.

   <div class="ep-sign" data-sign="applause|laugh|on-air|oursitcom" data-lit="true|false" role="img" aria-label="Applause">
     <i class="ep-sign-off"></i><i class="ep-sign-lit"></i>
   </div>

   Switching on: the lit state crossfades in over 120ms, then two quick flickers (.7 -> 1, 60ms each). Off: a 240ms fade.
   Reduced motion: the crossfade only. At most one lit sign on screen; never under 120px wide. The TV drives the lit
   state from its own clock instead (data-drive="time", --ep-sign-lit 0..1), so a scrubbed episode shows the same frame. */

.ep-sign {
  --sign-ar: 855 / 200; --ep-sign-w: 240px; --ep-sign-lit: 0;   /* set on the element: its width, the TV's lit level */
  position: relative; display: inline-block; box-sizing: border-box; vertical-align: middle;
  width: var(--ep-sign-w); min-width: 120px; aspect-ratio: var(--sign-ar);
}
.ep-sign[data-sign="laugh"] { --sign-ar: 610 / 200; }
.ep-sign[data-sign="on-air"] { --sign-ar: 621 / 200; }
.ep-sign[data-sign="oursitcom"] { --sign-ar: 784 / 200; }
.ep-sign > i { position: absolute; inset: 0; background: center / 100% 100% no-repeat; pointer-events: none; }
.ep-sign[data-sign="applause"] > .ep-sign-off { background-image: url("brand/signs/sign-applause-off.svg"); }
.ep-sign[data-sign="applause"] > .ep-sign-lit { background-image: url("brand/signs/sign-applause-lit.svg"); }
.ep-sign[data-sign="laugh"] > .ep-sign-off { background-image: url("brand/signs/sign-laugh-off.svg"); }
.ep-sign[data-sign="laugh"] > .ep-sign-lit { background-image: url("brand/signs/sign-laugh-lit.svg"); }
.ep-sign[data-sign="on-air"] > .ep-sign-off { background-image: url("brand/signs/sign-on-air-off.svg"); }
.ep-sign[data-sign="on-air"] > .ep-sign-lit { background-image: url("brand/signs/sign-on-air-lit.svg"); }
.ep-sign[data-sign="oursitcom"] > .ep-sign-off { background-image: url("brand/signs/sign-oursitcom-off.svg"); }
.ep-sign[data-sign="oursitcom"] > .ep-sign-lit { background-image: url("brand/signs/sign-oursitcom-lit.svg"); }
/* the bulbs' glow on whatever is behind the sign */
.ep-sign > .ep-sign-lit {
  opacity: 0; transition: opacity 240ms ease-out;
  filter: drop-shadow(0 0 calc(var(--ep-sign-w) * .035) color-mix(in srgb, var(--ep-mustard) 55%, transparent));
}

@keyframes ep-sign-on { 0% { opacity: 0; } 50% { opacity: 1; } 62.5% { opacity: .7; } 75% { opacity: 1; } 87.5% { opacity: .7; } 100% { opacity: 1; } }
@keyframes ep-sign-fade-in { from { opacity: 0; } to { opacity: 1; } }
.ep-sign[data-lit="true"] > .ep-sign-lit { opacity: 1; animation: ep-sign-on 240ms linear both; }
.ep-sign[data-drive="time"] > .ep-sign-lit { opacity: var(--ep-sign-lit); animation: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .ep-sign[data-lit="true"] > .ep-sign-lit { animation: ep-sign-fade-in 120ms linear both; }
}