/* ======================================================================
   SNN Breakout demo
   ====================================================================== */

.breakout-demo {
  --breakout-accent: var(--accent, #c3a6ff);
  --breakout-line: var(--line, rgba(255, 255, 255, 0.08));
  --breakout-text: var(--text-soft, #d5d0dc);
  --breakout-muted: var(--text-muted, #8e8995);

  overflow: hidden;

  width: 100%;

  border: 1px solid var(--breakout-line);
  border-radius: 18px;

  background:
    linear-gradient(
      180deg,
      rgba(195, 166, 255, 0.025),
      rgba(255, 255, 255, 0.008)
    );

  transition:
    transform 220ms var(--ease-out, ease),
    border-color 220ms ease,
    background 220ms ease;
}


.breakout-demo:hover {
  transform: translateY(-3px);

  border-color:
    rgba(195, 166, 255, 0.18);

  background:
    linear-gradient(
      180deg,
      rgba(195, 166, 255, 0.035),
      rgba(255, 255, 255, 0.01)
    );
}


/* Header --------------------------------------------------------------- */

.breakout-demo__top {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 16px;

  padding:
    12px 16px;

  border-bottom:
    1px solid var(--breakout-line);
}


.breakout-demo__label {
  color:
    var(--breakout-text);

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.12em;
  text-transform: uppercase;
}


.breakout-demo__stats {
  display: flex;
  flex-wrap: wrap;

  gap: 13px;

  color:
    var(--breakout-muted);

  font-size: 9px;
  font-weight: 650;

  letter-spacing: 0.08em;
  text-transform: uppercase;
}


.breakout-demo__stats strong {
  color:
    var(--breakout-accent);

  font-weight: 750;
}


/* Game ----------------------------------------------------------------- */

.breakout-demo__canvas {
  display: block;

  width: 100%;
  height: auto;

  background:
    radial-gradient(
      circle at 50% 10%,
      rgba(195, 166, 255, 0.035),
      transparent 50%
    ),
    rgba(8, 11, 16, 0.18);

  outline: none;

  cursor: crosshair;
}


.breakout-demo__canvas:focus-visible {
  box-shadow:
    inset 0 0 0 1px
    rgba(195, 166, 255, 0.32);
}


/* Controller ----------------------------------------------------------- */

.breakout-demo__network {
  display: grid;

  grid-template-columns:
    minmax(90px, auto)
    minmax(190px, 1fr)
    auto;

  gap: 16px;

  align-items: center;

  padding:
    10px 16px 11px;

  border-top:
    1px solid var(--breakout-line);
}


.breakout-demo__network-label {
  color:
    var(--breakout-muted);

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 0.10em;
  text-transform: uppercase;
}


/* Controller graph ----------------------------------------------------- */

.breakout-demo__controller-graph {
  position: relative;

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  align-items: center;

  width:
    min(300px, 100%);

  height: 90px;

  margin-inline: auto;
}


.breakout-demo__connections {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  overflow: visible;

  pointer-events: none;
}


.breakout-demo__connection {
  stroke:
    rgba(195, 166, 255, 0.42);

  stroke-width: 0.8;

  opacity: 0.16;

  vector-effect:
    non-scaling-stroke;

  transition:
    opacity 70ms linear,
    stroke-width 70ms linear,
    stroke 70ms linear;
}


.breakout-demo__layer {
  position: relative;

  z-index: 1;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  height: 100%;
}


.breakout-demo__layer--input {
  gap: 6px;
}


.breakout-demo__layer--hidden {
  gap: 5px;
}


.breakout-demo__layer--output {
  gap: 14px;
}


/* Neurons -------------------------------------------------------------- */

.breakout-neuron {
  --activity: 0;

  display: grid;

  place-items: center;

  width: 8px;
  height: 8px;

  flex: 0 0 auto;

  border-radius: 50%;

  background:
    rgba(
      195,
      166,
      255,
      calc(
        0.20 +
        var(--activity) * 0.80
      )
    );

  box-shadow:
    0 0
    calc(var(--activity) * 11px)
    rgba(
      195,
      166,
      255,
      calc(var(--activity) * 0.55)
    );

  transform:
    scale(
      calc(
        1 +
        var(--activity) * 0.35
      )
    );

  transition:
    transform 65ms linear,
    background 65ms linear,
    box-shadow 65ms linear;
}


.breakout-neuron--output {
  width: 22px;
  height: 22px;

  border:
    1px solid
    rgba(195, 166, 255, 0.20);

  background:
    rgba(
      195,
      166,
      255,
      calc(
        0.06 +
        var(--activity) * 0.40
      )
    );

  color:
    rgba(
      237,
      230,
      255,
      calc(
        0.50 +
        var(--activity) * 0.50
      )
    );

  font-size: 11px;
}


/* Controls ------------------------------------------------------------- */

.breakout-demo__controls {
  display: flex;

  gap: 10px;
}


.breakout-demo__controls button {
  padding: 0;

  border: 0;

  color:
    var(--breakout-muted);

  background:
    transparent;

  font: inherit;

  font-size: 9px;
  font-weight: 650;

  letter-spacing: 0.06em;
  text-transform: uppercase;

  cursor: pointer;

  transition:
    color 150ms ease,
    transform 150ms var(--ease-out, ease);
}


.breakout-demo__controls button:hover,
.breakout-demo__controls button:focus-visible {
  color:
    var(--breakout-accent);

  transform:
    translateY(-1px);
}


/* Responsive ----------------------------------------------------------- */

@media (max-width: 700px) {

  .breakout-demo__network {
    grid-template-columns:
      1fr auto;
  }


  .breakout-demo__network-label {
    display: none;
  }


  .breakout-demo__controller-graph {
    margin-inline: 0;
  }

}


@media (max-width: 480px) {

  .breakout-demo__top {
    align-items: flex-start;

    flex-direction: column;

    gap: 6px;
  }


  .breakout-demo__network {
    gap: 8px;

    padding-inline: 12px;
  }


  .breakout-demo__controller-graph {
    height: 84px;
  }

}


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

  .breakout-demo,
  .breakout-neuron,
  .breakout-demo__connection {
    transition: none;
  }

}