/* =====================================================================
 *  VibeDial — Experience layer  (vibedial-experience.css)   2026-07
 * ---------------------------------------------------------------------
 *  Additive "delight" polish, loaded last. Adds life to playback without
 *  touching the record-player aesthetic:
 *    - a live equalizer that pulses while audio is flowing
 *    - a gentle glow/pop when a new "now playing" track arrives
 *    - a breathing ambient wash behind the now-playing while live
 *    - discoverability cues for the "type any vibe" search
 *  Everything is gated behind prefers-reduced-motion.
 * ===================================================================== */

/* ---- Track-change pulse on the now-playing surface ---- */
@media (prefers-reduced-motion: no-preference) {
  .now-meta.vd-fresh { animation: vd-fresh-pop .7s cubic-bezier(.2, .8, .2, 1); }
  .disc.vd-fresh, .disc-art.vd-fresh { animation: vd-label-pop 1s cubic-bezier(.2, .8, .2, 1); }
}
@keyframes vd-fresh-pop {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c1, #7c6cff) 40%, transparent); }
  35%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--c1, #7c6cff) 18%, transparent), 0 12px 40px color-mix(in srgb, var(--c2, #33d6c0) 22%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes vd-label-pop {
  0%   { filter: brightness(1); }
  30%  { filter: brightness(1.25) saturate(1.15); }
  100% { filter: brightness(1); }
}

/* ---- Breathing ambient wash behind now-playing while live ---- */
@media (prefers-reduced-motion: no-preference) {
  body.is-playing .now-meta::before {
    content: "";
    position: absolute;
    inset: -30% -10%;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(60% 120% at 50% 0%,
      color-mix(in srgb, var(--c1, #7c6cff) 16%, transparent), transparent 70%);
    animation: vd-breathe 7s ease-in-out infinite;
    pointer-events: none;
  }
}
.now-meta { position: relative; }
@keyframes vd-breathe {
  0%, 100% { opacity: .5; transform: scale(1); }
  50%      { opacity: .95; transform: scale(1.05); }
}

/* ---- "Type any vibe" discoverability ---- */
.vibe-btn { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  /* a soft, occasional shimmer on the ✨ button so people notice they can
     describe a mood — calm, not distracting. */
  .vibe-btn::after {
    content: "";
    position: absolute; inset: 0; border-radius: inherit;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--c1, #7c6cff) 50%, transparent);
    animation: vd-vibe-hint 6s ease-in-out 2s infinite;
    pointer-events: none;
  }
}
@keyframes vd-vibe-hint {
  0%, 92%, 100% { box-shadow: 0 0 0 0 transparent; }
  96%           { box-shadow: 0 0 0 5px color-mix(in srgb, var(--c1, #7c6cff) 22%, transparent); }
}

/* the rotating placeholder is set in JS; style it a touch softer */
#searchInput::placeholder { transition: opacity .3s ease; }
#searchInput.vd-ph-fade::placeholder { opacity: .35; }

/* ---- Extra mood chips inherit the existing .quickvibe styling ---- */