/* =========================================================
SYNTHESIA / VISUAL SCORE
Este archivo define ÚNICAMENTE:

* notas que caen
* lanes / columnas
* colores por mano
* articulación visual

NO teclado
NO feedback reactivo
NO UI
========================================================= */

/* ===============================
SYNTHESIA ROOT
=============================== */

#synthesia {
  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0.04),
      rgba(0, 0, 0, 0));
}

/* ===============================
LANES / COLUMNS
=============================== */

.lane {
  position: absolute;
  top: 0;
  bottom: 0;
}

/*.lane-L {
/* Mano izquierda */
/*}

/*.lane-R {
/* Mano derecha */
/*}

/* ===============================
SYNTH NOTES – BASE
=============================== */

.synth-note {
  position: absolute;
  bottom: 0;
  border-radius: 3px;
  overflow: hidden;
  box-sizing: border-box;
  margin-left: 1px;
  margin-right: 1px;
}

#synthesia {
  display: flex;
  justify-content: flex-start;
}

.synth-bg {
  position: absolute;
  inset: 0;
  opacity: 0.85;
}

.synth-fill {
  position: absolute;
  inset: 0;
}

/* ===============================
COLORS BY HAND
=============================== */

.synth-note.hand-L .synth-bg {
  background: linear-gradient(#e06666, #c94a4a);
}

.synth-note.hand-R .synth-bg {
  background: linear-gradient(#5b84ff, #3a66e0);
}

/* ===============================
ARTICULATION
=============================== */

.synth-note.staccato {
  border-radius: 3px;
}

.synth-note.legato {
  border-radius: 6px;
}

/* ===============================
CONSUME / FALL ANIMATIONS
=============================== */

@keyframes fall {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(100%);
  }
}

@keyframes consumeNote {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* ===============================
TECH DEBT / NOTES
=============================== */

/* NOTE:

* Colors will be moved to themes in a later phase
* Lane positioning is handled by JS
  */