/* ==============================================================
   GATechX — arStyle.css
   ملف مستقل بالكامل للنسخة العربية. لا يحتاج homeStyle.css.
   الاتجاه من اليمين لليسار، خطوط عربية، ومسافات بالخصائص المنطقية.

   المحتويات
   1. المتغيرات
   2. الأساسيات
   3. خلفية الفضاء
   4. الترويسة والتنقل
   5. النصوص والأزرار
   6. الواجهة
   7. الأقسام: العوالم / الخط الزمني / المقالات / التدريب / من نحن
   8. النشرة البريدية
   9. التذييل
  10. حركات الظهور عند التمرير
  11. تقليل الحركة
   ============================================================== */


/* ==============================================================
   1. المتغيرات
   ============================================================== */
:root {
  --void:      #000000;
  --deep:      #04070C;
  --panel:     #080D15;
  --blue:      #2E9BFF;
  --blue-hot:  #7FD0FF;
  --blue-deep: #0B4FA8;
  --white:     #FFFFFF;
  --mist:      #C4D2E2;
  --dim:       #7A8CA3;
  --edge:      rgba(46, 155, 255, .22);

  /* خطوط عربية: Cairo للعناوين، Tajawal للنصوص */
  --f-display: "Cairo", system-ui, sans-serif;
  --f-body:    "Tajawal", system-ui, sans-serif;

  --s-1: clamp(.85rem, .82rem + .1vw, .92rem);
  --s0:  clamp(1.05rem, 1rem + .2vw, 1.18rem);
  --s1:  clamp(1.25rem, 1.1rem + .5vw, 1.55rem);
  --s2:  clamp(1.7rem, 1.4rem + 1.2vw, 2.6rem);
  --s3:  clamp(2.3rem, 1.6rem + 3vw, 4.4rem);

  --shell: 1200px;
  --pad: clamp(1.1rem, 4vw, 2.5rem);
  --header-h: 76px;
}


/* ==============================================================
   2. الأساسيات
   ============================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--void);
  color: var(--mist);
  font-family: var(--f-body);
  font-size: var(--s0);
  line-height: 1.9;              /* العربية تحتاج تنفّسًا أكبر بين السطور */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a { color: inherit; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--white);
  line-height: 1.4;              /* أطول من اللاتينية بسبب التشكيل */
  letter-spacing: normal;        /* تباعد الحروف يفكّك الكلمة العربية */
}

.shell {
  width: min(100% - (var(--pad) * 2), var(--shell));
  margin-inline: auto;
}

.sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: -200px;
  inset-inline-start: 1rem;
  z-index: 200;
  padding: .7rem 1.2rem;
  background: var(--blue);
  color: #001428;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }

:focus-visible {
  outline: 2px solid var(--blue-hot);
  outline-offset: 3px;
}

/* الأرقام والتواريخ تبقى باتجاه لاتيني داخل النص العربي */
time,
.node__year,
.stats dd {
  direction: ltr;
  unicode-bidi: embed;
  display: inline-block;
}


/* ==============================================================
   3. خلفية الفضاء
   ============================================================== */
.space {
  position: fixed;
  inset: 0;
  width: 100%; height: 100%;
  z-index: -2;
  pointer-events: none;
}

.nebula {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60vw 50vh at 88% 18%, rgba(11, 79, 168, .20), transparent 65%),
    radial-gradient(50vw 45vh at 12% 62%, rgba(46, 155, 255, .13), transparent 65%),
    radial-gradient(70vw 60vh at 50% 110%, rgba(11, 79, 168, .16), transparent 70%);
}


/* ==============================================================
   4. الترويسة والتنقل
   ============================================================== */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(4, 7, 12, .55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background .3s ease, box-shadow .3s ease;
}
.header.is-stuck {
  background: rgba(4, 7, 12, .9);
  box-shadow: 0 1px 0 rgba(46, 155, 255, .25), 0 18px 40px -30px #000;
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: var(--header-h);
}

.header__beam {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(46, 155, 255, .75), transparent);
}

.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.brand img {
  width: clamp(140px, 18vw, 200px);
  height: auto;
}

.nav {
  display: none;
  gap: clamp(.9rem, 1.7vw, 1.6rem);
  
}
.nav a {
  position: relative;
  padding: .35rem 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--mist);
  text-decoration: none;
  white-space: nowrap;
}
/* الخط المتوهّج ينمو من اليمين */
.nav a::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--blue);
  box-shadow: 0 0 8px var(--blue);
  transition: width .3s ease;
}
.nav a:hover,
.nav a.is-active { color: var(--white); }
.nav a:hover::after,
.nav a.is-active::after { width: 100%; }

.header__end {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: .8rem;
}

.lang {
  padding: .3rem .8rem;
  border: 1px solid var(--edge);
  border-radius: 3px;
  font-size: .95rem;
  color: var(--mist);
  text-decoration: none;
  direction: ltr;
  font-family: system-ui, sans-serif;
}
.lang:hover {
  color: var(--white);
  border-color: var(--blue);
  box-shadow: 0 0 16px -4px var(--blue);
}

.burger {
  display: grid;
  gap: 5px;
  width: 42px;
  padding: 9px 7px;
  background: none;
  border: 1px solid var(--edge);
  border-radius: 3px;
  cursor: pointer;
}
.burger span:not(.sr) {
  display: block;
  height: 2px;
  background: var(--mist);
}

/* قائمة الجوال */
.nav.is-open {
  display: grid;
  position: fixed;
  inset: var(--header-h) 0 auto 0;
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  padding: .5rem var(--pad) 1.5rem;
  background: rgba(4, 7, 12, .97);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--edge);
}
.nav.is-open a {
  padding: .95rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  font-size: 1.1rem;
}

@media (min-width: 1080px) {
  .nav { display: flex; }
  .header__end { margin-inline-start: auto; }
  .burger { display: none; }
}


/* ==============================================================
   5. النصوص والأزرار
   ============================================================== */
.eyebrow {
  margin: 0 0 1rem;
  font-family: var(--f-body);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: normal;
  color: var(--blue);
}

.lede {
  max-width: 62ch;
  font-size: var(--s1);
  line-height: 1.85;
  color: var(--mist);
}

.section__title {
  max-width: 22ch;
  margin-bottom: 2.5rem;
  font-size: var(--s2);
}

.byline {
  margin: 0;
  font-size: .9rem;
  color: var(--dim);
}

.btn {
  display: inline-block;
  padding: .8rem 1.8rem;
  border: 1px solid transparent;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: normal;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .3s ease, background .3s ease;
}
.btn--primary {
  background: linear-gradient(135deg, var(--blue), var(--blue-deep));
  color: var(--white);
  box-shadow: 0 0 28px -8px var(--blue);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 40px -6px var(--blue);
}
.btn--ghost {
  background: rgba(46, 155, 255, .06);
  border-color: var(--edge);
  color: var(--white);
}
.btn--ghost:hover {
  transform: translateY(-2px);
  border-color: var(--blue);
  box-shadow: 0 0 30px -10px var(--blue);
}


/* ==============================================================
   6. الواجهة
   النص على اليمين، فالصورة على اليسار.
   ============================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-items: center;
  padding-block: calc(var(--header-h) + 3.5rem) 6rem;
  overflow: hidden;
  isolation: isolate;
  background-image: url(/Media/Home_Page/GatechX_backround_top_page_ar.webp);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 880px;
}

/* التعتيم يبدأ من اليمين حيث النص */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(270deg,
      var(--void) 0%,
      rgba(0, 0, 0, .93) 26%,
      rgba(0, 0, 0, .6) 46%,
      rgba(0, 0, 0, .2) 64%,
      transparent 80%),
    linear-gradient(180deg,
      rgba(0, 0, 0, .8) 0%,
      transparent 22%,
      transparent 62%,
      var(--void) 100%);
}

.hero__content {
  position: relative;
}

.hero h1 {
  max-width: 16ch;
  margin-bottom: 1.5rem;
  font-size: var(--s3);
  font-weight: 900;
}
.hero h1 .glow {
  display: block;
  color: var(--blue);
  text-shadow: 0 0 30px rgba(46, 155, 255, .6), 0 0 80px rgba(46, 155, 255, .3);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: 2.25rem;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  margin: 3.5rem 0 0;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, .09);
}
.stats dt {
  font-size: .85rem;
  font-weight: 500;
  color: var(--dim);
}
.stats dd {
  margin: .3rem 0 0;
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--white);
}

.scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 26px; height: 42px;
  padding-top: 8px;
  display: grid;
  justify-items: center;
  border: 1px solid var(--edge);
  border-radius: 14px;
}
.scroll-hint span {
  width: 3px; height: 8px;
  border-radius: 2px;
  background: var(--blue);
  animation: drift 1.8s ease-in-out infinite;
}

@keyframes drift {
  0%, 100% { transform: translateY(0);    opacity: 1; }
  50%      { transform: translateY(14px); opacity: .2; }
}

@media (max-width: 900px) {
  .hero {
    padding-block: calc(var(--header-h) + 2.5rem) 5rem;
    background-position: center;
    background-size: cover;
  }
  .hero::before {
    background:
      linear-gradient(180deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.55) 35%, rgba(0,0,0,.9) 78%, var(--void) 100%);
  }
}


/* ==============================================================
   7. الأقسام
   ============================================================== */
.section {
  position: relative;
  padding-block: clamp(4rem, 10vw, 8rem);
}
.section--corridor { padding-inline: 0; }
.section--about { border-top: 1px solid rgba(255, 255, 255, .06); }


/* --- العوالم الأربعة ------------------------------------------ */
.worlds {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 700px)  { .worlds { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .worlds { grid-template-columns: repeat(4, 1fr); } }

.world {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 2rem 1.5rem;
  background: linear-gradient(200deg, rgba(46, 155, 255, .09), rgba(8, 13, 21, .85));
  border: 1px solid var(--edge);
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
/* التوهّج ينبع من الزاوية العليا اليمنى */
.world::before {
  content: "";
  position: absolute;
  inset: -40% -40% 50% 50%;
  opacity: 0;
  background: radial-gradient(circle, rgba(46, 155, 255, .28), transparent 65%);
  transition: opacity .4s ease;
}
.world > * { position: relative; }
.world:hover {
  transform: translateY(-8px);
  border-color: var(--blue);
  box-shadow: 0 24px 60px -34px var(--blue);
}
.world:hover::before { opacity: 1; }

.world__glyph {
  width: 54px; height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid var(--edge);
  border-radius: 50%;
  background: rgba(46, 155, 255, .07);
}
.world__glyph svg {
  width: 26px; height: 26px;
  fill: none;
  stroke: var(--blue);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.world h3 { font-size: var(--s1); }
.world p {
  margin: 0;
  font-size: 1rem;
  color: var(--dim);
}

.world__link {
  margin-top: auto;
  padding-top: .75rem;
  font-size: .9rem;
  font-weight: 500;
  color: var(--blue);
  text-decoration: none;
}
.world__link span {
  display: inline-block;
  transition: margin .25s ease;
}
/* السهم يتحرك يسارًا في العربية */
.world:hover .world__link span { margin-inline-start: .4rem; }


/* --- الخط الزمني ---------------------------------------------- */
.corridor {
  direction: rtl;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1rem var(--pad) 2.5rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--blue-deep) transparent;
}
.corridor::-webkit-scrollbar { height: 4px; }
.corridor::-webkit-scrollbar-thumb { background: var(--blue-deep); }

.corridor__track {
  position: relative;
  display: flex;
  gap: 1.25rem;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}
.corridor__track::before {
  content: "";
  position: absolute;
  top: 34px; left: 0; right: 0;
  height: 1px;
  opacity: .5;
  background: linear-gradient(90deg, transparent, var(--blue), transparent);
}

.node {
  position: relative;
  width: min(78vw, 330px);
  padding: 4.5rem 1.5rem 1.75rem;
  scroll-snap-align: center;
  background: linear-gradient(180deg, rgba(8, 13, 21, .9), rgba(4, 7, 12, .6));
  border: 1px solid var(--edge);
  transition: border-color .35s ease, box-shadow .35s ease;
}
/* النقطة على اليمين */
.node::before {
  content: "";
  position: absolute;
  top: 27px;
  inset-inline-start: 1.5rem;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 5px rgba(46, 155, 255, .16), 0 0 22px var(--blue);
}
.node:hover {
  border-color: var(--blue);
  box-shadow: 0 20px 60px -40px var(--blue);
}
.node__year {
  position: absolute;
  top: 18px;
  inset-inline-start: 3.25rem;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 1.4rem;
  color: var(--white);
}
.node h3 {
  margin-bottom: .6rem;
  font-size: 1.15rem;
}
.node p {
  margin: 0;
  font-size: 1rem;
  color: var(--dim);
}


/* --- المقالات ------------------------------------------------- */
.posts {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 860px) {
  .posts { grid-template-columns: repeat(3, 1fr); }
  .post--lead { grid-column: 1 / -1; }
}

.post {
  padding: 1.6rem;
  background: rgba(8, 13, 21, .72);
  border: 1px solid rgba(255, 255, 255, .07);
  transition: border-color .35s ease, transform .35s ease, background .35s ease;
}
.post:hover {
  transform: translateY(-5px);
  border-color: var(--blue);
  background: rgba(12, 20, 32, .9);
}
.post h3 {
  margin-bottom: .8rem;
  font-size: var(--s1);
  line-height: 1.5;
}
.post h3 a { text-decoration: none; }
.post h3 a:hover { color: var(--blue-hot); }
.post p { color: var(--dim); }

.post--lead {
  display: grid;
  padding: 0;
  overflow: hidden;
}
@media (min-width: 760px) {
  .post--lead { grid-template-columns: 1.1fr 1fr; align-items: center; }
}
.post--lead .post__media {
  height: 100%;
  min-height: 240px;
  overflow: hidden;
}
.post--lead .post__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .8;
  transition: transform .6s ease, opacity .4s ease;
}
.post--lead:hover .post__media img {
  transform: scale(1.05);
  opacity: 1;
}
.post--lead .post__body { padding: 2rem; }
.post--lead h3 { font-size: var(--s2); }

.tag {
  display: inline-block;
  margin: 0 0 .8rem;
  padding: .25rem .8rem;
  background: var(--blue);
  color: #001428;
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: normal;
}
.tag--alt {
  background: transparent;
  color: var(--blue);
  border: 1px solid var(--edge);
}


/* --- التدريب والبرمجيات --------------------------------------- */
.duo {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 900px) { .duo { grid-template-columns: 1fr 1fr; } }

.pod {
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: linear-gradient(210deg, rgba(46, 155, 255, .10), rgba(8, 13, 21, .9));
  border: 1px solid var(--edge);
}
.pod h2 {
  margin-bottom: 1rem;
  font-size: var(--s2);
}
.pod p { color: var(--dim); }

.ticks {
  display: grid;
  gap: .6rem;
  margin: 1.5rem 0 2rem;
  padding: 0;
  list-style: none;
}
.ticks li {
  position: relative;
  padding-inline-start: 1.75rem;
}
.ticks li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .7em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 12px var(--blue);
}


/* --- من نحن --------------------------------------------------- */
.about {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 860px) { .about { grid-template-columns: auto 1fr; } }

.about__mark {
  width: clamp(120px, 22vw, 200px);
  border-radius: 50%;
  border: 1px solid var(--edge);
  box-shadow: 0 0 70px -14px var(--blue);
  animation: hover-float 7s ease-in-out infinite;
}
.about .lede { margin-bottom: 1.25rem; }
.about .btn { margin-top: .75rem; }

@keyframes hover-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}


/* ==============================================================
   8. النشرة البريدية
   ============================================================== */
.signup {
  padding-block: clamp(3rem, 7vw, 5.5rem);
  border-top: 1px solid var(--edge);
  background: linear-gradient(180deg, rgba(46, 155, 255, .09), transparent);
}
.signup__inner {
  display: grid;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 900px) { .signup__inner { grid-template-columns: 1.2fr 1fr; } }

.signup h2 {
  max-width: 22ch;
  margin-bottom: .75rem;
  font-size: var(--s2);
}

.signup__form {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
/* حقل البريد لاتيني، فيبقى من اليسار */
.signup__form input {
  flex: 1 1 15rem;
  min-width: 0;
  padding: .8rem 1rem;
  background: rgba(0, 0, 0, .5);
  border: 1px solid var(--edge);
  color: var(--white);
  font-family: var(--f-body);
  font-size: 1rem;
  direction: ltr;
  text-align: left;
}
.signup__form input::placeholder { color: var(--dim); }
.signup__form input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 22px -8px var(--blue);
}


/* ==============================================================
   9. التذييل
   ============================================================== */
.footer {
  padding-top: clamp(2.5rem, 6vw, 4rem);
  border-top: 1px solid rgba(255, 255, 255, .07);
  background: rgba(0, 0, 0, .5);
}
.footer__inner {
  display: grid;
  gap: 2rem;
}
@media (min-width: 780px) { .footer__inner { grid-template-columns: 2fr 1fr 1fr 1fr; } }

.footer__logos {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.footer__mark     { width: 64px; height: auto; }
.footer__wordmark { width: 170px; height: auto; }

.footer__brand p {
  margin: .9rem 0 0;
  max-width: 34ch;
  font-size: 1rem;
  color: var(--dim);
}

.footer__col {
  display: grid;
  align-content: start;
  gap: .55rem;
}
.footer__col h3 {
  margin-bottom: .35rem;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: .85rem;
  letter-spacing: normal;
  color: var(--dim);
}
.footer__col a {
  font-size: 1rem;
  color: var(--mist);
  text-decoration: none;
}
.footer__col a:hover { color: var(--blue); }

.footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 2rem;
  justify-content: space-between;
  align-items: center;
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-block: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .07);
  font-size: .85rem;
  color: var(--dim);
}
.footer__base p { margin: 0; }


/* ==============================================================
   10. حركات الظهور عند التمرير
   ============================================================== */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity .8s cubic-bezier(.2, .7, .3, 1),
    transform .8s cubic-bezier(.2, .7, .3, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}


/* ==============================================================
   11. تقليل الحركة
   ============================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}