/**
 * @file css/reset.css
 * @description تصفير شامل وحديث لعناصر الويب، مهيأ خصيصاً للغة العربية (RTL)
 * يضمن خلو الواجهة من حواف وأنماط المتصفح الافتراضية، ويدعم الأداء العالي والوصولية.
 */

/* --------------------------------------------------------------------------
   1. تصفير نموذج الصندوق والحدود لجميع العناصر
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-width: 0;
  border-style: solid;
  border-color: var(--border, rgba(26, 24, 21, 0.08));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   2. تهيئة جذر الصفحة واللغة العربية (RTL)
   -------------------------------------------------------------------------- */
html {
  font-size: 16px;
  line-height: 1.8;
  direction: rtl;
  text-align: right;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  scroll-behavior: smooth;
  transition: background-color var(--duration-theme) var(--ease-subtle),
              color var(--duration-theme) var(--ease-subtle);
}

/* تطبيق نسيج الحبيبات الورقي على كامل الهيكل دون إعاقة النقرات */
body {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  background-color: transparent;
  color: inherit;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  background-image: var(--noise-texture);
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   3. وسائط الصور والفيديو ومعالجة السقوط الاحتياطي (Fallback)
   -------------------------------------------------------------------------- */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/* فلتر كروما موحد لجميع الصور للحفاظ على النبرة الدافئة والمظهر السينمائي */
img {
  filter: saturate(0.9) contrast(1.05);
  transition: filter var(--duration-hover) var(--ease-subtle),
              transform var(--duration-reveal) var(--ease-cinematic);
}

/* حاوية أمان في حال عدم تحميل الصورة لمنع ظهور الإطار المكسور */
.img-fallback-container {
  position: relative;
  background-color: var(--bg-secondary);
  background-image: var(--grid-pattern);
  background-size: var(--grid-size);
  overflow: hidden;
}

.img-fallback-container::after {
  content: "IWAN Atelier";
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  font-family: var(--font-tech, monospace);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  opacity: 0.5;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   4. تصفير الروابط والأزرار والعناصر التفاعلية
   -------------------------------------------------------------------------- */
a {
  color: inherit;
  text-decoration: none;
  background-color: transparent;
  transition: color var(--duration-hover) var(--ease-subtle);
}

button {
  cursor: pointer;
  background: none;
  color: inherit;
  font: inherit;
  border: none;
  outline: none;
  text-align: inherit;
  touch-action: manipulation;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* تصفير القوائم */
ul,
ol {
  list-style: none;
}

/* --------------------------------------------------------------------------
   5. تصفير حقول الإدخال والنماذج
   -------------------------------------------------------------------------- */
input,
textarea,
select {
  font: inherit;
  color: inherit;
  background: transparent;
  border-radius: 0;
  outline: none;
  width: 100%;
}

textarea {
  resize: vertical;
  min-height: 120px;
}

/* --------------------------------------------------------------------------
   6. معايير الوصولية والتركيز (Focus-Visible)
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--accent-warm);
  outline-offset: 4px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* --------------------------------------------------------------------------
   7. تفضيل تقليل الحركة لمراعاة الحالات الصحية (Accessibility)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  body::before {
    display: none;
  }
}