/*
 * MyUsedRobot — Global Animations & UX Polish
 * v2.0 — startup-grade micro-interactions
 */

/* ── Page load ── */
html { scroll-behavior: smooth }

@keyframes fadeUp {
  from { opacity:0; transform:translateY(16px) }
  to   { opacity:1; transform:translateY(0) }
}
@keyframes fadeIn {
  from { opacity:0 }
  to   { opacity:1 }
}
@keyframes slideDown {
  from { opacity:0; transform:translateY(-8px) }
  to   { opacity:1; transform:translateY(0) }
}
@keyframes pulse {
  0%,100% { opacity:1 }
  50%      { opacity:.5 }
}
@keyframes shimmer {
  0%   { background-position:200% 0 }
  100% { background-position:-200% 0 }
}
@keyframes scaleIn {
  from { opacity:0; transform:scale(.96) }
  to   { opacity:1; transform:scale(1) }
}

/* ── Page entry animation ── */
/* DISABLED per user request — pages no longer fade in when navigating between menus.
   Other micro-interactions (hover, focus, button press) are preserved. */
/*
.page, .page-header, main, .dash-main {
  animation: fadeUp .45s cubic-bezier(.22,.61,.36,1) both;
}
.mur-topbar {
  animation: slideDown .35s cubic-bezier(.22,.61,.36,1) both;
}
footer {
  animation: fadeIn .6s ease both;
  animation-delay:.2s;
}
*/

/* ── Card hover lift ── */
.card, .lc-card, .lc-wrap a, .review-card, .fav-card,
.article-item, .mfg-card, .partner-card {
  transition: transform .2s cubic-bezier(.22,.61,.36,1),
              box-shadow .2s cubic-bezier(.22,.61,.36,1) !important;
  will-change: transform;
}
.card:hover, .lc-card:hover,
.mfg-card:hover, .partner-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,.12) !important;
}
body.dark .card:hover,
body.dark .mfg-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,.4) !important;
}

/* ── Button micro-interactions ── */
.btn-contact, .btn-accent, .save-btn, .btn-pub,
.search-btn, .btn-sell, .btn-primary,
button[class*="btn-"], a[class*="btn-"] {
  transition: background .18s ease,
              transform .15s cubic-bezier(.22,.61,.36,1),
              box-shadow .18s ease !important;
}
.btn-contact:active, .btn-accent:active,
.save-btn:active, .btn-pub:active {
  transform: scale(.97) !important;
}

/* ── Search bar focus ── */
.search-input:focus, .search-field:focus,
input[type="text"]:focus, input[type="email"]:focus,
textarea:focus, select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,168,120,.15);
  border-color: var(--accent) !important;
  transition: box-shadow .2s ease, border-color .2s ease;
}

/* ── Skeleton loaders ── */
.skeleton, [data-skeleton] {
  background: linear-gradient(90deg,
    var(--surface) 25%,
    var(--border)  50%,
    var(--surface) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 4px;
  color: transparent !important;
  user-select: none;
}

/* ── Toast ── */
.dash-toast, .cms-toast, .fav-toast {
  animation: scaleIn .25s cubic-bezier(.22,.61,.36,1);
}

/* ── Modal ── */
.auth-modal, .review-modal {
  animation: scaleIn .25s cubic-bezier(.22,.61,.36,1);
}
.auth-overlay, .review-modal-overlay {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ── Nav links ── */
.cat-link {
  position: relative;
  transition: color .18s ease;
}
.cat-link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 2px;
  background: var(--accent);
  border-radius: 2px;
  transition: width .2s cubic-bezier(.22,.61,.36,1);
}
.cat-link:hover::after,
.cat-link.active::after { width: 100% }

/* ── Topbar scroll shadow ── */
.mur-topbar {
  transition: box-shadow .2s ease;
}
.mur-topbar.scrolled {
  box-shadow: 0 2px 16px rgba(0,0,0,.1) !important;
}
body.dark .mur-topbar.scrolled {
  box-shadow: 0 2px 16px rgba(0,0,0,.4) !important;
}

/* ── Section stagger ── */
.stat-card:nth-child(1) { animation-delay:.05s }
.stat-card:nth-child(2) { animation-delay:.10s }
.stat-card:nth-child(3) { animation-delay:.15s }
.stat-card:nth-child(4) { animation-delay:.20s }

/* ── Listing card stagger ── */
.lc-wrap a:nth-child(1) { animation: fadeUp .4s ease both .05s }
.lc-wrap a:nth-child(2) { animation: fadeUp .4s ease both .10s }
.lc-wrap a:nth-child(3) { animation: fadeUp .4s ease both .15s }
.lc-wrap a:nth-child(4) { animation: fadeUp .4s ease both .20s }

/* ── Focus ring for accessibility ── */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Number/price pop ── */
.stat-value, .price-main, .fav-price, .review-big {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ── Smooth image loading ── */
img {
  transition: opacity .3s ease;
}
img[loading="lazy"] {
  opacity: 0;
}
img[loading="lazy"].loaded {
  opacity: 1;
}

/* ── Divider pulse on load ── */
.cat-link.active {
  animation: fadeIn .3s ease both;
}

/* ── Chat panel ── */
.chat-panel {
  animation: fadeUp .25s cubic-bezier(.22,.61,.36,1);
}

/* ── Improved scrollbar ── */
::-webkit-scrollbar { width:6px; height:6px }
::-webkit-scrollbar-track { background:transparent }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px }
::-webkit-scrollbar-thumb:hover { background:var(--text3) }

/* ── Selection color ── */
::selection { background:rgba(0,168,120,.2); color:var(--text) }
body.dark ::selection { background:rgba(0,212,154,.2) }

/* ── Reduce motion support ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── Mobile touch improvements ── */
@media (max-width: 768px) {
  .btn-contact, .btn-accent, button, a {
    -webkit-tap-highlight-color: rgba(0,168,120,.15);
    touch-action: manipulation;
  }
  .card:hover, .lc-card:hover { transform: none }
}

/* ── Print ── */
@media print {
  .mur-topbar, footer, .auth-overlay, #tawkchat-container { display:none }
}