/* ============================================================
   إنبار المتحدة — Visual layer (real-estate motion graphics)
   ============================================================ */

/* ---------- Shared ---------- */
.ev-svg{display:block;width:100%;height:100%;overflow:visible;}
.ev-svg .ev-stroke{fill:none;stroke:var(--gold-light);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.ev-svg .ev-thin{fill:none;stroke:rgba(216,188,116,.35);stroke-width:1;}

/* ============================================================
   1) HOME — animated construction skyline at the bottom of hero
   ============================================================ */
.hero-skyline{
  position:absolute; left:0; right:0; bottom:0;
  height:240px; z-index:2; pointer-events:none; opacity:.62;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 16%, #000 100%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 16%, #000 100%);
}
.hero-skyline svg{width:100%; height:100%;}

.sky-bld{transform-box:fill-box; transform-origin:bottom; animation:skyRise 1.1s cubic-bezier(.22,1,.36,1) backwards;}
@keyframes skyRise{from{transform:scaleY(0); opacity:0;} to{transform:scaleY(1); opacity:1;}}

.sky-win{animation:winBlink 4.5s ease-in-out infinite;}
@keyframes winBlink{0%,100%{opacity:.18;} 45%{opacity:.9;} 60%{opacity:.35;}}

.sky-jib{transform-box:fill-box; transform-origin:var(--px,0) var(--py,0); animation:jibSwing 9s ease-in-out infinite;}
@keyframes jibSwing{0%,100%{transform:rotate(-7deg);} 50%{transform:rotate(7deg);}}
.sky-hook{animation:hookDrop 5s ease-in-out infinite;}
@keyframes hookDrop{0%,100%{transform:translateY(0);} 50%{transform:translateY(26px);}}
.sky-beacon{animation:beacon 2.4s ease-in-out infinite;}
@keyframes beacon{0%,100%{opacity:.15; r:3;} 50%{opacity:1; r:5;}}
.sky-cloud{animation:cloudDrift 46s linear infinite;}
@keyframes cloudDrift{from{transform:translateX(-360px);} to{transform:translateX(1560px);}}

/* ============================================================
   2) SUB-PAGE BANNERS — visual beside the title
   ============================================================ */
.page-banner .wrap{
  display:grid; grid-template-columns:1fr 380px;
  gap:34px; align-items:center;
}
.page-banner .banner-copy{min-width:0;}
.banner-visual{
  position:relative; height:270px; width:100%;
  animation:bvIn .9s ease .1s backwards;
}
@keyframes bvIn{from{opacity:0; transform:translateY(18px) scale(.96);} to{opacity:1; transform:none;}}
.banner-visual::before{
  content:''; position:absolute; inset:-8% -4%;
  background:radial-gradient(circle at 50% 55%, rgba(184,145,47,.20), transparent 68%);
  pointer-events:none;
}

/* --- Growth towers (about) --- */
.gt-tower{transform-box:fill-box; transform-origin:bottom; animation:gtGrow 7s cubic-bezier(.3,1,.4,1) infinite;}
@keyframes gtGrow{0%{transform:scaleY(.04);} 22%,88%{transform:scaleY(1);} 100%{transform:scaleY(.04);}}
.gt-win{animation:winBlink 5s ease-in-out infinite;}
.gt-line{stroke-dasharray:var(--len,420); stroke-dashoffset:var(--len,420); animation:gtDraw 7s ease-in-out infinite;}
@keyframes gtDraw{0%,14%{stroke-dashoffset:var(--len,420);} 52%,88%{stroke-dashoffset:0;} 100%{stroke-dashoffset:var(--len,420);}}
.gt-spark{animation:gtSpark 7s ease-in-out infinite;}
@keyframes gtSpark{0%,40%{opacity:0; transform:translateY(8px);} 58%,88%{opacity:1; transform:none;} 100%{opacity:0;}}

/* --- Blueprint villa (services) --- */
.bp-draw{stroke-dasharray:var(--len,600); stroke-dashoffset:var(--len,600); animation:bpDraw 9s ease-in-out infinite;}
@keyframes bpDraw{0%{stroke-dashoffset:var(--len,600);} 42%,86%{stroke-dashoffset:0;} 100%{stroke-dashoffset:var(--len,600);}}
.bp-fill{opacity:0; animation:bpFill 9s ease-in-out infinite;}
@keyframes bpFill{0%,44%{opacity:0;} 62%,86%{opacity:1;} 100%{opacity:0;}}
.bp-scan{animation:bpScan 9s ease-in-out infinite;}
@keyframes bpScan{0%{transform:translateY(-6px); opacity:0;} 8%{opacity:.85;} 42%{transform:translateY(212px); opacity:.85;} 52%,100%{opacity:0; transform:translateY(212px);}}

/* --- Master plan (projects) --- */
.mp-plot{opacity:0; transform-box:fill-box; transform-origin:center; animation:mpPop 8s ease-in-out infinite;}
@keyframes mpPop{0%,6%{opacity:0; transform:scale(.6);} 22%,84%{opacity:1; transform:scale(1);} 100%{opacity:0; transform:scale(.6);}}
.mp-border{stroke-dasharray:var(--len,900); stroke-dashoffset:var(--len,900); animation:mpDraw 8s ease-in-out infinite;}
@keyframes mpDraw{0%{stroke-dashoffset:var(--len,900);} 26%,88%{stroke-dashoffset:0;} 100%{stroke-dashoffset:var(--len,900);}}
.mp-sweep{transform-box:fill-box; transform-origin:center; animation:mpSweep 8s linear infinite;}
@keyframes mpSweep{to{transform:rotate(360deg);}}
.mp-compass{transform-box:fill-box; transform-origin:center; animation:mpSpin 16s linear infinite;}
@keyframes mpSpin{to{transform:rotate(360deg);}}

/* --- Location pulse (contact) --- */
.lp-pin{transform-box:fill-box; transform-origin:bottom; animation:lpDrop 4.5s cubic-bezier(.3,1.5,.5,1) infinite;}
@keyframes lpDrop{0%{transform:translateY(-46px) scale(.7); opacity:0;} 16%{transform:translateY(0) scale(1); opacity:1;} 78%{transform:translateY(0) scale(1); opacity:1;} 92%,100%{transform:translateY(-6px) scale(.9); opacity:0;}}
.lp-ring{transform-box:fill-box; transform-origin:center; animation:lpRing 3.4s ease-out infinite;}
@keyframes lpRing{0%{transform:scale(.2); opacity:0;} 22%{opacity:.75;} 100%{transform:scale(1.9); opacity:0;}}
.lp-bld{transform-box:fill-box; transform-origin:bottom; animation:skyRise 1s cubic-bezier(.22,1,.36,1) backwards;}
.lp-wave{stroke-dasharray:70; stroke-dashoffset:70; animation:lpWave 3s ease-in-out infinite;}
@keyframes lpWave{0%{stroke-dashoffset:70; opacity:0;} 30%{opacity:.9;} 70%,100%{stroke-dashoffset:0; opacity:0;}}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .page-banner .wrap{grid-template-columns:1fr;}
  .banner-visual{height:210px; max-width:420px; margin:6px auto 0;}
  .hero-skyline{height:170px; opacity:.75;}
}
@media (max-width:620px){
  .banner-visual{height:170px;}
  .hero-skyline{height:130px; opacity:.6;}
}
@media (prefers-reduced-motion:reduce){
  .gt-line,.bp-draw,.mp-border{stroke-dashoffset:0 !important;}
  .mp-plot,.bp-fill,.gt-spark,.lp-pin{opacity:1 !important; transform:none !important;}
  .bp-scan,.lp-ring,.lp-wave{display:none;}
}

/* ============================================================
   توقيع المصمّم في الفوتر
   ============================================================ */
.foot-sign{display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap;}
.sign-sep{
  width:26px; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent);
  display:inline-block; flex:none; opacity:.8;
}
.sign-by{font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:#68757f; opacity:.85;}
.sign-name{
  position:relative; font-family:'Great Vibes', cursive;
  font-size:22px; line-height:1.1; padding:0 2px 2px;
  background:linear-gradient(100deg, var(--gold-deep) 0%, var(--gold-light) 38%, #F4E3B4 50%, var(--gold-light) 62%, var(--gold-deep) 100%);
  background-size:260% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--gold-light);
  animation:signShine 7s linear infinite;
  transform:rotate(-2deg); transform-origin:right bottom;
}
@keyframes signShine{0%{background-position:170% 0;} 100%{background-position:-70% 0;}}
.sign-name::after{
  content:''; position:absolute; right:0; bottom:0; height:1px; width:0;
  background:linear-gradient(90deg,transparent,var(--gold-light),transparent);
  transition:width .55s cubic-bezier(.22,1,.36,1);
}
.foot-sign:hover .sign-name::after{width:100%;}
.foot-sign:hover .sign-name{filter:drop-shadow(0 0 10px rgba(216,188,116,.35));}

/* ---------- اسم الشركة بارزًا بالذهبي داخل الفقرات ---------- */
.brand-gold{
  color:var(--gold-deep);
  font-weight:700;
  background:linear-gradient(100deg,var(--gold-deep) 0%,var(--gold) 45%,var(--gold-light) 60%,var(--gold) 75%,var(--gold-deep) 100%);
  background-size:240% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:brandShine 8s linear infinite;
}
.hero.has-video .brand-gold,.about .brand-gold{
  background:linear-gradient(100deg,var(--gold-light) 0%,#F0D89A 45%,var(--gold-light) 60%,#F0D89A 75%,var(--gold-light) 100%);
  background-size:240% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
@keyframes brandShine{0%{background-position:180% 0;}100%{background-position:-40% 0;}}
@media (prefers-reduced-motion:reduce){.brand-gold{animation:none;background-position:50% 0;}}
@media (max-width:620px){
  .sign-name{font-size:20px;}
  .foot-sign{gap:8px;}
}
@media (prefers-reduced-motion:reduce){
  .sign-name{animation:none; background-position:50% 0;}
}