/* =====================================================================
   لماذا تختار Double H — مقطع مبنى بينبني طابق فوق طابق مع السكرول
   كل طابق = سبب. الكلاسات بتبلش بـ wy-   (الحركة: assets/js/why.js)
   ===================================================================== */

.wy {
  position: relative;
  background: linear-gradient(to bottom, var(--dh-paper), var(--dh-teal-50) 85%);
  border-top: 1px solid var(--dh-line);
}
.wy__track { position: relative; }
.wy--live .wy__track { height: 340vh; }

.wy__stage {
  position: relative;
  padding-block: clamp(5rem, 9vw, 8rem);
}
.wy--live .wy__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  padding-block: 5.5rem 1.5rem;
  overflow: hidden;
}

.wy__inner {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  width: 100%;
}
@media (min-width: 1024px) {
  .wy__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4rem; }
}

.wy .ds-head { margin-bottom: 0; max-width: 32rem; }
.wy .ds-title { margin-top: 1rem; font-size: clamp(2rem, 1.2rem + 2.2vw, 3.2rem); }

/* ---------- الأسباب (الطوابق) ---------- */
.wy__list {
  margin-top: 2.25rem;
  display: grid;
}
.wy__item {
  position: relative;
  padding: 1rem 1.5rem 1rem 0;
  padding-inline: 1.5rem 0;
  border-inline-start: 1px solid var(--dh-line-2);
  transition: opacity 0.5s ease;
}
/* الخط الذهبي بيتعبّى مع بناء الطابق */
.wy__item::before {
  content: "";
  position: absolute;
  inset-inline-start: -1px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--dh-gold);
  transform: scaleY(var(--ip, 1));
  transform-origin: bottom;
}
.wy__lvl {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--dh-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--dh-gold-600);
}
.wy__lvl span { color: var(--dh-muted); font-family: Cairo, sans-serif; font-weight: 600; letter-spacing: 0; }
.wy__lvl::before {
  content: "";
  width: 0;
  height: 0;
  border-inline: 5px solid transparent;
  border-top: 8px solid currentColor;
}
.wy__item h3 {
  margin-top: 0.35rem;
  font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem);
  font-weight: 800;
  color: var(--dh-text);
}
.wy__body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.6s var(--dh-ease);
}
.wy__body > div { overflow: hidden; min-height: 0; }
.wy__item p {
  padding-top: 0.45rem;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.12rem);
  line-height: 1.85;
  color: var(--dh-muted);
  max-width: 28rem;
}

/* وضع السكرول: السبب الحالي واضح ومفتوح، الباقي باهت ومسكّر */
.wy--live .wy__item { opacity: 0.38; }
.wy--live .wy__item.is-active { opacity: 1; }
.wy--live .wy__item:not(.is-active) .wy__body { grid-template-rows: 0fr; }

/* ---------- الرسمة ---------- */
.wy__draw {
  position: relative;
  margin: 0;
}
.wy__svg {
  direction: ltr;
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100svh - 9rem);
  margin-inline: auto;
  overflow: visible;
}
.wy__cap {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--dh-line-2);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--dh-muted);
}
.wy__cap b { font-family: var(--dh-mono); font-weight: 500; color: var(--dh-gold-600); }

.wy__svg .l {
  fill: none;
  stroke: var(--dh-teal);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 2;
  stroke-dashoffset: calc(1 - var(--d, 1));
}
.wy__svg .w { stroke-width: 2.2; }
.wy__svg .t { stroke-width: 0.9; opacity: 0.6; }
.wy__svg .g { stroke: var(--dh-gold-600); }
.wy__svg .f { stroke: none; opacity: var(--f, 1); }
.wy__svg .solid { fill: var(--dh-teal); }
.wy__svg .hatch { fill: url(#wyHatch); }
.wy__svg .earth { fill: url(#wyEarth); }
.wy__svg text {
  font-family: Cairo, sans-serif;
  font-weight: 600;
  font-size: 11px;
  fill: var(--dh-teal);
  opacity: var(--f, 1);
}
.wy__svg text.g { fill: var(--dh-gold-600); }
.wy__svg .wy-num { font-size: 12px; font-weight: 500; fill: var(--dh-gold-600); }
.wy__svg .wy-sign { font-family: Cairo, sans-serif; font-size: 17px; font-weight: 800; letter-spacing: 4px; }
.wy__svg [data-why-floor] {
  transform: translateY(calc((1 - var(--d, 1)) * 12px));
  opacity: min(1, calc(var(--d, 1) * 40));
}

/* ---------- موبايل/تابلت ---------- */
@media (max-width: 1023px) {
  .wy--live .wy__track { height: 300vh; }
  .wy .ds-head { max-width: none; }
  .wy__draw { order: -1; }
  .wy__svg { max-height: 46vh; }

  .wy--live .wy__stage { align-items: flex-start; padding-top: 5rem; }
  .wy--live .wy__inner { gap: 1rem; }
  .wy--live .ds-title { font-size: clamp(1.6rem, 6vw, 2.2rem); margin-top: 0.6rem; }
  .wy--live .ds-lead,
  .wy--live .ds-rule { display: none; }
  .wy--live .wy__svg { max-height: min(40svh, 340px); }
  .wy--live .wy__cap { display: none; }
  .wy--live .wy__list { margin-top: 1rem; }
  /* سبب واحد بكل مرة بنفس المكان */
  .wy--live .wy__item { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 0.45s ease, visibility 0s linear 0.45s; }
  .wy--live .wy__item.is-active { opacity: 1; visibility: visible; transition: opacity 0.45s ease, visibility 0s; }
  .wy--live .wy__item .wy__body { grid-template-rows: 1fr; }
}
@media (max-width: 1023px) and (max-height: 700px) {
  .wy--live .wy__svg { max-height: 32svh; }
  .wy--live .wy__item p { font-size: 0.95rem; line-height: 1.7; }
}

@media (prefers-reduced-motion: reduce) {
  .wy__item, .wy__body { transition: none; }
}