/* ════════════════════════════════════════════
   Showcase Hero — كاروسيل تلفونات حية (3 مواقع لايف)
   ════════════════════════════════════════════ */

.showcase {
  position: relative;
  background: #120808;
}

.showcase__stage {
  position: relative;
  height: 100vh;
  height: 100svh; /* الارتفاع المرئي الفعلي — بيحسب شريط المتصفح بالموبايل */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* خلفية موحدة: توهج أحمر ناعم ورا التلفونات بيذوب بأسود واحد — بدون أي حد أو أرضية منفصلة */
  background:
    radial-gradient(70% 60% at 50% 42%, rgba(201, 45, 45, 0.30), rgba(201, 45, 45, 0) 100%),
    linear-gradient(180deg, #170b0b 0%, #100808 100%);
}

/* ─── الافتتاحية: نص + كاروسيل ─── */
.opener {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4vw, 64px);
  width: min(1240px, 94vw);
}
.opener__side {
  text-align: right;
  color: #fff;
  max-width: 400px;
  flex-shrink: 0;
}
.opener__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #e08888;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}
.opener__title {
  font-family: var(--font-display, 'Karantina', sans-serif);
  font-weight: 700;
  font-size: clamp(3.6rem, 9vw, 7rem);
  line-height: 0.95;
  margin-bottom: 16px;
}
.opener__title em { font-style: normal; color: #e05656; }
.opener__sub {
  color: #c9a5a5;
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 26px;
}

/* ─── الكاروسيل: 3 تلفونات — بالنص قدّام، يمين ويسار ورا ─── */
.carousel {
  --ph-w: min(300px, 72vw);   /* عرض التلفون */
  --side-x: 62%;              /* إزاحة التلفونات الجانبية */
  --side-s: 0.8;              /* تصغير الجانبية */
  --side-rot: 16deg;          /* دوران 3D خفيف */
  position: relative;
  flex-shrink: 0;
  width: calc(var(--ph-w) * 2.3);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.carousel__track {
  position: relative;
  width: var(--ph-w);
  aspect-ratio: 300 / 620;
  perspective: 1400px;
  transform-style: preserve-3d;
}

.opener__phone {
  position: absolute;
  inset: 0;
  width: 100%;
  background: #111;
  border-radius: 44px;
  padding: 11px;
  cursor: pointer;
  box-shadow:
    0 0 0 2px #3a2a2a,
    0 30px 80px -20px rgba(0, 0, 0, 0.9),
    0 0 120px -30px rgba(220, 60, 60, 0.55),
    inset 0 0 4px rgba(255, 255, 255, 0.15);
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.5s,
    opacity 0.5s;
  will-change: transform;
}
.opener__phone.is-center {
  z-index: 3;
  transform: translateX(0) scale(1) rotateY(0);
  cursor: default;
}
.opener__phone.is-right {
  z-index: 2;
  transform: translateX(var(--side-x)) scale(var(--side-s)) rotateY(calc(var(--side-rot) * -1));
  filter: brightness(0.62);
}
.opener__phone.is-left {
  z-index: 1;
  transform: translateX(calc(var(--side-x) * -1)) scale(var(--side-s)) rotateY(var(--side-rot));
  filter: brightness(0.62);
}
.opener__phone.is-right:hover,
.opener__phone.is-left:hover { filter: brightness(0.85); }

.opener__phone::before { /* النوتش */
  content: '';
  position: absolute;
  top: 11px; left: 50%;
  transform: translateX(-50%);
  width: 38%; height: 24px;
  background: #111;
  border-radius: 0 0 16px 16px;
  z-index: 3;
}
.opener__badge {
  position: absolute;
  top: -14px;
  inset-inline-start: 18px;
  z-index: 4;
  background: #e05656;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 999px;
  letter-spacing: 0.05em;
  white-space: nowrap;
  box-shadow: 0 6px 18px -4px rgba(224, 86, 86, 0.6);
  transition: opacity 0.4s;
}
.opener__phone:not(.is-center) .opener__badge { opacity: 0; } /* البادج بس عالتلفون الي قدّام */

.opener__screen {
  position: absolute; /* absolute حتى ما يمدد ارتفاع التلفون (كان يسبب حلقة تمدد) */
  inset: 11px;
  border-radius: 33px;
  overflow: hidden;
  background: #fff;
}
/* iframe الموقع الحي — pointer-events مقفول حتى ما يسرق السكرول */
.opener__screen iframe {
  width: 390px;
  height: 844px;
  border: 0;
  pointer-events: none;
  transform-origin: top right;
  /* الـ scale بينضبط من JS حسب العرض الفعلي */
}

/* ─── اسم الموقع الي قدّام + رابط ─── */
.carousel__caption {
  display: flex;
  align-items: baseline;
  gap: 14px;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.8);
  transition: opacity 0.18s;
}
.carousel__caption.is-switching { opacity: 0; }
.carousel__caption span:first-child {
  font-family: var(--font-display, 'Karantina', sans-serif);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1;
}
.carousel__caption-cta {
  font-size: 0.88rem;
  font-weight: 600;
  color: #e08888;
  border-bottom: 1px solid rgba(224, 136, 136, 0.4);
  padding-bottom: 2px;
}
.carousel__caption:hover .carousel__caption-cta { color: #fff; border-color: #fff; }

/* ─── تلميح السكرول ─── */
.showcase__hint {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  color: #d99;
  font-size: 0.78rem;
  letter-spacing: 0.25em;
  text-align: center;
  transition: opacity 0.4s;
}
.showcase__hint-line {
  display: block;
  width: 2px; height: 38px;
  margin: 0 auto 8px;
  border-radius: 2px;
  background: linear-gradient(#e05656, transparent);
  animation: hint-drip 1.6s ease-in-out infinite;
}
@keyframes hint-drip {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ─── ديسكتوب ضيق: نص أضيق حتى الكاروسيل يفضل كامل ─── */
@media (max-width: 1100px) and (min-width: 821px) {
  .carousel { --ph-w: min(250px, 30vw); }
  .opener__side { max-width: 340px; }
  .opener__title { font-size: clamp(3rem, 7vw, 5rem); }
}

/* ─── موبايل ─── */
@media (max-width: 820px) {
  /* المحتوى بيبلش من فوق — أي فائض بيروح لتحت مش لفوق */
  .showcase__stage { align-items: flex-start; }
  .opener {
    flex-direction: column-reverse;
    gap: 10px;
    padding-top: calc(var(--header-h, 76px) + 24px); /* +14 للبادج الي بيطلع فوق التلفون */
  }
  .opener__side { text-align: center; max-width: 92vw; }
  .opener__eyebrow { display: none; } /* الكابشن تحت الكاروسيل بياخد مكانو */
  .opener__title { margin-bottom: 8px; }
  .opener__sub { font-size: 0.92rem; margin-bottom: 12px; }
  /* الارتفاع بينقفل من JS مرة وحدة (--stage-h) حتى ما يتغير لما شريط العنوان ينطوي بكروم؛
     والسكشن بيكبر مع المحتوى إذا لزم — الزر عمرو ما ينقص */
  .showcase__stage {
    height: auto;
    min-height: var(--stage-h, 100svh);
    padding-bottom: 44px; /* مسافة أمان فوق شريط الـ marquee المايل */
  }
  .carousel {
    --ph-w: min(215px, 58vw);
    --side-x: 58%;
    --side-s: 0.78;
    width: 100%;
    gap: 6px;
  }
  .opener__phone { border-radius: 34px; padding: 8px; }
  .opener__phone::before { height: 18px; }
  .opener__screen { inset: 8px; border-radius: 26px; }
  .carousel__caption { gap: 10px; }
  .carousel__caption span:first-child { font-size: 1.3rem; }
  .carousel__caption-cta { font-size: 0.8rem; }
  .showcase__hint { display: none; }
}

/* شاشات موبايل قصيرة — الدرجة بتنحدد من JS مرة وحدة عالتحميل (html.h-short / html.h-tiny)
   مش من media query عالارتفاع، حتى ما تنقلب عالسكرول لما شريط المتصفح ينطوي */
@media (max-width: 820px) {
  html.h-short .opener { padding-top: calc(var(--header-h, 76px) + 18px); }
  html.h-short .carousel { --ph-w: min(190px, 52vw); }
  html.h-short .opener__title { font-size: clamp(2.3rem, 9vw, 2.9rem); }
  html.h-short .opener__sub { display: none; }
  html.h-tiny .carousel { --ph-w: min(165px, 46vw); }
  html.h-tiny .opener__badge { font-size: 0.66rem; padding: 4px 10px; top: -11px; }
}

/* تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  .opener__phone { transition: none; }
  .showcase__hint { display: none; }
}