/* =========================================================
   Ahmed Farouk — Portfolio
   Tokens
========================================================= */
:root{
  --navy-950:#070d16;
  --navy-900:#0a1322;
  --navy-800:#0f1d30;
  --navy-700:#162842;
  --line:#223450;
  --gold:#c9a227;
  --gold-soft:#e8cf7a;
  --off-white:#eee9dd;
  --slate:#8a96a8;
  --slate-dim:#5c6b80;

  --font-display:'Space Grotesk', sans-serif;
  --font-mono:'Space Mono', monospace;
  --font-body:'Inter', sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:radial-gradient(ellipse at 50% 20%, var(--navy-800) 0%, var(--navy-950) 80%);
  background-attachment:fixed;
  color:var(--off-white);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
a{ color:var(--gold); text-decoration:none; }
a:hover{ color:var(--gold-soft); }

/* shared section labels */
.section-label{
  font-family:var(--font-mono);
  letter-spacing:.12em;
  font-size:.75rem;
  color:var(--gold);
  margin:0 0 .75rem;
}
.section-label--center{ text-align:center; }
.section-title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.6rem,3vw,2.4rem);
  margin:0 0 3rem;
}
.section-title--center{ text-align:center; }

/* =========================================================
   HERO
========================================================= */
.hero{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  overflow:hidden;
  background:transparent;
  padding:3rem 1.5rem 0.5rem;
}

.page__field{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  opacity:.75;
  z-index:-1;
  pointer-events:none;
}

/* Back to Site link */
.back-link{
  position:absolute;
  top:1.5rem;
  left:1.5rem;
  z-index:100;
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.08em;
  color:var(--slate);
  text-transform:lowercase;
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  transition:color .25s ease, transform .25s ease;
}
.back-link:hover{
  color:var(--gold);
  transform:translateX(-2px);
}
.back-link__arrow{
  font-size:.9rem;
  transition:transform .25s ease;
}
.back-link:hover .back-link__arrow{
  transform:translateX(-2px);
}

.hero__inner{
  position:relative;
  z-index:2;
  text-align:center;
  padding:0 1.5rem;
}

.hero__eyebrow{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.18em;
  color:var(--slate);
  margin:0 0 1rem;
  opacity:0;
  animation:fadeUp .8s ease forwards;
  animation-delay:.1s;
}

.hero__name{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.1;
  font-size:clamp(2.4rem, 9vw, 7.5rem);
  letter-spacing:.01em;
}
.hero__name-line{
  display:inline-block;
  overflow:hidden;
}

/* letters animated individually via JS-inserted spans */
.letter{
  display:inline-block;
  opacity:0;
  transform:translateY(30px);
  filter:blur(8px);
  animation:letterIn .8s cubic-bezier(.215, .610, .355, 1) forwards;
  transition:transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.25s ease, text-shadow 0.25s ease;
  cursor:default;
}
.letter--gold{ color:var(--gold); }
.letter:hover{
  transform:translateY(-8px) scale(1.15);
  color:var(--gold-soft);
  text-shadow:0 0 12px rgba(232, 207, 122, 0.8);
}

@keyframes letterIn{
  to{ opacity:1; transform:translateY(0); filter:blur(0); }
}
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}

/* Loader progress effect */
.hero__loader{
  width:120px;
  height:2px;
  background:rgba(22, 40, 66, 0.6);
  margin:1.2rem auto 0;
  position:relative;
  overflow:hidden;
  border-radius:1px;
  opacity:0;
  animation:fadeUp .8s ease forwards;
  animation-delay:.5s;
}
.hero__loader-progress{
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:100%;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left;
  animation:loadProgress 1.4s cubic-bezier(.4, 0, .2, 1) forwards;
  animation-delay:.7s;
}
@keyframes loadProgress{
  0%{ transform:scaleX(0); opacity:1; }
  75%{ transform:scaleX(1); opacity:1; }
  100%{ transform:scaleX(1); opacity:0; }
}

.profile{
  max-width:1080px;
  margin:0 auto;
  padding:2.5rem 1.5rem 6rem;
  display:grid;
  grid-template-columns:220px 1fr;
  gap:3.5rem;
  align-items:start;
}
.profile__portrait{
  width:220px;
  height:220px;
  flex-shrink:0;
}
.profile__portrait img{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--gold);
  box-shadow:0 8px 30px rgba(0, 0, 0, 0.4);
}
.profile__lede{
  font-family:var(--font-display);
  font-size:1.3rem;
  font-weight:500;
  color:var(--off-white);
  margin:0 0 1.2rem;
}
.profile__text p{
  color:var(--slate);
  line-height:1.7;
  font-size:.97rem;
}
.profile__contact{
  margin-top:1.6rem;
  display:flex;
  gap:1.4rem;
  flex-wrap:wrap;
  font-family:var(--font-mono);
  font-size:.8rem;
  color:var(--slate-dim);
}

@media (max-width:680px){
  .profile{ grid-template-columns:1fr; text-align:left; }
  .profile__portrait{ width:140px; height:140px; }
}

/* =========================================================
   KNOWLEDGE DOMAINS
========================================================= */
.domains{
  max-width:1180px;
  margin:0 auto;
  padding:6rem 1.5rem 7rem;
}
.domain-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
}
.domain-card{
  background:var(--navy-900);
  border:1px solid var(--line);
  border-radius:10px;
  padding:2rem 1.8rem;
  transition:border-color .25s ease, transform .25s ease;
}
.domain-card:hover{
  border-color:var(--gold);
  transform:translateY(-3px);
}
.domain-card__icon{
  width:34px;
  height:34px;
  margin-bottom:1.2rem;
  border-radius:8px;
  background:var(--navy-700);
  position:relative;
}
.domain-card__icon::after{
  content:"";
  position:absolute;
  inset:9px;
  border:1.5px solid var(--gold);
  border-radius:4px;
}
.domain-card h3{
  font-family:var(--font-display);
  font-size:1.05rem;
  margin:0 0 1rem;
  color:var(--off-white);
}
.domain-card ul li{
  color:var(--slate);
  font-size:.86rem;
  line-height:1.6;
  padding-left:1rem;
  position:relative;
  margin-bottom:.45rem;
}
.domain-card ul li::before{
  content:"·";
  position:absolute;
  left:0;
  color:var(--gold);
}

@media (max-width:900px){
  .domain-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .domain-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   EXPERIENCE TIMELINE
========================================================= */
.experience{
  max-width:920px;
  margin:0 auto;
  padding:6rem 1.5rem 7rem;
}
.timeline{
  position:relative;
  padding-left:2.4rem;
  border-left:1px solid var(--line);
}
.timeline__item{
  position:relative;
  padding-bottom:3rem;
}
.timeline__item:last-child{ padding-bottom:0; }
.timeline__item::before{
  content:"";
  position:absolute;
  left:-2.4rem;
  top:.35rem;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--navy-950);
  border:2px solid var(--gold);
}
.timeline__date{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.08em;
  color:var(--gold);
  margin-bottom:.5rem;
}
.timeline__content h3{
  font-family:var(--font-display);
  font-size:1.15rem;
  margin:0 0 .25rem;
  color:var(--off-white);
}
.timeline__org{
  font-size:.85rem;
  color:var(--slate-dim);
  margin:0 0 .7rem;
}
.timeline__content p:last-child{
  color:var(--slate);
  font-size:.92rem;
  line-height:1.65;
  margin:0;
  max-width:560px;
}

@media (max-width:600px){
  .experience{ padding:4rem 1.2rem; }
  .timeline{ padding-left:1.6rem; }
  .timeline__item::before{ left:-1.6rem; }
}
.domains__cta{
  text-align:center;
  margin-top:3.5rem;
}
.btn--gold{
  display:inline-flex;
  align-items:center;
  font-family:var(--font-mono);
  font-size:.85rem;
  letter-spacing:.05em;
  color:var(--navy-950);
  background:var(--gold);
  border:1px solid var(--gold);
  border-radius:6px;
  padding:.8rem 1.6rem;
  font-weight:600;
  transition:background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  cursor:pointer;
  box-shadow:0 4px 15px rgba(201, 162, 39, 0.25);
}
.btn--gold:hover{
  background:var(--gold-soft);
  border-color:var(--gold-soft);
  color:var(--navy-950);
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(232, 207, 122, 0.4);
}

/* =========================================================
   FOOTER
========================================================= */
.footer{
  border-top:1px solid var(--line);
  text-align:center;
  padding:3rem 1.5rem;
  color:var(--slate-dim);
  font-size:.82rem;
}
.footer p{ margin:.3rem 0; }
.footer__contact a{ color:var(--gold); }