/* ============================================================
   feel.css — Micro-interactions & premium feel
   Load LAST in index.html (after ui.css, v6-additions.css)
   so these rules can override with minimum specificity.
   No Razor changes. No new C#. Pure CSS + one JS addition.
   ============================================================ */

/* ── 1. Favorite button — heart pop ──────────────────────────────────────── */

/* Fires every time --active-class is applied (incl. Blazor re-renders) */
.favorite-btn--active {
  animation: heartPop 0.35s cubic-bezier(0.34, 1.5, 0.64, 1) both;
}

@keyframes heartPop {
  0%   { transform: scale(0.7); }
  100% { transform: scale(1);   }
}

/* ── 2. Done button — confirmation bounce ────────────────────────────────── */

.btn-done--active {
  animation: doneConfirm 0.4s cubic-bezier(0.34, 1.25, 0.64, 1) both;
}

@keyframes doneConfirm {
  0%   { transform: scale(0.93); }
  60%  { transform: scale(1.04); }
  100% { transform: scale(1);    }
}

/* ── 3. Category tab — activation snap ───────────────────────────────────── */

.category-tab--active {
  animation: tabPop 0.22s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

@keyframes tabPop {
  from { transform: scale(0.88); }
  to   { transform: scale(1);    }
}

/* ── 4. Fade-out edges on horizontally scrollable rows ───────────────────── */

.category-tabs,
.ready-now-cards,
.situation-presets {
  mask-image:         linear-gradient(to right, black calc(100% - 36px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 36px), transparent 100%);
}

/* ── 5. Scroll-snap on category tabs ─────────────────────────────────────── */

.category-tabs {
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--spacing-lg, 24px);
}

.category-tab {
  scroll-snap-align: start;
}

/* ── 6. GPU-promote animated panels ──────────────────────────────────────── */

.detail-panel,
.filter-drawer {
  will-change: transform;
}

/* ── 7. Theme-matched text selection ─────────────────────────────────────── */

::selection {
  background: var(--color-primary-light);
  color:      var(--color-text);
}

/* ── 8. Focus ring with theme colour ─────────────────────────────────────── */

:focus-visible {
  outline:        2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius:  var(--border-radius-sm, 8px);
}

/* Buttons with visible backgrounds don't need an extra outline */
.btn-primary:focus-visible,
.btn-done:focus-visible,
.panic-btn:focus-visible {
  outline-offset: 4px;
}

/* ── 9. Detail overlay — fade instead of snap ────────────────────────────── */

.detail-overlay {
  animation: overlayFadeIn 0.32s ease both;
}

@keyframes overlayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── 10. prefers-reduced-motion ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .favorite-btn--active,
  .btn-done--active,
  .category-tab--active,
  .detail-overlay {
    animation: none !important;
  }
  .detail-panel,
  .filter-drawer {
    will-change: auto;
  }
}