/**
 * Polish CSS - Steve Jobs Edition
 * Every pixel matters. Every animation delights.
 * Premium micro-interactions and visual refinements.
 */

/* ==================== GLOBAL POLISH ==================== */

/* Smooth everything */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* All interactive elements get pointer cursor */
button, 
[role="button"], 
a, 
.clickable,
[onclick],
.sample-card,
.vault-pack-card,
.crate-sample-card,
.folder-item,
.inbox-item,
.zone-btn,
.mode-btn,
.filter-btn {
  cursor: pointer;
}

/* ==================== SMOOTH ZONE TRANSITIONS ==================== */

.dig-space {
  transition: background 0.5s ease;
}

.zone-transitioning .card-space {
  opacity: 0;
  transform: scale(0.95);
  transition: all 0.15s ease;
}

.zone-entering .card-space {
  animation: zone-enter 0.4s ease forwards;
}

@keyframes zone-enter {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Zone content fade-in */
.zone-content-enter {
  animation: content-fade-in 0.3s ease forwards;
}

@keyframes content-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}


/* ==================== CARD ENHANCEMENTS ==================== */

.card,
.sample-card,
.vault-pack-card,
.crate-sample-card {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, box-shadow;
}

.card:hover,
.sample-card:hover,
.vault-pack-card:hover,
.crate-sample-card:hover {
  transform: translateY(-6px) scale(1.02);
}

.card:active,
.sample-card:active,
.vault-pack-card:active,
.crate-sample-card:active {
  transform: translateY(-2px) scale(0.98);
  transition-duration: 0.1s;
}

/* Card shadow lift on hover */
.sample-card:hover,
.vault-pack-card:hover,
.crate-sample-card:hover {
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* Rarity glow effects - Jobs audit: Static glow, no pulsing */
.card.rarity-legendary,
.sample-card[data-rarity="legendary"] {
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.3), 0 4px 20px rgba(0, 0, 0, 0.3);
}

.card.rarity-epic,
.sample-card[data-rarity="epic"] {
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.3), 0 4px 20px rgba(0, 0, 0, 0.3);
}


/* ==================== BUTTON EFFECTS ==================== */

/* Universal button polish */
button,
.btn,
.btn-primary,
.btn-secondary,
.action-btn,
.float-btn,
.buy-btn,
.inbox-action-btn,
.folder-action-btn,
.vault-buy-btn,
.vault-toggle-btn,
.mode-btn {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

/* Hover: subtle scale + brightness */
button:hover:not(:disabled),
.btn:hover:not(:disabled),
.action-btn:hover:not(:disabled) {
  transform: translateY(-1px) scale(1.02);
  filter: brightness(1.1);
}

/* Active/Press: scale down + deeper */
button:active:not(:disabled),
.btn:active:not(:disabled),
.action-btn:active:not(:disabled) {
  transform: translateY(1px) scale(0.98);
  filter: brightness(0.95);
  transition-duration: 0.1s;
}

.float-btn:hover {
  transform: scale(1.1);
}

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

/* Primary button glow on hover */
.btn-primary:hover:not(:disabled),
.vault-buy-btn:hover:not(:disabled) {
  box-shadow: 0 8px 25px rgba(0, 255, 245, 0.25);
}

/* Ripple effect for buttons */
.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.4s, height 0.4s;
}

.btn-ripple:active::after {
  width: 200px;
  height: 200px;
}


/* ==================== SEARCH INPUT ==================== */

#search-input,
.search-bar input,
.crates-search-input,
.library-search input {
  transition: all 0.3s ease;
}

#search-input:focus,
.search-bar input:focus,
.crates-search-input:focus,
.library-search input:focus {
  transform: scale(1.01);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2);
}


/* ==================== SKELETON LOADERS ==================== */

/* Base skeleton styling */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.03) 25%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.03) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 8px;
}

@keyframes skeleton-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* Skeleton card for grids */
.skeleton-card {
  background: var(--surface, #1a1a24);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  overflow: hidden;
  animation: skeleton-fade-in 0.3s ease;
}

.skeleton-card .skeleton-image {
  aspect-ratio: 1;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.03) 25%,
    rgba(255, 255, 255, 0.06) 50%,
    rgba(255, 255, 255, 0.03) 75%
  );
  background-size: 400% 400%;
  animation: skeleton-shimmer-2d 2s ease infinite;
}

.skeleton-card .skeleton-body {
  padding: 12px;
}

.skeleton-card .skeleton-title {
  height: 14px;
  width: 80%;
  margin-bottom: 8px;
  border-radius: 4px;
}

.skeleton-card .skeleton-subtitle {
  height: 12px;
  width: 60%;
  border-radius: 4px;
}

@keyframes skeleton-shimmer-2d {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes skeleton-fade-in {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

/* Skeleton for Vault pack grid */
.skeleton-pack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

/* Skeleton for card grid */
.skeleton-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

/* Content fade-in when loaded */
.content-loaded {
  animation: content-loaded 0.4s ease forwards;
}

@keyframes content-loaded {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Jobs audit: Card entrance - simple fade, no stagger delays */
.card-grid .sample-card,
.vault-grid .vault-pack-card,
.crates-sample-grid .crate-sample-card {
  animation: card-fade-in 0.15s ease;
}

@keyframes card-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}


/* ==================== TYPOGRAPHY REFINEMENTS ==================== */

/* Consistent heading hierarchy */
h1, .h1, .zone-title, .vault-title {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

h2, .h2, .section-title {
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

h3, .h3 {
  font-weight: 600;
  line-height: 1.4;
}

/* Body text consistency */
p, .body-text {
  line-height: 1.6;
  letter-spacing: 0.01em;
}

/* Small/meta text */
.meta-text, .text-muted, .card-meta, .sample-card-meta {
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/* Artist link in cards */
.card-artist-link {
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  transition: color 0.2s;
}
.card-artist-link:hover {
  color: var(--accent, #00d4ff);
  text-decoration: underline;
}

/* Monospace elements */
.bpm, .key, .duration, code {
  font-family: 'Space Mono', 'SF Mono', monospace;
  font-feature-settings: 'tnum' 1;
}


/* ==================== EMPTY STATES - INSPIRING, NOT SAD ==================== */

/* Universal empty state polish */
.empty-state,
.library-empty,
.crates-empty,
.vault-empty,
.inbox-zero {
  text-align: center;
  padding: 60px 40px;
  animation: empty-state-in 0.5s ease;
  width: 100%;
  max-width: 500px;
  margin: 80px auto 0;
}

@keyframes empty-state-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Empty state icons - Jobs audit: Static, no floating */
.empty-icon,
.empty-state-icon,
.library-empty-icon,
.crates-empty-icon,
.vault-empty-icon,
.inbox-zero-icon {
  font-size: 72px;
  margin-bottom: 24px;
  display: block;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3));
}

/* Empty state titles - inspiring */
.empty-state h2,
.library-empty-title,
.crates-empty h3,
.vault-empty-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #fff 0%, #a8a8a8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Empty state descriptions */
.empty-state p,
.library-empty-text,
.crates-empty p,
.vault-empty-text {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  max-width: 400px;
  margin: 0 auto 32px;
}

/* Empty state CTAs - make them pop */
.empty-actions,
.library-empty-actions,
.crates-empty-btn {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Primary CTA in empty states */
.empty-state .btn-primary,
.library-empty-btn.primary,
.crates-empty-btn {
  background: linear-gradient(135deg, #00fff5 0%, #00d4aa 100%);
  border: none;
  padding: 14px 28px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  color: #0a0a0f;
  box-shadow: 0 4px 20px rgba(0, 255, 245, 0.25);
  transition: all 0.25s ease;
}

.empty-state .btn-primary:hover,
.library-empty-btn.primary:hover,
.crates-empty-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 30px rgba(0, 255, 245, 0.35);
}

/* Decorative elements for empty states */
.empty-state::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.08) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: -1;
}


/* ==================== TOAST ENHANCEMENTS ==================== */

.toast {
  animation: toast-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  backdrop-filter: blur(10px);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateX(100%) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.toast.hiding {
  animation: toast-out 0.25s ease forwards;
}

@keyframes toast-out {
  to {
    opacity: 0;
    transform: translateX(50%) scale(0.95);
  }
}


/* ==================== CREDITS DISPLAY ==================== */

.credits-display {
  transition: all 0.3s ease;
}

.credits-display.bump {
  animation: credits-bump 0.4s ease;
}

@keyframes credits-bump {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.credits-display.add {
  animation: credits-add 0.5s ease;
}

@keyframes credits-add {
  0% { transform: scale(1); color: var(--text); }
  50% { transform: scale(1.3); color: #22c55e; }
  100% { transform: scale(1); color: var(--text); }
}


/* ==================== ZONE NAV EFFECTS ==================== */

.zone-btn {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.zone-btn::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--zone-primary, #a855f7), var(--zone-secondary, #7c3aed));
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s;
}

.zone-btn.active::before {
  opacity: 1;
}

.zone-btn:not(.active):hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

.zone-btn:active {
  transform: scale(0.97);
}

/* Zone icon bounce on active */
.zone-btn.active .zone-btn-icon {
  animation: zone-icon-bounce 0.4s ease;
}

@keyframes zone-icon-bounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* Mode toggle (songs/stems) */
.mode-btn {
  transition: all 0.2s ease;
}

.mode-btn:hover:not(.active) {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.08);
}

.mode-btn.active {
  transform: scale(1.02);
}


/* ==================== PROFILE WIDGET ==================== */

.profile-widget {
  animation: profile-in 0.5s ease 0.5s backwards;
}

@keyframes profile-in {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}


/* ==================== QUEST PANEL ==================== */

.quest-panel {
  animation: quest-in 0.5s ease 0.7s backwards;
}

@keyframes quest-in {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.quest-item {
  transition: all 0.2s ease;
}

.quest-item:hover {
  transform: translateX(4px);
}

.quest-item.completed {
  animation: quest-complete 0.5s ease;
}

@keyframes quest-complete {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); background: rgba(34, 197, 94, 0.2); }
  100% { transform: scale(1); }
}


/* ==================== PARTICLE EFFECTS ==================== */

.sparkle {
  position: fixed;
  width: 6px;
  height: 6px;
  background: #ffd700;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  animation: sparkle-fade 1s ease forwards;
}

@keyframes sparkle-fade {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0) translateY(-50px);
  }
}


/* ==================== SCROLLBAR STYLING ==================== */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
}

::-webkit-scrollbar-thumb {
  background: rgba(168, 85, 247, 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(168, 85, 247, 0.5);
}


/* ==================== FOCUS STATES ==================== */

*:focus-visible {
  outline: 2px solid rgba(168, 85, 247, 0.5);
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid #a855f7;
  outline-offset: 2px;
}


/* ==================== SELECTION ==================== */

::selection {
  background: rgba(168, 85, 247, 0.3);
  color: white;
}


/* ==================== VISUAL HIERARCHY ==================== */

/* Primary actions - bright and obvious */
.btn-primary,
.vault-buy-btn,
.library-empty-btn.primary,
.crates-empty-btn,
.inbox-action-btn.primary {
  font-weight: 600;
  font-size: 14px;
}

/* Secondary actions - muted but visible */
.btn-secondary,
.action-btn:not(.primary),
.inbox-action-btn:not(.primary) {
  opacity: 0.85;
}

.btn-secondary:hover,
.action-btn:not(.primary):hover {
  opacity: 1;
}

/* Remove unnecessary visual noise */
.badge:empty,
.tag:empty,
.count:empty {
  display: none;
}

/* Consistent border radius scale */
.radius-sm { border-radius: 6px; }
.radius-md { border-radius: 10px; }
.radius-lg { border-radius: 14px; }
.radius-xl { border-radius: 20px; }


/* ==================== HOVER STATES - UNIVERSAL ==================== */

/* Links and clickable text */
a,
.clickable-text {
  transition: color 0.2s ease, opacity 0.2s ease;
}

a:hover,
.clickable-text:hover {
  opacity: 0.85;
}

/* List items and rows */
.inbox-item,
.folder-item,
.vault-sample-item {
  transition: all 0.2s ease;
}

.inbox-item:hover,
.folder-item:hover,
.vault-sample-item:hover {
  transform: translateX(2px);
}


/* ==================== INPUT POLISH ==================== */

input, textarea, select {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

input:hover:not(:focus):not(:disabled),
textarea:hover:not(:focus):not(:disabled),
select:hover:not(:focus):not(:disabled) {
  border-color: rgba(255, 255, 255, 0.2);
}


/* ==================== MODAL POLISH ==================== */

.modal-overlay,
.pack-overlay {
  backdrop-filter: blur(8px);
  transition: opacity 0.25s ease;
}

.modal-content,
.pack-content,
.vault-detail-content {
  animation: modal-pop-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modal-pop-in {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}


/* ==================== SUBTLE MICRO-INTERACTIONS ==================== */

/* Checkboxes */
input[type="checkbox"] {
  transition: transform 0.15s ease;
}

input[type="checkbox"]:active {
  transform: scale(0.9);
}

/* Toggle switches */
.toggle,
.switch {
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

/* Tags and badges */
.tag,
.badge,
.source-badge,
.card-rarity-tag,
.vault-pack-tag {
  transition: transform 0.2s ease, background 0.2s ease;
}

.tag:hover,
.badge:hover {
  transform: scale(1.05);
}


/* ==================== PROGRESS & LOADING ==================== */

/* Progress bars */
.progress-bar,
.np-fill,
.upload-progress-fill {
  transition: width 0.3s ease;
}

/* Spinning loaders */
.loading-spinner,
.vault-loading-spinner {
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}


/* ==================== WAVEFORM POLISH ==================== */

.waveform-bar {
  transition: height 0.1s ease, opacity 0.2s ease;
}

.sample-waveform-mini:hover .waveform-bar {
  opacity: 1;
}


/* Jobs audit: Pack opening - removed idle animations, kept hover transform */
.pack-card:hover {
  transform: scale(1.02);
}


/* ==================== CREDITS ANIMATION ==================== */

.credits-pill,
.credits-display {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.credits-pill:hover,
.credits-display:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(168, 85, 247, 0.3);
}

/* Credits bump when earning */
.credits-bump {
  animation: credits-earned 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes credits-earned {
  0% { transform: scale(1); }
  40% { transform: scale(1.3); }
  100% { transform: scale(1); }
}


/* ==================== ACCESSIBILITY - FOCUS STATES ==================== */

*:focus-visible {
  outline: 2px solid rgba(168, 85, 247, 0.6);
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid #a855f7;
  outline-offset: 2px;
}


/* ==================== SELECTION ==================== */

::selection {
  background: rgba(168, 85, 247, 0.35);
  color: white;
}


/* ==================== REDUCED MOTION ==================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .pack-unopened,
  .empty-icon,
  .byte-mascot {
    animation: none !important;
  }
}


/* ==================== ZONE-AWARE UI ==================== */
/* Jobs Rule: Every element earns its place. Filter bar belongs to Underground only. */

/* Hide discover header (tabs + filters) on non-marketplace zones */
body.zone-lab .discover-header,
body.zone-collab .discover-header,
body.zone-battle .discover-header,
body.zone-challenges .discover-header,
body.zone-vault .discover-header,
body.zone-library .discover-header,
body.zone-crates .discover-header,
body.zone-dashboard .discover-header,
body.zone-collection .discover-header,
body.zone-dig .discover-header {
  display: none !important;
}

/* Center cards when grid is sparse (1-3 items) */
.zone-discover .card-space,
.zone-discover #card-space,
.zone-underground .card-space,
.zone-underground #card-space {
  justify-content: center;
}

/* Sparse message styling — handled in yugioh-cards.css now */