@font-face {
  font-family: 'PPRightGrotesk';
  src: url('public/fonts/PPRightGrotesk-CompactDark.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

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

body {
  background: #131313;
  font-family: 'PPRightGrotesk', sans-serif;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

/* Background video */
.bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

/* Dark overlay on background */
.bg-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1;
  pointer-events: none;
}

/* Content container — desktop fluid: 1280–1920 */
.content-container {
  position: absolute;
  top: clamp(32px, 7.1vh, 96px);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(880px, 91.1vw, 1750px);
  height: clamp(440px, 71.2vh, 780px);
  background: #000000;
  border-radius: clamp(24px, 2.22vw, 42px);
  overflow: hidden;
  z-index: 2;
}

/* Title */
.title {
  position: absolute;
  top: clamp(20px, 2.22vw, 42px);
  left: clamp(20px, 2.22vw, 42px);
  font-family: 'PPRightGrotesk', sans-serif;
  font-size: clamp(44px, 4.44vw, 86px);
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 0.96;
  white-space: nowrap;
}

/* Artist name */
.artist {
  position: absolute;
  bottom: clamp(20px, 2.22vw, 42px);
  left: clamp(20px, 2.22vw, 42px);
  font-family: 'PPRightGrotesk', sans-serif;
  font-size: clamp(32px, 3.33vw, 64px);
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 0.96;
  white-space: nowrap;
}

/* Cassette video */
.cassette {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(240px, 23.82vw, 460px);
  height: clamp(240px, 23.82vw, 460px);
  background: #000000;
  object-fit: cover;
}

/* Button container */
.button-container {
  position: absolute;
  bottom: clamp(32px, 7.1vh, 96px);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(520px, 51.67vw, 1000px);
  display: flex;
  gap: clamp(6px, 0.56vw, 11px);
  z-index: 2;
}

/* Play button */
.play-btn {
  flex: 1 0 0;
  height: clamp(80px, 11.89vh, 140px);
  background: #ffffff;
  border-radius: clamp(24px, 2.22vw, 42px);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: background 0.2s ease;
}

.play-btn img {
  width: clamp(36px, 3.33vw, 64px);
  height: clamp(36px, 3.33vw, 64px);
}

.play-btn:hover {
  background: #000000;
}

.play-btn:hover img {
  filter: invert(1);
}

/* Queue button */
.queue-btn {
  flex: 1 0 0;
  height: clamp(80px, 11.89vh, 140px);
  background: #252525;
  border-radius: clamp(24px, 2.22vw, 42px);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: background 0.2s ease;
}

.queue-btn img {
  width: clamp(36px, 3.33vw, 64px);
  height: clamp(36px, 3.33vw, 64px);
}

.queue-btn:hover {
  background: #ffffff;
}

.queue-btn:hover img {
  filter: invert(1);
}

/* Popup overlay */
.popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  z-index: 100;
  align-items: center;
  justify-content: center;
}

.popup-overlay.active {
  display: flex;
}

/* Modal */
.modal {
  position: relative;
  width: 375px;
  height: 248px;
  background: #252525;
  border-radius: 32px;
  overflow: hidden;
}

/* Listen on header */
.modal-header {
  position: absolute;
  top: 44px;
  left: 50%;
  transform: translate(-50%, -100%);
  font-family: 'PPRightGrotesk', sans-serif;
  font-size: 24px;
  color: #ffffff;
  letter-spacing: -0.48px;
  line-height: 0.96;
  white-space: nowrap;
  text-align: center;
}

/* Close button */
.close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}

.close-btn img {
  width: 32px;
  height: 32px;
}

.close-btn:hover {
  opacity: 0.6;
}

/* Services container */
.services {
  position: absolute;
  top: 64px;
  left: 16px;
  width: 343px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Service row */
.service-row {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 80px;
  background: #3d3d3d;
  border-radius: 24px;
  padding: 28px 16px;
  overflow: hidden;
  text-decoration: none;
  color: #ffffff;
  transition: opacity 0.2s ease;
}

.service-row img {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.service-row:hover {
  opacity: 0.6;
}

.service-row span {
  font-family: 'PPRightGrotesk', sans-serif;
  font-size: 32px;
  color: #ffffff;
  letter-spacing: -0.64px;
  line-height: 0.96;
  white-space: nowrap;
}

/* ===== MOBILE (375–430px) ===== */
@media (max-width: 767px) {
  .bg-overlay {
    background: rgba(0, 0, 0, 0.64);
  }

  .content-container {
    width: calc(100vw - 32px);
    height: clamp(500px, 73.8vh, 720px);
    top: clamp(48px, 7.9vh, 72px);
    border-radius: clamp(24px, 8.53vw, 36px);
  }

  .title {
    font-size: clamp(42px, 12.8vw, 55px);
    letter-spacing: -0.96px;
    white-space: normal;
    top: clamp(24px, 8.53vw, 36px);
    left: clamp(24px, 8.53vw, 36px);
  }

  .artist {
    font-size: clamp(22px, 6.4vw, 28px);
    letter-spacing: -0.48px;
    bottom: clamp(24px, 8.53vw, 36px);
    left: clamp(24px, 8.53vw, 36px);
  }

  .cassette {
    width: calc(100vw - 32px);
    height: calc(100vw - 32px);
  }

  .button-container {
    bottom: clamp(24px, 4.2vh, 44px);
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100vw - 32px);
    gap: 8px;
  }

  .play-btn {
    height: clamp(80px, 13.2vh, 120px);
    border-radius: clamp(24px, 8.53vw, 36px);
  }

  .play-btn img {
    width: 48px;
    height: 48px;
  }

  .queue-btn {
    height: clamp(80px, 13.2vh, 120px);
    border-radius: clamp(24px, 8.53vw, 36px);
  }

  .queue-btn img {
    width: 48px;
    height: 48px;
  }

  .popup-overlay.active {
    align-items: flex-end;
  }

  .modal {
    width: 100vw;
    max-width: 430px;
    height: auto;
    min-height: 248px;
    border-radius: 32px 32px 0 0;
    padding-bottom: clamp(16px, 4.27vw, 24px);
  }

  .services {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    margin: 64px 16px 0;
  }
}

/* ===== SMALL PHONES (≤389px) ===== */
@media (max-width: 389px) {
  .title {
    font-size: 40px;
  }

  .artist {
    font-size: 20px;
  }

  .service-row span {
    font-size: 28px;
  }
}