/* ============================================================
   TAHA KHAN — ARCHITECT PORTFOLIO
   Design system: "Blueprint" — drafting-inspired, brass/teal palette
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400&family=Manrope:wght@300;400;500;600;700;800&family=Reem+Kufi:wght@400;500;600;700&display=swap');

:root{
  --ink:            #0E1116;
  --ink-soft:       #161B22;
  --ink-card:       #1B212B;
  --parchment:      #F5F1E8;
  --parchment-dim:  #D9D3C4;
  --brass:          #C9A227;
  --brass-bright:   #E4C24A;
  --teal:           #1F6F63;
  --teal-bright:    #2E9683;
  --stone:          #8A8477;
  --line:           rgba(245,241,232,0.12);
  --line-brass:     rgba(201,162,39,0.35);
  --grid-line:      rgba(245,241,232,0.045);

  --f-display: 'Fraunces', serif;
  --f-body:    'Manrope', sans-serif;
  --f-arabic:  'Reem Kufi', sans-serif;

  --maxw: 1280px;
  --pad: clamp(1.25rem, 4vw, 4rem);
  --radius: 2px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:
    radial-gradient(ellipse 70% 45% at 18% -8%, rgba(201,162,39,0.10), transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 12%, rgba(31,111,99,0.09), transparent 55%),
    radial-gradient(ellipse 55% 45% at 8% 88%, rgba(31,111,99,0.07), transparent 55%),
    var(--ink);
  color:var(--parchment);
  font-family:var(--f-body);
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--brass); color:var(--ink); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

/* --- Section backdrop: soft colour glow only, no grid lines --- */
.blueprint-grid{
  background-image:
    radial-gradient(ellipse 55% 65% at 12% 15%, rgba(201,162,39,0.06), transparent 62%),
    radial-gradient(ellipse 50% 55% at 92% 85%, rgba(31,111,99,0.07), transparent 60%);
}

/* --- Typography scale --- */
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:600; letter-spacing:-0.01em; color:var(--parchment); }
h1{ font-size:clamp(2.6rem, 6vw, 5.2rem); line-height:1.02; font-weight:500; }
h2{ font-size:clamp(2rem, 4vw, 3.2rem); line-height:1.08; }
h3{ font-size:clamp(1.3rem, 2.2vw, 1.7rem); }
p{ color:var(--parchment-dim); }

.eyebrow{
  display:flex; align-items:center; gap:0.75rem;
  font-family:var(--f-body); font-size:0.72rem; font-weight:700;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--brass);
  margin-bottom:1.1rem;
}
.eyebrow::before{ content:''; width:28px; height:1px; background:var(--brass); }
.eyebrow .ar{ font-family:var(--f-arabic); font-size:1.05rem; letter-spacing:0; color:var(--teal-bright); text-transform:none; font-weight:500; }

.section{ padding:clamp(4rem,9vw,8rem) var(--pad); position:relative; }
.wrap{ max-width:var(--maxw); margin:0 auto; position:relative; }

/* ============ NAVBAR ============ */
#site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:1.1rem var(--pad);
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(14,17,22,0.72);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:padding .3s ease;
}
.brand{ display:flex; align-items:center; gap:0.7rem; line-height:1; }
.brand .brand-logo{ width:70px; height:70px; object-fit:contain; flex:none; }
.brand .brand-text{ display:flex; flex-direction:column; }
.brand .name-en{ font-family:var(--f-display); font-size:1.15rem; font-weight:600; letter-spacing:0.01em; }
.brand .name-ar{ font-family:var(--f-arabic); font-size:0.8rem; color:var(--brass); margin-top:2px; }

.nav-links{ display:flex; align-items:center; gap:2.2rem; }
.nav-links a{
  font-size:0.85rem; font-weight:600; letter-spacing:0.03em; text-transform:uppercase;
  color:var(--parchment-dim); position:relative;
  transition:color .25s ease;
}
.nav-links a:not(.nav-cta){ padding:6px 0; }
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--brass); transition:width .3s ease;
}
.nav-links a:hover, .nav-links a.active{ color:var(--parchment); }
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }

.nav-cta{
  border:none; color:var(--ink) !important;
  background:linear-gradient(135deg, var(--brass-bright), var(--brass));
  padding:0.95rem 2.1rem !important; border-radius:4px; font-size:0.78rem !important;
  font-weight:800 !important;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px -8px rgba(201,162,39,0.55);
  transition:transform .3s ease, box-shadow .3s ease, filter .3s ease;
}
.nav-cta:hover{
  transform:translateY(-2px); filter:brightness(1.08);
  box-shadow:0 12px 26px -8px rgba(201,162,39,0.7);
}
.nav-cta:active{ transform:translateY(0); }
.nav-cta::after{ display:none; }

.menu-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; z-index:1100; }
.menu-toggle span{ width:24px; height:2px; background:var(--parchment); transition:.3s; }

@media (max-width:900px){
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:78%; max-width:340px; height:100vh;
    background:var(--ink-soft); flex-direction:column; align-items:flex-start;
    padding:6rem 2rem 2rem; gap:1.6rem; border-left:1px solid var(--line);
    transform:translateX(100%); transition:transform .4s cubic-bezier(.16,1,.3,1);
  }
  .nav-links.open{ transform:translateX(0); }
  .menu-toggle{ display:flex; }
}

/* ============ 3D HERO ============ */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  overflow:hidden; perspective:1600px;
}
#hero-canvas{ position:absolute; inset:0; z-index:1; opacity:0.85; }
.hero-overlay{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(14,17,22,0.35) 0%, rgba(14,17,22,0.55) 55%, var(--ink) 100%);
}
.hero-slider{ position:relative; z-index:3; width:100%; padding:0 var(--pad); margin-top:6rem; }
.hero-track{ max-width:var(--maxw); margin:0 auto; position:relative; height:auto; transform-style:preserve-3d; }

.slide{
  position:absolute; inset:0; opacity:0; pointer-events:none;
  transform:rotateY(90deg) translateZ(60px);
  transition:transform .9s cubic-bezier(.16,1,.3,1), opacity .5s ease;
}
.slide.is-active{
  position:relative; opacity:1; pointer-events:auto; transform:rotateY(0) translateZ(0);
}
.slide.is-prev{ transform:rotateY(-90deg) translateZ(60px); }

.slide-tag{ font-family:var(--f-arabic); color:var(--teal-bright); font-size:1.1rem; margin-bottom:0.6rem; display:block; }
.slide h1{ max-width:20ch; }
.slide h1 em{ font-style:italic; color:var(--brass); font-weight:400; }
.slide p.lede{ max-width:46ch; font-size:1.15rem; margin:1.4rem 0 2rem; color:var(--parchment-dim); }

.hero-stats{ display:flex; gap:clamp(1.5rem,4vw,3rem); margin-top:2.5rem; flex-wrap:wrap; }
.hero-stats .stat b{ display:block; font-family:var(--f-display); font-size:2.1rem; color:var(--brass); }
.hero-stats .stat span{ font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--stone); }

.hero-portrait{
  position:absolute; right:clamp(2rem,7vw,8rem); top:0; bottom:0; z-index:3;
  display:flex; align-items:flex-end; justify-content:center;
  pointer-events:none;
  animation:heroFloat 6s ease-in-out infinite;
}
.portrait-frame{ position:relative; height:min(74%, 620px); display:flex; align-items:flex-end; }
.hero-portrait img{
  position:relative; z-index:2;
  height:100%; width:auto; display:block;
  filter:drop-shadow(0 35px 60px rgba(0,0,0,0.55));
}
.hero-portrait .orbit{
  position:absolute; left:50%; top:42%; z-index:1; border-radius:50%;
  transform:translate(-50%,-50%);
}
.hero-portrait .orbit.o1{
  width:clamp(240px,26vw,400px); height:clamp(190px,20vw,300px);
  border:1.5px dashed var(--line-brass);
  animation:spin 20s linear infinite;
}
.hero-portrait .orbit.o2{
  width:clamp(290px,30vw,480px); height:clamp(220px,22vw,340px);
  border:1px dashed rgba(46,150,131,0.32);
  animation:spinReverse 28s linear infinite;
}
.hero-portrait .orbit .dot{
  position:absolute; width:7px; height:7px; border-radius:50%; top:-3.5px; left:50%; margin-left:-3.5px;
  background:var(--brass); box-shadow:0 0 12px 3px rgba(201,162,39,0.65);
}
.hero-portrait .orbit.o2 .dot{ background:var(--teal-bright); box-shadow:0 0 12px 3px rgba(46,150,131,0.55); }
.hero-portrait .glow{
  position:absolute; left:50%; top:48%; z-index:0; transform:translate(-50%,-50%);
  width:clamp(250px,28vw,420px); height:clamp(190px,18vw,280px); border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(201,162,39,0.18), transparent 70%);
  filter:blur(28px);
}
@keyframes spin{ from{ transform:translate(-50%,-50%) rotate(0deg); } to{ transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes spinReverse{ from{ transform:translate(-50%,-50%) rotate(360deg); } to{ transform:translate(-50%,-50%) rotate(0deg); } }
@keyframes heroFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-16px); } }
@media (max-width:1180px){ .portrait-frame{ height:min(88%, 680px); } }
@media (max-width:980px){ .hero-portrait{ display:none; } }
@media (prefers-reduced-motion: reduce){ .hero-portrait{ animation:none; } .hero-portrait .orbit{ animation:none; } }

.hero-dots{ display:flex; gap:0.6rem; margin-top:3rem; }
.hero-dots button{
  width:32px; height:3px; background:var(--line); border:none; border-radius:2px;
  transition:background .3s ease;
}
.hero-dots button.is-active{ background:var(--brass); }

/* --- Buttons --- */
.btn{
  display:inline-flex; align-items:center; gap:0.6rem;
  padding:0.95rem 1.9rem; font-size:0.85rem; font-weight:700;
  letter-spacing:0.04em; text-transform:uppercase; border-radius:var(--radius);
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, background .3s, color .3s;
  transform-style:preserve-3d;
}
.btn-primary{ background:var(--brass); color:var(--ink); border:1px solid var(--brass); }
.btn-primary:hover{ transform:translateY(-3px) rotateX(6deg); box-shadow:0 14px 28px -10px rgba(201,162,39,0.45); }
.btn-outline{ background:transparent; color:var(--parchment); border:1px solid var(--line); }
.btn-outline:hover{ border-color:var(--brass); color:var(--brass); transform:translateY(-3px); }

/* ============ 3D TILT CARD ============ */
.tilt-card{
  background:var(--ink-card); border:1px solid var(--line); border-radius:var(--radius);
  padding:2rem; transform-style:preserve-3d; will-change:transform;
  transition:transform .15s ease-out, border-color .3s ease, box-shadow .3s ease;
  position:relative;
}
.tilt-card:hover{ border-color:var(--line-brass); box-shadow:0 24px 50px -20px rgba(0,0,0,0.6); }
.tilt-card::before{
  content:''; position:absolute; top:0; left:1.8rem; width:32px; height:2px; background:var(--brass);
  transform:translateY(-1px);
}

/* ============ SCROLL REVEAL ============ */
.reveal{ opacity:0; transform:translateY(36px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-stagger > * { opacity:0; transform:translateY(30px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal-stagger.in > *{ opacity:1; transform:translateY(0); }

/* ============ SECTION HEAD ============ */
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom:3rem; flex-wrap:wrap; }
.section-head p{ max-width:42ch; }

/* ============ GRID HELPERS ============ */
.grid{ display:grid; gap:1.75rem; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:980px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid-3,.grid-4,.grid-2{ grid-template-columns:1fr; } }

/* ============ TIMELINE (Education) ============ */
.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.5rem; top:0.3rem; width:12px; height:12px;
  border-radius:50%; background:var(--ink); border:2px solid var(--brass);
}
.timeline-item .yr{ font-family:var(--f-arabic); color:var(--teal-bright); font-size:0.95rem; }
.timeline-item h3{ margin:0.3rem 0 0.4rem; }
.timeline-item .meta{ color:var(--stone); font-size:0.85rem; margin-bottom:0.6rem; }

/* ============ CAROUSEL (3D coverflow) ============ */
.coverflow{ position:relative; height:420px; perspective:1400px; }
.coverflow-track{ position:relative; width:100%; height:100%; transform-style:preserve-3d; }
.cf-item{
  position:absolute; top:0; left:50%; width:min(60%,560px); height:100%;
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  transition:transform .6s cubic-bezier(.16,1,.3,1), opacity .6s ease, filter .6s ease;
  box-shadow:0 30px 60px -25px rgba(0,0,0,0.7);
}
.cf-item img{ width:100%; height:100%; object-fit:cover; }
.cf-nav{ display:flex; justify-content:center; gap:1.2rem; margin-top:2rem; }
.cf-nav button{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:transparent;
  color:var(--parchment); display:flex; align-items:center; justify-content:center; transition:.3s;
}
.cf-nav button:hover{ border-color:var(--brass); color:var(--brass); }

/* ============ CARDS: PROJECTS / BLOG / VIDEO ============ */
.card{
  background:var(--ink-card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition:transform .4s cubic-bezier(.16,1,.3,1), border-color .3s;
}
.card:hover{ transform:translateY(-6px); border-color:var(--line-brass); }
.card-media{ aspect-ratio:16/10; overflow:hidden; background:var(--ink-soft); position:relative; }
.card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.16,1,.3,1); }
.card:hover .card-media img{ transform:scale(1.08); }
.card-body{ padding:1.6rem; }
.card-tag{ font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--brass); font-weight:700; }
.card h3{ margin:0.5rem 0 0.6rem; font-size:1.2rem; }
.card p{ font-size:0.92rem; }
.card-meta{ display:flex; gap:1rem; margin-top:1.1rem; font-size:0.78rem; color:var(--stone); }
.play-badge{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(14,17,22,0.25);
}
.play-badge span{
  width:58px; height:58px; border-radius:50%; background:rgba(245,241,232,0.92);
  display:flex; align-items:center; justify-content:center; transition:transform .3s ease;
}
.card:hover .play-badge span{ transform:scale(1.1); }
.play-badge svg{ width:18px; height:18px; margin-left:3px; }

/* ============ SKILLS ============ */
.skill-row{ display:flex; align-items:center; gap:1.4rem; padding:1.4rem 0; border-bottom:1px solid var(--line); }
.skill-row:last-child{ border-bottom:none; }
.skill-icon{ width:52px; height:52px; flex:none; display:flex; align-items:center; justify-content:center; background:var(--ink-soft); border:1px solid var(--line); border-radius:var(--radius); }
.skill-icon img{ width:28px; height:28px; object-fit:contain; }
.skill-bar{ flex:1; height:3px; background:var(--line); margin-top:0.6rem; border-radius:2px; overflow:hidden; }
.skill-bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--teal),var(--brass)); border-radius:2px; }

/* ============ FOOTER ============ */
#site-footer{ border-top:1px solid var(--line); padding:4rem var(--pad) 2rem; background:var(--ink-soft); }
.footer-grid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem; }
.footer-grid h4{ font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--brass); margin-bottom:1.1rem; }
.footer-grid a, .footer-grid p{ font-size:0.9rem; color:var(--parchment-dim); display:block; margin-bottom:0.6rem; }
.footer-grid a:hover{ color:var(--brass); }
.social-row{ display:flex; gap:0.9rem; margin-top:1rem; }
.social-row a{
  width:38px; height:38px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition:border-color .3s, color .3s;
  animation:floatY 3.2s ease-in-out infinite;
}
.social-row a:nth-child(1){ animation-delay:0s; }
.social-row a:nth-child(2){ animation-delay:0.25s; }
.social-row a:nth-child(3){ animation-delay:0.5s; }
.social-row a:nth-child(4){ animation-delay:0.75s; }
.social-row a:nth-child(5){ animation-delay:1s; }
.social-row a:hover{ border-color:var(--brass); color:var(--brass); animation-play-state:paused; }
@keyframes floatY{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
@media (prefers-reduced-motion: reduce){ .social-row a{ animation:none; } }
.footer-bottom{ max-width:var(--maxw); margin:3rem auto 0; padding-top:1.6rem; border-top:1px solid var(--line); display:flex; justify-content:space-between; font-size:0.78rem; color:var(--stone); flex-wrap:wrap; gap:1rem; }
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; } }

/* ============ PAGE HEADER (interior pages) ============ */
.page-head{
  padding:calc(7rem + 3rem) var(--pad) 5rem; position:relative; overflow:hidden;
  border-bottom:1px solid var(--line);
}
.page-head .wrap{ position:relative; z-index:2; }
.page-head-canvas{ position:absolute; inset:0; opacity:0.5; z-index:1; }
.breadcrumb{ font-size:0.8rem; color:var(--stone); margin-top:1rem; }
.breadcrumb .ar{ font-family:var(--f-arabic); color:var(--teal-bright); margin-left:0.5rem; }

/* ============ FORMS ============ */
.field{ margin-bottom:1.4rem; }
.field label{ display:block; font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--stone); margin-bottom:0.5rem; }
.field input, .field textarea, .field select{
  width:100%; background:var(--ink-soft); border:1px solid var(--line); color:var(--parchment);
  padding:0.85rem 1rem; border-radius:var(--radius); font-family:var(--f-body); font-size:0.95rem;
  transition:border-color .3s;
}
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--brass); }
.field textarea{ resize:vertical; min-height:120px; }

/* ============ MISC ============ */
.tag-pill{ display:inline-block; padding:0.35rem 0.8rem; border:1px solid var(--line); border-radius:20px; font-size:0.72rem; color:var(--stone); margin:0.2rem 0.3rem 0.2rem 0; }
.divider-ar{ font-family:var(--f-arabic); font-size:2.4rem; color:var(--line-brass); text-align:center; margin:1rem 0; }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; gap:2.5rem; } }
.badge-license{ display:flex; gap:1rem; align-items:flex-start; padding:1.2rem 0; border-bottom:1px solid var(--line); }
.badge-license:last-child{ border-bottom:none; }
.badge-license .num{ font-family:var(--f-display); color:var(--brass); font-size:1.4rem; }

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

/* ============ CUSTOM CURSOR (desktop / fine-pointer only) ============ */
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0; pointer-events:none; z-index:9999;
  border-radius:50%; transform:translate(-50%,-50%); will-change:transform;
}
.cursor-dot{ width:6px; height:6px; background:var(--brass); opacity:0; transition:opacity .3s ease; }
.cursor-ring{
  width:34px; height:34px; border:1px solid var(--line-brass); opacity:0;
  transition:width .25s ease, height .25s ease, border-color .25s ease, opacity .3s ease;
}
.cursor-dot.is-visible, .cursor-ring.is-visible{ opacity:1; }
.cursor-ring.is-active{ width:58px; height:58px; border-color:var(--teal-bright); background:rgba(46,150,131,0.06); }
body.has-custom-cursor, body.has-custom-cursor a, body.has-custom-cursor button,
body.has-custom-cursor input, body.has-custom-cursor textarea, body.has-custom-cursor select,
body.has-custom-cursor .tilt-card, body.has-custom-cursor .card{ cursor:none; }

/* Loading / empty states used by dynamic content */
.state-msg{ padding:3rem 1rem; text-align:center; color:var(--stone); border:1px dashed var(--line); border-radius:var(--radius); grid-column:1/-1; }