/* ======================================================
   LICHTKRANT - HOMEPAGE STIJL
   ====================================================== */

.lichtkrant {
  width: 100%;
  height: 50px;

  padding: 4px;

  border: 1px solid #c7c7c7;
  border-radius: 7px;

  background: #f1f1f1;

  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}


/* ======================================================
   DONKER DISPLAY
   ====================================================== */

.display {
  width: 100%;
  height: 100%;

  position: relative;
  overflow: hidden;

  border-radius: 4px;

  background:
    linear-gradient(
      180deg,
      #161914,
      #0b0d0a
    );

  box-shadow:
    inset 0 0 8px rgba(0, 0, 0, 0.95),
    inset 0 1px 1px rgba(255, 255, 255, 0.04);
}


/* ======================================================
   SUBTIELE GLASREFLECTIE
   ====================================================== */

.display::after {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.07),
      transparent 30%,
      transparent 78%,
      rgba(255, 255, 255, 0.02)
    );
}


/* ======================================================
   LED MATRIX
   ====================================================== */

.matrix {
  --dot: 4px;
  --gap: 1px;

  /* Wordt automatisch door matrix.js aangepast */
  --scroll-afstand: -600px;

  position: absolute;

  top: 50%;
  left: 100%;

  display: grid;

  grid-auto-flow: column;

  grid-template-rows:
    repeat(7, var(--dot));

  grid-auto-columns:
    var(--dot);

  gap: var(--gap);

  transform: translateY(-50%);

  animation-name: lichtkrant;
  animation-timing-function: linear;
  animation-iteration-count: infinite;

  /* Alleen een fallback.
     matrix.js berekent de echte duur. */
  animation-duration: 15s;
}


/* ======================================================
   LED UIT
   ====================================================== */

.led {
  width: var(--dot);
  height: var(--dot);

  border-radius: 50%;

  background: #2c2817;

  box-shadow:
    inset 0 0 1px rgba(255, 255, 255, 0.05);
}


/* ======================================================
   LED AAN - WARME AMBERKLEUR
   ====================================================== */

.led.on {
  background: #0cc1df;

  box-shadow:
    0 0 2px #ffc400,
    0 0 4px rgba(255, 196, 0, 0.7),
    0 0 6px rgba(255, 170, 0, 0.25);
}


/* ======================================================
   SCROLL-ANIMATIE
   ====================================================== */

@keyframes lichtkrant {

  from {
    transform:
      translate(0, -50%);
  }

  to {
    transform:
      translate(var(--scroll-afstand), -50%);
  }
}


/* ======================================================
   KLEINE SCHERMEN
   ====================================================== */

@media (max-width: 480px) {

  .lichtkrant {
    height: 46px;
    padding: 3px;
  }

  .matrix {
    --dot: 3px;
    --gap: 1px;
  }
}


/* ======================================================
   TOEGANKELIJKHEID:
   MINDER BEWEGING ALS DE BEZOEKER DAT INSTELT
   ====================================================== */

@media (prefers-reduced-motion: reduce) {

  .matrix {
    animation-duration: 40s !important;
  }
}