/* ===== 3D capability tree (مقاولات عامة) ===== */
@property --lift{syntax:'<length>'; inherits:false; initial-value:0px;}
@property --depth{syntax:'<length>'; inherits:false; initial-value:3px;}

.k3d{perspective:1100px; overflow:visible;}
.k3d-stage{
  position:relative; display:flex; flex-direction:column; align-items:center;
  gap:90px; width:100%; transform-style:preserve-3d; will-change:transform;
}
.k3d-stage > .spec-pill, .k3d-stage > .about-kicker-sub{position:relative;}
.k3d-stage > .about-kicker-sub{transform-style:preserve-3d;}
.k3d .kicker-lines[data-kicker-lines]{display:none;}

/* connection lines sit behind every pill slab */
.k3d-lines{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; transform:translateZ(-14px);}
.k3d-line{
  fill:none; stroke:rgba(var(--orange-rgb),.6); stroke-width:2; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset 1s ease-out calc(.15s + var(--i,0) * .12s);
  filter:drop-shadow(0 0 4px rgba(var(--orange-rgb),.5));
}
.k3d-in .k3d-line{stroke-dashoffset:0;}
.k3d-pulse{fill:#ffc2a6; filter:drop-shadow(0 0 6px var(--orange)) drop-shadow(0 0 12px var(--orange));}
.k3d:not(.k3d-in) .k3d-pulse{display:none;}

/* core: glowing orb + two gyroscope rings */
.k3d-core{position:absolute; width:0; height:0; transform:translateZ(24px); transform-style:preserve-3d; pointer-events:none; scale:0;}
.k3d-in .k3d-core{scale:1; transition:scale .7s cubic-bezier(.34,1.56,.64,1);}
.k3d-orb{
  position:absolute; left:-7px; top:-7px; width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle at 32% 30%, #ffd9c8, var(--orange) 45%, #a5240a);
  box-shadow:0 0 18px 4px rgba(var(--orange-rgb),.65);
}
.k3d-ring{
  position:absolute; left:-24px; top:-24px; width:48px; height:48px; border-radius:50%;
  border:1.5px solid rgba(var(--orange-rgb),.8); transform-style:preserve-3d;
  animation:k3dSpinY 5.5s linear infinite;
}
.k3d-ring.r2{left:-18px; top:-18px; width:36px; height:36px; border-color:rgba(var(--accent-soft-rgb),.65); animation:k3dSpinX 4.2s linear infinite;}
.k3d-ring::after{
  content:""; position:absolute; left:50%; top:-3.5px; width:6px; height:6px; margin-left:-3px;
  border-radius:50%; background:#fff; box-shadow:0 0 8px 2px var(--orange);
}
@keyframes k3dSpinY{to{transform:rotateY(360deg);}}
@keyframes k3dSpinX{from{transform:rotateX(0) rotateZ(35deg);} to{transform:rotateX(360deg) rotateZ(35deg);}}

/* floating depth dust */
.k3d-dust{
  position:absolute; border-radius:50%; background:var(--accent-glow); box-shadow:0 0 8px rgba(var(--orange-rgb),.8);
  pointer-events:none; animation:k3dDrift 8s ease-in-out infinite alternate;
}
@keyframes k3dDrift{from{translate:0 0;} to{translate:10px -22px;}}

/* anchor: extruded 3D title that pops toward the viewer */
.k3d .spec-pill[data-anchor]{
  transform-style:preserve-3d;
  animation:k3dAnchor 5s ease-in-out infinite;
}
.k3d .spec-pill[data-anchor]::before{display:none;}
.k3d .spec-pill[data-anchor] .spec-pill-label{
  text-shadow:none;
}
@keyframes k3dAnchor{
  0%,11%,17%,100%{transform:translate3d(0,-16px,46px);}
  5%{transform:translate3d(0,-46px,96px);}
  14%{transform:translate3d(0,-26px,66px);}
}

/* pills: real slabs with thickness */
.k3d .about-kicker-sub .spec-pill{
  overflow:visible; transform-style:preserve-3d; animation:none; box-shadow:none;
  --depth:3px;
  transform:translate3d(0, var(--bob,0px), var(--lift,0px));
  transition:--lift .9s cubic-bezier(.16,.84,.3,1), --depth .35s ease, opacity .6s ease, color .3s ease;
}
.k3d .about-kicker-sub .spec-pill.is-active::after{border-radius:inherit; transform:translateZ(1px);}
.k3d-slab{
  position:absolute; inset:0; border-radius:999px; pointer-events:none;
  transform:translateZ(calc(var(--n) * var(--depth)));
  background:hsl(var(--accent-hue) var(--accent-sat-a) calc(56% + var(--n) * 4%));
}
.k3d-slab[style*="-4"]{box-shadow:0 26px 34px -10px rgba(var(--orange-rgb),.55);}
.k3d .spec-pill-icon{transform:translateZ(12px); box-shadow:0 3px 8px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.35);}
.k3d .about-kicker-sub .spec-pill-label{transform:translateZ(8px); text-shadow:0 2px 4px rgba(120,30,0,.35);}
.k3d .about-kicker-sub .spec-pill:hover{--lift:18px; --depth:5px;}
.k3d .about-kicker-sub .spec-pill:active{--lift:-6px; --depth:1.5px; transform:translate3d(0, var(--bob,0px), var(--lift));}

/* one orchestrated entrance: pills fly in from depth */
.k3d:not(.k3d-in) .about-kicker-sub .spec-pill{opacity:0; --lift:-260px;}
.k3d-in .about-kicker-sub .spec-pill{opacity:1; --lift:0px; transition-delay:calc(.55s + var(--i,0) * .14s);}
.k3d-in.k3d-done .about-kicker-sub .spec-pill{transition-delay:0s;}
.k3d-in.k3d-done .about-kicker-sub .spec-pill:hover{--lift:18px;}

@media (max-width:900px){
  .k3d{perspective:800px;}
  .k3d-stage{gap:64px;}
  .k3d .about-kicker-sub .spec-pill{--depth:2px;}
}
@media (prefers-reduced-motion: reduce){
  .k3d-ring, .k3d-dust, .k3d .spec-pill[data-anchor]{animation:none;}
  .k3d .spec-pill[data-anchor]{transform:translate3d(0,-16px,46px);}
  .k3d-pulse{display:none;}
  .k3d-line, .k3d-core, .k3d .about-kicker-sub .spec-pill{transition:none;}
}

/* breathing room between the intro paragraph and the tree (title pops upward on its bounce) */
.about .about-kicker.k3d{margin-top:56px;}

@media (max-width:900px){
  .about .about-kicker.k3d{margin-top:84px;}

  /* tidy 2x2 grid: equal cells, equal heights */
  .about .about-kicker.k3d .about-kicker-sub{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px 12px; width:100%; max-width:560px; margin-inline:auto; align-items:stretch;
  }
  .about .about-kicker.k3d .about-kicker-sub .spec-pill{
    flex:none; width:auto; min-width:0; min-height:64px;
    padding-block:8px; padding-inline:8px 14px; gap:8px;
    align-items:center; justify-content:flex-start;
  }
  /* icon: fixed size, centred on the text block; text fills the rest and centres */
  .about .about-kicker.k3d .about-kicker-sub .spec-pill-icon{
    width:32px; height:32px; flex:0 0 32px; margin:0; align-self:center;
    transform:translateZ(5px);
  }
  .about .about-kicker.k3d .about-kicker-sub .spec-pill-icon svg{width:16px; height:16px; display:block;}
  .about .about-kicker.k3d .about-kicker-sub .spec-pill-label{
    flex:1 1 auto; min-width:0; text-align:center; white-space:normal;
    font-size:14.26px; line-height:1.35; text-wrap:balance; transform:translateZ(3px);
  }
}
@media (max-width:360px){
  .about .about-kicker.k3d .about-kicker-sub .spec-pill{padding-inline:6px 10px; gap:6px; min-height:60px;}
  .about .about-kicker.k3d .about-kicker-sub .spec-pill-icon{width:28px; height:28px; flex-basis:28px;}
  .about .about-kicker.k3d .about-kicker-sub .spec-pill-icon svg{width:14px; height:14px;}
  .about .about-kicker.k3d .about-kicker-sub .spec-pill-label{font-size:12.88px;}
}

/* =====================================================================
   LIGHT MODE ONLY — calmer, less saturated blues for:
   (1) the 3D capability tree (مقاولات عامة) and (2) the identity tiles (تعرّف علينا).
   Dark mode is untouched (every rule is scoped to html:not([data-theme="dark"])).
   ===================================================================== */
html:not([data-theme="dark"]){
  --calm-hue:240;
  --calm-hi:#164dcc;
  --calm-base:#0000aa;
  --calm-lo:#0000aa;
  --calm-dk1:#0000aa;    /* tile depth layers */
  --calm-dk2:#0000aa;
  --calm-rgb:0,0,170;
}

/* ---- 1) capability tree ---- */
html:not([data-theme="dark"]) .k3d-slab{
  background:var(--calm-base);
}
html:not([data-theme="dark"]) .k3d-slab[style*="-4"]{
  box-shadow:0 20px 28px -12px rgba(var(--calm-rgb),.28);
}
html:not([data-theme="dark"]) .k3d .about-kicker-sub .spec-pill.is-active{
  background:linear-gradient(135deg, var(--calm-base), var(--calm-hi));
  box-shadow:none; animation:none;
}
html:not([data-theme="dark"]) .k3d .spec-pill-icon{
  background:rgba(255,255,255,.16);
  box-shadow:0 2px 5px rgba(30,45,130,.18), inset 0 1px 0 rgba(255,255,255,.25);
}
html:not([data-theme="dark"]) .k3d .about-kicker-sub .spec-pill-label{ text-shadow:0 1px 2px rgba(30,45,130,.25); }
html:not([data-theme="dark"]) .k3d .about-kicker-sub .spec-pill.is-active::after{ opacity:.45; }
html:not([data-theme="dark"]) .k3d-line{
  stroke:rgba(var(--calm-rgb),.5); stroke-width:1.8;
  filter:drop-shadow(0 0 2px rgba(var(--calm-rgb),.25));
}
html:not([data-theme="dark"]) .k3d-pulse{
  fill:#cdd8f2; filter:drop-shadow(0 0 3px rgba(var(--calm-rgb),.35));
}
html:not([data-theme="dark"]) .k3d-orb{
  background:radial-gradient(circle at 32% 30%, #cdd8f2, var(--calm-base) 50%, #0000aa);
  box-shadow:0 0 10px 2px rgba(var(--calm-rgb),.35);
}
html:not([data-theme="dark"]) .k3d-ring{ border-color:rgba(var(--calm-rgb),.5); }
html:not([data-theme="dark"]) .k3d-ring.r2{ border-color:rgba(var(--calm-rgb),.35); }
html:not([data-theme="dark"]) .k3d-ring::after{ box-shadow:0 0 5px 1px rgba(var(--calm-rgb),.45); }
html:not([data-theme="dark"]) .k3d-dust{
  background:#0000aa; box-shadow:0 0 5px rgba(var(--calm-rgb),.35);
}

/* ---- 2) "تعرّف علينا" tiles ---- */
html:not([data-theme="dark"]) .id-tile{
  background:linear-gradient(145deg, var(--calm-hi), var(--calm-base) 55%, var(--calm-lo));
  box-shadow:inset 0 2px 0 rgba(255,255,255,.28), inset 0 -10px 18px rgba(30,45,130,.14), 0 8px 22px -8px rgba(var(--calm-rgb),.35);
}
html:not([data-theme="dark"]) .id-tile::before{ background:var(--calm-dk1); }
html:not([data-theme="dark"]) .id-tile::after{ background:var(--calm-dk2); }
html:not([data-theme="dark"]) .id-icon{ filter:drop-shadow(0 6px 5px rgba(30,45,130,.25)); }
html:not([data-theme="dark"]) .id-shadow{
  background:radial-gradient(ellipse at center, rgba(var(--calm-rgb),.28), transparent 70%);
}
html:not([data-theme="dark"]) .id-ring{ border-color:rgba(var(--calm-rgb),.35); }
html:not([data-theme="dark"]) .id-ring::after{
  background:#cdd8f2; box-shadow:0 0 6px 1px rgba(var(--calm-rgb),.4);
}
@media (hover:hover){
  html:not([data-theme="dark"]) .id-item:hover .id-label,
  html:not([data-theme="dark"]) .id-item:hover .id-hint{ color:var(--calm-base); }
  html:not([data-theme="dark"]) .id-item:hover .id-tile{
    box-shadow:inset 0 2px 0 rgba(255,255,255,.3), inset 0 -10px 18px rgba(30,45,130,.14), 0 10px 28px -8px rgba(var(--calm-rgb),.45);
  }
}

/* light mode: welder mascot's trousers follow the soft orange accent */
html:not([data-theme="dark"]) #wdLegNf{ stroke:#0000aa; }

/* =====================================================================
   LIGHT MODE — flat #0000aa: no glows, no gradients, no extra tints
   ===================================================================== */
html:not([data-theme="dark"]) .k3d .about-kicker-sub .spec-pill.is-active{ background:#0000aa; box-shadow:none; animation:none; }
html:not([data-theme="dark"]) .k3d-slab,
html:not([data-theme="dark"]) .k3d-slab[style*="-4"]{ box-shadow:none; }
html:not([data-theme="dark"]) .k3d-line{ filter:none; }
html:not([data-theme="dark"]) .k3d-pulse{ filter:none; fill:#0000aa; }
html:not([data-theme="dark"]) .k3d-orb{ background:#0000aa; box-shadow:none; }
html:not([data-theme="dark"]) .k3d-ring::after,
html:not([data-theme="dark"]) .k3d-dust{ box-shadow:none; }
html:not([data-theme="dark"]) .k3d-dust{ background:#0000aa; }
html:not([data-theme="dark"]) .k3d .about-kicker-sub .spec-pill-label{ text-shadow:none; }
html:not([data-theme="dark"]) .id-tile{ background:#0000aa; box-shadow:none; }
html:not([data-theme="dark"]) .id-icon{ filter:none; }
html:not([data-theme="dark"]) .id-shadow{ background:none; }
html:not([data-theme="dark"]) .id-ring::after{ background:#0000aa; box-shadow:none; }
@media (hover:hover){
  html:not([data-theme="dark"]) .id-item:hover .id-tile{ box-shadow:none; }
}


/* =====================================================================
   LIGHT MODE — palette balance for the 3D pieces
   ===================================================================== */
/* capability tree: blue slabs, orange energy (pulse + orb + active pill) */
html:not([data-theme="dark"]) .k3d-pulse{ fill:#fd572b; }
html:not([data-theme="dark"]) .k3d-orb{ background:#fd572b; }
html:not([data-theme="dark"]) .k3d .about-kicker-sub .spec-pill.is-active{ background:#fd572b; }

/* identity tiles: all orange */
html:not([data-theme="dark"]) .id-item{ --calm-dk1:#fd572b; --calm-dk2:#fd572b; --calm-rgb:253,87,43; }
html:not([data-theme="dark"]) .id-item .id-tile{ background:#fd572b; }
html:not([data-theme="dark"]) .id-item .id-ring::after{ background:#fd572b; }

/* LIGHT MODE ONLY — remove the blue depth layers under the capability-tree pills.
   Dark mode is untouched. */
html:not([data-theme="dark"]) .k3d-slab{ display:none; }

/* LIGHT MODE ONLY — identity tiles (من نحن / رؤيتنا / رسالتنا):
   on hover the whole tile (face, depth layers, ring) turns blue, not just the text. */
html:not([data-theme="dark"]) .id-tile,
html:not([data-theme="dark"]) .id-tile::before,
html:not([data-theme="dark"]) .id-tile::after,
html:not([data-theme="dark"]) .id-ring::after{
  transition:background-color .35s ease, box-shadow .35s ease;
}
@media (hover:hover){
  html:not([data-theme="dark"]) .id-item:hover{
    --calm-dk1:#0000aa; --calm-dk2:#0000aa; --calm-rgb:0,0,170;
  }
  html:not([data-theme="dark"]) .id-item:hover .id-tile,
  html:not([data-theme="dark"]) .id-item:hover .id-ring::after{ background:#0000aa; }
}


/* =====================================================================
   IDENTITY ICONS (من نحن / رؤيتنا / رسالتنا)
   Still by default. Float / rotation / pulse / ring + mouse tilt run ONLY
   while the pointer is over the icon. Animations stay defined but paused
   (same calm resting pose for all three), hover resumes them smoothly.
   ===================================================================== */
.id-obj, .id-shadow{ animation-delay:-1.5s !important; }
.id-icon, .id-ring{ animation-delay:0s !important; }
.id-obj, .id-icon, .id-ring, .id-shadow{ animation-play-state:paused; }
.id-tilt{ transform:none; }                        /* no tilt while idle */
@media (hover:hover){
  .id-item:hover .id-obj,
  .id-item:hover .id-icon,
  .id-item:hover .id-ring,
  .id-item:hover .id-shadow{ animation-play-state:running; }
  .id-item:hover .id-tilt{ transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); }
}

/* Gallery has no built-in images: when nothing is uploaded, JS hides the section and its links. */
#gallery[hidden], a[href="#gallery"][hidden], li[hidden]{ display:none !important; }