.slideshow-frame { isolation: isolate; }

.slideshow-frame .slide-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.9) contrast(1.03) brightness(0.92);
  transform: scale(1.055) !important;
  transition: opacity 1.25s cubic-bezier(0.4, 0, 0.2, 1), transform 5.2s cubic-bezier(0.2, 0.68, 0.2, 1), filter 600ms ease !important;
}

.slideshow-frame .slide-image.active { opacity: 1; transform: scale(1.012) !important; }
.slideshow-frame:hover .slide-image.active { filter: saturate(1) contrast(1.02) brightness(0.98); }
.slideshow-frame .photo-glow, .slideshow-frame .photo-meta, .slideshow-toggle, .slide-progress { z-index: 4; }

/* Keep the gallery clean: only the simple caption beneath it remains. */
.slideshow-frame .photo-meta { display: none; }
.image-caption { justify-content: flex-start; }
.image-caption span:last-child { display: none; }

.slideshow-toggle {
  position: absolute;
  right: 13px;
  bottom: 34px;
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 50%;
  color: white;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(9px);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.58rem;
  place-items: center;
  transition: background 180ms ease, transform 180ms ease;
}

.slideshow-toggle:hover { background: rgba(255, 142, 182, 0.72); transform: scale(1.08); }

.slide-progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
}

.slide-progress i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--pink), var(--amber)); transform: translateX(-100%); }
.slide-progress.running i { animation: slide-timer 5.2s linear forwards; }
.slide-progress.paused i { animation-play-state: paused; }
#slide-label, #slide-number { color: white; font: inherit; font-weight: 400; }

.turntable-player {
  position: relative;
  overflow: hidden;
  padding: 14px;
  background:
    radial-gradient(circle at 13% 30%, rgba(255, 142, 182, 0.09), transparent 32%),
    rgba(255, 255, 255, 0.025);
}

.turntable-player::after {
  position: absolute;
  right: -48px;
  bottom: -65px;
  width: 150px;
  height: 150px;
  border: 1px solid rgba(255, 255, 255, 0.035);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.turntable { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 18px; align-items: center; }

.record-deck {
  position: relative;
  width: 124px;
  height: 124px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: linear-gradient(145deg, #26211e, #100e0d 68%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025), 0 16px 32px rgba(0, 0, 0, 0.22);
}

.record-button {
  position: absolute;
  top: 9px;
  left: 9px;
  display: block;
  width: 104px;
  height: 104px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.record-button:disabled { cursor: wait; opacity: 0.55; }

.record {
  position: absolute;
  inset: 0;
  display: grid;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, transparent 0 2px, rgba(255, 255, 255, 0.045) 3px 4px),
    radial-gradient(circle at 42% 40%, #292929, #070707 62%);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.52);
  place-items: center;
  animation: record-spin 2.9s linear infinite;
  animation-play-state: paused;
}

.record-shine {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: conic-gradient(from 35deg, transparent 0 14%, rgba(255, 255, 255, 0.11) 16%, transparent 21% 53%, rgba(255, 142, 182, 0.08) 57%, transparent 62%);
}

.record-label {
  position: relative;
  display: grid;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #17100f;
  background: linear-gradient(135deg, #ffbd7a, #ff8eb6);
  font-style: normal;
  line-height: 1;
  place-items: center;
}

.record-label b { position: absolute; top: 8px; font-size: 0.43rem; letter-spacing: 0.08em; }
.record-label small { position: absolute; bottom: 6px; font-family: var(--mono); font-size: 0.22rem; line-height: 1.1; text-align: center; }
.spindle { position: absolute; width: 5px; height: 5px; border: 1px solid rgba(0, 0, 0, 0.6); border-radius: 50%; background: #eee6dc; }

.play-symbol {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 4;
  display: grid;
  width: 29px;
  height: 29px;
  padding-left: 2px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  color: white;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
  font-size: 0.48rem;
  transform: translate(-50%, -50%);
  place-items: center;
  transition: opacity 180ms ease, transform 180ms ease;
}

.record-button:hover:not(:disabled) .play-symbol { transform: translate(-50%, -50%) scale(1.12); }
.music-playing .record { animation-play-state: running; }
.music-playing .play-symbol { opacity: 0; }
.music-playing .record-button:hover .play-symbol { opacity: 1; }

.tonearm {
  position: absolute;
  top: 8px;
  right: 7px;
  z-index: 5;
  width: 25px;
  height: 91px;
  pointer-events: none;
  transform: rotate(-27deg);
  transform-origin: 50% 10px;
  transition: transform 750ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tonearm-pivot { position: absolute; top: 0; left: 3px; width: 20px; height: 20px; border: 4px solid #88817b; border-radius: 50%; background: #292624; box-shadow: 0 3px 7px #000; }
.tonearm-bar { position: absolute; top: 17px; left: 11px; width: 4px; height: 63px; border-radius: 5px; background: linear-gradient(90deg, #595550, #d2cbc3 45%, #625e59); box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6); }
.tonearm-head { position: absolute; bottom: 0; left: 5px; width: 17px; height: 16px; border-radius: 2px 2px 5px 5px; background: #aaa39c; }
.music-playing .tonearm { transform: rotate(-10deg); }

.track-copy { min-width: 0; }
.track-topline { display: flex; align-items: center; justify-content: space-between; }
.track-topline p { margin: 0; color: var(--pink); font-family: var(--mono); font-size: 0.48rem; letter-spacing: 0.13em; }
.track-copy h2 { margin: 7px 0 1px; font-size: 1rem; font-weight: 550; letter-spacing: -0.03em; }
.track-artist { display: block; overflow: hidden; color: var(--muted); font-size: 0.59rem; text-overflow: ellipsis; white-space: nowrap; }
.turntable-player .levels i { opacity: 0.22; animation-play-state: paused; }
.music-playing .turntable-player .levels i { opacity: 1; animation-play-state: running; }

.audio-timeline { position: relative; height: 2px; margin-top: 16px; overflow: hidden; background: rgba(244, 241, 236, 0.12); }
.audio-timeline i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--pink), var(--amber)); transform: translateX(-100%); transition: transform 250ms linear; }
.audio-meta { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; margin-top: 9px; color: rgba(244, 241, 236, 0.34); font-family: var(--mono); font-size: 0.4rem; letter-spacing: 0.07em; }
#audio-note { overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.music-playing #music-state { color: #9df08d; }
.autoplay-note { margin: 11px 0 0; color: rgba(244, 241, 236, 0.25); font-family: var(--mono); font-size: 0.39rem; letter-spacing: 0.06em; text-align: center; }

@keyframes slide-timer { to { transform: translateX(0); } }
@keyframes record-spin { to { transform: rotate(360deg); } }

@media (max-width: 560px) {
  .slideshow-toggle { right: 11px; bottom: 31px; }
  .turntable { grid-template-columns: 104px minmax(0, 1fr); gap: 13px; }
  .record-deck { width: 104px; height: 104px; }
  .record-button { top: 8px; left: 8px; width: 88px; height: 88px; }
  .tonearm { top: 5px; right: 2px; height: 78px; transform: rotate(-27deg) scale(0.86); }
  .music-playing .tonearm { transform: rotate(-10deg) scale(0.86); }
  .track-copy h2 { font-size: 0.88rem; }
  .track-artist { font-size: 0.51rem; }
  .audio-meta { font-size: 0.34rem; }
}

@media (prefers-reduced-motion: reduce) {
  .slide-progress i { animation: none !important; }
  .slideshow-frame .slide-image { transition-duration: 0.01ms !important; }
  .music-playing .record { animation-duration: 8s !important; }
}