/* ========== slider.css (scoped to #hero & fully synced with JS) ========== */

/* رَپر اصلی هِرو + متغیرهای پیش‌فرض (JS همین‌ها را روی #hero به‌روزرسانی می‌کند) */
#hero{
  position: relative;
  overflow: hidden;
  background: #000;

  /* افکت‌های تصویر */
  --zoom: 1;                  /* setZoom */
  --brightness: 1;            /* setBrightness */
  --fade: 500ms;              /* مدت محوشدن اسلایدها – با startAuto از JS هم به‌روزرسانی می‌شود */

  /* تایپوگرافی واکنش‌گرا (clamp) */
  --fs-min: 18px;
  --fs-fluid: 4vw;
  --fs-max: 56px;

  /* Ken Burns */
  --kb-from: 1;
  --kb-to: 1.10;
  --kb-duration: 8000ms;
  --kb-ease: ease-in-out;

  /* جعبهٔ متن */
  --text-w: 82%;                        /* عرض جعبهٔ متن نسبت به اسلایدر */
  --text-max-w: 60ch;                   /* حداکثر عرض تقریبی بر اساس کاراکتر */
  --text-pad: clamp(8px,2vw,20px);      /* پدینگ افقی داخل جعبهٔ متن */
  --safe-area: 6%;                      /* فاصلهٔ امن از لبه‌ها برای setTextPosition */
}

/* حالت استاندارد: نسبت 16:9 واکنش‌گرا (فقط داخل #hero) */
#hero .slider{
  position: relative;
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  background: #111;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* حالت تمام‌صفحه (با JS: slider.setLayout('viewport')) */
#hero.full .slider{
  width: 100vw;
  max-width: none;
  height: 100vh;      /* fallback */
  height: 100svh;     /* جلوگیری از بریدگی با نوار آدرس موبایل‌های جدید */
  aspect-ratio: auto;
  border-radius: 0;
}

#hero .slides{ position: absolute; inset: 0; }

/* هر اسلاید */
#hero .slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--fade, 500ms) ease;
  z-index: 1;
  pointer-events: none;
}
#hero .slide.active{
  opacity: 1;
  z-index: 2;
  pointer-events: auto;
}

/* تصویر داخل اسلاید – کاملاً واکنش‌گرا */
#hero .slide img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;                 /* پر کردن قاب با حفظ نسبت */
  transform-origin: center center;
  transform: scale(var(--zoom));     /* زوم لحظه‌ای */
  filter: brightness(var(--brightness));
  transition: transform .25s ease, filter .15s ease;
}

/* Ken Burns: زوم تدریجی مانند ویدیو */
#hero .slide.kenburns img{
  animation: kenburns var(--kb-duration) var(--kb-ease) forwards;
}
@keyframes kenburns{
  0%{   transform: scale(var(--kb-from)); }
  100%{ transform: scale(var(--kb-to)); }
}

/* کپشن و تیتر */
#hero .slider-caption{
  position: absolute;
  inset: 0;
  z-index: 3;                 /* بالاتر از تصویر و شبکه */
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
}

/* هدر تایپی (داخل #hero-typed) */
#hero #hero-typed{
  position: absolute;         /* جای‌گذاری با setTextPosition(x%, y%) */
  inset: auto;
  width: min(var(--text-w), var(--text-max-w));
  max-width: 100%;
  padding-inline: var(--text-pad);
  direction: rtl;             /* برای فارسی */
  transform: translate(-50%, -50%);
}

/* استایل خود متن (h2) – واکنش‌گرا + محدود به ۲ خط */
#hero .slider-caption h2{
  margin: 0 0 16px;
  color: #fff;
  font-weight: 800;
  font-size: clamp(var(--fs-min), var(--fs-fluid), var(--fs-max));
  line-height: 1.35;
  text-shadow: 0 3px 12px rgba(0,0,0,.35);

  /* دو خط بیشینه */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;

  /* خوانایی و شکست مناسب فارسی/عربی */
  white-space: normal;
  overflow-wrap: break-word;
}
#hero .slider-caption h2.no-shadow{ text-shadow: none; }

/* دکمه نمونه (در صورت استفاده داخل هِرو) */
#hero .btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
#hero .btn-yellow{ background:#ffcc00; color:#111; }
#hero .btn-wide{ min-width:200px; }

/* تایپ‌نشان (Caret) */
#hero .caret{
  display:inline-block;
  width:.6ch;
  border-inline-start:2px solid currentColor;
  transform: translateY(.1em);
  animation: caret-blink 1s steps(1) infinite;
  margin-inline-start:2px;
}
@keyframes caret-blink{ 50%{ opacity:0; } }

/* لایهٔ شبکه (canvas) – بین تصویر و متن */
#hero .network-canvas{
  position:absolute;
  inset:0;
  z-index:2;               /* بالای تصویر، پایین کپشن */
  pointer-events:auto;     /* برای کلیک جهت افزایش اتصال‌ها */
}