/* ═══════════════════════════════════════════
   IBAI — AI ENGINEER · styles.css
═══════════════════════════════════════════ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#02040e;
  --c1:#4F8EFF;
  --c2:#A78BFA;
  --c3:#34D399;
  --c4:#FB7185;
  --text:#E8EDFF;
  --muted:#5A6482;
  --dim:#1C2035;
  --glass:rgba(255,255,255,0.028);
  --glass-b:rgba(255,255,255,0.065);
}

html{scroll-behavior:smooth;overflow-x:hidden}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Outfit',sans-serif;
  font-weight:300;
  overflow-x:hidden;
}

/* film grain overlay */
body::after{
  content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
  opacity:.5;mix-blend-mode:overlay;
}

/* ── PROGRESS BAR ── */
#bar{
  position:fixed;top:0;left:0;height:2px;
  background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3));
  z-index:9000;width:0;transition:width .06s linear;
}

/* ═══════════════════════════════════════════
   NAV
═══════════════════════════════════════════ */
nav{
  position:fixed;top:0;left:0;right:0;z-index:8000;
  padding:1.8rem 5rem;
  display:flex;align-items:center;justify-content:space-between;
  transition:all .45s cubic-bezier(.22,1,.36,1);
}
nav.on{
  background:rgba(2,4,14,.9);
  backdrop-filter:blur(22px) saturate(180%);
  padding:1rem 5rem;
  border-bottom:1px solid var(--glass-b);
}
.logo{
  font-family:'Syne',sans-serif;font-size:1.25rem;font-weight:800;
  letter-spacing:-.03em;text-decoration:none;color:var(--text);
}
.logo em{font-style:normal;color:var(--c1)}

.nav-links{display:flex;gap:2.5rem;list-style:none;align-items:center}
.nav-links a{
  color:var(--muted);text-decoration:none;font-size:.82rem;
  letter-spacing:.06em;font-weight:400;transition:color .2s;
}
.nav-links a:hover{color:var(--text)}

.nav-pill{
  background:linear-gradient(135deg,var(--c1),var(--c2))!important;
  color:#fff!important;padding:.55rem 1.4rem;border-radius:100px;
  font-size:.78rem!important;font-weight:500!important;
  box-shadow:0 0 22px rgba(79,142,255,.28);
  transition:box-shadow .3s,transform .25s cubic-bezier(.34,1.56,.64,1)!important;
}
.nav-pill:hover{
  box-shadow:0 0 45px rgba(79,142,255,.5)!important;
  transform:scale(1.06)!important;
}

/* hamburger */
.ham{
  display:none;flex-direction:column;gap:5px;
  background:none;border:none;cursor:pointer;padding:4px;z-index:9100;
}
.ham span{
  display:block;width:24px;height:1.5px;background:var(--text);
  border-radius:2px;transition:all .35s cubic-bezier(.22,1,.36,1);transform-origin:center;
}
.ham.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.ham.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.ham.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* mobile overlay */
.mob-nav{
  position:fixed;inset:0;background:rgba(2,4,14,.97);
  backdrop-filter:blur(24px);z-index:9000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2.5rem;opacity:0;pointer-events:none;
  transition:opacity .4s cubic-bezier(.22,1,.36,1);
}
.mob-nav.open{opacity:1;pointer-events:all}
.mob-nav a{
  font-family:'Syne',sans-serif;font-size:2.2rem;font-weight:800;
  color:var(--muted);text-decoration:none;letter-spacing:-.03em;
  transition:color .2s,transform .3s;
}
.mob-nav a:hover{color:var(--text);transform:translateX(8px)}

/* ═══════════════════════════════════════════
   BG CANVAS
═══════════════════════════════════════════ */
#bgc{position:fixed;inset:0;z-index:1;pointer-events:none}

/* ═══════════════════════════════════════════
   HERO
═══════════════════════════════════════════ */
.hero{
  position:relative;z-index:2;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:7rem 2rem 4rem;overflow:hidden;
}

.parallax-hero{will-change:transform}

.htitle{
  font-family:'Syne',sans-serif;
  font-size:clamp(2.9rem,9vw,8.5rem);
  font-weight:800;line-height:.92;letter-spacing:-.05em;
  margin-bottom:2rem;
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
  opacity:0;animation:aup .9s .2s forwards;
}
.htitle .row{display:block;overflow:hidden}
.htitle .g{
  background:linear-gradient(110deg,#fff 0%,var(--c1) 30%,var(--c2) 60%,var(--c3) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  background-size:300%;
  animation:shim 5s linear infinite;
}

.hsub{
  font-size:clamp(.9rem,2vw,1.15rem);color:var(--muted);
  max-width:500px;line-height:1.78;margin:0 auto 3.5rem;font-weight:300;
  opacity:0;animation:aup .8s .45s forwards;
}

.hbtns{
  display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;
  opacity:0;animation:aup .8s .65s forwards;
}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:.85rem 1.9rem;border-radius:14px;
  font-size:.88rem;font-weight:500;text-decoration:none;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .3s;
}
.btn:hover{transform:translateY(-4px)}
.btn-a{
  background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff;
  box-shadow:0 4px 28px rgba(79,142,255,.28);
}
.btn-a:hover{box-shadow:0 8px 45px rgba(79,142,255,.5)}
.btn-b{
  border:1px solid var(--glass-b);color:var(--muted);
  background:var(--glass);backdrop-filter:blur(12px);
}
.btn-b:hover{border-color:rgba(79,142,255,.4);color:var(--text)}

.hscroll{
  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  opacity:0;animation:afin 1s 1.4s forwards;
}
.hscroll-m{
  width:22px;height:36px;border:1.5px solid rgba(255,255,255,.15);
  border-radius:100px;display:flex;justify-content:center;padding-top:5px;
}
.hscroll-w{
  width:2.5px;height:7px;background:var(--c1);border-radius:100px;
  animation:awh 1.6s ease-in-out infinite;
}
.hscroll span{font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ═══════════════════════════════════════════
   SECTION SHARED
═══════════════════════════════════════════ */
.wrap{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:9rem 5rem}

.s-label{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.67rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--c1);font-weight:600;margin-bottom:1.5rem;
}
.s-label::before{content:'';width:18px;height:1px;background:currentColor}

.dl{
  height:1px;
  background:linear-gradient(90deg,transparent,var(--glass-b),transparent);
  max-width:1200px;margin:0 auto;position:relative;z-index:2;
}

/* ═══════════════════════════════════════════
   ABOUT
═══════════════════════════════════════════ */
.about-g{display:grid;grid-template-columns:1fr 1fr;gap:7rem;align-items:center}

.atitle{
  font-family:'Syne',sans-serif;font-size:clamp(2rem,3.8vw,3.2rem);
  font-weight:800;letter-spacing:-.04em;line-height:1.05;margin-bottom:2rem;
}
.acc{
  background:linear-gradient(135deg,var(--c1),var(--c2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.about-p{color:var(--muted);line-height:1.85;font-size:.93rem;margin-bottom:1.2rem;font-weight:300}
.about-p strong{color:var(--text);font-weight:500}

/* ─ sphere ─ */
.sw{position:relative;display:flex;align-items:center;justify-content:center}
#sc{display:block;width:100%;max-width:400px;height:400px}

.ftag{
  position:absolute;
  background:rgba(5,10,25,.88);border:1px solid var(--glass-b);
  backdrop-filter:blur(18px);border-radius:12px;padding:.55rem 1rem;
  font-size:.72rem;font-weight:500;color:var(--text);white-space:nowrap;
  pointer-events:none;opacity:0;transition:opacity .6s;
}
.ftag.fv{opacity:1}
.f1{top:10%;left:-8%;animation:flt 3.5s ease-in-out infinite}
.f2{top:30%;right:-14%;animation:flt 4.2s .6s ease-in-out infinite}
.f3{bottom:22%;left:-6%;animation:flt 3.8s 1.1s ease-in-out infinite}
.f4{bottom:8%;right:-2%;animation:flt 4.5s 1.8s ease-in-out infinite}

/* ═══════════════════════════════════════════
   SKILLS — horizontal pill list
═══════════════════════════════════════════ */
.skills-section{
  margin-top:6rem;
}

.skills-title{
  font-family:'Syne',sans-serif;font-size:clamp(1.6rem,3vw,2.2rem);
  font-weight:800;letter-spacing:-.04em;margin-bottom:3rem;
}

.skill-row{
  display:grid;grid-template-columns:1fr 1fr;
  gap:0;
  border-top:1px solid var(--glass-b);
}
.skill-row:last-child{border-bottom:1px solid var(--glass-b)}

.skill-item{
  padding:2rem 0;
  display:flex;align-items:flex-start;gap:2rem;
  border-bottom:1px solid var(--glass-b);
  position:relative;
  transition:background .3s;
}
.skill-item:nth-child(odd){border-right:1px solid var(--glass-b);padding-right:3rem}
.skill-item:nth-child(even){padding-left:3rem}
.skill-item:last-child{border-bottom:none}

/* hover glow */
.skill-item::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 0% 50%,rgba(79,142,255,.05),transparent 70%);
  opacity:0;transition:opacity .4s;pointer-events:none;
}
.skill-item:hover::before{opacity:1}

.sk-num{
  font-family:'Syne',sans-serif;font-size:.7rem;font-weight:700;
  color:var(--dim);letter-spacing:.1em;flex-shrink:0;margin-top:.1rem;
}
.sk-body{flex:1}
.sk-name{
  font-family:'Syne',sans-serif;font-size:1.1rem;font-weight:700;
  letter-spacing:-.02em;margin-bottom:.5rem;
}
.sk-desc{color:var(--muted);font-size:.8rem;line-height:1.6}

.sk-bar-wrap{
  width:80px;flex-shrink:0;display:flex;flex-direction:column;
  align-items:flex-end;justify-content:center;gap:4px;
}
.sk-pct{font-family:'Syne',sans-serif;font-size:.7rem;font-weight:700;color:var(--c1)}
.sk-track{width:60px;height:2px;background:var(--dim);border-radius:100px;overflow:hidden;align-self:flex-end}
.sk-fill{
  height:100%;border-radius:100px;transform:scaleX(0);transform-origin:left;
  transition:transform 1.3s cubic-bezier(.22,1,.36,1);
}

/* ═══════════════════════════════════════════
   PROJECTS
═══════════════════════════════════════════ */
.psec{
  position:relative;z-index:2;
  max-width:1200px;margin:0 auto;padding:0 5rem 9rem;
}

.ph{margin-bottom:3.5rem}
.ph-title{
  font-family:'Syne',sans-serif;font-size:clamp(2.2rem,4.5vw,3.5rem);
  font-weight:800;letter-spacing:-.04em;line-height:1;
}
.ph-sub{font-size:.78rem;color:var(--muted);margin-top:.6rem}

.plist{display:flex;flex-direction:column;gap:1.2rem}

.pc{
  background:var(--glass);border:1px solid var(--glass-b);border-radius:20px;
  padding:2.2rem 2.5rem;
  position:relative;overflow:hidden;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1),border-color .3s,box-shadow .4s,background .3s;
}
.pc::after{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--c1),var(--c2));
  transform:scaleY(0);transform-origin:top;
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.pc:hover{
  transform:translateX(8px);
  border-color:rgba(79,142,255,.18);
  background:rgba(255,255,255,.038);
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.pc:hover::after{transform:scaleY(1)}

.pc-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:.9rem;gap:1rem}
.pn{font-family:'Syne',sans-serif;font-size:.68rem;color:var(--dim);letter-spacing:.14em;font-weight:700}
.pt{
  font-family:'Syne',sans-serif;font-size:1.35rem;font-weight:800;
  letter-spacing:-.03em;margin-bottom:.55rem;
}
.pd{color:var(--muted);font-size:.86rem;line-height:1.68;margin-bottom:1.1rem;font-weight:300}

.pbot{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.ptags{display:flex;flex-wrap:wrap;gap:.4rem}
.ptag{
  font-size:.67rem;padding:3px 10px;border-radius:100px;
  background:rgba(79,142,255,.07);border:1px solid rgba(79,142,255,.14);
  color:var(--c1);letter-spacing:.04em;font-weight:500;
}
.pst{font-size:.62rem;letter-spacing:.1em;padding:4px 12px;border-radius:100px;text-transform:uppercase;font-weight:700}
.sdone{background:rgba(52,211,153,.09);color:var(--c3);border:1px solid rgba(52,211,153,.22)}

.plinks{display:flex;gap:.6rem}
.plink{
  display:flex;align-items:center;gap:5px;color:var(--muted);
  text-decoration:none;font-size:.75rem;padding:.45rem .9rem;border-radius:8px;
  border:1px solid var(--glass-b);background:var(--glass);
  transition:all .25s;font-weight:500;
}
.plink:hover{color:var(--text);border-color:rgba(79,142,255,.35);background:rgba(79,142,255,.08)}

/* ═══════════════════════════════════════════
   CONTACT
═══════════════════════════════════════════ */
.ctc{
  position:relative;z-index:2;max-width:1200px;margin:0 auto 9rem;
  background:var(--glass);border:1px solid var(--glass-b);border-radius:28px;
  padding:6rem;overflow:hidden;
}
.ctc::before{
  content:'';position:absolute;top:-300px;right:-200px;width:700px;height:700px;
  background:radial-gradient(circle,rgba(79,142,255,.08),transparent 60%);pointer-events:none;
}
.ctc::after{
  content:'';position:absolute;bottom:-250px;left:-150px;width:600px;height:600px;
  background:radial-gradient(circle,rgba(167,139,250,.07),transparent 60%);pointer-events:none;
}
.ctc-in{position:relative;z-index:1}
.cbig{
  font-family:'Syne',sans-serif;font-size:clamp(2.8rem,7vw,5.5rem);
  font-weight:800;letter-spacing:-.05em;margin-bottom:1.5rem;line-height:.95;
}
.csub{color:var(--muted);font-size:.95rem;max-width:400px;line-height:1.75;margin-bottom:3rem;font-weight:300}

.clinks{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:3.5rem}
.clink{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.035);border:1px solid var(--glass-b);
  border-radius:14px;padding:.85rem 1.5rem;
  text-decoration:none;color:var(--muted);font-size:.83rem;font-weight:500;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),border-color .2s,color .2s,background .2s;
}
.clink:hover{
  transform:translateY(-4px);border-color:rgba(79,142,255,.4);
  color:var(--text);background:rgba(79,142,255,.08);
}

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
footer{
  position:relative;z-index:2;max-width:1200px;margin:0 auto;
  padding:2.5rem 5rem;border-top:1px solid var(--glass-b);
  display:flex;align-items:center;justify-content:space-between;
}
.fl{font-family:'Syne',sans-serif;font-size:.95rem;font-weight:800;letter-spacing:-.02em}
.fl em{font-style:normal;color:var(--c1)}
.fc{font-size:.7rem;color:var(--muted)}

/* ═══════════════════════════════════════════
   SCROLL-REVEAL ANIMATIONS
═══════════════════════════════════════════ */
.rv{opacity:0;transform:translateY(55px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.rv-l{opacity:0;transform:translateX(-65px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.rv-r{opacity:0;transform:translateX(65px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.rv-scale{opacity:0;transform:scale(.88);transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1)}
.rv-rot{
  opacity:0;transform:translateY(40px) rotateX(18deg);
  transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1);
  transform-style:preserve-3d;
}

.rv.in,.rv-l.in,.rv-r.in,.rv-scale.in,.rv-rot.in{opacity:1!important;transform:none!important}

.d1{transition-delay:.08s!important}
.d2{transition-delay:.17s!important}
.d3{transition-delay:.26s!important}
.d4{transition-delay:.35s!important}
.d5{transition-delay:.44s!important}
.d6{transition-delay:.53s!important}

/* ═══════════════════════════════════════════
   KEYFRAMES
═══════════════════════════════════════════ */
@keyframes aup   {from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:translateY(0)}}
@keyframes afin  {from{opacity:0}to{opacity:1}}
@keyframes shim  {0%{background-position:0%}100%{background-position:300%}}
@keyframes awh   {0%{opacity:1;transform:translateY(0)}75%{opacity:0;transform:translateY(12px)}100%{opacity:0}}
@keyframes flt   {0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media(max-width:1024px){
  nav{padding:1.5rem 3rem}
  nav.on{padding:1rem 3rem}
  .wrap{padding:7rem 3rem}
  .psec{padding:0 3rem 7rem}
  .ctc{padding:4rem 3.5rem;margin:0 3rem 7rem}
  footer{padding:2rem 3rem}
  .about-g{gap:4rem}
}

@media(max-width:768px){
  nav{padding:1.2rem 1.5rem}
  nav.on{padding:.9rem 1.5rem}
  .nav-links{display:none}
  .ham{display:flex}
  .wrap{padding:5rem 1.5rem}
  .psec{padding:0 1.5rem 5rem}
  .about-g{grid-template-columns:1fr;gap:2.5rem}
  #sc{width:min(80vw,280px);height:min(80vw,280px);margin:0 auto}
  .ftag{display:none}
  .skill-row{grid-template-columns:1fr}
  .skill-item:nth-child(odd){border-right:none;padding-right:0}
  .skill-item:nth-child(even){padding-left:0}
  .skill-item{border-bottom:1px solid var(--glass-b)}
  .ph-title{font-size:clamp(1.9rem,6vw,3rem)}
  .ctc{padding:3rem 1.5rem;margin:0 1.5rem 5rem;border-radius:20px}
  footer{padding:2rem 1.5rem;flex-direction:column;gap:.75rem;text-align:center}
  .hscroll{display:none}
}

@media(max-width:480px){
  .htitle{font-size:clamp(2.4rem,11vw,4.4rem);line-height:1}
  .hero{padding:6rem 1.25rem 3rem}
  .pc{padding:1.6rem}
  .pt{font-size:1.15rem}
  .ctc{padding:2.5rem 1.25rem}
  .cbig{font-size:clamp(2.2rem,9vw,4rem)}
  .sk-bar-wrap{display:none}
}