/* ===================================================== */
/* ===== The Workflow: المرحلة الأولى (صامتة) ===== */
/* ===================================================== */

/* غطاء أسود من أول رسمة، قبل ما JavaScript يشتغل. شبكة أمان: لو JavaScript وقع بيختفي بعد 9 ثواني */
html.wf-pending::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 80;
  background: #000;
  animation: wf-cover-failsafe 0.01s 9s forwards;
}

@keyframes wf-cover-failsafe {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

.wf {
  position: fixed;
  inset: 0;
  z-index: 80;
  overflow: hidden;
  background: #000;
  color: var(--text);
  font-family: var(--font-en);
  pointer-events: none;
}

.wf__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* الخط والمدار: خطين (واحد واسع شفاف للتوهج وواحد رفيع) بدل فلاتر SVG التقيلة على الموبايل */
.wf__line-glow,
.wf__orbit-glow {
  fill: none;
  stroke: var(--accent);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.14;
}

.wf__line,
.wf__orbit {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* رأس الخط (نقطة الضوء اللي بتجري) */
.wf__head {
  position: absolute;
  left: -5px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 14px 3px rgba(34, 211, 238, 0.9), 0 0 40px 10px rgba(34, 211, 238, 0.35);
  opacity: 0;
  will-change: transform;
}

/* لمعة الشرارة الأولى */
.wf__flare {
  position: absolute;
  left: -80px;
  top: -80px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.85), rgba(34, 211, 238, 0) 65%);
  opacity: 0;
}

/* الـNodes */
.wf__node {
  position: absolute;
  display: grid;
  place-items: center;
  border: 1px solid rgba(34, 211, 238, 0.55);
  z-index: 2; /* فوق الخط: الخط بيعدّي من ورا الأيقونة مش من جواها */
  border-radius: 14px;
  background: linear-gradient(rgba(34, 211, 238, 0.08), rgba(34, 211, 238, 0.08)), #000;
  box-shadow: 0 0 0 6px #000, 0 0 22px rgba(34, 211, 238, 0.18);
  color: var(--accent);
  opacity: 0;
  will-change: transform, opacity;
}

.wf__node svg {
  width: 50%;
  height: 50%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wf__label {
  position: absolute;
  white-space: nowrap;
  color: var(--text-dim);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  clip-path: inset(0 100% 0 0);
  opacity: 0;
}

/* KH واللقب (اللحظة الرئيسية) */
.wf__brand {
  position: absolute;
  transform: translate(-50%, -50%);
}

.wf__kh {
  position: relative;
  padding: 0.04em 0.32em;
  background: #000; /* يخفي الخط وراه عشان KH تبان كأنها على الخط */
  color: var(--text);
  font-size: clamp(64px, 9vw, 132px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  text-shadow: 0 0 40px rgba(34, 211, 238, 0.45);
  clip-path: inset(0 100% 0 0);
}

.wf__scan {
  position: absolute;
  top: -6%;
  bottom: -6%;
  left: 0;
  width: 2px;
  background: linear-gradient(transparent, var(--accent), transparent);
  box-shadow: 0 0 14px 2px rgba(34, 211, 238, 0.8);
  opacity: 0;
}

.wf__name {
  position: absolute;
  left: 50%;
  top: 100%;
  margin-top: 20px;
  transform: translateX(-50%);
  white-space: nowrap;
  color: var(--text-dim);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  opacity: 0;
}

.wf__bloom {
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.38), rgba(34, 211, 238, 0) 62%);
  opacity: 0;
}

@media (max-width: 820px) {
  .wf__kh {
    font-size: clamp(56px, 19vw, 110px);
  }

  .wf__label {
    font-size: 0.6rem;
    letter-spacing: 0.24em;
  }
}

/* زر Skip الواحد بيفضل طول الافتتاحية (المرحلتين). زر إنترو الفضاء المكرر بيتخفي */
.intro-skip.wf-skip ~ .intro-skip:not(.wf-skip) {
  display: none;
}

/* أسماء الـ Nodes فوق مربع KH (كان بيغطي آخر حرف من AI AUTOMATION) */
.wf__label {
  z-index: 3;
}