/* ==========================================================================
   Feel: readable type, pixel cursor, scroll reveal, progress bar, header shrink
   ========================================================================== */

/* ---------- readable body type (pixel fonts stay for headings/prices) ---------- */
:root {
  --font-head: 'Pixelify Sans', 'Rubik', sans-serif;
  --font-body: 'Rubik', 'Tajawal', system-ui, sans-serif;
  --font-ui: 'Rubik', 'Tajawal', system-ui, sans-serif;
}
html[lang='ar'] {
  --font-head: 'Rubik', 'Tajawal', sans-serif;
  --font-body: 'Rubik', 'Tajawal', sans-serif;
}
body { font-size: 16px; line-height: 1.6; letter-spacing: 0.1px; }
.mc-btn, .nav-links a, .mobile-nav a, .chip, .mc-input, .mc-select, .mc-textarea, .field label, .tabs > button, .tabs > a, .user-menu .menu a, .user-menu .menu button, .mc-table, .admin-side a {
  font-family: var(--font-ui);
}
.mc-btn { font-weight: 700; letter-spacing: 0.2px; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6); }
h1, h2, h3, h4 { font-family: var(--font-head); }
.mod-title, .section-head h2, .feature h3, .partner-card strong, .admin-head h1 { font-family: var(--font-head); }
.hero h1 { font-family: var(--font-pixel); }
.mod-desc, .lead, .prose, .review p, .help, .text-muted { font-family: var(--font-body); }
.brand-name, .price, .stat .num, .hero-kicker, .showcase-label, .auth-box h2, .rating-summary .big { font-family: var(--font-pixel); }
html[lang='ar'] .auth-box h2 { font-family: var(--font-head); }
.mod-desc { font-size: 0.93rem; color: #b7c0cc; }
.lead { color: #c3cbd6; }
.chip { font-weight: 600; font-size: 0.78rem; }

/* ---------- pixel cursor (desktop pointers only) ---------- */
@media (pointer: fine) {
  html, body { cursor: url('/img/cursor.png') 1 1, auto; }
  a, button, label, select, summary, .mc-btn, .chip-tag, .cat, .partner-card, .showcase-item, .gallery-thumbs img, [role='button'] {
    cursor: url('/img/cursor-hand.png') 9 2, pointer;
  }
  input:not([type='checkbox']):not([type='radio']):not([type='file']), textarea { cursor: text; }
  .mc-btn:disabled, .mc-btn[aria-disabled='true'] { cursor: url('/img/cursor.png') 1 1, not-allowed; }
}

/* ---------- top progress bar (XP bar) ---------- */
.nav-progress {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  height: 4px;
  width: 0;
  background: linear-gradient(90deg, #4fb300, var(--xp), #d4ff7a);
  box-shadow: 0 0 10px var(--xp);
  z-index: 20000;
  transition: width 0.25s ease, opacity 0.3s;
  opacity: 0;
  pointer-events: none;
}
.nav-progress.on { opacity: 1; }
#app.busy { opacity: 0.55; transition: opacity 0.15s; pointer-events: none; }

/* ---------- header shrink on scroll ---------- */
.site-header { transition: box-shadow 0.2s, background-color 0.2s; }
.site-header .nav { transition: height 0.2s; }
.site-header.scrolled .nav { height: 62px; }
.site-header.scrolled { background: rgba(15, 17, 21, 0.97); box-shadow: 0 3px 0 var(--line), 0 10px 30px rgba(0, 0, 0, 0.45); }
.site-header.scrolled .brand-logo { width: 38px; height: 38px; }

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }
.reveal-scale { opacity: 0; transform: scale(0.96); transition: opacity 0.45s ease, transform 0.45s ease; transition-delay: var(--d, 0ms); }
.reveal-scale.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-scale { opacity: 1; transform: none; transition: none; }
  .float, .hero-art::before { animation: none; }
}

/* ---------- hero parallax layer ---------- */
.hero { position: relative; }
.hero-bg {
  position: absolute;
  inset: -40px -20px;
  pointer-events: none;
  background-image: radial-gradient(circle at 20% 30%, rgba(31, 214, 122, 0.12), transparent 40%), radial-gradient(circle at 80% 70%, rgba(74, 237, 217, 0.08), transparent 40%);
  will-change: transform;
  z-index: -1;
}

/* ---------- back to top + sound toggle ---------- */
.fab-stack { position: fixed; bottom: 22px; inset-inline-end: 22px; display: flex; flex-direction: column; gap: 10px; z-index: 900; }
.fab { width: 46px; height: 46px; display: grid; place-items: center; font-size: 1.1rem; }
#to-top { opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity 0.2s, transform 0.2s; }
#to-top.show { opacity: 1; transform: none; pointer-events: auto; }

/* ---------- button press feel ---------- */
.mc-btn { transition: background-color 0.08s, transform 0.06s, box-shadow 0.08s, filter 0.12s; }
.mc-btn:hover { filter: brightness(1.05); }
.mod-card, .partner-card, .feature { will-change: transform; }

/* ---------- verified / linking widgets ---------- */
.ms-btn { --face: #2f2f2f; --face-hover: #444; }
.ms-btn .ms-logo { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 16px; height: 16px; }
.ms-btn .ms-logo i { display: block; }
.ms-btn .ms-logo i:nth-child(1) { background: #f25022; }
.ms-btn .ms-logo i:nth-child(2) { background: #7fba00; }
.ms-btn .ms-logo i:nth-child(3) { background: #00a4ef; }
.ms-btn .ms-logo i:nth-child(4) { background: #ffb900; }
.verified-box { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 2px solid var(--crystal-dark); background: rgba(31, 214, 122, 0.08); }
.warn-box { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 2px solid var(--gold-dark); background: rgba(255, 165, 2, 0.08); flex-wrap: wrap; }
.or-line { display: flex; align-items: center; gap: 10px; color: var(--text-dim); font-size: 0.85rem; margin: 14px 0; }
.or-line::before, .or-line::after { content: ''; flex: 1; height: 2px; background: var(--line); }

.dimmed { opacity: 0.55; pointer-events: none; }