/* =========================================================================
   هيرو الصفحة الرئيسية
   اللوحة: عارض صور سينمائي — كل صورة مقسومة خمس شرائح عمودية تُكشف
   تباعًا عند الانتقال، مع تحبيب فيلمي وتدرّج لوني بألوان الهوية
   وحركة كِن-بيرنز بطيئة وبارالاكس يتبع المؤشر.
   يعمل بالاتجاهين من نفس القواعد · كل الحركة تحترم prefers-reduced-motion
   ========================================================================= */

.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding-block:56px 0;
}

/* ---------------------------------------------------------------------
   الخلفية: تدرّج شبكي + شبكة هندسية + وهج + حُبيبات
   --------------------------------------------------------------------- */
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}

.hero-mesh{
  position:absolute;
  inset:-20% -10%;
  background:
    radial-gradient(38% 42% at 78% 12%, rgba(108,92,231,.30), transparent 62%),
    radial-gradient(42% 46% at 18% 26%, rgba(47,143,94,.26),  transparent 64%),
    radial-gradient(34% 40% at 62% 78%, rgba(240,169,58,.16), transparent 66%);
  filter:blur(28px);
  animation:meshDrift 26s ease-in-out infinite alternate;
}

/* شبكة مخططات هندسية */
.hero-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(47,143,94,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,143,94,.08) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 85% 90% at 50% 8%, #000 30%, transparent 78%);
          mask-image:radial-gradient(ellipse 85% 90% at 50% 8%, #000 30%, transparent 78%);
  animation:gridPan 32s linear infinite;
}

.hero-rays{
  position:absolute;
  inset-block-start:-14%;
  inset-inline:0;
  height:74%;
  background:repeating-linear-gradient(
    100deg,
    transparent 0 46px,
    rgba(251,250,247,.55) 46px 47px,
    transparent 47px 96px
  );
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 0%, #000, transparent 72%);
          mask-image:radial-gradient(ellipse 70% 80% at 50% 0%, #000, transparent 72%);
  opacity:.5;
}

/* وهج محيطي يتبع المؤشر عبر الهيرو كله */
.hero-glow{
  position:absolute;inset:0;
  background:radial-gradient(360px circle at var(--hx,50%) var(--hy,30%),
              rgba(108,92,231,.16), rgba(47,143,94,.07) 45%, transparent 70%);
  opacity:0;
  transition:opacity .5s;
}
.hero.is-lit .hero-glow{opacity:1;}

/* جسيمات تصعد ببطء */
.hero-dust{position:absolute;inset:0;}
.hero-dust i{
  position:absolute;
  inset-block-end:-10px;
  width:5px;height:5px;border-radius:50%;
  background:var(--green);
  opacity:0;
  animation:dustFloat 15s linear infinite;
}
.hero-dust i:nth-child(3n){background:var(--violet);width:4px;height:4px;}
.hero-dust i:nth-child(4n){background:var(--amber);width:3.5px;height:3.5px;}

.hero-grain{
  position:absolute;inset:0;opacity:.13;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

/* خط فاصل متوهّج أسفل الهيرو */
.hero::after{
  content:"";
  position:absolute;
  inset-block-end:0;inset-inline:0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 18%,rgba(47,143,94,.5) 50%,var(--line) 82%,transparent);
}

/* ---------------------------------------------------------------------
   التخطيط
   --------------------------------------------------------------------- */
.hero-inner{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:56px;
  align-items:center;
  padding-block-end:64px;
}

/* ---------------------------------------------------------------------
   النص
   --------------------------------------------------------------------- */
.hero-badge{
  display:inline-flex;align-items:center;gap:10px;
  padding-block:7px;padding-inline:11px 15px;
  border:1px solid var(--line);
  border-radius:100px;
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(10px);
  font-family:var(--font-mono);
  font-size:11.5px;
  color:var(--green-dark);
  text-decoration:none;
  margin-block-end:26px;
  transition:border-color .25s, transform .25s;
}
html[dir="rtl"] .hero-badge{font-size:12.5px;}
.hero-badge:hover{border-color:var(--green);transform:translateY(-1px);}
.hero-badge .dot{
  position:relative;width:7px;height:7px;border-radius:50%;
  background:var(--green);flex-shrink:0;
}
.hero-badge .dot::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--green);
  animation:ping 2.6s cubic-bezier(0,0,.2,1) infinite;
}

.hero h1{
  font-size:clamp(33px,4.3vw,53px);
  line-height:1.08;
  margin-block-end:24px;
}
html[dir="rtl"] .hero h1{line-height:1.3;}

/* كشف الأسطر: كل سطر يصعد من خلف قناع مع إزالة ضبابية.
   الحالة المخفية مشروطة بـ html.js حتى لا يختفي العنوان إن تعطّل JS. */
.hero h1 .ln{display:block;overflow:hidden;}
.hero h1 .ln > i{display:block;font-style:normal;}

html.js .hero h1 .ln > i{
  transform:translateY(105%);
  filter:blur(10px);
  opacity:0;
  animation:lineIn .95s cubic-bezier(.16,1,.3,1) forwards;
}
html.js .hero h1 .ln:nth-child(1) > i{animation-delay:.10s;}
html.js .hero h1 .ln:nth-child(2) > i{animation-delay:.22s;}

/* السطر المميز يجمع كشف الدخول مع لمعان التدرّج المستمر */
html.js .hero h1 .ln > i.accent{
  animation:lineIn .95s cubic-bezier(.16,1,.3,1) forwards,
            accentShift 8s ease-in-out infinite alternate;
}

/* تدرّج متحرك يلمع ذهابًا وإيابًا داخل الحروف */
.hero h1 .accent{
  background:linear-gradient(94deg,var(--violet) 0%,var(--green-dark) 38%,var(--violet) 62%,var(--green-dark) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  animation:accentShift 8s ease-in-out infinite alternate;
}

.hero-lead{
  font-size:16.5px;line-height:1.8;color:var(--muted);
  max-width:47ch;margin-block-end:32px;
}

.hero-ctas{display:flex;gap:18px;align-items:center;flex-wrap:wrap;}

/* زر مغناطيسي بلمعة عابرة */
.hero-ctas .btn-primary{
  position:relative;overflow:hidden;
  padding:16px 32px;
  box-shadow:0 16px 30px -16px rgba(47,143,94,.8);
  transition:box-shadow .3s, transform .18s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}
.hero-ctas .btn-primary:hover{box-shadow:0 20px 38px -16px rgba(47,143,94,.9);}
.hero-ctas .btn-primary::after{
  content:"";position:absolute;inset-block:0;inset-inline-start:-55%;width:38%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);
  transform:skewX(-16deg);
  animation:sheen 5.5s 1.6s ease-in-out infinite;
}

/* أرقام الثقة */
.hero-trust{
  display:flex;gap:34px;flex-wrap:wrap;
  margin-block-start:40px;padding-block-start:28px;
  border-block-start:1px solid var(--line);
}
.hero-trust .ht b{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:24px;line-height:1.15;direction:ltr;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.hero-trust .ht span{font-size:12.5px;color:var(--muted);}

/* =====================================================================
   العارض السينمائي
   ===================================================================== */
.hero-stage{
  position:relative;
  padding-block:10px;
}

.kin{
  position:relative;
  aspect-ratio:1/1;
  max-width:560px;
  margin-inline:auto;
}

/* إطار خارجي منزاح بزوايا لافتات المعارض */
.kin-frame{
  position:absolute;
  inset:-14px;
  border:1px solid rgba(47,143,94,.35);
  border-radius:30px;
  pointer-events:none;
  transform:translate3d(calc(var(--px,0) * -8px), calc(var(--py,0) * -6px), 0);
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.kin-frame::before,
.kin-frame::after{
  content:"";position:absolute;
  width:22px;height:22px;
  border:2px solid var(--green);
}
.kin-frame::before{
  inset-block-start:-2px;inset-inline-start:-2px;
  border-block-end:none;border-inline-end:none;
  border-start-start-radius:12px;
}
.kin-frame::after{
  inset-block-end:-2px;inset-inline-end:-2px;
  border-block-start:none;border-inline-start:none;
  border-end-end-radius:12px;
}

.kin-view{
  position:absolute;
  inset:0;
  border-radius:24px;
  overflow:hidden;
  background:linear-gradient(160deg,#1c2126,#101315);   /* يظهر إن تأخرت الصور */
  box-shadow:0 40px 80px -36px rgba(21,24,27,.7);
  transform:translate3d(calc(var(--px,0) * 10px), calc(var(--py,0) * 8px), 0);
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}

/* ومضة ضوئية تكنس العارض عند كل انتقال */
.kin-view.kin-flash::after{
  content:"";position:absolute;inset-block:0;inset-inline-start:-45%;width:30%;z-index:6;
  background:linear-gradient(90deg,transparent,rgba(251,250,247,.22),transparent);
  transform:skewX(-14deg);
  animation:kinSweep .9s ease-out forwards;
  pointer-events:none;
}

/* ---------- الشرائح ---------- */
.kin-slide{
  position:absolute;inset:0;
  margin:0;
  opacity:0;
  visibility:hidden;
  z-index:1;
}
.kin-slide.is-active{opacity:1;visibility:visible;z-index:2;}
.kin-slide.is-out{
  opacity:1;visibility:visible;z-index:1;
  animation:kinOut .85s ease forwards;
}

/* حاوية كِن-بيرنز: تكبير بطيء يعطي الصورة حياة */
.kin-zoom{
  position:absolute;inset:0;
  display:flex;
}
.kin-slide.is-active .kin-zoom{
  animation:kenburns 9s ease-out forwards;
}

/* الصورة مقسومة خمس شرائح عمودية — كل شريحة تحمل نفس الصورة
   بإزاحة موضع محسوبة، فتبدو صورة واحدة تُبنى قطعةً قطعة */
.kin-slice{
  flex:1;
  background-size:500% 100%;
  background-repeat:no-repeat;
}
html.js .kin-slide.is-active .kin-slice{
  clip-path:inset(100% 0 0 0);
  animation:sliceIn .85s cubic-bezier(.22,1,.36,1) forwards;
}
html.js .kin-slide.is-active .kin-slice:nth-child(1){animation-delay:.05s;}
html.js .kin-slide.is-active .kin-slice:nth-child(2){animation-delay:.13s;}
html.js .kin-slide.is-active .kin-slice:nth-child(3){animation-delay:.21s;}
html.js .kin-slide.is-active .kin-slice:nth-child(4){animation-delay:.29s;}
html.js .kin-slide.is-active .kin-slice:nth-child(5){animation-delay:.37s;}

/* ---------- المعالجة اللونية الإبداعية ---------- */
/* تدرّج ثنائي اللون بألوان الهوية فوق الصورة */
.kin-tint{
  position:absolute;inset:0;z-index:3;
  background:linear-gradient(150deg, rgba(47,143,94,.42), rgba(21,24,27,.05) 45%, rgba(108,92,231,.45));
  mix-blend-mode:soft-light;
  pointer-events:none;
}
/* تعتيم سفلي لقراءة النص */
.kin-shade{
  position:absolute;inset:0;z-index:3;
  background:linear-gradient(to top, rgba(13,16,18,.88), rgba(13,16,18,.25) 42%, transparent 65%);
  pointer-events:none;
}
/* تحبيب فيلمي فوق كل شيء */
.kin-grain{
  position:absolute;inset:0;z-index:5;
  opacity:.14;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  pointer-events:none;
}

/* ---------- الترجمة النصية للشريحة ---------- */
.kin-cap{
  position:absolute;z-index:4;
  inset-inline:26px;
  inset-block-end:24px;
  color:var(--paper);
  display:flex;flex-direction:column;align-items:flex-start;
}
/* رقم شبحي كبير خلف العنوان */
.kin-cap-num{
  position:absolute;
  inset-block-end:calc(100% - 34px);
  inset-inline-start:-4px;
  font-family:var(--font-display);font-weight:800;
  font-size:96px;line-height:1;
  color:transparent;
  -webkit-text-stroke:1px rgba(251,250,247,.28);
  pointer-events:none;
}
.kin-cap strong{
  font-family:var(--font-display);font-weight:800;
  font-size:27px;line-height:1.25;
  margin-block-end:6px;
  text-shadow:0 2px 18px rgba(0,0,0,.45);
}
.kin-cap-d{
  font-size:13px;line-height:1.7;
  color:rgba(251,250,247,.78);
  margin-block-end:12px;
  max-width:34ch;
}
.kin-cap-link{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:700;
  color:#7fd3a5;text-decoration:none;
  padding:9px 15px;
  border:1px solid rgba(127,211,165,.35);
  border-radius:100px;
  background:rgba(13,16,18,.35);
  backdrop-filter:blur(6px);
  transition:gap .25s, background .25s, border-color .25s;
}
.kin-cap-link:hover{gap:13px;background:rgba(47,143,94,.25);border-color:rgba(127,211,165,.7);}

/* دخول عناصر الترجمة بتتابع بعد كشف الشرائح */
html.js .kin-slide.is-active .kin-cap > *{
  opacity:0;
  transform:translateY(22px);
  animation:capIn .7s cubic-bezier(.16,1,.3,1) forwards;
}
html.js .kin-slide.is-active .kin-cap-num  {animation-delay:.40s;}
html.js .kin-slide.is-active .kin-cap strong{animation-delay:.50s;}
html.js .kin-slide.is-active .kin-cap-d    {animation-delay:.60s;}
html.js .kin-slide.is-active .kin-cap-link {animation-delay:.70s;}

/* ---------- عناصر التحكم ---------- */
.kin-ui{
  position:absolute;z-index:6;
  inset-inline-end:22px;
  inset-block-end:24px;
  display:flex;align-items:center;gap:14px;
}
.kin-dots{display:flex;gap:7px;}
.kin-dots button{
  width:30px;height:5px;
  border:none;border-radius:99px;
  background:rgba(251,250,247,.28);
  overflow:hidden;position:relative;
  cursor:pointer;padding:0;
  transition:background .3s;
}
.kin-dots button.is-on{background:rgba(251,250,247,.4);}
/* شريط تقدّم يمتلئ خلال مدة الشريحة */
.kin-dots button.is-run::after{
  content:"";position:absolute;inset:0;
  background:var(--green);
  transform:scaleX(0);
  transform-origin:0 50%;
  animation:kinProg 6.5s linear forwards;   /* توافق DUR في hero.js */
}
html[dir="rtl"] .kin-dots button.is-run::after{transform-origin:100% 50%;}
.kin-count{
  font-family:var(--font-mono);font-size:11px;
  color:rgba(251,250,247,.75);
  letter-spacing:.06em;
}
.kin-count b{color:#7fd3a5;font-weight:700;}

/* شارة الفعالية القادمة */
.hero-chip{
  position:absolute;z-index:7;
  display:flex;align-items:center;gap:9px;
  padding:10px 15px;border-radius:100px;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(14px);
  border:1px solid var(--line);
  box-shadow:0 18px 34px -18px rgba(21,24,27,.45);
  font-family:var(--font-mono);font-size:10.5px;color:var(--ink);
  white-space:nowrap;
  max-width:82%;
  inset-block-start:-6px;inset-inline-start:6%;
  text-decoration:none;
  animation:bob 7s ease-in-out infinite;
  transition:border-color .25s;
}
.hero-chip:hover{border-color:var(--green);}
.hero-chip span{overflow:hidden;text-overflow:ellipsis;}
html[dir="rtl"] .hero-chip{font-size:12px;}
.hero-chip i{width:7px;height:7px;border-radius:50%;background:var(--green);position:relative;flex-shrink:0;}
.hero-chip i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--green);animation:ping 2.8s cubic-bezier(0,0,.2,1) infinite;}

/* ---------------------------------------------------------------------
   شريط العملاء
   --------------------------------------------------------------------- */
.hero-marquee{
  position:relative;
  border-block-start:1px solid var(--line);
  padding-block:20px;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
}
.hero-marquee-track{display:flex;gap:56px;width:max-content;animation:marquee 38s linear infinite;}
.hero-marquee:hover .hero-marquee-track{animation-play-state:paused;}
.hero-marquee-item{
  display:flex;align-items:center;gap:11px;
  font-family:var(--font-mono);font-size:12.5px;color:var(--faint);white-space:nowrap;
}
.hero-marquee-item::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--green);opacity:.45;}

/* ---------------------------------------------------------------------
   الحركات
   --------------------------------------------------------------------- */
@keyframes meshDrift{
  0%  {transform:translate(0,0) scale(1);}
  100%{transform:translate(-3%,3%) scale(1.10);}
}
@keyframes lineIn{ to{transform:translateY(0);filter:blur(0);opacity:1;} }
@keyframes ping{
  0%  {transform:scale(1);opacity:.7;}
  70% {transform:scale(2.6);opacity:0;}
  100%{transform:scale(2.6);opacity:0;}
}
@keyframes sheen{
  0%,70%{inset-inline-start:-55%;}
  100%  {inset-inline-start:135%;}
}
@keyframes bob{
  0%,100%{transform:translateY(0);}
  50%    {transform:translateY(-8px);}
}
@keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@keyframes gridPan{ from{background-position:0 0;} to{background-position:44px 44px;} }
@keyframes accentShift{ from{background-position:0% 0;} to{background-position:100% 0;} }
@keyframes dustFloat{
  0%  {transform:translate3d(0,0,0) scale(.7);opacity:0;}
  8%  {opacity:.65;}
  45% {transform:translate3d(14px,-260px,0) scale(1);}
  80% {opacity:.4;}
  100%{transform:translate3d(-10px,-560px,0) scale(.6);opacity:0;}
}

/* حركات العارض */
@keyframes sliceIn{
  from{clip-path:inset(100% 0 0 0);transform:translateY(26px);filter:brightness(1.9) saturate(1.3);}
  to  {clip-path:inset(0 0 0 0);   transform:translateY(0);   filter:brightness(1) saturate(1);}
}
@keyframes kinOut{
  to{opacity:0;transform:scale(1.06);filter:blur(7px);}
}
@keyframes kenburns{
  from{transform:scale(1)    translate(0,0);}
  to  {transform:scale(1.09) translate(-1.2%,-1%);}
}
@keyframes capIn{ to{opacity:1;transform:translateY(0);} }
@keyframes kinProg{ to{transform:scaleX(1);} }
@keyframes kinSweep{
  from{inset-inline-start:-45%;}
  to  {inset-inline-start:120%;}
}

/* ظهور متدرّج — مشروط بـ html.js لنفس سبب العنوان */
html.js .hero [data-rise]{opacity:0;transform:translateY(20px);animation:rise .85s cubic-bezier(.16,1,.3,1) forwards;}
html.js .hero [data-rise="1"]{animation-delay:.04s;}
html.js .hero [data-rise="3"]{animation-delay:.34s;}
html.js .hero [data-rise="4"]{animation-delay:.44s;}
html.js .hero [data-rise="5"]{animation-delay:.54s;}
html.js .hero [data-rise="6"]{animation-delay:.20s;}
@keyframes rise{ to{opacity:1;transform:translateY(0);} }

/* ---------------------------------------------------------------------
   الاستجابة
   --------------------------------------------------------------------- */
@media(max-width:1040px){
  .hero-inner{grid-template-columns:1fr;gap:52px;padding-block-end:48px;}
  .hero-lead{max-width:100%;}
  .hero-stage{max-width:560px;margin-inline:auto;width:100%;}
}
@media(max-width:760px){
  .hero{padding-block-start:30px;}
  .hero-inner{gap:44px;padding-block-end:36px;}
  .hero-lead{font-size:15px;margin-block-end:26px;}
  .hero-ctas{flex-direction:column;align-items:stretch;}
  .hero-ctas .btn-primary,.hero-ctas .btn-link{text-align:center;}
  .hero-trust{gap:22px;margin-block-start:30px;padding-block-start:22px;}
  .hero-trust .ht b{font-size:19px;}

  .kin{aspect-ratio:5/6;}
  .kin-frame{inset:-9px;border-radius:26px;}
  .kin-cap{inset-inline:18px;inset-block-end:18px;}
  .kin-cap strong{font-size:22px;}
  .kin-cap-num{font-size:72px;}
  .kin-ui{inset-inline-end:16px;inset-block-end:18px;}
  .hero-chip{inset-inline-start:2%;}
  .hero-dust i:nth-child(n+6){display:none;}
}

/* ---------------------------------------------------------------------
   تقليل الحركة
   --------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .hero-mesh,.hero-grid,.hero-dust i,.hero h1 .accent,
  .hero-marquee-track,.hero-chip,
  .hero-ctas .btn-primary::after,.hero-badge .dot::after,.hero-chip i::after,
  .kin-slide.is-active .kin-zoom,
  .kin-view.kin-flash::after,
  .kin-dots button.is-run::after{animation:none !important;}

  .hero-dust,.hero-glow{display:none;}
  .kin-frame,.kin-view{transform:none;transition:none;}

  /* الشرائح والترجمة تظهر كاملة فورًا */
  html.js .kin-slide.is-active .kin-slice{animation:none !important;clip-path:none;transform:none;filter:none;}
  html.js .kin-slide.is-active .kin-cap > *{animation:none !important;opacity:1;transform:none;}
  .kin-slide.is-out{animation:none !important;opacity:0;visibility:hidden;}

  html.js .hero [data-rise]{animation:none !important;opacity:1;transform:none;}
  html.js .hero h1 .ln > i{animation:none !important;transform:none;filter:none;opacity:1;}
}