:root {
  color-scheme: dark;
  --black: #000;
  --ink: #030303;
  --soft: rgba(255, 255, 255, 0.085);
  --line: rgba(255, 255, 255, 0.13);
  --line-low: rgba(255, 255, 255, 0.055);
  --red: #d90019;
  --red-hot: #ff1430;
  --gold: #d8c79a;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
  background: var(--black);
  overflow: hidden;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Helvetica Neue", Arial, sans-serif;
}

button {
  font: inherit;
}

.stage {
  position: relative;
  display: grid;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 58% 54%, rgba(255, 255, 255, 0.046), transparent 25rem),
    radial-gradient(circle at 45% 48%, rgba(150, 0, 16, 0.07), transparent 31rem),
    #000;
}

.stage::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  content: "";
  background:
    linear-gradient(115deg, transparent 0 43%, rgba(255, 255, 255, 0.028) 48%, transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 16%, transparent 84%, rgba(255, 255, 255, 0.02));
  opacity: 0.74;
}

.stage::after {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
  background-size: 92px 92px;
  mask-image: radial-gradient(circle at center, transparent 0 20%, #000 72%);
  opacity: 0.24;
}

.ambient {
  position: absolute;
  z-index: -1;
  width: 28rem;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.26;
}

.ambient-one {
  top: 8%;
  left: 17%;
  background: rgba(160, 0, 18, 0.16);
  animation: drift 12s ease-in-out infinite;
}

.ambient-two {
  right: 14%;
  bottom: 6%;
  background: rgba(255, 255, 255, 0.05);
  animation: drift 15s ease-in-out infinite reverse;
}

.composition {
  position: relative;
  width: min(86vw, 880px);
  height: min(80svh, 700px);
  min-height: 540px;
}

.flower-orbit {
  position: absolute;
  left: 18%;
  top: 4%;
  width: clamp(96px, 12vw, 148px);
  transform-origin: 50% 96%;
  animation: flowerSway 6.8s cubic-bezier(0.45, 0, 0.28, 1) infinite;
  filter:
    drop-shadow(0 26px 34px rgba(115, 0, 16, 0.3))
    drop-shadow(0 2px 10px rgba(255, 31, 56, 0.18));
}

.flower {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 50% 96%;
  animation: flowerBreath 5.6s ease-in-out infinite;
  user-select: none;
  -webkit-user-drag: none;
}

.player {
  position: absolute;
  right: 13%;
  bottom: 5%;
  display: grid;
  width: clamp(300px, 37vw, 428px);
  aspect-ratio: 1;
  padding: 0;
  place-items: center;
  color: white;
  cursor: pointer;
  background: transparent;
  border: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.player:focus-visible .deck {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.22),
    0 0 0 8px rgba(255, 255, 255, 0.08),
    0 44px 110px rgba(0, 0, 0, 0.9);
}

.deck {
  position: absolute;
  inset: 2.5%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.145);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.072), transparent 33%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), transparent 18%, transparent 75%, rgba(255, 255, 255, 0.085)),
    #030303;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.12),
    inset 0 -28px 70px rgba(255, 255, 255, 0.025),
    inset 0 0 0 14px rgba(255, 255, 255, 0.012),
    0 44px 110px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(255, 255, 255, 0.025),
    0 0 96px rgba(255, 255, 255, 0.052);
  transition:
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 420ms ease,
    box-shadow 420ms ease;
}

.player:hover .deck {
  transform: translateY(-3px) scale(1.008);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.16),
    inset 0 -28px 70px rgba(255, 255, 255, 0.035),
    0 52px 126px rgba(0, 0, 0, 0.96),
    0 0 110px rgba(255, 255, 255, 0.045);
}

.vinyl {
  position: relative;
  display: block;
  width: 74%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at center, transparent 0 69.2%, rgba(255, 255, 255, 0.1) 69.5% 70%, transparent 70.5%),
    radial-gradient(circle at center, transparent 0 83%, rgba(255, 255, 255, 0.07) 83.4% 84%, transparent 84.5%),
    radial-gradient(circle at center, transparent 0 11.5%, rgba(255, 255, 255, 0.092) 11.7% 12.1%, transparent 12.4%),
    repeating-radial-gradient(circle at center, rgba(255, 255, 255, 0.082) 0 1px, transparent 1px 7px),
    conic-gradient(from 142deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.24)),
    radial-gradient(circle at 42% 30%, rgba(255, 255, 255, 0.23), transparent 16%),
    #040404;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 0 34px rgba(255, 255, 255, 0.095),
    inset 0 -44px 80px rgba(0, 0, 0, 0.88),
    0 12px 44px rgba(0, 0, 0, 0.86),
    0 0 0 1px rgba(255, 255, 255, 0.03),
    0 0 40px rgba(255, 255, 255, 0.056);
  transform: translateZ(0);
}

.vinyl::before,
.vinyl::after {
  position: absolute;
  inset: 0;
  content: "";
  border-radius: inherit;
}

.vinyl::before {
  background: conic-gradient(from 28deg, rgba(255, 255, 255, 0.08), transparent 15%, rgba(255, 255, 255, 0.22) 19%, transparent 24% 58%, rgba(255, 255, 255, 0.13) 68%, transparent 74%, rgba(255, 255, 255, 0.055));
  mix-blend-mode: screen;
  opacity: 0.45;
}

.vinyl::after {
  background:
    linear-gradient(118deg, transparent 0 45%, rgba(255, 255, 255, 0.13) 50%, transparent 56%),
    radial-gradient(circle at 67% 70%, rgba(255, 255, 255, 0.07), transparent 26%);
  opacity: 0.58;
}

.player.is-playing .vinyl {
  animation: spin 4.8s linear infinite;
}

.groove {
  position: absolute;
  inset: var(--ring);
  border: 1px solid rgba(255, 255, 255, var(--alpha));
  border-radius: 50%;
}

.groove-one {
  --ring: 13%;
  --alpha: 0.075;
}

.groove-two {
  --ring: 23%;
  --alpha: 0.05;
}

.groove-three {
  --ring: 34%;
  --alpha: 0.04;
}

.label {
  position: absolute;
  inset: 36%;
  z-index: 2;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #101010 0 16%, transparent 18%),
    radial-gradient(circle at 39% 32%, rgba(255, 255, 255, 0.17), transparent 22%),
    linear-gradient(145deg, #1c1515, #060606 55%, #160509);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 0 28px rgba(255, 15, 38, 0.1),
    0 0 18px rgba(0, 0, 0, 0.72);
}

.spindle {
  position: absolute;
  inset: 48.4%;
  z-index: 3;
  border-radius: 50%;
  background: linear-gradient(135deg, #f6f2e7, #8f856c 58%, #242018);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
}

.tonearm {
  position: absolute;
  top: 12%;
  right: 14%;
  width: 38%;
  height: 45%;
  pointer-events: none;
  transform-origin: 85% 18%;
  transform: rotate(-18deg);
  transition: transform 720ms cubic-bezier(0.16, 1, 0.3, 1);
}

.player.is-playing .tonearm {
  transform: rotate(9deg);
}

.arm-base {
  position: absolute;
  top: 0;
  right: 0;
  width: 25%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 31%, rgba(255, 255, 255, 0.22), transparent 23%),
    linear-gradient(145deg, #2a2a2a, #050505 62%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.11),
    0 14px 34px rgba(0, 0, 0, 0.68);
}

.arm-line {
  position: absolute;
  top: 17%;
  right: 17%;
  width: 72%;
  height: 4.5%;
  border-radius: 99px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.48) 34%, rgba(255, 255, 255, 0.12)),
    #151515;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.16),
    0 12px 24px rgba(0, 0, 0, 0.58);
  transform: rotate(34deg);
  transform-origin: 92% 50%;
}

.needle {
  position: absolute;
  left: 13%;
  top: 52%;
  width: 14%;
  height: 7%;
  border-radius: 30% 70% 55% 45%;
  background: linear-gradient(135deg, #e7dfca, #4d4739 62%, #080808);
  box-shadow: 0 0 14px rgba(216, 199, 154, 0.2);
  transform: rotate(28deg);
}

.control-light {
  position: absolute;
  right: 28%;
  bottom: 18%;
  width: 2.6%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.24);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition:
    background 380ms ease,
    box-shadow 380ms ease,
    transform 380ms ease;
}

.player.is-playing .control-light {
  background: var(--red-hot);
  box-shadow:
    0 0 0 1px rgba(255, 28, 54, 0.28),
    0 0 18px rgba(255, 16, 45, 0.7),
    0 0 44px rgba(255, 16, 45, 0.28);
  transform: scale(1.15);
}

.play-symbol {
  position: absolute;
  left: 15%;
  bottom: 15%;
  width: 13%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 36px rgba(0, 0, 0, 0.72);
  opacity: 0.9;
  transition:
    opacity 280ms ease,
    transform 280ms ease,
    border-color 280ms ease;
}

.play-symbol::before,
.play-symbol::after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  transform: translate(-50%, -50%);
  transition: all 240ms ease;
}

.play-symbol::before {
  width: 0;
  height: 0;
  margin-left: 2px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid rgba(255, 255, 255, 0.78);
}

.play-symbol::after {
  width: 0;
  height: 0;
}

.player.is-playing .play-symbol {
  border-color: rgba(255, 255, 255, 0.18);
}

.player.is-playing .play-symbol::before,
.player.is-playing .play-symbol::after {
  width: 4px;
  height: 15px;
  margin: 0;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
}

.player.is-playing .play-symbol::before {
  transform: translate(calc(-50% - 4px), -50%);
}

.player.is-playing .play-symbol::after {
  transform: translate(calc(-50% + 4px), -50%);
}

.player.is-waiting .deck {
  animation: pressPulse 900ms ease;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes flowerSway {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-3.6deg);
  }

  48% {
    transform: translate3d(10px, -7px, 0) rotate(4.2deg);
  }
}

@keyframes flowerBreath {
  0%,
  100% {
    transform: scale(1) rotate(0.5deg);
  }

  50% {
    transform: scale(1.025) rotate(-0.7deg);
  }
}

@keyframes drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(22px, -18px, 0) scale(1.08);
  }
}

@keyframes pressPulse {
  0% {
    transform: scale(1);
  }

  45% {
    transform: scale(0.982);
  }

  100% {
    transform: scale(1);
  }
}

@media (max-width: 700px) {
  html,
  body {
    overflow: auto;
  }

  .stage {
    min-height: 100svh;
    padding: 32px 18px;
  }

  .composition {
    width: min(94vw, 430px);
    height: min(82svh, 680px);
    min-height: 560px;
  }

  .flower-orbit {
    top: 0;
    left: 50%;
    width: clamp(104px, 33vw, 142px);
    transform: translateX(-50%);
    animation-name: flowerSwayMobile;
  }

  .player {
    right: 50%;
    bottom: 2%;
    width: min(86vw, 370px);
    transform: translateX(50%);
  }
}

@media (max-width: 380px) {
  .composition {
    min-height: 520px;
  }

  .player {
    width: min(88vw, 326px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@keyframes flowerSwayMobile {
  0%,
  100% {
    transform: translateX(-50%) translate3d(0, 0, 0) rotate(-2.6deg);
  }

  48% {
    transform: translateX(-50%) translate3d(8px, -5px, 0) rotate(3.6deg);
  }
}