@charset "UTF-8";
/* CSS Document */

* {
  position: relative;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -ms-overflow-style: none;
  scrollbar-width: none;

  --fg-color: lightskyblue;
  --bg-color: #ae2111;
}

html {
  height: -webkit-fill-available;
  overflow: hidden;
}

body {
  color: var(--fg-color);
  background-color: var(--bg-color);
  max-height: 100dvh;
  max-height: -webkit-fill-available;
  transform: translateX(0);
}

a,
a:hover {
  color: var(--fg-color);
  width: max-content;
  max-width: 100%;
}

a p {
  display: inline;
}

.right a {
  display: flex;
  justify-content: flex-end;
}

.left a {
  display: flex;
  justify-content: flex-start;
}

h1 {
  display: flex;
  justify-content: center;
  white-space: nowrap;
}

a:hover {
  text-decoration: none;
}

.left p:hover::after {
  content: " ↗";
}

.right p:hover::before {
  content: "↖ ";
}

*::-webkit-scrollbar {
  display: none;
}

.heading p,
.menu p {
  text-align: center;
  font-size: 0.75em;
  margin: 0;
  padding: 0;
}

.heading p {
  position: fixed;
  z-index: 3;
}

.menu {
  top: 1em;
  height: 2em;
  margin-bottom: 1em;
}

.left.menu p {
  text-align: left;
}

.left.menu a,
.left a {
  float: left;
  clear: both;
}

.middle.menu h1 {
  text-align: center;
  margin: 0;
  padding: 0;
  line-height: 0.8em;
}

div.middle.menu {
  display: flex;
  justify-content: center;
}

.right.menu p {
  text-align: right;
}

.right.menu a,
.right a {
  float: right;
  clear: both;
}

.container-fluid.main,
main {
  margin: 1em;
  width: calc(100vw - 2em);
  height: calc(100dvh - 5em);
  overflow-x: hidden;
  overflow-y: scroll;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  scroll-timeline: --listenTimeline y;
}

.scrollable {
  width: 100%;
  height: 9000px;
  align-self: start;
}

@property --dist {
  syntax: "<number>";
  initial-value: 1;
  inherits: true;
}

@property --info-offset {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}

@property --info-text-offset {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}

@keyframes rotateAnimation {
  0% {
    transform: rotate(0deg);
    scale: 0%;
    --dist: 0;
  }
}

@keyframes infoAnimation {
  0%,
  15% {
    --info-offset: 0;
    --info-text-offset: 0;
    opacity: 0;
  }
  25% {
    opacity: 0;
    --info-text-offset: 0;
  }
  35% {
    opacity: 1;
    --info-offset: 1;
  }
  50% {
    --info-text-offset: 1;
  }
}

.concentric {
  position: fixed;
  align-items: center;
  justify-content: center;
  display: flex;
  --num: calc(360 / 9);
  transform: rotate(540deg);
  scale: 50%;
  --dist: 7.5;
  pointer-events: none;

  animation-fill-mode: both;
  animation-name: rotateAnimation;
  animation-duration: 1ms;
  animation-timeline: --listenTimeline;
}

.song-container {
  transform-origin: center;
  transform: rotate(calc(360deg * var(--n) * 4 / var(--num)))
    translate(calc(1em * var(--dist) * var(--dist)));
  height: 10em;
  width: 10em;
  display: flex;
  align-items: center;
  position: absolute;
}

.concentric:nth-of-type(1),
.concentric:nth-of-type(1) .song-container,
.concentric:nth-of-type(1) .song-info,
.concentric:nth-of-type(1) .song-info::after {
  animation-range: -1500px 4500px;
}

.concentric:nth-of-type(2),
.concentric:nth-of-type(2) .song-container,
.concentric:nth-of-type(2) .song-info,
.concentric:nth-of-type(2) .song-info::after {
  animation-range: 0px 6000px;
}

.concentric:nth-of-type(3),
.concentric:nth-of-type(3) .song-container,
.concentric:nth-of-type(3) .song-info,
.concentric:nth-of-type(3) .song-info::after {
  animation-range: 1500px 7500px;
}

.concentric:nth-of-type(4),
.concentric:nth-of-type(4) .song-container,
.concentric:nth-of-type(4) .song-info,
.concentric:nth-of-type(4) .song-info::after {
  animation-range: 3000px 9000px;
}

.concentric:nth-of-type(5),
.concentric:nth-of-type(5) .song-container,
.concentric:nth-of-type(5) .song-info,
.concentric:nth-of-type(5) .song-info::after {
  animation-range: 4500px 10500px;
}

.concentric:nth-of-type(6),
.concentric:nth-of-type(6) .song-container,
.concentric:nth-of-type(6) .song-info,
.concentric:nth-of-type(6) .song-info::after {
  animation-range: 6000px 12000px;
}

.concentric:nth-of-type(1) {
  z-index: -1;
}

.concentric:nth-of-type(2) {
  z-index: -2;
}

.concentric:nth-of-type(3) {
  z-index: -3;
}

.concentric:nth-of-type(4) {
  z-index: -4;
}

.song-container:nth-child(1) {
  --n: 1;
}

.song-container:nth-child(2) {
  --n: 2;
}

.song-container:nth-child(3) {
  --n: 3;
}

.song-container:nth-child(4) {
  --n: 4;
}

.song-container:nth-child(5) {
  --n: 5;
}

.song-container:nth-child(6) {
  --n: 6;
}

.song-container:nth-child(7) {
  --n: 7;
}

.song-container:nth-child(8) {
  --n: 8;
}

.song-container:nth-child(9) {
  --n: 9;
}

.song-container:nth-child(10) {
  --n: 10;
}

img {
  border-radius: 5em;
  object-fit: contain;
  overflow: hidden;
  width: 10em;
  display: flex;
  height: 10em;
  transition: ease 0.75s;
}

.song-img::after {
  content: "";
  border-radius: 1.25em;
  background-color: var(--bg-color);
  width: 2.5em;
  height: 2.5em;
  display: block;
  position: absolute;
}

.song-img {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  transition: ease 0.75s;
  border-radius: 5em;
  background-color: var(--bg-color);
  width: 10em;
  height: 10em;
}

.song-info {
  display: block;
  width: fit-content;
  text-align: start;
  white-space: nowrap;
  --info-offset: 1;

  left: calc(var(--info-offset) * (100% + 1em));

  animation-fill-mode: both;
  animation-name: infoAnimation;
  animation-duration: 1ms;
  animation-timeline: --listenTimeline;
  opacity: 1;
  z-index: -10;
}

.song-info::after {
  inset-block: 0;
  content: "";
  position: absolute;
  /* background-color: #9fb1eb;
  width: calc(100% - (var(--info-text-offset) * 100%));
  right: 0; */
  --info-text-offset: 1;

  background: linear-gradient(
    to right,
    transparent calc((var(--info-text-offset) * 100%)),
    var(--bg-color) calc(25% + (var(--info-text-offset) * 100%))
  );
  left: calc((var(--info-text-offset) * 100%));
  width: 100%;

  animation-fill-mode: both;
  animation-name: infoAnimation;
  animation-duration: 1ms;
  animation-timeline: --listenTimeline;
  opacity: 1 !important;
  z-index: 0;
}

p {
  margin: 0;
  font-size: 1.25em;
}

.instructions {
  font-size: 0.8em;
  position: fixed;
}

@keyframes instructions1Animation {
  0% {
    top: calc(5em + 20dvh);
    opacity: 1;
  }
  5% {
    top: 5em;
    opacity: 0;
  }
}

@keyframes instructions2Animation {
  0% {
    bottom: 20dvh;
    opacity: 1;
  }
  5% {
    bottom: 0;
    opacity: 0;
  }
}

@keyframes pulse {
  0% {
    opacity: 0;
  }
  35%,
  65% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.instructions:nth-of-type(1) {
  top: 5em;
  opacity: 0;
  animation-fill-mode: both;
  animation-name: instructions1Animation;
  animation-duration: 1ms;
  animation-timeline: --listenTimeline, none;
}

.instructions:nth-of-type(2) {
  bottom: 0;
  opacity: 0;
  animation-fill-mode: both;
  animation-name: instructions2Animation;
  animation-duration: 1ms;
  animation-timeline: --listenTimeline, none;
}

.instructions p {
  font-size: 1em;
  animation: pulse infinite 2000ms ease-in;
}

@media (min-width: 768px) {
  @keyframes instructions1Animation {
    0% {
      left: 20vw;
      opacity: 1;
    }
    5% {
      left: 1em;
      opacity: 0;
    }
  }

  @keyframes instructions2Animation {
    0% {
      right: 20vw;
      opacity: 1;
    }
    5% {
      right: 1em;
      opacity: 0;
    }
  }

  .concentric {
    scale: 75%;
  }

  .instructions:nth-of-type(1) {
    left: 0;
    top: unset;
    opacity: 0;
    animation-fill-mode: both;
    animation-name: instructions1Animation;
    animation-duration: 1ms;
    animation-timeline: --listenTimeline;
  }

  .instructions:nth-of-type(2) {
    right: 0;
    bottom: unset;
    opacity: 0;
    animation-fill-mode: both;
    animation-name: instructions2Animation;
    animation-duration: 1ms;
    animation-timeline: --listenTimeline;
  }
}

@media (min-width: 992px) {
  .concentric {
    scale: 100%;
  }
}