/* ══════════════════════════════════════════════════════════════════
   الفيديو التعريفي في الرئيسية — زر التشغيل ونافذة المشغل
   (site/partials/home/video-modal.blade.php + assets/js/site-video.js)
   ─ الملف لا يحمل الا حين يفعل المفتاح home_video_enabled وللمصدر قيمة،
     والفيديو نفسه لا ينزل الا بنقرة: الجزئية ترسم الزر وحده، والمشغل
     يبنى في المتصفح لحظة الفتح. فالصفحة لا تحمل منه بايتا قبل ذلك.
   ─ بلا مكتبات: صفحات h6 المستقلة بلا Bootstrap JS، فالنافذة والتحكم
     هنا بمحض CSS وJS صغير. والمشغل ضوابطه الاصلية (ملء الشاشة والسرعة
     وصورة في صورة) — اجمل من ضوابط مصنوعة ناقصة.
   ─ الالوان من توكنات الموقع مع بدائل صريحة: الملف يحمل في صفحات h6
     المستقلة وفي تخطيط h6 معا.
   ══════════════════════════════════════════════════════════════════ */

/* ───────────────────────── زر التشغيل ───────────────────────── */

/* زر التشغيل (‎.js-hv-open‎) بهيئة الزر الاساسي نفسها: اصنافه
   ‎h6-btn h6-btn-primary‎ من site-home-sixth.css، فلا نمط خاص له هنا.
   (كان كبسولة بقرص ابيض ‎.h6-play‎ — ازيلت ٢٠٢٦-١٠-٠٦ بقرار المالك:
   الزران يقرآن صفا واحدا.) */

/* ───────────────────────── نافذة المشغل ───────────────────────── */

.hv-root{
    position:fixed;
    inset:0;
    z-index:1090;          /* فوق شريط الموقع اللاصق وتحت التنبيهات */
    display:none;
}

.hv-root.is-open{ display:block; }

/* عتمة شبه تامة وضبابية واسعة: خلف النافذة «مسرح» الواجهة باطاره ولوحاته،
   وعند 86٪ بضبابية 4 كان يلوح من خلف الفيديو اطارا ثانيا — فيقرا الفيديو
   مشغلا فوق مشغل. 94٪ وضبابية 12 تحيله غسلا داكنا بلا ملامح. */
.hv-backdrop{
    position:absolute;
    inset:0;
    background:rgba(6,18,16,.94);
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
    animation:hvFade .2s ease-out;
}

.hv-dialog{
    position:absolute;
    inset-block-start:50%;
    inset-inline-start:50%;
    transform:translate(50%, -50%);   /* الصفحة rtl: الازاحة موجبة */
    /* ثلاثة سقوف لا سقفان: 960 حدا اعلى، وعرض الشاشة ناقص 64 (زر الاغلاق
       يقف خارج الاطار بـ14 فالهامش يتسع له ولا يلتصق بالحافة)، و**ارتفاع
       الشاشة** مقلوبا بنسبة 16:9 — بلا الثالث يفيض الاطار راسيا على الشاشة
       القصيرة (جوال افقي 844×390: الاطار 780×439 يقتطع 24 فوق و25 تحت وزر
       الاغلاق يخرج من الشاشة). والسطر الثاني يرقي vh الى svh حيث يعرف. */
    width:min(960px, calc(100vw - 64px), calc((100vh - 128px) * 16 / 9));
    width:min(960px, calc(100vw - 64px), calc((100svh - 128px) * 16 / 9));
    animation:hvRise .26s cubic-bezier(.22,1,.36,1);
}

html[dir="ltr"] .hv-dialog{ transform:translate(-50%, -50%); }

.hv-frame{
    position:relative;
    aspect-ratio:16 / 9;
    width:100%;
    overflow:hidden;
    border-radius:18px;
    background:#000;
    box-shadow:0 40px 90px -30px rgba(0,0,0,.75);
}

.hv-frame video,
.hv-frame iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
    display:block;
    background:#000;
}

/* دوار التحميل تحت المشغل: يظهر حتى اول اطار، فلا تبدو النافذة معطلة
   في اول ثانية من التنزيل */
.hv-frame::after{
    content:"";
    position:absolute;
    inset-block-start:50%;
    inset-inline-start:50%;
    width:34px;
    height:34px;
    margin:-17px 0 0 -17px;
    border:3px solid rgba(255,255,255,.22);
    border-block-start-color:#fff;
    border-radius:50%;
    animation:hvSpin .9s linear infinite;
}

.hv-frame.is-ready::after{ content:none; }

/* في ركن الشاشة (ابن الجذر) لا على ركن الاطار: كان يقف على زاوية الفيديو
   فيجاور ترس يوتيوب وصوته — ضابط ابيض بين ضوابطه يقرا مشغلا ثانيا. وسقف
   الارتفاع في ‎.hv-dialog‎ يترك له 64 فوق الاطار فلا يلامسه على الشاشة
   القصيرة. الصنف مكرر للسبب نفسه: ‎.h6 button‎ تسرق الارضية والحد واللون */
.hv-x.hv-x{
    position:absolute;
    inset-block-start:16px;
    inset-inline-end:16px;
    z-index:2;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    padding:0;
    cursor:pointer;
    border:0;
    border-radius:50%;
    background:#fff;
    color:#0B3D38;
    box-shadow:0 10px 24px rgba(0,0,0,.35);
    transition:transform .18s ease, background-color .18s linear, color .18s linear;
}

.hv-x i{ font-size:20px; line-height:1; }

.hv-x:hover,
.hv-x:focus-visible{ background:#0B3D38; color:#fff; transform:rotate(90deg); }

.hv-x:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

@keyframes hvFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes hvRise{ from{ opacity:0; transform:translate(50%, -46%) scale(.97); } }
@keyframes hvSpin{ to{ transform:rotate(360deg); } }

html[dir="ltr"] .hv-dialog{ animation-name:hvRiseLtr; }
@keyframes hvRiseLtr{ from{ opacity:0; transform:translate(-50%, -46%) scale(.97); } }

/* الجسم لا يمرر خلف النافذة */
body.hv-locked{ overflow:hidden; }

@media (max-width:575.98px){
    .hv-dialog{ width:min(calc(100vw - 20px), calc((100vh - 112px) * 16 / 9)); }
    .hv-dialog{ width:min(calc(100vw - 20px), calc((100svh - 112px) * 16 / 9)); }
    .hv-frame{ border-radius:14px; }
    .hv-x{ inset-block-start:10px; inset-inline-end:10px; width:36px; height:36px; }
}

@media (prefers-reduced-motion:reduce){
    .hv-x{ transition:none; }
    .hv-backdrop,
    .hv-dialog{ animation:none; }
}

@media print{
    .js-hv-open,
    .hv-root{ display:none !important; }
}