/*
 * Copyright (c) 2026 Josias Matschulat
 * SPDX-License-Identifier: AGPL-3.0-only
 */

:root {
  --font: ui-serif, serif;
}

html,
body,
main {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

main {
  display: flex;
}

.svg-container {
  position: relative;
  flex: 1 1 50%;
  width: 50%;
  height: 100%;
}

main svg {
  width: 100%;
  height: 100%;
  display: block;
}

.circle-switch {
  position: absolute;
  bottom: 1rem;
  z-index: 2;
  border: 1px solid #111;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-family: var(--font);
  font-size: 0.9rem;
  line-height: 1;
  padding: 0.45rem 0.75rem;
  cursor: pointer;
  transition: transform 0.2s;
  &:hover {
    transform: scale(105%);
    transition: none;
  }
  filter: drop-shadow(1px 1px 1px #0007);
}

#left-container {
  border-right: dotted 3px #555;
}

#left-container .circle-switch {
  left: 1rem;
}

#right-container .circle-switch {
  right: 1rem;
}

#left-svg, #right-svg {
  background: #eee;
}

#left-svg {
  .note-label { font-size: 11px; }
}

#right-svg {
  .note-label { font-size: 8px; }
}

.note-group,
.note-node,
.note-highlight {
  cursor: pointer;
  transform-box: border-box;
  transform-origin: center;
}

.note-node {
  fill: #fff;
  stroke: #000;
  stroke-width: 0.4;
  transition: transform 0.2s;
  &:hover {
    transform: scale(102%);
    transition: none;
  }
}

.note-node.black-key {
  fill: #222;
}

.note-highlight {
  visibility: hidden;
  fill: red;
  stroke: none;
  pointer-events: none;
}

@keyframes note-select-shadow-pulse {
  0%   { filter: drop-shadow(0 0 0 #f77);    }
  40%  { filter: drop-shadow(0 0 1px #f77);  }
  99%  { filter: drop-shadow(0 0 3px #f440); }
  100% { filter: none; }
}

@keyframes note-select-scale-pulse {
  0%   { transform: scale(100.5%); }
  100% { transform: scale(99.5%);  }
}

.note-group.is-selected {
  .note-highlight {
    visibility: visible;
  }
  .note-label {
    fill: #fff;
  }
}

.note-group.is-selected .note-node {
  animation: note-select-shadow-pulse 0.2s ease-out,
}

.note-group.is-selected .note-highlight {
  animation: note-select-scale-pulse 0.3s infinite alternate ease-in-out;
}

.note-label {
  fill: #000;
  font-family: var(--font);
  text-anchor: middle;
  pointer-events: none;
  user-select: none;
}

.note-label.black-key {
  fill: #fff;
}

.center-note-label {
  fill: #000;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  text-anchor: middle;
  pointer-events: none;
  user-select: none;
}

@media (orientation: portrait) {
  main {
    flex-direction: column;
  }

  .svg-container {
    width: 100%;
    height: 50%;
    flex: 1 1 50%;
  }

  main svg {
    width: 100%;
    height: 100%;
  }

  #left-container {
    border-right: none;
    border-bottom: dotted 3px #555;
  }

}