/* ============================================================================
 * NeonWave "wow" layer — premium motion & light. Pairs with js/neon-wow.js.
 * Loaded after neon-finish.css. Everything is additive and reduced-motion safe.
 * ========================================================================== */

/* ── 1. Cursor spotlight on cards + 3D tilt ────────────────────────────── */
.nw-wow .track-card, .nw-wow .album-card, .nw-wow .shortcut-card, .nw-wow .artist-card, .nw-wow .home-card,
.nw-wow .home-empty-shortcuts, .nw-wow .weekly-recap-card, .nw-wow .st-card, .nw-wow .search-card, .nw-wow .adm-stat, .nw-wow .adm-card {
    position: relative; isolation: isolate;
}
.nw-wow .track-card::before, .nw-wow .album-card::before, .nw-wow .shortcut-card::before, .nw-wow .artist-card::before, .nw-wow .home-card::before,
.nw-wow .home-empty-shortcuts::before, .nw-wow .weekly-recap-card::before, .nw-wow .st-card::before, .nw-wow .search-card::before, .nw-wow .adm-stat::before, .nw-wow .adm-card::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; opacity: 0;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04) 40%, transparent 70%);
    transition: opacity 0.25s ease;
}
/* border that lights up where the cursor is */
.nw-wow .track-card::after, .nw-wow .album-card::after, .nw-wow .artist-card::after, .nw-wow .shortcut-card::after, .nw-wow .weekly-recap-card::after, .nw-wow .home-empty-shortcuts::after {
    content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; z-index: 3; opacity: 0; padding: 1px;
    background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--clr-primary-rgb, 91, 154, 255), 0.9), rgba(255, 255, 255, 0.25) 45%, transparent 75%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
    transition: opacity 0.25s ease;
}
.nw-wow .nw-lit::before, .nw-wow .nw-lit::after { opacity: 1; }

.nw-wow .track-card, .nw-wow .album-card, .nw-wow .artist-card {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
    transition: transform 0.18s ease-out, box-shadow 0.25s ease, background-color 0.2s ease, border-color 0.2s ease !important;
    transform-style: preserve-3d; will-change: transform;
}
.nw-wow .track-card:hover, .nw-wow .album-card:hover, .nw-wow .artist-card:hover {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px) scale(1.015);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}
.nw-wow .track-card .thumb { overflow: hidden; border-radius: 10px; }
.nw-wow .track-card .thumb img, .nw-wow .album-card .thumb img { transition: transform 0.5s cubic-bezier(.2, .8, .2, 1), filter 0.3s ease; }
.nw-wow .track-card:hover .thumb img, .nw-wow .album-card:hover .thumb img { transform: scale(1.06); filter: saturate(1.1); }
/* play button rises with a bounce and a glow */
.nw-wow .track-card .play-overlay, .nw-wow .shortcut-play-btn {
    transition: opacity 0.22s ease, transform 0.35s cubic-bezier(.2, 1.4, .4, 1), box-shadow 0.2s ease !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5), 0 0 0 0 rgba(var(--clr-primary-rgb, 91, 154, 255), 0.6);
}
.nw-wow .track-card:hover .play-overlay { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55), 0 0 24px rgba(var(--clr-primary-rgb, 91, 154, 255), 0.45); }

/* ── 2. Scroll reveal + staggered entrance ────────────────────────────── */
html.nw-reveal [data-nw-reveal]:not(.nw-seen) { opacity: 0; transform: translateY(18px); }
html.nw-reveal [data-nw-reveal].nw-seen { opacity: 1; transform: none; transition: opacity 0.6s cubic-bezier(.2, .8, .2, 1), transform 0.6s cubic-bezier(.2, .8, .2, 1); }
.nw-wow .track-grid > *, .nw-wow .album-grid > *, .nw-wow .shortcuts-grid > *, .nw-wow .track-list > .track-row, .nw-wow .artist-circle-grid > * {
    animation: nwStagger 0.5s cubic-bezier(.2, .8, .2, 1) both;
}
.nw-wow .track-grid > :nth-child(1), .nw-wow .track-list > .track-row:nth-child(1) { animation-delay: 0.00s; }
.nw-wow .track-grid > :nth-child(2), .nw-wow .track-list > .track-row:nth-child(2) { animation-delay: 0.04s; }
.nw-wow .track-grid > :nth-child(3), .nw-wow .track-list > .track-row:nth-child(3) { animation-delay: 0.08s; }
.nw-wow .track-grid > :nth-child(4), .nw-wow .track-list > .track-row:nth-child(4) { animation-delay: 0.12s; }
.nw-wow .track-grid > :nth-child(5), .nw-wow .track-list > .track-row:nth-child(5) { animation-delay: 0.16s; }
.nw-wow .track-grid > :nth-child(6), .nw-wow .track-list > .track-row:nth-child(6) { animation-delay: 0.20s; }
.nw-wow .track-grid > :nth-child(7), .nw-wow .track-list > .track-row:nth-child(7) { animation-delay: 0.24s; }
.nw-wow .track-grid > :nth-child(8), .nw-wow .track-list > .track-row:nth-child(8) { animation-delay: 0.28s; }
.nw-wow .track-grid > :nth-child(9), .nw-wow .track-list > .track-row:nth-child(9) { animation-delay: 0.32s; }
.nw-wow .track-grid > :nth-child(10), .nw-wow .track-list > .track-row:nth-child(10) { animation-delay: 0.36s; }
.nw-wow .track-grid > :nth-child(11), .nw-wow .track-list > .track-row:nth-child(11) { animation-delay: 0.40s; }
.nw-wow .track-grid > :nth-child(12), .nw-wow .track-list > .track-row:nth-child(12) { animation-delay: 0.44s; }
.nw-wow .track-grid > :nth-child(n+13), .nw-wow .track-list > .track-row:nth-child(n+13) { animation-delay: 0.48s; }
@keyframes nwStagger { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }

/* ── 3. Player bar: breathing play button, glowing sliders ───────────── */
.nw-wow body .sp-footer .play-pause-btn, body.nw-wow .sp-footer .play-pause-btn { position: relative; }
body.nw-playing .sp-footer .play-pause-btn::after {
    content: ""; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none;
    border: 2px solid rgba(var(--clr-primary-rgb, 91, 154, 255), 0.55); animation: nwPulse 1.8s ease-out infinite;
}
@keyframes nwPulse { 0% { transform: scale(0.85); opacity: 0.9; } 100% { transform: scale(1.7); opacity: 0; } }
.nw-wow .sp-footer .play-pause-btn:hover { transform: scale(1.08) !important; box-shadow: 0 0 24px rgba(255, 255, 255, 0.25); }
.nw-wow #progressSlider, .nw-wow #volumeSlider { transition: filter 0.2s ease; }
.nw-wow .progress-container:hover #progressSlider, .nw-wow .sp-extra:hover #volumeSlider { filter: drop-shadow(0 0 6px rgba(var(--clr-primary-rgb, 91, 154, 255), 0.7)); }
/* cover art in the bar gets a soft coloured glow while playing */
body.nw-playing .sp-footer .thumb { box-shadow: 0 8px 24px rgba(var(--nw-cover-r, 91), var(--nw-cover-g, 154), var(--nw-cover-b, 255), 0.45); transition: box-shadow 0.6s ease; }
body.nw-playing .sp-footer .thumb img { animation: nwThumbBreath 4s ease-in-out infinite; }
@keyframes nwThumbBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }

/* ── 4. Now-playing marker: equaliser bars on the current row / card ── */
.nw-wow .track-row.nw-now { background: rgba(var(--clr-primary-rgb, 91, 154, 255), 0.10) !important; box-shadow: inset 3px 0 0 var(--clr-primary, #5b9aff); }
.nw-wow .track-row.nw-now .track-row-title, .nw-wow .track-row.nw-now .title { color: var(--clr-primary, #5b9aff) !important; }
.nw-wow .track-card.nw-now { box-shadow: 0 0 0 2px var(--clr-primary, #5b9aff), 0 18px 40px rgba(0, 0, 0, 0.5) !important; }
.nw-wow .nw-now .thumb::after, .nw-wow .track-row.nw-now .track-row-main::before {
    content: ""; position: absolute; width: 18px; height: 14px; z-index: 4; pointer-events: none;
    background:
        linear-gradient(var(--clr-primary, #5b9aff), var(--clr-primary, #5b9aff)) 0 100% / 3px 60% no-repeat,
        linear-gradient(var(--clr-primary, #5b9aff), var(--clr-primary, #5b9aff)) 50% 100% / 3px 100% no-repeat,
        linear-gradient(var(--clr-primary, #5b9aff), var(--clr-primary, #5b9aff)) 100% 100% / 3px 40% no-repeat;
    animation: nwEqBars 0.8s ease-in-out infinite alternate; filter: drop-shadow(0 0 4px rgba(var(--clr-primary-rgb, 91, 154, 255), 0.8));
}
.nw-wow .track-card.nw-now .thumb { position: relative; }
.nw-wow .track-card.nw-now .thumb::after { right: 10px; bottom: 10px; }
.nw-wow .track-row.nw-now .track-row-main { position: relative; }
.nw-wow .track-row.nw-now .track-row-main::before { left: -2px; top: 50%; margin-top: -7px; }
.nw-wow .nw-now.nw-now-paused .thumb::after, .nw-wow .track-row.nw-now.nw-now-paused .track-row-main::before { animation-play-state: paused; opacity: 0.6; }
@keyframes nwEqBars { from { background-size: 3px 30%, 3px 60%, 3px 45%; } to { background-size: 3px 90%, 3px 35%, 3px 100%; } }

/* ── 5. Now-playing panel: floating cover with coloured glow ─────────── */
.nw-wow .now-playing-panel .np-cover-container img, .nw-wow .now-playing-panel #npCoverImg {
    transition: transform 0.6s cubic-bezier(.2, .8, .2, 1), box-shadow 0.6s ease;
}
.nw-wow .now-playing-panel .np-stage, .nw-wow .now-playing-panel .np-title, .nw-wow .now-playing-panel #npTitle { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6); }
.nw-wow .now-playing-panel .np-video-bg { transition: opacity 0.6s ease; }
.nw-wow .now-playing-panel::after {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 78%; pointer-events: none; z-index: 1;
    background: radial-gradient(120% 60% at 50% 100%, rgba(var(--nw-cover-r, 91), var(--nw-cover-g, 154), var(--nw-cover-b, 255), 0.25), transparent 60%);
    mix-blend-mode: screen; opacity: 0.8;
}

/* ── 6. Hero headers (artist / playlist / album): slow drift on the art ── */
.nw-wow .artist-hero-bg, .nw-wow .playlist-hero-art img, .nw-wow .artist-header img.artist-hero-img, .nw-wow .album-hero img {
    animation: nwKenBurns 28s ease-in-out infinite alternate; transform-origin: 50% 40%;
}
@keyframes nwKenBurns { from { transform: scale(1); } to { transform: scale(1.08); } }
.nw-wow .main-content > .umv { transition: filter 0.4s ease, opacity 0.6s ease; }

/* ── 7. Search box and top bar: focus glow, avatar ring ─────────────── */
.nw-wow body .sp-search:focus-within, body.nw-wow .sp-search:focus-within {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 30px rgba(var(--clr-primary-rgb, 91, 154, 255), 0.35) !important;
}
.nw-wow .sp-avatar { position: relative; }
.nw-wow .sp-avatar::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; padding: 2px; pointer-events: none; opacity: 0;
    background: conic-gradient(from 0deg, var(--clr-primary, #5b9aff), #c084fc, #22d3ee, var(--clr-primary, #5b9aff));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
    transition: opacity 0.25s ease; animation: nwSpin 3s linear infinite; }
.nw-wow .sp-avatar:hover::after { opacity: 1; }
@keyframes nwSpin { to { transform: rotate(360deg); } }

/* ── 8. Weekly recap card: living gradient border ────────────────────── */
.nw-wow .weekly-recap-card { overflow: hidden; }
.nw-wow .weekly-recap-card .wr-art { animation: nwFloat 6s ease-in-out infinite; }
@keyframes nwFloat { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
.nw-wow .weekly-recap-card .wr-btn, .nw-wow .wr-btn { transition: transform 0.2s cubic-bezier(.2, 1.4, .4, 1), box-shadow 0.2s ease !important; }
.nw-wow .weekly-recap-card:hover .wr-btn { transform: scale(1.06); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }

/* ── 9. Modals & settings: content glides in, sections cascade ──────── */
.nw-wow .st-overlay .st-card, .nw-wow #settingsModal .st-card { animation: nwStagger 0.45s cubic-bezier(.2, .8, .2, 1) both; }
.nw-wow #settingsModal .st-card:nth-child(2) { animation-delay: 0.05s; } .nw-wow #settingsModal .st-card:nth-child(3) { animation-delay: 0.10s; } .nw-wow #settingsModal .st-card:nth-child(4) { animation-delay: 0.15s; }
.nw-wow .modal-overlay { -webkit-backdrop-filter: blur(18px) saturate(1.3) !important; backdrop-filter: blur(18px) saturate(1.3) !important; }

/* ── 10. Sidebar rail: icons light up, tooltips feel native ─────────── */
.nw-wow .sidebar .library-item .img-box { transition: transform 0.25s cubic-bezier(.2, 1.4, .4, 1), box-shadow 0.25s ease; }
.nw-wow .sidebar .library-item:hover .img-box { transform: scale(1.08); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5); }
.nw-wow .sidebar .library-item.nw-now .img-box { box-shadow: 0 0 0 2px var(--clr-primary, #5b9aff); }

/* ── 11. Scroll: smooth, momentum-like ───────────────────────────────── */
.nw-wow .main-content { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    .nw-wow *, .nw-wow *::before, .nw-wow *::after { animation: none !important; transition: none !important; transform: none !important; }
}