/* ==========================================================
   HANSAKA — Portfolio
   Palette (from Figma materials):
   --ink:    #050507  near-black
   --navy:   #0a0a1f  deep navy
   --violet: #8b5cf6  accent purple
   --grey:   #c4c6d0  silver grey
   --white:  #ffffff
   Type: Cinzel (display) · Poppins (body)
   ========================================================== */

:root{
  --ink:#050507;
  --navy:#0a0a1f;
  --navy-2:#10102e;
  --violet:#8b5cf6;
  --violet-deep:#7c3aed;
  --grey:#c4c6d0;
  --white:#ffffff;
  --thread:rgba(199,202,255,.35);
  --card:rgba(255,255,255,.03);
  --radius:14px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Poppins',sans-serif;
  font-weight:300;
  color:var(--grey);
  background:
    radial-gradient(1200px 700px at 85% -10%, #181842 0%, transparent 60%),
    radial-gradient(900px 600px at -10% 110%, #14143a 0%, transparent 55%),
    linear-gradient(160deg, var(--ink) 0%, var(--navy) 55%, #0d0d2e 100%);
  background-attachment:fixed;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}

.container{width:min(1180px,92%);margin-inline:auto}
.section{position:relative;padding:110px 0}
.center{text-align:center}
.accent{color:var(--violet)}
.serif{font-family:'Cinzel',serif}

/* ---------- typography ---------- */
.eyebrow{
  font-size:.8rem;letter-spacing:.45em;text-transform:uppercase;
  color:var(--white);font-weight:400;margin-bottom:14px;
}
.eyebrow.underlined{color:var(--violet)}
.eyebrow.underlined::after{
  content:"";display:block;width:64px;height:1px;background:var(--violet);
  margin:10px auto 0;box-shadow:0 0 8px var(--violet);
}
.eyebrow.line-after{display:flex;align-items:center;gap:18px}
.eyebrow.line-after::after{
  content:"";flex:0 0 90px;height:1px;
  background:linear-gradient(90deg,var(--violet),transparent);
}
.title-xl{
  font-family:'Cinzel',serif;font-weight:500;color:var(--white);
  font-size:clamp(2.4rem,5vw,3.6rem);letter-spacing:.06em;margin-bottom:10px;
}
.title-lg{
  font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:500;color:var(--white);
  letter-spacing:.06em;margin-bottom:16px;
}
.subtitle{
  font-size:clamp(1rem,2vw,1.3rem);letter-spacing:.18em;text-transform:uppercase;
  color:var(--white);font-weight:400;margin-bottom:24px;
}
.section-lede{letter-spacing:.12em;line-height:1.9;font-size:.92rem;margin-bottom:60px}
.body-copy{letter-spacing:.14em;line-height:2.05;font-size:.92rem;margin-bottom:34px}

/* ---------- nav ---------- */
.nav-wrap{
  position:sticky;top:0;z-index:50;
  background:rgba(5,5,10,.78);backdrop-filter:blur(12px);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.logo{
  font-family:'Cinzel',serif;font-weight:700;font-size:1.45rem;color:var(--grey);
  letter-spacing:.08em;text-shadow:0 0 14px rgba(139,92,246,.5);
}
.nav-links{display:flex;gap:14px}
.nav-link{
  display:inline-block;padding:9px 26px;font-size:.82rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--grey);font-weight:400;
  border:1px solid transparent;border-radius:8px;
  border-bottom:1px solid var(--thread);
  transition:.3s;
  position:relative;
}
.nav-link:hover{color:var(--white)}
.nav-link.active{
  color:var(--white);
  border:1px solid rgba(139,92,246,.45);
  background:
    radial-gradient(60% 120% at 50% 0%, rgba(139,92,246,.22), transparent 70%);
  box-shadow:0 0 18px rgba(139,92,246,.25), inset 0 0 12px rgba(139,92,246,.12);
}
.nav-thread{
  height:2px;
  background:linear-gradient(90deg,transparent, var(--thread) 8%, var(--thread) 92%, transparent);
  position:relative;filter:drop-shadow(0 0 4px rgba(199,202,255,.5));
}
.nav-thread::before,.nav-thread::after{
  content:"✦";position:absolute;top:-9px;color:#dfe1ff;font-size:13px;
  text-shadow:0 0 10px #8b5cf6;
}
.nav-thread::before{left:4%}
.nav-thread::after{right:4%}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:8px}
.nav-toggle span{width:24px;height:2px;background:var(--grey);transition:.3s}

@media (max-width:820px){
  .nav-links.open ~ * {
    pointer-events:none;
  }
  .nav-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle.active span:nth-child(2){opacity:0}
  .nav-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:14px;
  padding:16px 36px;border-radius:999px;
  font-size:.82rem;letter-spacing:.32em;text-transform:uppercase;font-weight:400;
  color:var(--white);transition:.3s;cursor:pointer;
}
.btn-ico{
  display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--white);color:#0a0a1f;font-size:.95rem;font-weight:600;
}
.btn-outline{
  border:1px solid rgba(139,92,246,.5);background:rgba(139,92,246,.05);
}
.btn-outline:hover{box-shadow:0 0 24px rgba(139,92,246,.35);background:rgba(139,92,246,.12)}
.btn-fill{
  border:0;background:linear-gradient(95deg,#6d28d9 0%, #2e1065 100%);
  box-shadow:0 8px 26px rgba(109,40,217,.35);
}
.btn-fill:hover{filter:brightness(1.2);box-shadow:0 8px 34px rgba(139,92,246,.5)}

/* ---------- hero ---------- */
.hero{min-height:calc(100vh - 76px);display:flex;align-items:center;overflow:hidden}
.hero-inner{position:relative;z-index:2;max-width:640px;margin-left:max(4%, calc((100% - 1180px)/2 + 0px))}
.hero-name{
  font-family:'Cinzel',serif;font-weight:500;color:var(--white);
  font-size:clamp(3rem,8.5vw,6rem);letter-spacing:.12em;line-height:1.05;
  text-shadow:0 0 40px rgba(139,92,246,.35);
  margin:6px 0 18px;
}
.hero-role{
  font-family:'Cinzel',serif;font-weight:400;color:var(--grey);
  font-size:clamp(1rem,2.4vw,1.6rem);letter-spacing:.16em;margin-bottom:22px;
}
.hero-tagline{letter-spacing:.16em;line-height:1.9;font-size:.95rem;margin-bottom:42px}
.hero-actions{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:54px}

.socials{display:flex;align-items:center;gap:0}
.socials a{
  display:inline-flex;align-items:center;color:var(--grey);opacity:.85;transition:.3s;
}
.socials a svg{width:28px;height:28px}
.socials a:hover{color:var(--violet);opacity:1;transform:translateY(-3px)}
.socials a + a{margin-left:22px;padding-left:22px;border-left:1px solid rgba(196,198,208,.25)}

.hero-web{
  position:absolute;right:-4%;top:50%;transform:translateY(-50%);
  width:min(58vw,720px);aspect-ratio:1;z-index:1;pointer-events:none;
}
.web-svg{width:100%;height:100%}
.spider{animation:spiderSway 7s ease-in-out infinite;transform-origin:300px 0}
@keyframes spiderSway{
  0%,100%{transform:rotate(0deg) translateY(0)}
  50%{transform:rotate(1.4deg) translateY(10px)}
}
.float-tag{
  position:absolute;padding:10px 26px;border-radius:999px;
  border:1px solid rgba(196,198,208,.35);color:var(--grey);
  font-size:.8rem;letter-spacing:.28em;background:rgba(5,5,10,.4);
  animation:floatTag 6s ease-in-out infinite;
}
.tag-code{top:24%;right:14%}
.tag-design{top:10%;left:8%;animation-delay:-2s}
.tag-creativity{bottom:16%;right:26%;animation-delay:-4s}
@keyframes floatTag{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* ---------- about ---------- */
.about-grid{
  display:grid;grid-template-columns:minmax(280px,430px) 1fr;
  gap:clamp(40px,6vw,90px);align-items:center;
}
.about-photo{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.85);
  padding:0;box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 50px rgba(139,92,246,.12);
}
.about-photo img{width:100%;height:auto}
.skill-chips{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:40px}
.skill-chips li{
  display:flex;align-items:center;gap:12px;
  padding:13px 30px;border-radius:10px;
  border:1px solid rgba(139,92,246,.45);
  background:linear-gradient(180deg, rgba(139,92,246,.10), rgba(10,10,31,.4));
  box-shadow:3px 4px 0 rgba(139,92,246,.35);
  font-family:'Cinzel',serif;font-size:.8rem;letter-spacing:.22em;color:var(--white);
  transition:.3s;
}
.skill-chips li:hover{transform:translateY(-3px);box-shadow:3px 7px 0 rgba(139,92,246,.5)}
.skill-chips img{width:20px;height:20px}

/* corner web decoration */
.corner-web{
  position:absolute;top:0;right:0;width:220px;height:220px;opacity:.5;pointer-events:none;
  background:
    repeating-conic-gradient(from 180deg at 100% 0%, transparent 0deg 14deg, var(--thread) 14deg 14.6deg, transparent 14.6deg 28deg);
  -webkit-mask:radial-gradient(circle at 100% 0%, black 0 65%, transparent 72%);
          mask:radial-gradient(circle at 100% 0%, black 0 65%, transparent 72%);
}
.corner-web::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 100% 0%, transparent 28%, var(--thread) 29%, transparent 30%),
    radial-gradient(circle at 100% 0%, transparent 46%, var(--thread) 47%, transparent 48%),
    radial-gradient(circle at 100% 0%, transparent 62%, var(--thread) 63%, transparent 64%);
}
.corner-web.flip{right:auto;left:0;transform:scaleX(-1)}

/* ---------- work ---------- */
.hex-grid{
    display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,4vw,60px);align-items:center;margin-bottom:30px;
}
/* ---------- horizontal project carousel ---------- */
.project-track-wrap{
  position:relative;
  margin-bottom:10px;
  overflow:hidden;
  width: 100%;
  margin-left:0;
}

.project-track{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  gap:28px;
  overflow-x:scroll;
  overflow-y:visible;
  padding:24px 12px 32px;
  scrollbar-width:none;
  user-select:none;
  -webkit-overflow-scrolling:touch;
  background:rgba(139,92,246,.03);
  border-top:1px solid rgba(139,92,246,.12);
  border-bottom:1px solid rgba(139,92,246,.12);
}
.project-track::-webkit-scrollbar{display:none}

.project-track::-webkit-scrollbar{display:none}
.project-track.is-dragging{cursor:grabbing}
.project-track-wrap::before,
.project-track-wrap::after{
  content:"";position:absolute;top:0;bottom:28px;width:60px;
  pointer-events:none;z-index:2;
}
.project-track-wrap::before{
  left:0;
  background:linear-gradient(90deg,var(--navy),transparent);
}
.project-track-wrap::after{
  right:0;
  background:linear-gradient(270deg,var(--navy),transparent);
}
.proj-card{
  flex:0 0 320px;
  min-width:320px;
  max-width:800px;
  display:flex;
  flex-direction:column;
  gap:0;
  border:1px solid rgba(139,92,246,.3);
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(160deg,rgba(139,92,246,.08),rgba(5,5,12,.55));
  transition:transform .4s cubic-bezier(.2,.9,.3,1), box-shadow .4s;
  opacity:1;
  transform:none;
}

.proj-card-link{
  display:flex;
  text-decoration:none;
  color:inherit;
  flex:0 0 320px;
  min-width:320px;
  max-width:320px;
  align-items:stretch;
}
.proj-card-link .proj-card{
  flex:1;
  min-width:unset;
  max-width:unset;
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
}
.proj-card-link .proj-body{
  flex:1;
}

.proj-card:hover{
  transform:translateY(-10px);
  box-shadow:0 24px 60px rgba(139,92,246,.35), 0 0 0 1px rgba(139,92,246,.5);
}
.proj-featured{
  border-color:rgba(139,92,246,.6);
  box-shadow:0 0 28px rgba(139,92,246,.2);
}
.proj-icon{
  width:100%;aspect-ratio:16/7;
  display:grid;place-items:center;
  font-size:3.2rem;
  background:radial-gradient(60% 120% at 50% 30%,#131333,#07071a);
  border-bottom:1px solid rgba(139,92,246,.25);
  overflow:hidden;
  position:relative;
}
.proj-icon img{
  width:100%;height:100%;object-fit:cover;
  opacity:.85;transition:transform .5s ease, opacity .4s;
  display:block;
}
.proj-card:hover .proj-icon img{
  transform:scale(1.06);opacity:1;
}
.proj-icon-emoji{
  font-size:3.2rem;
  position:relative;z-index:1;
}
.proj-icon-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(5,5,18,.85) 100%);
  pointer-events:none;z-index:2;
}
.muc-icon{
  font-family:'Cinzel',serif;font-weight:700;font-size:2rem;
  color:#166534;
  background:radial-gradient(60% 120% at 50% 35%,#ffffff,#d7dbe2);
  text-align:center;line-height:1.2;
}
.muc-icon span{display:block}
.muc-icon small{font-size:.75rem;letter-spacing:.32em;display:block}
.proj-body{padding:22px 24px 14px;flex:1;display:flex;flex-direction:column;gap:10px}
.proj-tag{
  font-size:.7rem;letter-spacing:.35em;text-transform:uppercase;
  color:var(--violet);font-weight:400;
}
.proj-body h3{
  font-size:1.1rem;font-weight:500;letter-spacing:.14em;color:var(--white);
}
.proj-body p{font-size:.84rem;letter-spacing:.07em;line-height:1.9;flex:1}
.proj-foot{
  padding:14px 24px 20px;
  display:flex;align-items:center;justify-content:space-between;
  border-top:1px solid rgba(139,92,246,.15);
}
.proj-status{
  font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;
  padding:5px 14px;border-radius:999px;font-weight:400;
}
.status-done{background:rgba(34,197,94,.12);color:#4ade80;border:1px solid rgba(34,197,94,.3)}
.status-wip{background:rgba(251,191,36,.1);color:#fbbf24;border:1px solid rgba(251,191,36,.3)}
.status-soon{background:rgba(139,92,246,.1);color:var(--violet);border:1px solid rgba(139,92,246,.3)}
.proj-link{
  font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--violet);opacity:.85;transition:.25s;
}
.proj-link:hover{opacity:1;text-shadow:0 0 10px rgba(139,92,246,.7)}
.proj-coming-soon{opacity:.6;border-style:dashed}
.proj-coming-soon:hover{opacity:.9}
.track-nav{
  display:flex;align-items:center;justify-content:center;gap:18px;
  margin-top:4px;padding-bottom:10px;
}
.track-btn{
  width:38px;height:38px;border-radius:50%;border:1px solid rgba(139,92,246,.4);
  background:rgba(139,92,246,.08);color:var(--grey);cursor:pointer;
  font-size:1.1rem;line-height:1;transition:.25s;
  display:grid;place-items:center;
}
.track-btn:hover{border-color:var(--violet);color:var(--white);box-shadow:0 0 14px rgba(139,92,246,.3)}
.track-dots{display:flex;gap:8px;align-items:center}
.track-dot{
  width:7px;height:7px;border-radius:50%;
  background:rgba(139,92,246,.3);border:1px solid rgba(139,92,246,.4);
  transition:.3s;cursor:pointer;
}
.track-dot.active{background:var(--violet);box-shadow:0 0 8px var(--violet);transform:scale(1.2)}

.ground-web{
  height:220px;margin:40px 0 30px;opacity:.55;pointer-events:none;
  background:
    radial-gradient(120% 200% at 50% 0%, transparent 30%, rgba(124,58,237,.16) 31%, transparent 33%),
    radial-gradient(120% 200% at 50% 0%, transparent 48%, rgba(124,58,237,.16) 49%, transparent 51%),
    radial-gradient(120% 200% at 50% 0%, transparent 66%, rgba(124,58,237,.16) 67%, transparent 69%),
    repeating-conic-gradient(from 150deg at 50% -40%, transparent 0deg 9deg, rgba(124,58,237,.20) 9deg 9.5deg, transparent 9.5deg 18deg),
    radial-gradient(60% 120% at 50% 0%, rgba(124,58,237,.25), transparent 70%);
}

/* ---------- timeline ---------- */
.experience-block{margin-top:20px}
.timeline{
  max-width:760px;margin:0 auto;position:relative;padding-left:42px;
}
.timeline::before{
  content:"";position:absolute;left:8px;top:6px;bottom:6px;width:1px;
  background:linear-gradient(180deg,var(--violet),transparent 95%);
  box-shadow:0 0 8px rgba(139,92,246,.6);
}
.t-item{position:relative;padding-bottom:48px}
.t-item:last-child{padding-bottom:0}
.t-dot{
  position:absolute;left:-39px;top:7px;width:13px;height:13px;border-radius:50%;
  background:var(--navy);border:2px solid var(--violet);
  box-shadow:0 0 12px rgba(139,92,246,.8);
}
.t-date{
  font-size:.75rem;letter-spacing:.3em;color:var(--violet);text-transform:uppercase;
}
.t-item h3{color:var(--white);font-weight:500;letter-spacing:.1em;margin:8px 0 4px;font-size:1.05rem}
.t-org{font-size:.82rem;letter-spacing:.14em;color:var(--grey);opacity:.8;margin-bottom:10px}
.t-item p{font-size:.86rem;letter-spacing:.08em;line-height:1.9}

/* ---------- contact ---------- */
.contact-grid{
  display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(40px,6vw,80px);
  max-width:1000px;margin-inline:auto;
}
.contact-cards{display:flex;flex-direction:column;gap:22px}
.c-card{
  display:flex;align-items:center;gap:20px;
  padding:22px 26px;border-radius:var(--radius);
  border:1px solid rgba(139,92,246,.35);background:var(--card);
  font-size:.88rem;letter-spacing:.08em;line-height:1.7;transition:.3s;
}
.c-card strong{color:var(--white);font-weight:500;letter-spacing:.16em}
a.c-card:hover{border-color:var(--violet);box-shadow:0 0 22px rgba(139,92,246,.25);transform:translateY(-3px)}
.c-ico{
  flex:0 0 46px;height:46px;display:grid;place-items:center;border-radius:50%;
  background:rgba(139,92,246,.15);color:var(--violet);font-size:1.25rem;
  border:1px solid rgba(139,92,246,.4);
}
.contact-cards .socials{margin-top:10px}

.contact-form{
  display:flex;flex-direction:column;gap:20px;
  padding:34px;border-radius:18px;
  border:1px solid rgba(139,92,246,.3);
  background:linear-gradient(170deg, rgba(139,92,246,.07), rgba(5,5,12,.5));
  box-shadow:0 24px 60px rgba(0,0,0,.4);
}
.contact-form label{
  display:flex;flex-direction:column;gap:9px;
  font-size:.74rem;letter-spacing:.3em;text-transform:uppercase;color:var(--white);
}
.contact-form input,.contact-form textarea{
  font-family:'Poppins',sans-serif;font-size:.9rem;letter-spacing:.06em;
  padding:14px 16px;color:var(--white);
  background:rgba(5,5,12,.6);border:1px solid rgba(196,198,208,.2);border-radius:10px;
  outline:none;transition:.3s;resize:vertical;
}
.contact-form input:focus,.contact-form textarea:focus{
  border-color:var(--violet);box-shadow:0 0 14px rgba(139,92,246,.3);
}
.contact-form .btn{justify-content:center}

/* ---------- footer ---------- */
.footer{padding-bottom:40px;text-align:center}
.footer p{margin-top:34px;font-size:.78rem;letter-spacing:.26em;opacity:.7}

/* ---------- reveal animation ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- focus & motion ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--violet);outline-offset:3px;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* ---------- responsive ---------- */
@media (max-width: 1020px){
  .hero-web{opacity:.4;right:-22%}
  .hex-grid{grid-template-columns:1fr;gap:50px}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width: 820px){
  .about-grid{grid-template-columns:1fr}
  .about-photo{max-width:380px;margin-inline:auto}
  .section{padding:80px 0}
  .nav-toggle{display:flex}
  .nav-links{
    position:fixed;
    top:74px;left:0;right:0;
    flex-direction:column;
    align-items:center;
    gap:8px;
    background:rgba(5,5,12,.98);
    backdrop-filter:blur(50px);
    -webkit-backdrop-filter:blur(16px);
    padding:26px 0 34px;
    transform:translateY(-130%);
    transition:.4s;
    border-bottom:1px solid var(--thread);
    z-index:49;
    pointer-events:none;
  }
  .nav-links.open{
    transform:translateY(0);
    pointer-events:all;
  }
  .float-tag{display:none}
  .hero-inner{margin-left:4%}
}

/* ==========================================================
   LEVEL-UP: advanced animations
   ========================================================== */

/* ---------- preloader ---------- */
#preloader{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;align-content:center;gap:26px;
  background:radial-gradient(800px 500px at 50% 40%, #14143a, var(--ink));
  transition:opacity .7s ease, visibility .7s;
}
#preloader.done{opacity:0;visibility:hidden}
.loader-web{width:110px;height:110px;animation:loaderSpin 3.5s linear infinite;filter:drop-shadow(0 0 12px rgba(139,92,246,.7))}
.lw-ring{stroke-dasharray:320;stroke-dashoffset:320;animation:ringDraw 1.6s ease forwards}
.lw-ring:nth-child(2){animation-delay:.25s}
.lw-ring:nth-child(3){animation-delay:.5s}
@keyframes ringDraw{to{stroke-dashoffset:0}}
@keyframes loaderSpin{to{transform:rotate(360deg)}}
.loader-text{
  font-family:'Cinzel',serif;letter-spacing:.6em;color:var(--white);font-size:1rem;
  text-indent:.6em;animation:loaderPulse 1.6s ease-in-out infinite;
}
@keyframes loaderPulse{0%,100%{opacity:.5}50%{opacity:1;text-shadow:0 0 18px rgba(139,92,246,.9)}}

/* ---------- particle web canvas ---------- */
#webfield{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55;
}
main,.nav-wrap,.footer{position:relative;z-index:1}

/* ---------- hero entrance ---------- */
.hero-name .ch{
  display:inline-block;opacity:0;transform:translateY(40px) rotateX(60deg);
  animation:chIn .7s cubic-bezier(.2,.9,.3,1.2) forwards;
  animation-delay:calc(var(--i) * 90ms + 1.1s);
}
@keyframes chIn{to{opacity:1;transform:none}}
.hero .reveal{transition-delay:1.4s}
.hero .reveal:nth-of-type(3){transition-delay:1.55s}
.hero-tagline.reveal{transition-delay:1.7s}
.hero-actions.reveal{transition-delay:1.85s}
.hero .socials.reveal{transition-delay:2s}

/* web draws itself */
.web-svg line,.web-svg path{ stroke-dashoffset:0 }
.draw-in line,.draw-in path{
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  animation:webDraw 1.4s ease forwards;animation-delay:var(--d);
}
@keyframes webDraw{to{stroke-dashoffset:0}}

/* spider drops down on its silk */
.spider{
  animation:spiderDrop 1.8s cubic-bezier(.34,1.45,.45,1) .9s backwards, spiderSway 7s ease-in-out 2.7s infinite;
}
@keyframes spiderDrop{
  0%{transform:translateY(-560px)}
  100%{transform:translateY(0)}
}

/* ---------- scroll spider ---------- */
#scroll-spider{
  position:fixed;top:0;right:34px;z-index:60;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;
}
.ss-thread{
  width:1px;height:0;
  background:linear-gradient(180deg,transparent,var(--thread) 30%);
  box-shadow:0 0 6px rgba(199,202,255,.6);
}
.ss-spider{width:34px;height:34px;filter:drop-shadow(0 0 8px rgba(139,92,246,.8));
  animation:ssWiggle 2.4s ease-in-out infinite}
@keyframes ssWiggle{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}

/* ---------- 3D tilt cards ---------- */
.tilt{perspective:900px}
.tilt .hex-frame{transform-style:preserve-3d;will-change:transform;transition:transform .18s ease-out, filter .4s}
.hex-featured .hex-frame{animation:hexPulse 3.2s ease-in-out infinite}
@keyframes hexPulse{
  0%,100%{filter:drop-shadow(0 0 26px rgba(139,92,246,.35))}
  50%{filter:drop-shadow(0 0 52px rgba(139,92,246,.65))}
}

/* ---------- magnetic buttons ---------- */
.magnetic{will-change:transform;transition:transform .25s cubic-bezier(.3,1.4,.5,1)}

/* shimmer sweep across filled buttons */
.btn-fill{position:relative;overflow:hidden}
.btn-fill::after{
  content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.25),transparent);
  transform:skewX(-20deg);animation:shimmer 3.6s ease-in-out infinite;
}
@keyframes shimmer{0%,60%{left:-80%}100%{left:140%}}

/* ---------- custom cursor ---------- */
@media (hover:hover) and (pointer:fine){
  .cursor-dot,.cursor-ring{
    position:fixed;top:0;left:0;z-index:300;pointer-events:none;border-radius:50%;
    transform:translate(-50%,-50%);
  }
  .cursor-dot{width:7px;height:7px;background:var(--violet);box-shadow:0 0 10px var(--violet)}
  .cursor-ring{
    width:38px;height:38px;border:1px solid rgba(139,92,246,.55);
    transition:width .25s,height .25s,border-color .25s,background .25s;
  }
  .cursor-ring.hovering{width:60px;height:60px;border-color:rgba(139,92,246,.9);background:rgba(139,92,246,.08)}
}

/* ---------- nav underline draw ---------- */
.nav-link::after{
  content:"";position:absolute;left:24px;right:24px;bottom:5px;height:1px;
  background:var(--violet);transform:scaleX(0);transform-origin:left;transition:transform .35s;
  box-shadow:0 0 8px var(--violet);
}
.nav-link:hover::after{transform:scaleX(1)}
.nav-link.active::after{display:none}

/* staggered skill chips */
.skill-chips li{opacity:0;transform:translateY(18px)}
.skill-chips.in li{
  animation:chipIn .55s cubic-bezier(.2,.9,.3,1.3) forwards;
  animation-delay:calc(var(--i) * 90ms);
}
@keyframes chipIn{to{opacity:1;transform:none}}

/* reduced motion: kill the fancy stuff */
@media (prefers-reduced-motion: reduce){
  #preloader{display:none}
  #webfield,#scroll-spider,.cursor-dot,.cursor-ring{display:none!important}
  .hero-name .ch,.skill-chips li{opacity:1!important;transform:none!important;animation:none!important}
}
@media (max-width:820px){
  #scroll-spider{display:none}
}