/* Custom extras on top of Tailwind */
:root {
  --glass: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.12);
}

html, body { height: 100%; }

/* Subtle star field */
.stars {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.35), rgba(255,255,255,0)),
                    radial-gradient(2px 2px at 80% 40%, rgba(255,255,255,0.25), rgba(255,255,255,0)),
                    radial-gradient(1px 1px at 60% 80%, rgba(255,255,255,0.2), rgba(255,255,255,0));
}

/* Card styles */
.card {
  @apply relative rounded-2xl overflow-hidden border border-white/10 bg-white/5 backdrop-blur;
}
.card-img {
  @apply h-40 md:h-64 w-full object-cover transition-transform duration-500 ease-out;
}
.card:hover .card-img {
  transform: scale(1.08);
}
.card-overlay {
  @apply absolute left-2 bottom-2 text-xs px-2.5 py-1 rounded-lg bg-black/50 border border-white/10 backdrop-blur;
}

/* Glass panel utility */
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Simple fade/slide utility classes for JS */
.fade-up { opacity: 0; transform: translateY(16px); }
.fade-in { opacity: 0; }

/* Genre filter buttons */
.genre-btn {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.2s;
}

.genre-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border-color: rgba(70, 116, 255, 0.5);
}

.genre-btn.active {
  background: linear-gradient(to right, #4674ff, #d946ef);
  color: white;
  border-color: transparent;
  box-shadow: 0 0 25px rgba(70, 116, 255, 0.35);
}

/* ---- Added micro-interaction polish ---- */
/* Blur-up lazy image */
.blur-up { filter: blur(12px); transform: scale(1.02); transition: filter .4s ease, transform .4s ease; }
.blur-up.loaded { filter: blur(0); transform: none; }

/* 3D tilt card + shine */
.tilt-card { transition: transform .2s ease; transform-style: preserve-3d; }
.tilt-reset { transform: rotateX(0deg) rotateY(0deg) scale(1); }
.card-shine { position:absolute; inset:0; pointer-events:none; background: radial-gradient(600px circle at 0 0, rgba(255,255,255,.15), transparent 40%); mix-blend-mode: screen; opacity:.0; transition: opacity .2s ease; }
.tilt-card:hover .card-shine { opacity: .8; }

/* Ripple effect */
.ripple-wrap { position: relative; overflow: hidden; }
.ripple { position: absolute; border-radius: 9999px; transform: translate(-50%, -50%); pointer-events: none; background: rgba(255,255,255,.35); animation: ripple .6s ease-out forwards; }
@keyframes ripple { from { width:0; height:0; opacity:.7; } to { width:300px; height:300px; opacity:0; } }

/* Toast */
.toast { pointer-events:auto; backdrop-filter: blur(8px); }
.toast-enter { opacity:0; transform: translateY(6px); }
.toast-enter-active { opacity:1; transform: translateY(0); transition: all .25s ease; }
.toast-leave { opacity:1; }
.toast-leave-active { opacity:0; transition: opacity .2s ease; }

/* Marquee carousel */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-marquee { animation: marquee 30s linear infinite; will-change: transform; display:flex; }
.animate-marquee:hover { animation-play-state: paused; }
.carousel-item { flex: 0 0 auto; width: 180px; }
.carousel-img { width: 100%; height: 260px; object-fit: cover; border-radius: 0.75rem; }