/* ======================================================================
   55-web-polish.css — Mobile-level visual polish for the web app
   Adds: blurred backgrounds, breathing glows, entrance animations,
         skeleton loaders, enhanced hovers, card depth, slider glow
   ====================================================================== */

/* ── 1. BLURRED ALBUM ART BACKGROUND (Song/Album/Artist pages) ────── */
.song-bg-blur {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.song-bg-blur img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(40px) brightness(0.55) saturate(1.4);
  transform: scale(1.15); /* prevent blur edge gaps */
  opacity: 0.6;
}
.song-bg-blur::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255,45,120,0.06) 0%,
    rgba(0,0,0,0.35) 40%,
    rgba(0,0,0,0.7) 100%
  );
}

/* ── 2. BREATHING / PULSING GLOW ON SCORES ────────────────────────── */
@keyframes breatheGlow {
  0%, 100% { text-shadow: 0 0 6px currentColor; opacity: 0.9; }
  50%      { text-shadow: 0 0 18px currentColor, 0 0 35px currentColor; opacity: 1; }
}
@keyframes breatheBoxGlow {
  0%, 100% { box-shadow: 0 0 8px rgba(255,105,180,0.2), 0 2px 8px rgba(0,0,0,0.3); }
  50%      { box-shadow: 0 0 20px rgba(255,105,180,0.45), 0 0 40px rgba(255,0,255,0.15), 0 2px 8px rgba(0,0,0,0.3); }
}

.score-breathe {
  animation: breatheGlow 2.2s ease-in-out infinite;
}
.card-breathe {
  animation: breatheBoxGlow 2.5s ease-in-out infinite;
}

/* Score display large number glow */
.score-display-glow {
  font-size: 2.2rem;
  font-weight: 800;
  color: #ff69b4;
  text-shadow: 0 0 10px rgba(255,105,180,0.6), 0 0 25px rgba(255,0,255,0.3);
  animation: breatheGlow 2.2s ease-in-out infinite;
}

/* ── 3. FEED CARD DEPTH & GLOW ────────────────────────────────────── */
.feed-item {
  border: 1px solid rgba(255,105,180,0.06) !important;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.feed-item:hover {
  border-color: rgba(255,105,180,0.15) !important;
  box-shadow:
    0 15px 40px rgba(0,0,0,0.6),
    0 0 15px rgba(255,105,180,0.08) !important;
  transform: translateY(-3px) !important;
}

/* Song card within feed — blurred art bg */
.feed-song-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}
.feed-song-card .song-card-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.feed-song-card .song-card-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(25px) brightness(0.4);
  transform: scale(1.2);
}
.feed-song-card .song-card-content {
  position: relative;
  z-index: 1;
}

/* ── 4. ENTRANCE ANIMATIONS ───────────────────────────────────────── */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* Page-level content entrance */
.animate-in {
  animation: fadeSlideUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.animate-in-delay-1 { animation-delay: 0.08s; }
.animate-in-delay-2 { animation-delay: 0.16s; }
.animate-in-delay-3 { animation-delay: 0.24s; }
.animate-in-delay-4 { animation-delay: 0.32s; }
.animate-in-delay-5 { animation-delay: 0.40s; }

/* Staggered list items */
.stagger-item {
  animation: fadeSlideIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.stagger-item:nth-child(1)  { animation-delay: 0.05s; }
.stagger-item:nth-child(2)  { animation-delay: 0.10s; }
.stagger-item:nth-child(3)  { animation-delay: 0.15s; }
.stagger-item:nth-child(4)  { animation-delay: 0.20s; }
.stagger-item:nth-child(5)  { animation-delay: 0.25s; }
.stagger-item:nth-child(6)  { animation-delay: 0.30s; }
.stagger-item:nth-child(7)  { animation-delay: 0.35s; }
.stagger-item:nth-child(8)  { animation-delay: 0.40s; }
.stagger-item:nth-child(9)  { animation-delay: 0.45s; }
.stagger-item:nth-child(10) { animation-delay: 0.50s; }

/* Scale-in for cards in grid layouts */
.scale-in {
  animation: scaleIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── 5. PROFILE STATS CARD POLISH ─────────────────────────────────── */
.stat-card-glow {
  background: #111;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,105,180,0.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
}
.stat-card-glow:hover {
  border-color: rgba(255,105,180,0.3);
  box-shadow:
    0 8px 20px rgba(0,0,0,0.4),
    0 0 15px rgba(255,105,180,0.15);
  transform: translateY(-2px);
}
.stat-card-glow .stat-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: #ff69b4;
  text-shadow: 0 0 8px rgba(255,105,180,0.4);
}
.stat-card-glow .stat-label {
  font-size: 0.78rem;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

/* ── 6. DISCOVERY CARD ENHANCEMENTS ───────────────────────────────── */
.discovery-card-enhanced {
  background: rgba(17,17,17,0.95);
  border: 1px solid rgba(255,105,180,0.08);
  border-radius: 14px;
  padding: 20px;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
}
.discovery-card-enhanced::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ff69b4, #ff00ff, transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.discovery-card-enhanced:hover {
  border-color: rgba(255,105,180,0.2);
  transform: translateY(-4px);
  box-shadow:
    0 12px 30px rgba(0,0,0,0.5),
    0 0 20px rgba(255,105,180,0.1),
    0 0 40px rgba(255,0,255,0.05);
}
.discovery-card-enhanced:hover::before {
  opacity: 1;
}

/* Album/track cover art glow on hover */
.cover-art-hover {
  border-radius: 10px;
  transition: all 0.3s ease;
}
.cover-art-hover:hover {
  box-shadow: 0 0 20px rgba(255,105,180,0.3), 0 8px 25px rgba(0,0,0,0.5);
  transform: scale(1.02);
}

/* ── 7. RATING SLIDER POLISH ──────────────────────────────────────── */
@keyframes thumbPulse {
  0%, 100% { box-shadow: 0 0 8px var(--thumb-glow, rgba(255,105,180,0.6)), 0 0 2px rgba(0,0,0,0.3); }
  50%      { box-shadow: 0 0 16px var(--thumb-glow, rgba(255,105,180,0.8)), 0 0 30px var(--thumb-glow, rgba(255,105,180,0.3)), 0 0 2px rgba(0,0,0,0.3); }
}

#ratingSlider::-webkit-slider-thumb,
#mixtape-rating-slider::-webkit-slider-thumb {
  animation: thumbPulse 2s ease-in-out infinite;
  transition: transform 0.15s ease;
}
#ratingSlider:active::-webkit-slider-thumb,
#mixtape-rating-slider:active::-webkit-slider-thumb {
  transform: scale(1.3);
  animation: none;
  box-shadow: 0 0 18px var(--thumb-glow, rgba(255,105,180,0.9)), 0 0 35px var(--thumb-glow, rgba(255,105,180,0.4)) !important;
}
#ratingSlider::-moz-range-thumb,
#mixtape-rating-slider::-moz-range-thumb {
  animation: thumbPulse 2s ease-in-out infinite;
  transition: transform 0.15s ease;
}
#ratingSlider:active::-moz-range-thumb,
#mixtape-rating-slider:active::-moz-range-thumb {
  transform: scale(1.3);
  animation: none;
}

/* Rating label floating glow */
#ratingLabel,
#mixtapeRatingLabel {
  text-shadow: 0 0 6px currentColor;
  transition: color 200ms ease, left 60ms linear, text-shadow 200ms ease !important;
}

/* Rating value display */
.rating-value-glow {
  color: #ff69b4;
  font-weight: 800;
  font-size: 1.6rem;
  text-shadow: 0 0 10px rgba(255,105,180,0.5);
  animation: breatheGlow 2.2s ease-in-out infinite;
}

/* ── 8. SKELETON LOADING SHIMMER ──────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.03) 25%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.03) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 8px;
}
.skeleton-text {
  height: 14px;
  margin-bottom: 8px;
  border-radius: 4px;
}
.skeleton-text.short { width: 60%; }
.skeleton-text.medium { width: 80%; }
.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: 12px;
}
.skeleton-cover {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
}
.skeleton-card {
  padding: 20px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.03);
  min-height: 120px;
}

/* ── 9. GENERAL HOVER & INTERACTION POLISH ────────────────────────── */

/* Card dark variants — add hover depth */
.card-dark-20,
.card-dark-25,
.card-dark-18 {
  transition: all 0.3s ease;
  border: 1px solid rgba(255,105,180,0.05);
}
.card-dark-20:hover,
.card-dark-25:hover,
.card-dark-18:hover {
  border-color: rgba(255,105,180,0.15);
  box-shadow: 0 6px 18px rgba(0,0,0,0.4), 0 0 12px rgba(255,105,180,0.08);
  transform: translateY(-1px);
}

/* Cover art card */
.card-dark-cover {
  transition: all 0.3s ease;
  border: 1px solid rgba(255,105,180,0.05);
  overflow: hidden;
}
.card-dark-cover:hover {
  border-color: rgba(255,105,180,0.2);
  box-shadow: 0 8px 25px rgba(0,0,0,0.5), 0 0 20px rgba(255,105,180,0.12);
}
.card-dark-cover .cover-art {
  transition: transform 0.4s ease;
}
.card-dark-cover:hover .cover-art {
  transform: scale(1.03);
}

/* Buttons — consistent glow on hover */
.btn:hover,
.save-rating-btn:hover,
.plan-btn:hover:not(.is-disabled) {
  box-shadow: 0 0 12px rgba(255,105,180,0.4), 0 4px 12px rgba(0,0,0,0.3);
}

/* Action buttons in feed/comments */
.post-actions button {
  transition: all 0.25s ease !important;
}
.post-actions button:hover {
  background: rgba(255,105,180,0.12) !important;
  border-color: rgba(255,105,180,0.3) !important;
  box-shadow: 0 0 10px rgba(255,105,180,0.15);
  transform: scale(1.05);
}

/* Link hover glow for accent links */
a.text-accent {
  transition: all 0.2s ease;
}
a.text-accent:hover {
  text-shadow: 0 0 8px rgba(255,105,180,0.5);
}

/* Tab buttons — enhanced active glow */
.tab-btn.active {
  text-shadow: 0 0 15px rgba(255,105,180,0.8), 0 0 30px rgba(255,105,180,0.4), 0 0 50px rgba(255,0,255,0.2) !important;
}

/* Score pills/tags — subtle glow */
.score-tag {
  transition: all 0.3s ease;
  box-shadow: 0 0 6px rgba(186,71,143,0.3);
}
.score-tag:hover {
  box-shadow: 0 0 12px rgba(255,105,180,0.5);
  transform: scale(1.05);
}

/* ── 10. SMOOTH SCROLL & PAGE FEEL ────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

/* Subtle focus ring for accessibility + style */
*:focus-visible {
  outline: 2px solid rgba(255,105,180,0.5);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── 11. MUSIC DETAIL GRID CARDS — NEON BORDERS ───────────────────── */
.music-detail-grid .card-dark-20,
.music-detail-grid .card-dark-25 {
  border: 1px solid rgba(255,105,180,0.08);
}
.music-detail-grid .card-dark-20 h3,
.music-detail-grid .card-dark-25 h3 {
  text-shadow: 0 0 8px rgba(255,105,180,0.3);
}

/* ── 12. THEMED COVER PLACEHOLDER ─────────────────────────────────── */
.cover-art {
  background: rgba(255, 105, 180, 0.08);
  border: 1px solid rgba(255, 105, 180, 0.15);
}
.cover-art[src=""],
.cover-art:not([src]) {
  min-height: 200px;
}
/* When cover image fails to load, show themed placeholder */
.cover-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 105, 180, 0.08);
  border: 1px solid rgba(255, 105, 180, 0.15);
  border-radius: 12px;
  color: #ff69b4;
  font-size: 3rem;
  aspect-ratio: 1;
}
.cover-placeholder i {
  opacity: 0.7;
}

/* ── 13. SPOTIFY ATTRIBUTION ──────────────────────────────────────── */
.btn-spotify {
  background: #1DB954 !important;
  color: #fff !important;
  border: none;
}
.btn-spotify:hover {
  background: #1ed760 !important;
  box-shadow: 0 0 12px rgba(29, 185, 84, 0.4);
}

/* ── 14. RESPONSIVE ADJUSTMENTS ───────────────────────────────────── */
@media (max-width: 768px) {
  .song-bg-blur img {
    filter: blur(30px) brightness(0.5) saturate(1.3);
    opacity: 0.55;
  }
  .animate-in,
  .stagger-item {
    animation-duration: 0.3s; /* faster on mobile for snappier feel */
  }
}

/* ── 14. NEON THEME OVERRIDES — Extra glow in neon mode ───────────── */
[data-theme="neon"] .card-dark-20,
[data-theme="neon"] .card-dark-25,
[data-theme="neon"] .card-dark-18 {
  border-color: rgba(255,0,255,0.12);
}
[data-theme="neon"] .card-dark-20:hover,
[data-theme="neon"] .card-dark-25:hover,
[data-theme="neon"] .card-dark-18:hover {
  border-color: rgba(255,0,255,0.3);
  box-shadow: 0 6px 18px rgba(0,0,0,0.4), 0 0 18px rgba(255,0,255,0.15);
}
[data-theme="neon"] .feed-item:hover {
  border-color: rgba(255,0,255,0.2) !important;
  box-shadow:
    0 15px 40px rgba(0,0,0,0.6),
    0 0 20px rgba(255,0,255,0.12) !important;
}
[data-theme="neon"] .discovery-card-enhanced:hover {
  box-shadow:
    0 12px 30px rgba(0,0,0,0.5),
    0 0 25px rgba(255,0,255,0.15),
    0 0 50px rgba(255,0,255,0.05);
}
[data-theme="neon"] .score-display-glow {
  color: #ff00ff;
  text-shadow: 0 0 12px rgba(255,0,255,0.7), 0 0 30px rgba(255,0,255,0.3);
}

/* ── 15. LIGHT THEME ADJUSTMENTS ──────────────────────────────────── */
[data-theme="light"] .song-bg-blur img {
  filter: blur(40px) brightness(0.7) saturate(0.8);
  opacity: 0.3;
}
[data-theme="light"] .card-dark-20:hover,
[data-theme="light"] .card-dark-25:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,0.1), 0 0 12px rgba(255,105,180,0.06);
}
[data-theme="light"] .skeleton {
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.04) 25%,
    rgba(0,0,0,0.08) 50%,
    rgba(0,0,0,0.04) 75%
  );
  background-size: 200% 100%;
}