/* Floating genre tags — layered on top of the compiled Manus page. */

.genre-field {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  display: none;
}

.genre-float {
  position: absolute;
  animation: genre-bob var(--dur, 9s) ease-in-out var(--delay, 0s) infinite alternate;
  opacity: 0;
  animation-fill-mode: both;
}

.genre-float > * {
  animation: genre-in 1.4s ease-out var(--in, 0.4s) both;
}

.genre-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px 10px 14px;
  border: 1px solid #fea7d56b;
  border-radius: 100px;
  background: #f3f4fb12;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #f3f4fb;
  font: 500 10px/1.2 Unbounded, sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 28px #0d124040;
  transform: rotate(var(--tilt, 0deg));
}

.genre-pill svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #fea7d5;
}

.genre-pill--serif {
  font: italic 19px/1 "Instrument Serif", serif;
  letter-spacing: 0.01em;
  text-transform: none;
  padding: 9px 20px 10px 14px;
}

/* Vinyl record with a decade label */
.genre-vinyl {
  position: relative;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 30px #0d124066, 0 0 0 1px #f3f4fb2e;
  transform: rotate(var(--tilt, 0deg));
}

.genre-vinyl::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, #ffffff00 0deg, #ffffff2e 30deg, #ffffff00 70deg, #ffffff00 180deg, #fea7d533 210deg, #ffffff00 250deg),
    repeating-radial-gradient(circle, #14123a 0 2px, #1d1a4d 2px 3px);
  animation: genre-spin 7s linear infinite;
}

.genre-vinyl span {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fea7d5;
  color: #0d1240;
  display: grid;
  place-items: center;
  font: 700 10px/1 Unbounded, sans-serif;
  letter-spacing: -0.02em;
}

/* Mobile / tablet strip */
.genre-strip {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px 8px;
  margin: 26px auto 0;
  max-width: 420px;
}

.genre-strip .genre-pill {
  padding: 7px 13px 7px 10px;
  gap: 7px;
  font-size: 8px;
  letter-spacing: 0.16em;
  box-shadow: none;
  animation: genre-bob-small var(--dur, 5s) ease-in-out var(--delay, 0s) infinite alternate;
}

.genre-strip .genre-pill svg {
  width: 13px;
  height: 13px;
}

.genre-strip .genre-pill--serif {
  font-size: 15px;
  letter-spacing: 0;
  padding: 5px 14px 6px 10px;
}

@media (min-width: 1200px) {
  .genre-field { display: block; }
}

@media (max-width: 1199px) {
  .genre-strip { display: flex; }
}

/* Respect the page's own pause-motion toggle */
.motion-paused .genre-float,
.motion-paused .genre-float > *,
.motion-paused .genre-vinyl::before,
.motion-paused .genre-strip .genre-pill {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .genre-float { opacity: 1; }
}

@keyframes genre-bob {
  0% { transform: translate3d(0, 14px, 0); opacity: 1; }
  100% { transform: translate3d(var(--drift, 10px), -16px, 0); opacity: 1; }
}

@keyframes genre-bob-small {
  0% { transform: translateY(2px); }
  100% { transform: translateY(-3px); }
}

@keyframes genre-in {
  from { opacity: 0; filter: blur(6px); }
  to { opacity: 1; filter: blur(0); }
}

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