/* ON AIR TV — Hero (معتمد 10/11) · الخط مقترح: IBM Plex Sans Arabic · الزر يودّي #plans-1-device (يتفعّل مع السكشن 3) */
.oa-hero,.oa-hero *{box-sizing:border-box}
.oa-hero{font-family:"IBM Plex Sans Arabic",system-ui,sans-serif;color:#F4D6B0}

/* ===== المسرح ===== */
.oa-hero{position:relative;isolation:isolate;overflow:hidden;background:transparent}
.oa-art{position:relative;width:100%;aspect-ratio:16/8;overflow:hidden;-webkit-mask:linear-gradient(180deg,transparent 0%,#000 10%,#000 62%,transparent 100%);mask:linear-gradient(180deg,transparent 0%,#000 10%,#000 62%,transparent 100%)}
.oa-art > *{position:absolute;pointer-events:none}

/* السينما: جدار البوسترات خلف المشهد */
.l-wall{inset:-6% -4%;background:url(images/posters.webp) center/cover;filter:blur(1.1px) saturate(.75) brightness(.78) contrast(1.1);transform:scale(1.04)}
.l-wall.r{transform:scaleX(-1) scale(1.04);filter:blur(1.8px) saturate(.6) brightness(.6)}
.l-wall.l{-webkit-mask:linear-gradient(90deg,#000 0%,#000 28%,transparent 46%);mask:linear-gradient(90deg,#000 0%,#000 28%,transparent 46%)}
.l-wall.r{-webkit-mask:linear-gradient(270deg,#000 0%,rgba(0,0,0,.8) 20%,transparent 44%);mask:linear-gradient(270deg,#000 0%,rgba(0,0,0,.8) 20%,transparent 44%)}
/* تبريد لون السينما */
.l-wallgrade{inset:0;background:linear-gradient(90deg,rgba(58,80,107,.5),rgba(11,19,43,0) 45%,rgba(58,80,107,.4));mix-blend-mode:color}

/* الرياضة: اللاعبين بطل المشهد */
.l-players{left:50%;top:-23%;height:141%;aspect-ratio:735/919;transform:translateX(-50%);
  background:url(images/hero-blend.webp) center/cover;
  filter:saturate(.85) contrast(1.06) brightness(.97);
  -webkit-mask:linear-gradient(180deg,transparent 0%,transparent 21%,#000 27.5%),radial-gradient(56% 50% at 50% 58%,#000 58%,rgba(0,0,0,.6) 76%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask:linear-gradient(180deg,transparent 0%,transparent 21%,#000 27.5%),radial-gradient(56% 50% at 50% 58%,#000 58%,rgba(0,0,0,.6) 76%,transparent 100%);
          mask-composite:intersect}
/* تدريج لوني موحّد فوق اللاعبين (يبرّد الذهبي) */
.l-grade{inset:0;background:radial-gradient(60% 70% at 50% 40%,rgba(11,19,43,0) 30%,rgba(11,19,43,.55) 80%);mix-blend-mode:multiply}
.l-cool{inset:0;background:linear-gradient(180deg,rgba(58,80,107,.7),rgba(28,37,65,.35) 45%,rgba(11,19,43,.5));mix-blend-mode:soft-light}
.l-cool2{inset:0;background:radial-gradient(40% 60% at 50% 40%,rgba(28,37,65,.0),rgba(28,37,65,.35));mix-blend-mode:color}
/* إضاءة سماوية تلف أطراف المشهد (light wrap) */
.l-rim{inset:0;background:
  radial-gradient(22% 46% at 28% 42%,rgba(91,192,222,.22),transparent 70%),
  radial-gradient(22% 46% at 72% 40%,rgba(91,192,222,.16),transparent 70%);mix-blend-mode:screen}
/* ضباب جوي يربط السينما بالرياضة */
.l-fog{inset:0;background:
  radial-gradient(30% 34% at 30% 62%,rgba(58,80,107,.34),transparent 72%),
  radial-gradient(30% 34% at 70% 58%,rgba(58,80,107,.28),transparent 72%),
  radial-gradient(60% 26% at 50% 96%,rgba(58,80,107,.35),transparent 75%);filter:blur(18px)}
/* أعلى غامق (يخفي عنوان الصورة الأصلية) + أسفل يذوب في خلفية الصفحة */
.l-top{inset:0;background:linear-gradient(180deg,rgba(5,7,13,.95) 0%,rgba(5,7,13,.7) 7%,transparent 14%)}
.l-bottom{inset:0;background:linear-gradient(0deg,rgba(5,7,13,.7) 0%,rgba(5,7,13,.5) 22%,transparent 50%)}
.l-vig{inset:0;background:radial-gradient(80% 95% at 50% 42%,transparent 50%,rgba(5,7,13,.6) 100%)}

/* ===== النص ===== */
.oa-copy{position:absolute;inset:auto 0 5% 0;text-align:center;padding:0 24px;z-index:3}
.oa-h{margin:0;font-weight:700;font-size:clamp(30px,4.2vw,62px);line-height:1.15;letter-spacing:-.01em;color:#F4D6B0;text-shadow:0 2px 24px rgba(5,7,13,.6)}
.oa-sub{margin:14px auto 0;max-width:34em;font-size:clamp(15px,1.35vw,19px);line-height:1.7;color:rgba(244,214,176,.78)}
.oa-btn{display:inline-flex;align-items:center;gap:10px;margin-top:26px;padding:15px 34px;border-radius:999px;background:#D97706;color:#05070D;font-weight:700;font-size:16px;text-decoration:none;box-shadow:0 10px 30px rgba(217,119,6,.28)}
.oa-btn:focus-visible{outline:2px solid #5BC0DE;outline-offset:3px}

/* ===== الجوال: تكوين رأسي مستقل، النص على الضباب السفلي ===== */
@media (max-width:767px){
  .oa-art{aspect-ratio:auto;height:min(152vw,640px)}
  .l-players{top:-6%;height:100%;width:auto}
  .l-wall{inset:-4% -30%}
  .l-wall.l{inset:-2% -6% auto -6%;height:52%;background-position:center 30%;-webkit-mask:linear-gradient(180deg,#000 0%,rgba(0,0,0,.85) 40%,transparent 100%);mask:linear-gradient(180deg,#000 0%,rgba(0,0,0,.85) 40%,transparent 100%)}
  .l-wall.r{display:none}
  .l-top{background:linear-gradient(180deg,rgba(5,7,13,.6) 0%,transparent 12%)}
  .l-bottom{background:linear-gradient(0deg,#05070D 0%,rgba(5,7,13,.96) 24%,rgba(5,7,13,.6) 38%,transparent 56%)}
  .oa-copy{inset:auto 0 26px 0;padding:0 20px}
  .oa-sub{margin-top:10px;font-size:15px}
  .oa-btn{margin-top:18px;padding:14px 30px}
}