/* === velo-motion.css === */
/* Velo Music — Motion & micro-interactions */

:root {
  --velo-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --velo-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --velo-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --velo-ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
}

/* ─── App entry ─── */
.velo-viewport {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 520ms var(--velo-ease-out-expo),
              transform 520ms var(--velo-ease-out-expo);
}

.velo-app.is-ready .velo-viewport {
  opacity: 1;
  transform: none;
}

.velo-sidebar {
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 480ms var(--velo-ease-out-expo) 80ms,
              transform 480ms var(--velo-ease-out-expo) 80ms;
}

.velo-app.is-ready .velo-sidebar {
  opacity: 1;
  transform: none;
}

.velo-player {
  transition: transform 420ms var(--velo-ease-out-expo),
              opacity 320ms var(--velo-ease-smooth),
              box-shadow 320ms var(--velo-ease-smooth);
}

.velo-player.is-visible {
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.35);
}

.velo-player.is-playing {
  box-shadow: 0 -4px 24px rgba(34, 197, 94, 0.12);
}

/* ─── Greeting banner ─── */
.velo-greeting-bg {
  animation: veloGradientShift 14s var(--velo-ease-in-out) infinite alternate;
}

@keyframes veloGradientShift {
  0% {
    transform: scale(1) translate(0, 0);
    filter: hue-rotate(0deg) saturate(1);
  }
  50% {
    transform: scale(1.06) translate(-1%, 1%);
    filter: hue-rotate(12deg) saturate(1.15);
  }
  100% {
    transform: scale(1.03) translate(1%, -1%);
    filter: hue-rotate(-8deg) saturate(1.08);
  }
}

.velo-greeting-content h1 {
  animation: veloTextIn 700ms var(--velo-ease-out-expo) 200ms both;
}

.velo-greeting-content p {
  animation: veloTextIn 700ms var(--velo-ease-out-expo) 320ms both;
}

.velo-greeting-stats {
  animation: veloTextIn 700ms var(--velo-ease-out-expo) 440ms both;
}

@keyframes veloTextIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ─── Quick tiles ─── */
.velo-quick-tile {
  transition: transform 280ms var(--velo-ease-spring),
              box-shadow 280ms var(--velo-ease-smooth);
}

.velo-quick-tile:hover {
  transform: scale(1.04) translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.velo-quick-tile:active {
  transform: scale(0.98);
  transition-duration: 100ms;
}

.velo-quick-tile-icon {
  transition: transform 400ms var(--velo-ease-spring);
}

.velo-quick-tile:hover .velo-quick-tile-icon {
  transform: scale(1.1);
}

.stagger-children.is-revealed .velo-quick-tile:nth-child(1) { animation: veloTileIn 500ms var(--velo-ease-out-expo) 0ms both; }
.stagger-children.is-revealed .velo-quick-tile:nth-child(2) { animation: veloTileIn 500ms var(--velo-ease-out-expo) 60ms both; }
.stagger-children.is-revealed .velo-quick-tile:nth-child(3) { animation: veloTileIn 500ms var(--velo-ease-out-expo) 120ms both; }
.stagger-children.is-revealed .velo-quick-tile:nth-child(4) { animation: veloTileIn 500ms var(--velo-ease-out-expo) 180ms both; }
.stagger-children.is-revealed .velo-quick-tile:nth-child(5) { animation: veloTileIn 500ms var(--velo-ease-out-expo) 240ms both; }
.stagger-children.is-revealed .velo-quick-tile:nth-child(6) { animation: veloTileIn 500ms var(--velo-ease-out-expo) 300ms both; }

@keyframes veloTileIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ─── Media cards ─── */
.velo-media-card {
  transition: transform 320ms var(--velo-ease-out-expo),
              background 200ms var(--velo-ease-smooth),
              box-shadow 320ms var(--velo-ease-smooth);
}

.velo-media-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.velo-media-card-cover img,
.velo-media-card-cover .velo-default-cover {
  transition: transform 550ms var(--velo-ease-out-expo);
}

.velo-media-card:hover .velo-media-card-cover img,
.velo-media-card:hover .velo-media-card-cover .velo-default-cover {
  transform: scale(1.08);
}

.velo-media-card-play {
  transition: opacity 260ms var(--velo-ease-smooth),
              transform 360ms var(--velo-ease-spring),
              background 180ms var(--velo-ease-smooth),
              box-shadow 260ms var(--velo-ease-smooth);
}

.velo-media-card:hover .velo-media-card-play {
  transform: translateY(0) scale(1);
}

.velo-media-card-play:active {
  transform: scale(0.92) !important;
}

.velo-media-card-play:hover {
  transform: translateY(0) scale(1.08) !important;
  box-shadow: 0 10px 28px rgba(34, 197, 94, 0.45);
}

/* ─── Artist chips ─── */
.velo-artist-chip {
  transition: transform 300ms var(--velo-ease-out-expo),
              background 200ms var(--velo-ease-smooth);
}

.velo-artist-chip:hover {
  transform: translateY(-4px);
}

.velo-artist-chip-avatar {
  transition: transform 400ms var(--velo-ease-spring),
              box-shadow 300ms var(--velo-ease-smooth);
}

.velo-artist-chip:hover .velo-artist-chip-avatar {
  transform: scale(1.06);
  box-shadow: 0 8px 24px rgba(147, 51, 234, 0.35);
}

/* ─── Track rows ─── */
.velo-track-row {
  transition: background 200ms var(--velo-ease-smooth),
              transform 200ms var(--velo-ease-smooth);
}

.velo-track-row:hover {
  transform: scale(1.005);
}

.velo-track-row-play {
  transition: opacity 220ms var(--velo-ease-smooth),
              transform 320ms var(--velo-ease-spring),
              background 180ms var(--velo-ease-smooth);
}

.velo-track-row:hover .velo-track-row-play {
  transform: scale(1.05);
}

.velo-track-row-play:active {
  transform: scale(0.9);
}

.velo-track-row.is-playing {
  background: rgba(34, 197, 94, 0.1);
  animation: veloRowGlow 2s var(--velo-ease-in-out) infinite;
}

@keyframes veloRowGlow {
  0%, 100% { background: rgba(34, 197, 94, 0.08); }
  50% { background: rgba(34, 197, 94, 0.14); }
}

.velo-track-row.is-playing .velo-track-row-index {
  color: var(--velo-accent);
  position: relative;
}

.velo-track-row.is-playing .velo-track-row-index::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--velo-accent);
  animation: veloRingPulse 1.6s var(--velo-ease-out-expo) infinite;
}

@keyframes veloRingPulse {
  0% { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(1.4); opacity: 0; }
}

.velo-track-row.is-playing .velo-track-row-cover {
  animation: veloCoverBeat 1.8s var(--velo-ease-in-out) infinite;
}

@keyframes veloCoverBeat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

/* ─── Genre tiles ─── */
.velo-genre-tile {
  transition: transform 300ms var(--velo-ease-spring),
              box-shadow 300ms var(--velo-ease-smooth);
}

.velo-genre-tile:hover {
  transform: scale(1.03) translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.velo-genre-tile-name {
  transition: transform 300ms var(--velo-ease-out-expo);
}

.velo-genre-tile:hover .velo-genre-tile-name {
  transform: translateY(-2px);
}

/* ─── Sidebar & nav ─── */
.velo-sidebar-link {
  position: relative;
  transition: color 200ms var(--velo-ease-smooth),
              background 200ms var(--velo-ease-smooth),
              transform 200ms var(--velo-ease-spring);
}

.velo-sidebar-link::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 3px;
  height: 0;
  border-radius: 2px;
  background: var(--velo-accent);
  transform: translateY(-50%);
  transition: height 260ms var(--velo-ease-out-expo);
}

.velo-sidebar-link.is-active::after,
.velo-sidebar-link:hover::after {
  height: 55%;
}

.velo-sidebar-link:active {
  transform: scale(0.98);
}

.velo-sidebar-link svg {
  transition: transform 280ms var(--velo-ease-spring);
}

.velo-sidebar-link:hover svg {
  transform: scale(1.12);
}

.velo-bottom-nav a {
  transition: color 200ms var(--velo-ease-smooth),
              transform 280ms var(--velo-ease-spring);
}

.velo-bottom-nav a svg {
  transition: transform 320ms var(--velo-ease-spring),
              color 200ms var(--velo-ease-smooth);
}

.velo-bottom-nav a.active svg {
  animation: veloNavPop 450ms var(--velo-ease-spring);
}

.velo-bottom-nav a:active {
  transform: scale(0.92);
}

@keyframes veloNavPop {
  0% { transform: scale(0.85); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ─── Search dropdown ─── */
.velo-search-dropdown.is-visible {
  animation: veloDropIn 320ms var(--velo-ease-out-expo) both;
}

@keyframes veloDropIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.velo-search-input {
  transition: background 220ms var(--velo-ease-smooth),
              box-shadow 260ms var(--velo-ease-smooth),
              transform 220ms var(--velo-ease-smooth);
}

.velo-search-input:focus {
  transform: scale(1.01);
}

/* ─── Player ─── */
.velo-player.is-playing .velo-player-cover {
  animation: veloPlayerCoverPulse 2.2s var(--velo-ease-in-out) infinite;
}

@keyframes veloPlayerCoverPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.35);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
  }
}

.velo-player.is-playing .velo-player-progress-fill {
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.55);
}

.velo-player-progress-fill {
  transition: width 0.1s linear, box-shadow 300ms var(--velo-ease-smooth);
}

#player-play,
.velo-player-sheet-play {
  transition: transform 280ms var(--velo-ease-spring),
              background 200ms var(--velo-ease-smooth);
}

#player-play:active,
.velo-player-sheet-play:active {
  transform: scale(0.88);
}

.velo-player-sheet-cover {
  transition: transform 420ms var(--velo-ease-out-expo);
}

.velo-player-sheet.is-open .velo-player-sheet-cover {
  animation: veloSheetCoverIn 600ms var(--velo-ease-out-expo) both,
             veloCoverFloat 4s var(--velo-ease-in-out) 600ms infinite;
}

@keyframes veloSheetCoverIn {
  from {
    opacity: 0;
    transform: scale(0.88) translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

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

.velo-player-sheet-panel {
  transition: transform 480ms var(--velo-ease-out-expo);
}

/* ─── Buttons & chips ─── */
.velo-btn {
  transition: transform 260ms var(--velo-ease-spring),
              background 200ms var(--velo-ease-smooth),
              box-shadow 260ms var(--velo-ease-smooth);
}

.velo-btn:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.velo-btn-primary:hover {
  box-shadow: 0 6px 20px rgba(34, 197, 94, 0.35);
}

.velo-chip {
  transition: transform 220ms var(--velo-ease-spring),
              background 180ms var(--velo-ease-smooth),
              color 180ms var(--velo-ease-smooth),
              border-color 180ms var(--velo-ease-smooth);
}

.velo-chip:hover {
  transform: translateY(-1px);
}

.velo-chip.active {
  animation: veloChipPop 350ms var(--velo-ease-spring);
}

@keyframes veloChipPop {
  0% { transform: scale(0.95); }
  70% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* ─── Scroll rows ─── */
.velo-scroll-row {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.velo-scroll-row > * {
  transition: transform 300ms var(--velo-ease-out-expo);
}

/* ─── Ripple effect ─── */
.velo-ripple-host {
  position: relative;
  overflow: hidden;
}

.velo-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transform: scale(0);
  animation: veloRipple 600ms var(--velo-ease-out-expo) forwards;
  pointer-events: none;
}

@keyframes veloRipple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* ─── Section headers ─── */
.velo-section-header h2 {
  transition: transform 300ms var(--velo-ease-out-expo);
}

.motion-fade-up.is-revealed .velo-section-header h2 {
  animation: veloSlideIn 500ms var(--velo-ease-out-expo) both;
}

@keyframes veloSlideIn {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ─── Extended stagger (up to 16) ─── */
@media (prefers-reduced-motion: no-preference) {
  .stagger-children.is-revealed > *:nth-child(9)  { transition-delay: 400ms; }
  .stagger-children.is-revealed > *:nth-child(10) { transition-delay: 450ms; }
  .stagger-children.is-revealed > *:nth-child(11) { transition-delay: 500ms; }
  .stagger-children.is-revealed > *:nth-child(12) { transition-delay: 550ms; }
  .stagger-children.is-revealed > *:nth-child(13) { transition-delay: 600ms; }
  .stagger-children.is-revealed > *:nth-child(14) { transition-delay: 650ms; }
  .stagger-children.is-revealed > *:nth-child(15) { transition-delay: 700ms; }
  .stagger-children.is-revealed > *:nth-child(16) { transition-delay: 750ms; }

  .motion-fade-up {
    transition-duration: 520ms;
    transition-timing-function: var(--velo-ease-out-expo);
  }

  .stagger-children > * {
    transition-duration: 480ms;
    transition-timing-function: var(--velo-ease-out-expo);
  }
}

@media (prefers-reduced-motion: reduce) {
  .velo-greeting-bg,
  .velo-player.is-playing .velo-player-cover,
  .velo-player-sheet.is-open .velo-player-sheet-cover,
  .velo-track-row.is-playing,
  .velo-track-row.is-playing .velo-track-row-cover {
    animation: none !important;
  }

  .velo-viewport,
  .velo-sidebar {
    opacity: 1;
    transform: none;
    transition: none;
  }
}