@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500&display=swap');

.xf-led-wrap { width: 100%; }

.xf-led-banner {
  display: block;
  text-decoration: none;
  width: 100%;
  cursor: pointer;
}
.xf-led-banner--empty { cursor: default; }

.board-container {
  position: relative;
  border: 2px solid hsl(0 0% 16%);
  border-radius: 4px;
  width: 100%;
  overflow: hidden;
}
.board-container::after {
  content: '';
  position: absolute;
  top: 2px; right: 2px; bottom: 2px; left: 2px;
  background: linear-gradient(-68deg,
    #0000 63% 69.5%,
    #fff 70% 80%,
    #0000 80.5% 82.5%,
    #fff 82% 86.5%,
    #0000 87% 100%);
  z-index: 3;
  opacity: .12;
  mix-blend-mode: plus-lighter;
  pointer-events: none;
}

.rivets { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 4; pointer-events: none; }
.rivet {
  background: hsl(0 0% 10%);
  position: absolute;
  width: 10px;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: .5px .5px 0 hsl(0 0% 100% / .2) inset;
}
.rivet::after {
  content: '';
  height: 2px; width: 80%;
  border-radius: 10px;
  background: #000;
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  box-shadow: 0 -1px hsl(0 0% 100% / .2) inset;
  rotate: -30deg;
}
.rivet:nth-child(1) { left: 6px; bottom: 6px; }
.rivet:nth-child(2) { right: 6px; bottom: 6px; }
.rivet:nth-child(3) { right: 6px; top: 6px; }
.rivet:nth-child(4) { left: 6px; top: 6px; }

.board {
  --hue: 336;
  --duration: 20s;
  --bg-lightness: .08;
  --dot: 4px;
  font-family: 'DWHROW', monospace;
  font-size: clamp(28px, 4.5vw, 58px);
  font-weight: 300;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  width: 100%;
  padding-block: .65rem;
  line-height: 1;
  overflow: hidden;
  background: oklch(.5 .18 var(--hue) / var(--bg-lightness));
  position: relative;
  filter: contrast(2) brightness(1.5) saturate(2);
  transform: translateZ(0);
}
.board::before {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  z-index: 2;
  mix-blend-mode: plus-lighter;
  filter: brightness(1.1);
  background-image: radial-gradient(circle at center, hsl(0 0% 20%) 1px, transparent 4px);
  background-size: var(--dot) var(--dot);
  background-position: 50% 50%;
  pointer-events: none;
}
.board__content {
  filter: blur(1px) contrast(1.2) brightness(1) saturate(1.6);
  color: oklch(1 .2393 var(--hue));
  height: 100%;
  width: 100%;
  -webkit-mask-image: radial-gradient(circle at center, #000 1px, transparent 1px);
  -webkit-mask-size: var(--dot) var(--dot);
  -webkit-mask-position: 50% 50%;
  mask-image: radial-gradient(circle at center, #000 1px, transparent 1px);
  mask-size: var(--dot) var(--dot);
  mask-position: 50% 50%;
  transform: translateZ(0);
}

.text-track {
  position: relative;
  display: flex;
  width: fit-content;
  animation: xf-led-slide var(--duration) infinite linear;
  color: oklch(1 .2883 var(--hue));
  transform: translateZ(0);
}
.text-track .text {
  padding-left: 5rem;
  padding-right: 5rem;
  width: fit-content;
  min-width: 100vw;
  filter: blur(2px)
          drop-shadow(0 0 2px oklch(.1 .4383 var(--hue) / .8))
          contrast(3) brightness(1.4);
  text-align: center;
  text-shadow: 0 0 2px white;
  transform: translateZ(0);
}
@keyframes xf-led-slide {
  from { translate: 0; }
  to   { translate: -50% 0; }
}

.text-static {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-left: 2rem;
  padding-right: 2rem;
  filter: blur(2px)
          drop-shadow(0 0 3px oklch(.1 .4383 var(--hue) / .9))
          contrast(3) brightness(1.2);
  text-shadow: 0 0 2px white;
  color: oklch(1 .2883 var(--hue));
}
.text-static .blink { animation: xf-led-blink 2s ease-in-out infinite; }
@keyframes xf-led-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}
.xf-led-banner:hover {
  text-decoration: none;
}