/* =========================================================
   سینا پکس — پس‌زمینه‌های پزشکی و عناصر بصری بخش‌های تیره
   ---------------------------------------------------------
   تصویر پس‌زمینه‌ی مشترک بخش‌های تیره در همین فایل تعریف
   شده است.
   ========================================================= */

.medical-bg { position: relative; background-color: #061a33; }
.medical-bg > .medical-bg-img {
  position: absolute;
  inset: 0;
  background-image: url("../../image/index/radiography-mri.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .2;
  z-index: 0;
  pointer-events: none;
}
/* در گوشی‌های کوچک تصویر کمی محو می‌شود تا متن‌ها خوانا بمانند */
@media (max-width: 640px) { .medical-bg > .medical-bg-img { opacity: .14; } }
.medical-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 88% 12%, rgba(27, 176, 206, .22), transparent 62%),
    radial-gradient(760px 520px at 8% 92%, rgba(255, 207, 14, .12), transparent 60%),
    linear-gradient(-107deg, rgba(4, 19, 43, .55) 0%, rgba(5, 26, 58, .72) 100%);
}

/* شبکه‌ی اندازه‌گیری در پس‌زمینه‌ی بخش‌های تیره */
.grid-overlay { position: relative; }
.grid-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 72%);
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 72%);
  pointer-events: none;
  z-index: 0;
}

/* حلقه‌های تزئینی پشت تصویرها — با یک شناور شدن آرام */
.blob {
  position: absolute;
  border-radius: 9999px;
  background: rgba(27, 176, 206, .14);
  filter: blur(2px);
  animation: blob-float 7s ease-in-out infinite;
}
@keyframes blob-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-16px) scale(1.06); }
}

/* برچسب چشمی بالای عنوان اصلی */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: rgba(27, 176, 206, .12);
  border: 1px solid rgba(27, 176, 206, .35);
  color: #8fe4f4;
  font-size: .82rem;
  font-weight: 600;
  padding: .4rem .95rem;
  border-radius: 999px;
  margin-bottom: 1.35rem;
}
.eyebrow .dot {
  width: .5rem;
  height: .5rem;
  border-radius: 999px;
  background: var(--teal-400);
  animation: dot-pulse 2.2s ease-out infinite;
  flex-shrink: 0;
}
@keyframes dot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(27, 176, 206, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(27, 176, 206, 0); }
  100% { box-shadow: 0 0 0 0 rgba(27, 176, 206, 0); }
}

/* قاب اسکن — گوشه‌های ریتیکل دور تصاویر محصول */
.scan-frame { position: relative; }
.scan-corner {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid var(--teal-400);
  opacity: .8;
  z-index: 3;
  pointer-events: none;
}
.scan-corner.tl { top: -6px; inset-inline-start: -6px; border-inline-end: none; border-bottom: none; }
.scan-corner.tr { top: -6px; inset-inline-end: -6px; border-inline-start: none; border-bottom: none; }
.scan-corner.bl { bottom: -6px; inset-inline-start: -6px; border-inline-end: none; border-top: none; }
.scan-corner.br { bottom: -6px; inset-inline-end: -6px; border-inline-start: none; border-top: none; }

/* خط اسکن متحرک روی تصویر اصلی هیرو — با transform که روی GPU اجرا می‌شود */
.scan-sweep {
  position: absolute;
  inset-inline: 0;
  height: 2px;
  top: 2%;
  background: linear-gradient(90deg, transparent, var(--teal-400) 50%, transparent);
  box-shadow: 0 0 8px 1px rgba(27, 176, 206, .4);
  opacity: 0;
  z-index: 3;
  border-radius: 999px;
  animation: sweep-move 7s ease-in-out infinite;
  pointer-events: none;
  will-change: transform, opacity;
}
@keyframes sweep-move {
  0%   { transform: translateY(0); opacity: 0; }
  6%   { opacity: .9; }
  46%  { opacity: .9; }
  52%  { transform: translateY(calc(var(--sweep-range, 0px) * 1)); opacity: 0; }
  100% { transform: translateY(calc(var(--sweep-range, 0px) * 1)); opacity: 0; }
}

/* برچسب‌های اطلاعاتی HUD روی تصویر هیرو */
.hud-label {
  position: absolute;
  font-size: .68rem;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .7);
  background: rgba(4, 19, 43, .55);
  border: 1px solid rgba(27, 176, 206, .3);
  padding: .22rem .55rem;
  border-radius: .35rem;
  z-index: 3;
  pointer-events: none;
  backdrop-filter: blur(2px);
  direction: ltr;
}

/* دیسک تزئینی پشت تصویر هیرو — الهام‌گرفته از برش محوری اسکن */
.scan-disc {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: min(135%, 560px);
  aspect-ratio: 1 / 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: .85;
}
.scan-disc svg { display: block; width: 100%; height: 100%; }
.scan-disc svg .scan-disc-ring { transform-origin: 200px 200px; }

/* رادار چرخان — فقط یک لایه‌ی گرادیانی ساده و سبک (بدون mix-blend) */
.scan-disc-radial {
  position: absolute;
  inset: 9%;
  border-radius: 999px;
  background: conic-gradient(from 0deg, rgba(27, 176, 206, .3), transparent 14%);
  opacity: .8;
  animation: disc-spin 14s linear infinite;
}
@keyframes disc-spin { to { transform: rotate(360deg); } }