:root{
  --bg:#0f1226;
  --card:#111425;
  --muted:#9aa0b4;
  --accent:#6ee7b7;
  --glass: rgba(255,255,255,0.03);
  --glass-strong: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.08);
}

/* Custom scrollbar styling */
/* Native browser scrollbars: no custom styling */
/* Styled scrollbars (visible but tasteful) */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:rgba(15,18,38,0.4);border-radius:10px}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(110,231,183,0.6),rgba(96,165,250,0.6));border-radius:10px;border:2px solid rgba(15,18,38,0.4);transition:background .3s ease}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,rgba(110,231,183,0.8),rgba(96,165,250,0.8));box-shadow:0 0 10px rgba(110,231,183,0.4)}
/* Firefox */
*{scrollbar-width:thin;scrollbar-color:rgba(110,231,183,0.6) rgba(15,18,38,0.4)}
*{box-sizing:border-box}
html, body{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}
html{
  scroll-behavior:smooth;
}
body{
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: radial-gradient(1200px 600px at 10% 10%, #18202f 0%, var(--bg) 30%), linear-gradient(180deg,#0b0d14, #0f1226 80%);
  color:#e6eef8;
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
}
/* Scrollable content area - main scrolling container */
.content-wrapper{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}
/* Disable scroll when modal is open */
body.modal-open .content-wrapper{
  overflow:hidden;
}
body.modal-open{
  overflow:hidden;
}
/* Scroll margin for smooth anchor navigation */
section{scroll-margin-top:80px}
.hero{scroll-margin-top:0}
.container{max-width:1400px;margin:0 auto;padding:40px 60px}
.site-header{padding:18px 0 8px}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:18px}
.logo{font-size:22px;font-weight:700;letter-spacing:.5px}
.filters{position:sticky;top:68px;z-index:100;display:flex;align-items:center;gap:16px;padding:20px 24px;margin:24px 0;background:rgba(8,10,20,0.6);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);border:1px solid rgba(110,231,183,0.1);border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05)}
.filters .search{flex:1;max-width:600px;min-width:240px}
.filters .sort{flex:1 1 auto;justify-content:flex-end}
.search{width:100%;padding:14px 20px;border-radius:12px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.08);color:#e6eef8;font-size:15px;transition:all .2s ease;box-shadow:inset 0 1px 3px rgba(0,0,0,0.2)}
.search:focus{outline:none;border-color:rgba(110,231,183,0.4);box-shadow:0 0 0 3px rgba(110,231,183,0.1);background:rgba(255,255,255,0.06)}
.search::placeholder{color:var(--muted)}
.sort{display:flex;gap:10px}
.sort button{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.08);color:var(--muted);padding:12px 24px;border-radius:12px;cursor:pointer;font-size:15px;font-weight:500;transition:all .2s ease;white-space:nowrap}
.sort button:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.12)}
.sort button[aria-pressed="true"]{background:linear-gradient(135deg,var(--accent),#5eead4);color:#04221a;border-color:transparent;box-shadow:0 4px 12px rgba(110,231,183,0.4)}
.container{max-width:1400px;margin:0 auto;padding:40px 60px}
.site-header{padding:18px 0 8px}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{font-size:28px;margin:0;font-weight:800;letter-spacing:1px}
.brand-wrap{display:flex;flex-direction:column}
.tag{color:var(--muted);margin:6px 0 0}
.artist-links{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.artist-links a{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,0.06);color:#e6eef8;text-decoration:none;border:1px solid rgba(255,255,255,0.07)}
.artist-links a:hover{background:rgba(255,255,255,0.10)}
.artist-links .fa{font-size:14px}
.controls{display:flex;align-items:center;gap:12px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px;margin-top:32px;position:relative;z-index:1}
.card{
  background:linear-gradient(180deg,var(--card),#0b1020);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 4px 12px rgba(4,6,20,0.4);
  cursor:pointer;
  position:relative;
  transform:translate3d(0,0,0);
  -webkit-transform:translate3d(0,0,0);
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:subpixel-antialiased;
}

.card.show{
  opacity:1;
}
/* Subtle glow hint on cards */
.card::before{
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:12px;
  padding:1px;
  background:linear-gradient(135deg, rgba(110,231,183,0.15), rgba(96,165,250,0.15), rgba(168,85,247,0.15));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite:exclude;
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}
.card:hover::before{opacity:0.6}
/* Shimmer effect on service buttons */
@keyframes shimmer{
  0%{background-position:-200% center}
  100%{background-position:200% center}
}
.service-link:hover{
  background:linear-gradient(90deg, transparent, rgba(110,231,183,0.1), transparent);
  background-size:200% 100%;
  animation:shimmer 2s ease-in-out infinite;
}

/* Card entrance from animations section */
.cover{
  transition:transform .3s ease;
  transform:translate3d(0,0,0);
  -webkit-transform:translate3d(0,0,0);
  will-change:transform;
  /* Sharp image rendering */
  image-rendering:-webkit-optimize-contrast;
  image-rendering:crisp-edges;
  -webkit-backface-visibility:visible;
  backface-visibility:visible;
}
.card-media{height:200px;object-fit:cover;width:100%;display:block}
/* primary selector used in markup: .cover (keeps .card-media for legacy) */
.cover{width:100%;display:block;object-fit:cover;aspect-ratio:1/1;height:auto;max-height:220px;border-radius:8px}
.card-body{
  padding:14px;
  flex:1;
  display:flex;
  flex-direction:column;
}
.card-title{
  margin:0;
  font-size:18px;
  font-weight:600;
  line-height:1.3;
  /* Force sharp text */
  -webkit-font-smoothing:subpixel-antialiased;
  -moz-osx-font-smoothing:auto;
  text-rendering:geometricPrecision;
}
.card-meta{
  color:var(--muted);
  font-size:13px;
  margin-top:6px;
  -webkit-font-smoothing:subpixel-antialiased;
}
.card-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:auto;
  padding-top:12px;
}
.service-list{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
/* Make service buttons neutral, matching header artist links */
.service{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;text-decoration:none;
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.07);color:#e6eef8;font-size:14px;transition:all .2s ease;opacity:0;animation:btnFadeIn .4s ease forwards}
.service:nth-child(1){animation-delay:.3s}
.service:nth-child(2){animation-delay:.35s}
.service:nth-child(3){animation-delay:.4s}
.service:nth-child(4){animation-delay:.45s}
.service:hover{background:rgba(110,231,183,0.15);border-color:rgba(110,231,183,0.3);transform:translateY(-2px);box-shadow:0 4px 12px rgba(110,231,183,0.2)}
@keyframes btnFadeIn{to{opacity:1}}
/* Neutralize old platform-specific backgrounds */
.service.yandex,.service.apple,.service.spotify,.service.vk{background:rgba(255,255,255,0.06);color:#e6eef8}
.site-footer{padding:28px 0;text-align:center;color:var(--muted)}
.site-footer p{margin:4px 0}
.site-footer .disclaimer{font-size:13px;opacity:0.7;font-style:italic}

.empty{padding:24px;text-align:center;color:var(--muted)}
.btn-link{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:6px 10px;border-radius:8px;color:var(--muted);text-decoration:none}
.open-btn{background:linear-gradient(135deg,rgba(110,231,183,0.15),rgba(96,165,250,0.15));border:1px solid rgba(110,231,183,0.3);color:var(--accent);padding:10px 16px;border-radius:50%;cursor:pointer;font-size:16px;transition:all .3s cubic-bezier(0.16, 1, 0.3, 1);display:flex;align-items:center;justify-content:center;width:44px;height:44px;box-shadow:0 4px 12px rgba(110,231,183,0.2)}
.open-btn:hover{background:linear-gradient(135deg,rgba(110,231,183,0.25),rgba(96,165,250,0.25));border-color:rgba(110,231,183,0.5);transform:scale(1.1) rotate(90deg);box-shadow:0 6px 20px rgba(110,231,183,0.4)}


/* Modal - EPIC entrance */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:1200;overflow-x:hidden;padding:80px 20px 20px 20px}
.modal.show{display:flex;animation:modalFadeIn .4s cubic-bezier(0.16, 1, 0.3, 1)}
.modal-backdrop{position:absolute;inset:0;background:rgba(2,6,23,0.85);opacity:0;transition:opacity .4s ease}
.modal.show .modal-backdrop{opacity:1}
.modal-panel{position:relative;max-width:1100px;max-height:90vh;width:min(1100px,92vw);z-index:2;background:rgba(17,20,37,0.95);border:1px solid rgba(110,231,183,0.2);border-radius:24px;padding:28px;box-shadow:0 24px 80px rgba(2,6,23,0.95), 0 0 80px rgba(110,231,183,0.12), inset 0 1px 0 rgba(255,255,255,0.1);box-sizing:border-box;transform:scale(0.95) translateY(20px);opacity:0;transition:transform .5s cubic-bezier(0.16, 1, 0.3, 1), opacity .5s ease;overflow-y:auto;display:flex;flex-direction:column}
.modal.show .modal-panel{transform:none;opacity:1}
.modal-close{position:absolute;right:20px;top:20px;border:0;background:rgba(255,255,255,0.08);color:#dbe7f7;font-size:28px;cursor:pointer;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(0.16, 1, 0.3, 1);box-shadow:0 4px 12px rgba(0,0,0,0.3);z-index:10}
.modal-close:hover{background:rgba(255,77,77,0.2);color:#ff6b6b;transform:rotate(90deg) scale(1.1);box-shadow:0 6px 20px rgba(255,77,77,0.4)}
@keyframes modalFadeIn{from{backdrop-filter:blur(0px)}to{backdrop-filter:blur(20px)}}
#modalTitle{margin:0 0 20px 0;padding-right:60px;font-size:26px;font-weight:600;color:#e6eef8;flex-shrink:0;line-height:1.3}
.modal-body{
  flex:1;
  overflow-y:visible;
  overflow-x:hidden;
  padding-right:0;
  margin-top:8px;
  padding-bottom:20px;
}
.modal-body img,
#modalImg {
  display: block;
  margin: 0 auto 20px auto;
  max-width: 280px;
  max-height: 280px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 40px rgba(110,231,183,0.1);
  transform:scale(0.94);
  opacity:0;
  animation:imgPop .6s cubic-bezier(0.16, 1, 0.3, 1) .2s forwards;
  flex-shrink:0;
}
@keyframes imgPop{to{transform:none;opacity:1}}
.tracklist{list-style:none;padding:8px 0;margin:0;border-radius:12px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:10px 14px;
  align-items:start;
  box-sizing:border-box;
}
.tracklist li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  margin:0;
  background:rgba(255,255,255,0.04);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
  box-shadow:0 4px 12px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
  width:100%;
  box-sizing:border-box;
  gap:10px;
  opacity:0;
  transform:translateX(-20px);
  animation:trackSlideIn .5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.tracklist li:nth-child(1){animation-delay:.1s}
.tracklist li:nth-child(2){animation-delay:.15s}
.tracklist li:nth-child(3){animation-delay:.2s}
.tracklist li:nth-child(4){animation-delay:.25s}
.tracklist li:nth-child(5){animation-delay:.3s}
.tracklist li:nth-child(6){animation-delay:.35s}
.tracklist li:nth-child(7){animation-delay:.4s}
.tracklist li:nth-child(8){animation-delay:.45s}
.tracklist li:nth-child(9){animation-delay:.5s}
.tracklist li:nth-child(10){animation-delay:.55s}
.tracklist li:nth-child(n+11){animation-delay:.6s}
.tracklist li:hover{background:linear-gradient(135deg, rgba(110,231,183,0.08), rgba(96,165,250,0.04));border-color:rgba(110,231,183,0.2);transform:translateX(0) translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.5), 0 0 20px rgba(110,231,183,0.1)}
@keyframes trackSlideIn{to{opacity:1;transform:none}}
.trackname{font-size:15px;color:#e6eef8;max-width:100%;overflow:visible;white-space:normal;word-break:break-word;flex:1;font-weight:400;letter-spacing:.2px}
.track-actions{display:flex;gap:8px;align-items:center}
/* Hide native audio */
.audio{display:none}

/* Per-track actions now only show a small play button */
.track-actions .play-mini{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:0;background:linear-gradient(135deg,var(--accent),#5eead4);color:#04221a;box-shadow:0 4px 12px rgba(110,231,183,0.4);transition:all .2s ease}
.track-actions .play-mini:hover{transform:scale(1.1);box-shadow:0 6px 20px rgba(110,231,183,0.6)}
.track-actions .play-mini .fa{font-size:14px}

/* Global player bar fixed at page bottom (Spotify-like) */
.player-bar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:1500;
  background:linear-gradient(180deg, rgba(20,25,45,0.95), rgba(8,10,20,0.98));
  border-top:2px solid rgba(110,231,183,0.3);
  box-shadow:0 -8px 32px rgba(110,231,183,0.15), inset 0 1px 0 rgba(255,255,255,0.1);
  animation:slideUp 0.5s cubic-bezier(0.23, 1, 0.320, 1) forwards;
  padding-bottom:env(safe-area-inset-bottom);
}

@keyframes slideUp {
  from {
    transform:translateY(100px);
    opacity:0;
  }
  to {
    transform:translateY(0);
    opacity:1;
  }
}

.player-bar[aria-hidden="true"]{display:none}
.player-bar .player-bar-inner{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 20px;
  min-height:60px;
}

.player-btn{
  width:40px;
  height:40px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  border:0;
  background:linear-gradient(135deg, rgba(110,231,183,0.2), rgba(96,165,250,0.2));
  color:var(--accent);
  box-shadow:0 4px 15px rgba(110,231,183,0.2);
  transition:all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
  border:1px solid rgba(110,231,183,0.3);
}

.player-btn:hover{
  background:linear-gradient(135deg, rgba(110,231,183,0.4), rgba(96,165,250,0.4));
  transform:scale(1.1);
  box-shadow:0 6px 25px rgba(110,231,183,0.4);
}

.player-btn:active{
  transform:scale(0.95);
}

.player-btn .fa{font-size:16px}

.player-timeline{
  position:relative;
  flex:1;
  height:8px;
  background:rgba(255,255,255,0.12);
  border-radius:99px;
  cursor:pointer;
  overflow:hidden;
  transition:height 0.2s ease;
}

.player-timeline:hover{
  height:10px;
}

.player-progress{
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:0;
  background:linear-gradient(90deg, var(--accent), #5eead4);
  border-radius:99px;
  box-shadow:0 0 10px rgba(110,231,183,0.6);
}

.player-time{
  font-size:12px;
  color:var(--muted);
  min-width:80px;
  text-align:right;
  font-weight:500;
}

.player-vol{
  width:36px;
  height:36px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  border:0;
  background:linear-gradient(135deg, rgba(96,165,250,0.2), rgba(168,85,247,0.2));
  color:var(--accent);
  box-shadow:0 4px 15px rgba(96,165,250,0.2);
  transition:all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
  border:1px solid rgba(96,165,250,0.3);
}

.player-vol:hover{
  background:linear-gradient(135deg, rgba(96,165,250,0.4), rgba(168,85,247,0.4));
  transform:scale(1.1);
  box-shadow:0 6px 25px rgba(96,165,250,0.4);
}

.player-vol .fa{font-size:15px}

.player-vol-group{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:150px;
}

.player-vol-range{
  -webkit-appearance:none;
  appearance:none;
  width:120px;
  height:6px;
  background:linear-gradient(90deg, rgba(255,255,255,0.08), rgba(110,231,183,0.2));
  border-radius:99px;
  outline:none;
  transition:background 0.2s ease;
  cursor:pointer;
}

.player-vol-range:hover{
  background:linear-gradient(90deg, rgba(255,255,255,0.12), rgba(110,231,183,0.3));
}

.player-vol-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:16px;
  height:16px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--accent), #5eead4);
  cursor:pointer;
  box-shadow:0 2px 8px rgba(110,231,183,0.5);
  transition:all 0.2s ease;
}

.player-vol-range::-webkit-slider-thumb:hover{
  transform:scale(1.2);
  box-shadow:0 4px 16px rgba(110,231,183,0.7);
}

.player-vol-range::-moz-range-thumb{
  width:16px;
  height:16px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--accent), #5eead4);
  cursor:pointer;
  box-shadow:0 2px 8px rgba(110,231,183,0.5);
  border:0;
  transition:all 0.2s ease;
}

.player-vol-range::-moz-range-thumb:hover{
  transform:scale(1.2);
  box-shadow:0 4px 16px rgba(110,231,183,0.7);
}
.player-time .sep{opacity:0.6;padding:0 2px}

.tracklist-controls{display:none}

@media (max-width:600px){
  .hero-title{font-size:42px}
  .section-title{font-size:28px}
  .filters{padding:16px 18px}
  .grid{grid-template-columns:1fr;gap:20px}
  .cover, .card-media{aspect-ratio:1/1;max-height:180px}
  .audio{width:140px}
  .modal-panel{padding:20px 16px;max-height:94vh}
  #modalImg{max-width:200px;max-height:200px}
  /* Fix mobile width overflow */
  body, html {
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    overflow-x:hidden;
  }
  * {
    box-sizing:border-box;
  }
  .container {
    max-width:100%;
    padding:20px 20px;
    margin:0;
    box-sizing:border-box;
  }
}

/* New: top navigation (glassy, fixed) */
/* Top nav, glass panel like tz/ */
.topnav{position:fixed;top:0;width:100%;z-index:9999;background:rgba(15,18,38,0.95);border-bottom:1px solid rgba(255,255,255,0.12);box-shadow:0 4px 30px rgba(0,0,0,0.5);height:80px;display:flex;align-items:center;padding:0}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:0 60px;width:100%;max-width:1400px;margin:0 auto;box-sizing:border-box}
.nav-brand{font-family:'Raleway',sans-serif;font-weight:700;font-size:36px;color:#fff;text-decoration:none;letter-spacing:1px;transition:all .3s cubic-bezier(0.19, 1, 0.22, 1);text-shadow:0 2px 8px rgba(110,231,183,0.2)}
.nav-brand:hover{transform:scale(1.08);text-shadow:0 4px 16px rgba(110,231,183,0.4)}
.nav-links{list-style:none;display:flex;gap:52px;margin:0;padding:0;align-items:center}
.nav-links li{margin:0}
.nav-links a{color:#c5d5f0;text-decoration:none;font-weight:600;font-size:19px;transition:all .35s cubic-bezier(0.19, 1, 0.22, 1);position:relative;padding:8px 0}
.nav-links a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:3px;background:linear-gradient(90deg,var(--accent),#38bdf8);transition:width .35s cubic-bezier(0.19, 1, 0.22, 1);border-radius:2px;box-shadow:0 2px 8px rgba(110,231,183,0.4)}
.nav-links a:hover{color:var(--accent);transform:translateY(-3px)}
.nav-links a:hover::after{width:100%}
.nav-toggle{display:none;flex-direction:column;gap:6px;background:transparent;border:0;cursor:pointer;padding:10px}
.nav-toggle span{display:block;width:30px;height:3px;background:var(--accent);border-radius:3px;transition:all .35s cubic-bezier(0.19, 1, 0.22, 1)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg) translate(8px,8px)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:rotate(-45deg) translate(8px,-8px)}

/* Hero section */
.hero{padding-top:84px;padding-bottom:80px;background:linear-gradient(180deg, rgba(12,16,32,0.6), rgba(12,16,32,0));position:relative;overflow:visible}
.hero-inner{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:24px;min-height:480px;position:relative;z-index:2;text-align:center}
.hero-title{font-family:Raleway, Inter, system-ui; font-size:84px;line-height:1.0;margin:0;background:linear-gradient(135deg,#ffffff, #a7f3d0, #60a5fa);-webkit-background-clip:text;background-clip:text;color:transparent;animation:titleFadeIn 1.2s ease-out}
.hero-subtitle{margin:16px 0 0;color:var(--muted);font-size:20px;max-width:720px;animation:titleFadeIn 1.4s ease-out;opacity:0;animation-fill-mode:forwards}
@keyframes titleFadeIn{0%{opacity:0;transform:translateY(30px)}100%{opacity:1;transform:none}}

/* Animated hero decor - BIGGER and NOT clipped */
.hero-decor{position:absolute;inset:-120px -120px;pointer-events:none;z-index:1}
.orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.4;animation: float 16s ease-in-out infinite;pointer-events:none}
.orb-1{width:600px;height:600px;right:10%;top:10%;background:radial-gradient(circle at 40% 40%, #a7f3d0, transparent 65%)}
.orb-2{width:500px;height:500px;left:5%;bottom:5%;background:radial-gradient(circle at 60% 60%, #60a5fa, transparent 65%);animation-duration:20s;animation-delay:-5s}
@keyframes float{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,-30px,0) scale(1.05)}}

/* Decorative orbs throughout the page */
.decor-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.25;pointer-events:none;z-index:0}
.decor-orb-3{width:450px;height:450px;left:-10%;top:60%;background:radial-gradient(circle at 50% 50%, #c084fc, transparent 70%);animation:float 18s ease-in-out infinite;animation-delay:-3s}
.decor-orb-4{width:520px;height:520px;right:-8%;bottom:-15%;background:radial-gradient(circle at 50% 50%, #f472b6, transparent 70%);animation:float 22s ease-in-out infinite;animation-delay:-8s}
.decor-orb-5{width:400px;height:400px;left:50%;bottom:-10%;background:radial-gradient(circle at 50% 50%, #60a5fa, transparent 70%);animation:float 20s ease-in-out infinite;animation-delay:-12s}

/* Ensure main container and footer allow absolute positioning for orbs */
main.container{position:relative;z-index:1}
.site-footer{position:relative;z-index:1}

/* Section title + separator - BIGGER */
.section-title{font-family:Raleway, Inter, system-ui;font-size:48px;margin:80px 0 32px 0;letter-spacing:.6px;font-weight:600}
.separator{display:none}

/* Filters bar */
.filters{position:static;display:flex;align-items:center;gap:16px;padding:20px 24px;margin:24px 0;background:rgba(8,10,20,0.85);border:1px solid rgba(110,231,183,0.1);border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05)}
.filters .search{flex:1 1 auto;min-width:280px;max-width:600px}
.filters .sort{flex:1 1 auto;justify-content:flex-end}

@media (max-width:1200px){
  .container{padding:32px 40px}
  .nav-inner{padding:12px 40px}
  .modal-panel{max-width:95vw;padding:28px 24px;max-height:90vh}
  #modalImg{max-width:280px;max-height:280px}
}
@media (max-width:900px){
  .nav-toggle{display:flex}
  .nav-brand{font-size:22px}
  .nav-inner{padding:12px 20px}
  .topnav{padding:0}
  .nav-links{position:fixed;top:60px;left:0;width:100%;height:calc(100vh - 60px);flex-direction:column;gap:16px;background:rgba(15,18,38,0.97);backdrop-filter:blur(28px);padding:20px 24px;max-height:0;overflow:hidden;transition:max-height .3s cubic-bezier(0.16, 1, 0.3, 1),opacity .25s ease;opacity:0;border-bottom:1px solid rgba(255,255,255,0.08)}
  .nav-links.open{max-height:100vh;opacity:1;overflow:auto;-webkit-overflow-scrolling:touch}
  .nav-links a{font-size:18px;padding:10px 0}
  .artist-links{gap:6px;margin-left:auto}
  .artist-links a{padding:5px 8px;font-size:13px;gap:4px}
  .artist-links .fa{font-size:13px}
  .artist-links span{display:none}
  .hero{min-height:70vh;padding-top:80px}
  .hero-title{font-size:48px;line-height:1.1}
  .hero-subtitle{font-size:16px}
  .section-title{font-size:32px}
  .filters{top:56px;flex-wrap:wrap;gap:12px;padding:16px 20px}
  .filters .search{min-width:100%;max-width:100%}
  .sort{width:100%;justify-content:stretch}
  .sort button{flex:1}
  .container{padding:20px 24px}
  .grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
  .modal-panel{padding:20px 16px;max-height:92vh}
  #modalImg{max-width:240px;max-height:240px}
  .tracklist{grid-template-columns:1fr;gap:10px}
}
@media (max-width:600px){
  .hero-title{font-size:42px}
  .section-title{font-size:28px}
  .container{padding:20px 20px}
  .nav-inner{padding:12px 20px}
  .filters{padding:16px 18px}
  /* Disable heavy transforms on mobile for smoother scroll */
  .hero-title,.hero-subtitle,.section-title,.orb,.cover{transform:none !important}
}

/* Smooth scrolling removed; use native browser behavior */

/* ===== EPIC ANIMATIONS ===== */

/* Keyframe animations */
@keyframes fadeInUp {
  from {
    opacity:0;
    transform:translateY(40px) scale(0.95);
  }
  to {
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@keyframes glowPulse {
  0%, 100% { box-shadow:0 0 20px rgba(110,231,183,0.4), 0 8px 30px rgba(4,6,20,0.6); }
  50% { box-shadow:0 0 40px rgba(110,231,183,0.8), 0 12px 40px rgba(4,6,20,0.8); }
}

@keyframes slideInLeft {
  from {
    opacity:0;
    transform:translateX(-60px);
  }
  to {
    opacity:1;
    transform:translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity:0;
    transform:translateX(60px);
  }
  to {
    opacity:1;
    transform:translateX(0);
  }
}

@keyframes rotate360 {
  from { transform:rotate(0deg); }
  to { transform:rotate(360deg); }
}

@keyframes float {
  0%, 100% { transform:translateY(0px); }
  50% { transform:translateY(-10px); }
}

@keyframes shimmer {
  0% { background-position:-1000px 0; }
  100% { background-position:1000px 0; }
}

/* Reveal with scale and fade */
.reveal {
  opacity:0;
  transform:translateY(40px) scale(0.95);
  transition:opacity 0.7s cubic-bezier(0.23, 1, 0.320, 1), transform 0.7s cubic-bezier(0.23, 1, 0.320, 1);
}

.reveal.show {
  opacity:1;
  transform:translateY(0) scale(1);
  animation:fadeInUp 0.8s cubic-bezier(0.23, 1, 0.320, 1) forwards;
}

.reveal[data-reveal="fade"] {
  animation:fadeInUp 0.8s cubic-bezier(0.23, 1, 0.320, 1) forwards;
}

/* Card entrance animations */
.card {
  opacity:0;
  transform:translateY(40px) scale(0.95);
  transition:opacity 0.8s cubic-bezier(0.23, 1, 0.320, 1), transform 0.8s cubic-bezier(0.23, 1, 0.320, 1);
}

.card:nth-child(1) { animation-delay:0.1s; }
.card:nth-child(2) { animation-delay:0.2s; }
.card:nth-child(3) { animation-delay:0.3s; }
.card:nth-child(4) { animation-delay:0.4s; }
.card:nth-child(5) { animation-delay:0.5s; }
.card:nth-child(n+6) { animation-delay:0.6s; }

.card.show {
  opacity:1;
  transform:translateY(0) scale(1);
}

/* Card hover glow */
.card:hover {
  animation:glowPulse 2s ease-in-out infinite;
  transform:translateY(-8px) scale(1.02);
  transition:transform 0.3s cubic-bezier(0.23, 1, 0.320, 1);
}
.hero-title {
  animation:slideInLeft 1s cubic-bezier(0.23, 1, 0.320, 1) forwards;
  animation-delay:0.2s;
  opacity:0;
}

.hero-subtitle {
  animation:slideInRight 1s cubic-bezier(0.23, 1, 0.320, 1) forwards;
  animation-delay:0.4s;
  opacity:0;
}

/* Section titles */
.section-title {
  animation:slideInLeft 0.9s cubic-bezier(0.23, 1, 0.320, 1) forwards;
  opacity:0;
}

/* Orbs float animation */
.orb {
  animation:float 6s ease-in-out infinite;
}

.orb-1 { animation-delay:0s; }
.orb-2 { animation-delay:2s; }

/* Decorative orbs */
.decor-orb {
  animation:float 8s ease-in-out infinite;
}

.decor-orb-3 { animation-delay:0s; }
.decor-orb-4 { animation-delay:2s; }
.decor-orb-5 { animation-delay:4s; }

/* Button shimmer on hover */
.player-btn, .open-btn, .sort button {
  position:relative;
  overflow:hidden;
}

.player-btn:hover::after, .open-btn:hover::after, .sort button:hover::after {
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation:shimmer 0.6s ease-in-out;
}

/* Cover image hover zoom */
.cover {
  transition:transform 0.4s cubic-bezier(0.23, 1, 0.320, 1);
}

.card:hover .cover {
  transform:scale(1.08) rotate(1deg);
}

/* Artist links entrance */
.artist-links a {
  animation:slideInRight 0.6s cubic-bezier(0.23, 1, 0.320, 1) forwards;
  opacity:0;
}

.artist-links a:nth-child(1) { animation-delay:0.1s; }
.artist-links a:nth-child(2) { animation-delay:0.2s; }
.artist-links a:nth-child(3) { animation-delay:0.3s; }
.artist-links a:nth-child(4) { animation-delay:0.4s; }

/* Filters entrance */
.filters {
  animation:slideInLeft 0.8s cubic-bezier(0.23, 1, 0.320, 1) forwards;
  opacity:0;
}

.filters button {
  transition:all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
}

.filters button:hover {
  transform:scale(1.05);
  box-shadow:0 6px 20px rgba(110,231,183,0.3);
}

/* Search input focus glow */
.search {
  transition:all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
}

.search:focus {
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.2), 0 0 20px rgba(110,231,183,0.5);
  transform:scale(1.02);
}

/* Modal entrance */
.modal.active .modal-panel {
  animation:fadeInUp 0.6s cubic-bezier(0.23, 1, 0.320, 1) forwards;
}

/* Service links entrance */
.service-list {
  animation:slideInLeft 0.6s cubic-bezier(0.23, 1, 0.320, 1) forwards;
}

.service-link {
  transition:all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
}

.service-link:hover {
  transform:translateX(4px) scale(1.05);
  box-shadow:0 4px 15px rgba(110,231,183,0.4);
}

/* Tracklist animation */
.tracklist {
  animation:slideInLeft 0.7s cubic-bezier(0.23, 1, 0.320, 1) forwards;
}

.tracklist li {
  transition:all 0.3s ease;
}

.tracklist li:hover {
  padding-left:8px;
  color:var(--accent);
  text-shadow:0 0 10px rgba(110,231,183,0.5);
}

/* Offset anchor targets for fixed nav */
[id]{scroll-margin-top:88px}

/* Save space on small screens: hide time */
@media (max-width:600px){
  .player-time{display:none}
  .player-timeline{flex:1 1 auto}
  .player-vol-range{width:90px}
  .modal-panel{
    max-height:80vh;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .modal-body{
    max-height:auto;
    overflow:visible;
  }
}