/* ==========================================================================
   polish.css — micro-interactions, perf-friendly animations, modern polish.
   Loaded last so it can refine styles defined elsewhere without rewriting them.
   ========================================================================== */

/* Smooth scroll only when the user hasn't asked for reduced motion */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Page-level fade-in to soften initial paint */
body { animation: page-fade-in 280ms ease-out both; }
@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Use transform/opacity (GPU-accelerated) for grid item hover so paint stays cheap */
.grid-item {
  transition:
    transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 220ms ease;
}
.grid-item:hover { transform: translateY(-3px); }
.grid-item:active { transform: translateY(-1px); transition-duration: 80ms; }

/* Card lift — narrower transition than `all` to avoid layout/paint thrash */
.card,
.feature-card,
.pricing-card,
.nav-section,
.customizer-panel {
  transition:
    transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 220ms ease;
}

/* Buttons get a subtle press feedback */
.wrap button:active:not(:disabled),
.wrap .btn:active:not(:disabled),
.cta-button:active,
.secondary-button:active,
.session-btn:active {
  transition-duration: 90ms;
  transform: translateY(0) scale(0.985);
}

/* Smoother input focus */
input, select, textarea {
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

/* Skeleton loader (used by JS to indicate loading state) */
.skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
}
.skeleton::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.06) 50%,
    transparent 100%);
  animation: skeleton-shimmer 1.4s linear infinite;
}
@keyframes skeleton-shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* Toast slide-in already handled in shared.css; here we add a cleaner exit */
.toast.removing {
  animation: toast-out 220ms ease forwards;
}
@keyframes toast-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(20px); }
}

/* Modal entrance/exit — gentler scale */
.modal { transition: opacity 200ms ease; }
.modal-content {
  animation: modal-in 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

/* Soundboard items — lighter hover */
.sb-item, .sound-item {
  transition:
    transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 180ms ease,
    background 180ms ease;
}
.sb-item:hover, .sound-item:hover { transform: translateX(2px); }
.sb-item.sb-folder:hover { transform: translateX(2px) translateY(-1px); }
.sb-item.sb-playing { transform: translateX(2px); }

/* Soft glow pulse for the now-playing indicator (cheap — only opacity) */
.status-indicator.playing {
  animation: now-playing-pulse 1.6s ease-in-out infinite;
}
@keyframes now-playing-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 184, 122, 0.6); }
  50%      { box-shadow: 0 0 0 6px rgba(212, 184, 122, 0); }
}

/* Honor reduced-motion globally */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  body { animation: none; }
}

/* High-contrast mode tweaks */
@media (prefers-contrast: more) {
  *:focus-visible { outline-width: 3px; outline-offset: 3px; }
  .card, .grid-item, .sb-item { border-width: 2px; }
}

/* Tap-target sizing on touch devices */
@media (hover: none) and (pointer: coarse) {
  .sb-item-actions { opacity: 1 !important; }
  button, .btn, .nav-btn { min-height: 40px; }
}

/* Sticky positioning fallback for older browsers (ignore if it doesn't apply) */
@supports not (position: sticky) {
  nav, aside { position: relative; }
}

/* Better text rendering on dark backgrounds */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

/* Empty state polish: lift the empty icon slightly */
.sb-empty p:first-child { font-size: 1.2rem; opacity: 0.85; }
.sb-empty p + p { margin-top: 4px; }