/* ===== Brand fonts (local files) ===== */
@font-face{ font-family:"Bell"; src:url("assets/Fonts/BELL.TTF") format("truetype"); font-weight:400; font-display:swap; }
@font-face{ font-family:"Bell"; src:url("assets/Fonts/BELLB.TTF") format("truetype"); font-weight:700; font-display:swap; }
@font-face{ font-family:"Nexa"; src:url("assets/Fonts/Nexa-Light.ttf") format("truetype"); font-weight:300; font-display:swap; }
@font-face{ font-family:"Nexa"; src:url("assets/Fonts/NexaBook.otf") format("opentype"); font-weight:400; font-display:swap; }
@font-face{ font-family:"Nexa"; src:url("assets/Fonts/Nexa-XBold.ttf") format("truetype"); font-weight:800; font-display:swap; }
@font-face{ font-family:"AdobeArabic"; src:url("assets/Fonts/AdobeArabic-Regular.otf") format("opentype"); font-weight:400; font-display:swap; }
@font-face{ font-family:"GESSTwo"; src:url("assets/Fonts/alfont_com_AlFont_com_GE_SS_Two_Light.otf") format("opentype"); font-weight:300; font-display:swap; }
@font-face{ font-family:"GESSTwo"; src:url("assets/Fonts/GESSTwoMedium-Medium.otf") format("opentype"); font-weight:500; font-display:swap; }

:root{
  --green-primary:#708472;
  --green-soft:#A3B1A4;
  --black-pure:#1D1D1B;
  --black-warm:#3D3935;
  --gray-cool:#898A8D;
  --gray-light:#C8C8C8;
  --gold:#c8a977;
  --white:#F4F4F2;
  --ease:cubic-bezier(.22,.61,.36,1);
  --pad-x:clamp(22px,5vw,72px);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  min-height:100svh;
  display:flex; flex-direction:column;
  background:var(--black-pure);
  color:var(--white);
  font-family:"GESSTwo","Nexa",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  position:relative;
}
[dir="ltr"]{ direction:ltr; unicode-bidi:isolate; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }

/* =====================================================================
   CINEMATIC BACKGROUND  (back -> front)
   1.bg-media (real video)  2.ambient (fallback lighting)  3.bg-canvas (motes)
   4.grain  5.scrim (legibility veil)
   ===================================================================== */
.bg{ position:fixed; inset:0; z-index:-1; overflow:hidden; }

.bg-media{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  -webkit-user-drag:none; user-select:none;
}

.ambient{
  position:absolute; inset:-8%;
  background:linear-gradient(145deg, var(--black-pure) 0%, var(--black-pure) 42%, var(--black-warm) 128%);
  transition:opacity 1.2s ease;
}
.ambient::before, .ambient::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(46% 52% at 72% 22%, color-mix(in srgb,var(--green-primary) 42%, transparent) 0%, transparent 60%),
    radial-gradient(50% 55% at 18% 88%, color-mix(in srgb,var(--black-warm) 92%, transparent) 0%, transparent 58%);
  opacity:.7;
}
.ambient::after{
  background:
    radial-gradient(38% 46% at 30% 30%, color-mix(in srgb,var(--gold) 16%, transparent) 0%, transparent 62%),
    radial-gradient(60% 60% at 88% 92%, color-mix(in srgb,var(--green-primary) 22%, transparent) 0%, transparent 60%);
  opacity:.55;
}

/* oversized calligraphic motif (fallback decoration) */
.motif{
  position:absolute; left:50%; top:54%;
  transform:translate(-50%,-50%);
  font-family:"GESSTwo","AdobeArabic",sans-serif; font-weight:500; color:var(--green-primary);
  font-size:min(150vh,150vw); line-height:.7; opacity:.06;
  user-select:none; pointer-events:none; white-space:nowrap;
}

.bg-canvas{ position:absolute; inset:0; width:100%; height:100%; }

.grain{
  position:absolute; inset:-50%;
  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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.05; mix-blend-mode:overlay;
}

/* legibility veil — strengthened so the video never washes out the text */
.scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(rgba(13,13,12,.34), rgba(13,13,12,.34)),
    radial-gradient(125% 130% at 50% 44%, rgba(15,15,14,.16) 0%, rgba(15,15,14,.42) 56%, rgba(15,15,14,.80) 100%),
    linear-gradient(to bottom, rgba(15,15,14,.46) 0%, transparent 26%, transparent 64%, rgba(15,15,14,.55) 100%);
}

@media (prefers-reduced-motion:no-preference){
  .ambient::before{ animation:drift1 26s var(--ease) infinite alternate; }
  .ambient::after{ animation:drift2 34s var(--ease) infinite alternate; }
  .motif{ animation:breathe 40s ease-in-out infinite alternate; }
  .grain{ animation:grainShift 1.1s steps(3) infinite; }
}
@keyframes drift1{ from{ transform:translate3d(-3%,-2%,0) scale(1.04); } to{ transform:translate3d(4%,3%,0) scale(1.12); } }
@keyframes drift2{ from{ transform:translate3d(3%,2%,0) scale(1.08); } to{ transform:translate3d(-4%,-3%,0) scale(1); } }
@keyframes breathe{
  from{ transform:translate(-50%,-50%) scale(1) rotate(-2deg); opacity:.07; }
  to{ transform:translate(-52%,-48%) scale(1.08) rotate(1deg); opacity:.11; }
}
@keyframes grainShift{ 0%{transform:translate(0,0);} 33%{transform:translate(-6%,4%);} 66%{transform:translate(5%,-3%);} 100%{transform:translate(-3%,-5%);} }

/* =====================================================================
   BANNER (top bar)
   ===================================================================== */
.banner{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:clamp(11px,1.9vh,17px) var(--pad-x);
  background:rgba(18,18,16,.55);
  -webkit-backdrop-filter:blur(12px) saturate(130%);
  backdrop-filter:blur(12px) saturate(130%);
  border-bottom:1px solid color-mix(in srgb,var(--gold) 26%, transparent);
}
.banner-brand{ display:flex; flex-direction:column; gap:2px; line-height:1.05; text-align:start; }
.banner-brand .ar{ font-family:"GESSTwo",sans-serif; font-weight:500; font-size:clamp(15px,1.9vw,20px); color:var(--white); letter-spacing:.01em; }
.banner-brand .en{ font-family:"Bell",serif; font-weight:700; text-transform:uppercase; font-size:clamp(8.5px,1vw,11px); letter-spacing:.34em; color:var(--green-soft); }
.banner-badge{
  display:inline-flex; align-items:center; gap:.6em;
  padding:.5em 1.05em; border-radius:999px;
  background:color-mix(in srgb,var(--green-primary) 16%, transparent);
  border:1px solid color-mix(in srgb,var(--green-soft) 34%, transparent);
  font-family:"GESSTwo",sans-serif; font-weight:500; font-size:clamp(11px,1.2vw,13px);
  color:var(--green-soft); white-space:nowrap;
}
.banner-badge .badge-en{ font-family:"Nexa",sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:.14em; font-size:.84em; }
.banner-badge .badge-sep{ opacity:.55; }
.banner-badge .badge-ar{ font-family:"GESSTwo",sans-serif; font-weight:500; }
@media (max-width:600px){
  .banner-badge .badge-en, .banner-badge .badge-sep{ display:none; }
}
.banner-badge .bdot{
  width:7px; height:7px; border-radius:50%; background:var(--gold);
  animation:badgePulse 1.8s ease-in-out infinite;
}
@keyframes badgePulse{
  0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--gold) 55%, transparent); opacity:1; }
  70%{ box-shadow:0 0 0 7px transparent; opacity:.55; }
}

/* =====================================================================
   CENTER STAGE
   ===================================================================== */
.shell{
  position:relative; z-index:1; flex:1 1 auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:clamp(20px,3.4vh,38px);
  padding:clamp(36px,7vh,84px) var(--pad-x);
}
.logo-wrap{ position:relative; display:grid; place-items:center; }
.logo-wrap::before{
  content:""; position:absolute; inset:-26% -16%;
  background:radial-gradient(circle at 50% 50%, color-mix(in srgb,var(--green-primary) 36%, transparent) 0%, transparent 66%);
  filter:blur(10px); z-index:-1;
}
.logo{
  width:clamp(210px,32vw,420px); height:auto; display:block;
  filter:drop-shadow(0 12px 38px rgba(0,0,0,.55));
}

/* فاصل أنيق بين اللوجو والجملة */
.divider{
  position:relative;
  width:clamp(180px,26vw,260px); height:2px;
  background:linear-gradient(to right,
    transparent,
    rgba(244,244,242,0.72) 22%,
    rgba(244,244,242,0.72) 78%,
    transparent);
}
.divider::after{
  content:""; position:absolute; left:50%; top:50%;
  width:8px; height:8px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:rgba(244,244,242,1);
  box-shadow:0 0 12px rgba(244,244,242,0.60);
}

.tagline{ display:flex; flex-direction:column; align-items:center; gap:.34em; }
.tagline .ar{
  font-family:"GESSTwo","AdobeArabic",sans-serif; font-weight:500;
  font-size:clamp(26px,4.4vw,52px); line-height:1.2; color:var(--white);
  text-shadow:0 2px 24px rgba(0,0,0,.62), 0 1px 4px rgba(0,0,0,.5);
}
.tagline .en{
  font-family:"Bell",serif; font-weight:700; text-transform:uppercase;
  font-size:clamp(10px,1.3vw,15px); letter-spacing:.28em; color:var(--green-soft);
  text-shadow:0 2px 16px rgba(0,0,0,.6);
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.foot{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:13px;
  padding:clamp(16px,2.8vh,26px) var(--pad-x) clamp(18px,3vh,30px);
  background:rgba(18,18,16,.55);
  -webkit-backdrop-filter:blur(12px) saturate(130%);
  backdrop-filter:blur(12px) saturate(130%);
  border-top:1px solid color-mix(in srgb,var(--gold) 26%, transparent);
}
.foot .label{
  font-family:"GESSTwo",sans-serif; font-weight:500; font-size:clamp(11px,1.1vw,13px);
  letter-spacing:.04em; color:var(--green-soft);
}
.contact{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px 26px; }
.c-item{
  display:inline-flex; align-items:center; gap:.6em; min-height:40px;
  font-family:"Nexa",sans-serif; font-weight:300; font-size:13px; letter-spacing:.02em;
  color:var(--gray-light); transition:color .2s var(--ease);
}
.c-item svg{ width:15px; height:15px; stroke:var(--gray-cool); fill:none; stroke-width:1.5; transition:stroke .2s var(--ease); }
a.c-item:hover{ color:var(--white); }
a.c-item:hover svg{ stroke:var(--gold); }
.dot{ width:3px; height:3px; border-radius:50%; background:var(--gray-cool); opacity:.6; }
.copy{
  font-family:"Nexa",sans-serif; font-weight:300; font-size:11px; letter-spacing:.08em;
  color:var(--gray-cool);
}
.copy .ar{ font-family:"GESSTwo",sans-serif; }

/* =====================================================================
   ENTRANCE
   ===================================================================== */
@media (prefers-reduced-motion:no-preference){
  body.intro .rise{ opacity:0; animation:rise 1s var(--ease) both; animation-delay:var(--d,0ms); }
}
@keyframes rise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
body.intro-done .rise{ opacity:1 !important; transform:none !important; animation:none !important; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:760px){
  .contact{ gap:6px 16px; }
  .dot{ display:none; }
  .banner-brand .en{ letter-spacing:.24em; }
}

@media (prefers-reduced-motion:reduce){
  .banner-badge .bdot{ animation:none; }
}