.facade-sign {
  position: absolute;
  z-index: 3;
  left: calc(var(--scene-x, 0px) + 5px * var(--scene-scale, 1));
  top: calc(var(--scene-y, 0px) + 100px * var(--scene-scale, 1));
  width: calc(444px * var(--scene-scale, 1));
  aspect-ratio: 920 / 540;
  pointer-events: none;
  transform: skewY(16deg);
}

.facade-sign > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}

.facade-sign-light {
  opacity: calc(.43 + .36 * var(--program-energy, 0) + .21 * var(--program-bass, 0));
  mix-blend-mode: screen;
}

.facade-sign-case {
  filter: drop-shadow(4px 5px 2px #000a);
}

.facade-sign-led,
.facade-sign-flicker {
  filter: brightness(calc(.91 + .20 * var(--program-energy, 0) + .17 * var(--program-bass, 0)))
    drop-shadow(0 0 5px #9dfd4573);
  mix-blend-mode: screen;
}

.facade-sign-flicker {
  animation: loose-sign-driver 10.8s steps(1, end) infinite;
}

@keyframes loose-sign-driver {
  0%, 37%, 40%, 44%, 70%, 72%, 82%, 100% { opacity: 1; }
  35%, 42%, 68%, 79% { opacity: .13; }
  38%, 45%, 71%, 80% { opacity: .58; }
}

@media (max-aspect-ratio: 3 / 2) {
  .facade-sign {
    left: 0;
    top: clamp(76px, 15%, 138px);
    width: clamp(248px, 38vw, 430px);
  }
}

@media (max-width: 650px) and (orientation: portrait) {
  .facade-sign {
    left: auto;
    right: -3px;
    top: clamp(104px, 35%, 288px);
    width: clamp(167px, 47vw, 242px);
    transform: skewY(-17deg);
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  .facade-sign {
    top: 13%;
    width: clamp(170px, 28vw, 340px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .facade-sign-flicker { animation: none; }
}