:root {
  --stage-w: 1440px;
  --stage-h: 832px;
  --photo-border: 7.21px;
  --photo-radius: 14.22px;
  --photo-shadow: -1.803px 3.605px 3.605px 0 rgba(0, 0, 0, 0.25);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  background: #ffffff;
  overflow: hidden;
  /* native cursor hidden; the .custom-cursor div tracks the mouse instead.
     When the cursor is over a photo, body gets .over-photo and the native
     crosshair returns so the user gets crisp aim while painting. */
  cursor: none;
}

body.over-photo {
  cursor: crosshair;
}

body.near-player {
  cursor: default;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Mono', ui-monospace, Menlo, monospace;
  color: #000;
}

.stage {
  position: relative;
  width: var(--stage-w);
  height: var(--stage-h);
  background: #ffffff;
  transform-origin: center center;
  /* JS sets transform: scale(...) to fit the viewport */
}

.photo-circle {
  position: absolute;
  left: 136px;
  top: 126px;
  width: 1156.32px;
  height: 1068px;
  /* rotation applied by JS so it stays in sync with cursor math */
  transform-origin: 50% 50%;
  will-change: transform;
  pointer-events: none;
}

.photo {
  position: absolute;
  width: 158px;
  height: 158px;
  border-radius: var(--photo-radius);
  background: white;
  border: var(--photo-border) solid #fff;
  box-shadow: var(--photo-shadow);
  overflow: hidden;
  transform-origin: 50% 50%;
  pointer-events: none;
}

.photo canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--photo-radius) - var(--photo-border));
}

.gradient {
  position: absolute;
  left: 0;
  top: 521px;
  width: 1440px;
  height: 311px;
  pointer-events: none;
  background: linear-gradient(to top, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
  z-index: 2;
}

.title {
  position: absolute;
  left: 417px;
  top: 393px;
  width: 593px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  opacity: 0.7;
  font-family: 'Space Mono', monospace;
  font-size: 56px;
  line-height: 70px;
  color: #000;
  text-align: center;
  white-space: pre-wrap;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.8s ease;
}

.title.is-fading {
  opacity: 0;
}

/* big soft glow that follows the cursor whenever it's not over a photo */
.custom-cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 140px;
  height: 140px;
  pointer-events: none;
  /* the SVG is anchored at its centre over the actual pointer position */
  transform: translate(-50%, -50%);
  z-index: 9999;
  transition: opacity 0.2s ease;
  /* hidden until JS positions it, so it doesn't flash in the top-left */
  opacity: 0;
}

.custom-cursor.is-ready {
  opacity: 1;
}

body.over-photo .custom-cursor,
body.near-player .custom-cursor {
  opacity: 0;
}

.custom-cursor img {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-drag: none;
}

/* Music player – geometry mirrored from Figma node 11:195.
   The row is 102.38 × 55.81. Prev sits at (0,19), vinyl at (23.29,0),
   next at (88,19). 6px gap, then the song-title row. */
.music-player {
  position: absolute;
  left: 669px;
  top: 693px;
  width: 102.383px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 4;
}

.player-row {
  position: relative;
  width: 102.383px;
  height: 55.807px;
}

.ctl {
  position: absolute;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.5);
  display: block;
}
.ctl:hover {
  color: rgba(0, 0, 0, 0.85);
}

.ctl.prev,
.ctl.next {
  width: 14.269px;
  height: 12.548px;
  top: 19px;
}
.ctl.prev {
  left: 0;
}
.ctl.next {
  left: 88px;
}
.ctl.next svg {
  /* same SVG as prev, mirrored horizontally to make the next icon */
  transform: scaleX(-1);
}
.ctl svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ctl.play {
  left: 23.29px;
  top: 0;
  width: 55.807px;
  height: 55.807px;
  border-radius: 50%;
  background: transparent;
}

.vinyl-disc {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* approximation of the off-centre pink radial used in Figma */
  background: radial-gradient(
    circle at 32% 26%,
    rgb(255, 233, 253) 0%,
    rgb(247, 195, 243) 45%,
    rgb(236, 165, 231) 100%
  );
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.55),
    0 1px 2px rgba(0, 0, 0, 0.08);
  position: relative;
}

/* Animation is always present but paused; toggling the .playing class
   on the parent just switches play-state so the disc freezes at its
   current angle when paused instead of snapping back to 0. */
.vinyl-disc {
  animation: spin 4s linear infinite;
  animation-play-state: paused;
}
.music-player.playing .vinyl-disc {
  animation-play-state: running;
}

.vinyl-hole {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8.4px;
  height: 8.4px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}

.song-title {
  font-family: 'Space Mono', 'SF Pro', monospace;
  font-size: 8.329px;
  color: rgba(0, 0, 0, 0.5);
  text-align: center;
  width: 100%;
  line-height: normal;
  letter-spacing: 0;
  text-transform: lowercase;
}
.song-title .note {
  display: inline-block;
  margin-right: 1.4em;
  font-size: 1em;
  line-height: 1;
}

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