/* =========================================================
   KarlyCollection — Base
   ریست + پلیس‌هولدر/اسپینر تصاویر (پریمیتیوهای مشترک همه‌ی صفحات)
   ========================================================= */

/* ناوبری نرم‌تر بین صفحات هم‌مبدأ در مرورگرهای پشتیبان (progressive enhancement، بی‌اثر در بقیه) */
@view-transition { navigation: auto; }

/* ---------- ریست ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-fa);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  transition: background-color .3s var(--ease), color .3s var(--ease);
  overflow-x: hidden;
}
body.has-contact-bar { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0)); }
@media (max-width: 560px) {
  body.has-contact-bar { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0)); }
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, p { margin: 0; }

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- پلیس‌هولدر تصاویر ---------- */
.img-placeholder {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.16), rgba(var(--color-primary-rgb), 0.04));
  color: var(--color-primary);
  border-radius: inherit;
}
.img-placeholder span { font-size: 13px; color: var(--color-text-muted); font-weight: 500; }
.is-placeholder .img-placeholder { display: flex; }

/* ---------- اسپینر لودینگ تصاویر ---------- */
.img-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-alt);
  z-index: 1;
  opacity: 1;
  transition: opacity .35s var(--ease);
}
.img-spinner::after {
  content: '';
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid rgba(var(--color-primary-rgb), .18);
  border-top-color: var(--color-primary);
  animation: img-spin .8s linear infinite;
}
.is-loaded .img-spinner,
.is-placeholder .img-spinner {
  opacity: 0;
  pointer-events: none;
}
@keyframes img-spin {
  to { transform: rotate(360deg); }
}

/* ---------- حالت کاهش انیمیشن ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}