@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Inter:wght@300;400;500&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --bg: #060612;
  --bg2: #0C0C1E;
  --bg3: #111128;
  --card: #0F0F26;
  --border: rgba(139,92,246,0.15);
  --border-h: rgba(139,92,246,0.6);
  --purple: #8B5CF6;
  --pink: #EC4899;
  --orange: #F97316;
  --text: #F1F5F9;
  --text-s: #94A3B8;
  --text-m: #4B5563;
  --nav-h: 72px;
  --max-w: 1200px;
  --ease: 0.35s cubic-bezier(0.4,0,0.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;line-height:1.6;overflow-x:hidden;cursor:none}
img,video{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{border:none;background:none;cursor:none;font-family:'Inter',sans-serif}

h1,h2,h3,h4{font-family:'Syne',sans-serif;line-height:1.1}
h1{font-size:clamp(2.8rem,8vw,7rem);font-weight:800}
h2{font-size:clamp(1.8rem,4vw,3.2rem);font-weight:700}
h3{font-size:clamp(1.1rem,2vw,1.5rem);font-weight:700}

.tag{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.25em;color:var(--purple);text-transform:uppercase;display:block;margin-bottom:1rem}
.grad{background:linear-gradient(135deg,var(--purple),var(--pink),var(--orange));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.container{max-width:var(--max-w);margin:0 auto;padding:0 2rem}

/* CURSOR */
.cursor{width:8px;height:8px;background:var(--purple);border-radius:50%;position:fixed;top:0;left:0;pointer-events:none;z-index:10000;transform:translate(-50%,-50%);transition:width .2s,height .2s,background .2s;mix-blend-mode:screen}
.cursor-f{width:36px;height:36px;border:1px solid rgba(139,92,246,.4);border-radius:50%;position:fixed;top:0;left:0;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .3s,height .3s,border-color .3s}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;padding:0 2rem;z-index:1000;transition:background var(--ease),backdrop-filter var(--ease)}
.nav.scrolled{background:rgba(6,6,18,.9);backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.nav-logo{font-family:'Syne',sans-serif;font-weight:800;font-size:1.25rem;letter-spacing:.05em;transition:color var(--ease)}
.nav-logo .dot{color:var(--purple)}
.nav-logo:hover{color:var(--purple)}
.nav-links{display:flex;gap:2.5rem}
.nav-links a{font-family:'JetBrains Mono',monospace;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-s);position:relative;transition:color var(--ease)}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;background:var(--purple);transition:width var(--ease)}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-toggle{display:none;flex-direction:column;gap:5px;padding:4px;z-index:1001}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--text);transition:var(--ease)}

/* BUTTONS */
.btn-p{display:inline-flex;align-items:center;gap:.75rem;padding:.9rem 2.2rem;background:linear-gradient(135deg,var(--purple),var(--pink));color:#fff;font-family:'Syne',sans-serif;font-weight:700;font-size:.88rem;letter-spacing:.05em;border-radius:4px;transition:var(--ease);position:relative;overflow:hidden}
.btn-p::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--pink),var(--orange));opacity:0;transition:opacity var(--ease)}
.btn-p:hover::before{opacity:1}
.btn-p span,.btn-p svg{position:relative;z-index:1}
.btn-p:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(139,92,246,.35)}
.btn-s{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 2rem;border:1px solid var(--border-h);color:var(--purple);font-family:'Syne',sans-serif;font-weight:600;font-size:.88rem;border-radius:4px;transition:var(--ease)}
.btn-s:hover{background:rgba(139,92,246,.1);transform:translateY(-2px)}
.btn-g{color:var(--text-s);font-family:'JetBrains Mono',monospace;font-size:.82rem;letter-spacing:.1em;transition:color var(--ease)}
.btn-g:hover{color:var(--purple)}

/* HERO */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
#particleCanvas{position:absolute;inset:0;z-index:0}
.hero-content{position:relative;z-index:1;text-align:center;padding:0 2rem;max-width:900px}
.hero-pretag{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.3em;color:var(--text-m);margin-bottom:2rem;opacity:0;animation:fadeUp .8s .3s forwards}
.hero-name{margin-bottom:1.5rem;opacity:0;animation:fadeUp .8s .6s forwards}
.hero-sub{font-size:clamp(.85rem,2vw,1.05rem);color:var(--text-s);letter-spacing:.18em;opacity:0;animation:fadeUp .8s .9s forwards}
.hero-sub-en{font-family:'JetBrains Mono',monospace;font-size:.75rem;color:var(--text-m);letter-spacing:.2em;margin-top:.5rem;margin-bottom:2.5rem;opacity:0;animation:fadeUp .8s 1.1s forwards}
.hero-cta{opacity:0;animation:fadeUp .8s 1.3s forwards}
.hero-scroll{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.75rem;z-index:1;opacity:0;animation:fadeIn 1s 2s forwards}
.hero-scroll span{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.3em;color:var(--text-m)}
.scroll-line{width:1px;height:55px;background:linear-gradient(to bottom,var(--purple),transparent);animation:scrollPulse 2s infinite}

/* GLITCH */
.glitch{position:relative}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%;font-family:inherit;font-weight:inherit;font-size:inherit}
.glitch::before{color:var(--pink);clip-path:polygon(0 0,100% 0,100% 33%,0 33%);animation:glitch-t 4s infinite}
.glitch::after{color:var(--purple);clip-path:polygon(0 67%,100% 67%,100% 100%,0 100%);animation:glitch-b 4s infinite}

/* PREVIEW SECTION */
.section{padding:8rem 0}
.section-hd{margin-bottom:4rem}
.section-hd h2{margin-top:.5rem}
.works-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem}
.wcard{background:var(--card);border:1px solid var(--border);border-radius:8px;overflow:hidden;transition:var(--ease)}
.wcard:hover{border-color:var(--border-h);transform:translateY(-8px);box-shadow:0 20px 60px rgba(139,92,246,.18)}
.wcard-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg3)}
.wcard-img img,.wcard-img video{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.wcard:hover .wcard-img img,.wcard:hover .wcard-img video{transform:scale(1.06)}
.wcard-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,6,18,.9) 0%,transparent 60%);display:flex;align-items:flex-end;justify-content:space-between;padding:1.25rem;opacity:0;transition:opacity var(--ease)}
.wcard:hover .wcard-overlay{opacity:1}
.wtype{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.2em;color:var(--purple);background:rgba(139,92,246,.12);padding:.3rem .7rem;border-radius:2px;border:1px solid rgba(139,92,246,.25)}
.play-btn{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center}
.play-btn svg{width:18px;height:18px;margin-left:2px}
.wcard-body{padding:1.4rem}
.wcard-meta{display:flex;justify-content:space-between;margin-bottom:.6rem}
.wnum{font-family:'JetBrains Mono',monospace;font-size:.65rem;color:var(--purple);letter-spacing:.1em}
.wyr{font-family:'JetBrains Mono',monospace;font-size:.65rem;color:var(--text-m)}
.wcard-body h3{font-size:1.15rem;margin-bottom:.35rem}
.wcard-body p{font-size:.82rem;color:var(--text-m);margin-bottom:1.1rem}
.wlink{font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--purple);letter-spacing:.1em;transition:letter-spacing var(--ease),color var(--ease)}
.wlink:hover{color:var(--pink);letter-spacing:.2em}
.cta-wrap{text-align:center;margin-top:3.5rem}

/* IDENTITY SECTION */
.id-section{padding:8rem 0;background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.id-grid{display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:center}
.id-text h2{margin:.5rem 0 1.5rem}
.id-text p{color:var(--text-s);line-height:1.85;margin-bottom:2rem;max-width:420px}
.vgrid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.vi{aspect-ratio:1;display:flex;align-items:center;justify-content:center;text-align:center;border:1px solid var(--border);border-radius:8px;font-family:'Syne',sans-serif;font-weight:700;font-size:.95rem;line-height:1.4;color:var(--text-m);transition:var(--ease)}
.vi:hover{border-color:var(--border-h);color:var(--text);background:rgba(139,92,246,.07)}
.vi.v1:hover{color:var(--purple)}
.vi.v2:hover{color:var(--pink)}
.vi.v3:hover{color:var(--orange)}
.vi.v4:hover{color:#22D3EE}

/* PAGE HEADER */
.page-hd{padding:calc(var(--nav-h) + 5rem) 0 4rem;text-align:center}
.page-hd .tag{justify-content:center;display:flex}
.page-hd h1{font-size:clamp(2.2rem,5vw,4.5rem);margin:.5rem 0 1rem}
.page-hd p{color:var(--text-s);max-width:480px;margin:0 auto}

/* WORKS DETAIL */
.filter-bar{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:4rem}
.fbtn{padding:.5rem 1.2rem;border:1px solid var(--border);border-radius:2px;font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text-m);transition:var(--ease)}
.fbtn:hover,.fbtn.active{border-color:var(--purple);color:var(--purple);background:rgba(139,92,246,.08)}

.proj{padding:5rem 0;border-bottom:1px solid var(--border)}
.proj:last-child{border-bottom:none;padding-bottom:0}
.proj-inner{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start}
.proj-inner.rev{direction:rtl}
.proj-inner.rev>*{direction:ltr}
.proj-media{border-radius:8px;overflow:hidden;border:1px solid var(--border);position:relative}
.proj-media img,.proj-media video{width:100%;height:auto;display:block}
.proj-media video{aspect-ratio:16/9;object-fit:cover}
.proj-info .pnum{font-family:'JetBrains Mono',monospace;font-size:.65rem;color:var(--purple);letter-spacing:.2em;display:block;margin-bottom:.5rem}
.proj-info h2{font-size:clamp(1.6rem,3vw,2.4rem);margin-bottom:.5rem}
.proj-sub{font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--text-m);letter-spacing:.15em;margin-bottom:1.5rem;display:block}
.proj-desc{color:var(--text-s);line-height:1.95;font-size:.92rem;margin-bottom:.75rem}
.proj-desc+.proj-desc{margin-top:-.25rem}
.proj-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.75rem}
.ptag{padding:.28rem .75rem;background:rgba(139,92,246,.08);border:1px solid var(--border);border-radius:2px;font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.1em;color:var(--text-s);text-transform:uppercase}

/* ABOUT */
.about-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:6rem;align-items:start;padding:6rem 0}
.portrait-frame{aspect-ratio:3/4;border-radius:8px;background:var(--bg3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.portrait-bg{position:absolute;inset:0;background:linear-gradient(135deg,rgba(139,92,246,.15),rgba(236,72,153,.08));pointer-events:none}
.portrait-char{font-family:'Syne',sans-serif;font-weight:800;font-size:9rem;line-height:1;background:linear-gradient(135deg,var(--purple),var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;position:relative;z-index:1}
.portrait-mono{font-family:'JetBrains Mono',monospace;font-size:.65rem;letter-spacing:.3em;color:var(--text-m);margin-top:1rem;text-align:center;position:relative;z-index:1}
.about-info h2{margin:.5rem 0 1.5rem}
.bio{color:var(--text-s);line-height:1.95;margin-bottom:2.5rem}
.skills-label{font-family:'JetBrains Mono',monospace;font-size:.65rem;letter-spacing:.2em;color:var(--purple);margin-bottom:1.5rem;display:block;text-transform:uppercase}
.skill-item{margin-bottom:1.25rem}
.skill-hd{display:flex;justify-content:space-between;margin-bottom:.45rem}
.skill-name{font-size:.85rem}
.skill-pct{font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--text-m)}
.skill-bar{height:2px;background:var(--bg3);border-radius:2px;overflow:hidden}
.skill-fill{height:100%;background:linear-gradient(90deg,var(--purple),var(--pink));border-radius:2px;width:0;transition:width 1.2s cubic-bezier(.4,0,.2,1)}
.tl-item{display:grid;grid-template-columns:5.5rem 1fr;gap:2rem;margin-bottom:2rem;padding-bottom:2rem;border-bottom:1px solid var(--border)}
.tl-item:last-child{border-bottom:none;margin-bottom:0}
.tl-yr{font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--purple);padding-top:.15rem;line-height:1.4}
.tl-content h4{font-size:.92rem;margin-bottom:.25rem}
.tl-content p{font-size:.8rem;color:var(--text-m)}
.mb3{margin-bottom:3rem}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:6rem;padding:6rem 0}
.contact-info p{color:var(--text-s);line-height:1.85;margin-bottom:2.5rem}
.cdetail{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.5rem}
.cicon{width:40px;height:40px;border:1px solid var(--border);border-radius:4px;display:flex;align-items:center;justify-content:center;color:var(--purple);flex-shrink:0}
.cicon svg{width:17px;height:17px}
.clabel{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.2em;color:var(--text-m);text-transform:uppercase;display:block;margin-bottom:.2rem}
.cval{font-size:.88rem;color:var(--text)}
.cform{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:2.75rem}
.fg{margin-bottom:1.6rem}
.flabel{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-m);display:block;margin-bottom:.45rem;transition:color var(--ease)}
.fc{width:100%;padding:.8rem 1rem;background:var(--bg2);border:1px solid var(--border);border-radius:4px;color:var(--text);font-family:'Inter',sans-serif;font-size:.88rem;transition:border-color var(--ease),box-shadow var(--ease);resize:none}
.fc:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(139,92,246,.1)}
.fg:focus-within .flabel{color:var(--purple)}
textarea.fc{min-height:130px}
.btn-submit{width:100%;padding:.95rem;background:linear-gradient(135deg,var(--purple),var(--pink));color:#fff;font-family:'Syne',sans-serif;font-weight:700;font-size:.88rem;letter-spacing:.08em;border-radius:4px;transition:var(--ease)}
.btn-submit:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(139,92,246,.35)}
.form-ok{display:none;text-align:center;padding:2rem}
.form-ok.show{display:block}
.form-ok-icon{font-size:2.5rem;margin-bottom:1rem}
.form-ok p{color:var(--text-s);font-size:.9rem}

/* FOOTER */
.footer{border-top:1px solid var(--border);padding:2.5rem 0}
.footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.5rem}
.footer-logo{font-family:'Syne',sans-serif;font-weight:800;font-size:1.05rem;letter-spacing:.05em}
.footer-copy{font-family:'JetBrains Mono',monospace;font-size:.62rem;color:var(--text-m);letter-spacing:.08em}
.footer-nav{display:flex;gap:1.75rem}
.footer-nav a{font-family:'JetBrains Mono',monospace;font-size:.65rem;letter-spacing:.1em;color:var(--text-m);text-transform:uppercase;transition:color var(--ease)}
.footer-nav a:hover{color:var(--purple)}

/* ANIMATIONS */
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scrollPulse{0%,100%{opacity:1;transform:scaleY(1)}50%{opacity:.3;transform:scaleY(.7)}}
@keyframes glitch-t{0%,100%{transform:translate(0)}2%{transform:translate(-3px,1px)}4%{transform:translate(3px,-1px)}6%,90%{transform:translate(0)}92%{transform:translate(2px,-2px)}94%{transform:translate(-2px,2px)}}
@keyframes glitch-b{0%,100%{transform:translate(0)}2%{transform:translate(3px,2px)}4%{transform:translate(-3px,-2px)}6%,90%{transform:translate(0)}92%{transform:translate(-2px,1px)}94%{transform:translate(2px,-1px)}}

.reveal{opacity:0;transform:translateY(35px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:translateY(0)}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}

/* RESPONSIVE */
@media(max-width:1024px){
  .works-grid{grid-template-columns:1fr 1fr}
  .id-grid,.about-grid,.contact-grid{grid-template-columns:1fr;gap:4rem}
  .proj-inner{grid-template-columns:1fr;gap:3rem}
  .proj-inner.rev{direction:ltr}
}
@media(max-width:768px){
  :root{--nav-h:60px}
  .nav-links{position:fixed;top:0;right:0;width:100%;height:100vh;background:rgba(6,6,18,.97);flex-direction:column;align-items:center;justify-content:center;gap:3rem;transform:translateX(100%);transition:transform var(--ease);z-index:999}
  .nav-links.open{transform:translateX(0)}
  .nav-links a{font-size:1.1rem}
  .nav-toggle{display:flex}
  .nav-toggle.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
  .nav-toggle.open span:nth-child(2){opacity:0}
  .nav-toggle.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
  .works-grid{grid-template-columns:1fr}
  .cform{padding:2rem 1.25rem}
  .footer-inner{flex-direction:column;text-align:center}
  .cursor,.cursor-f{display:none}
  body{cursor:auto}
  button{cursor:pointer}
}
@media(max-width:480px){
  .container{padding:0 1.25rem}
  .vgrid{grid-template-columns:1fr 1fr}
  .proj-tags{gap:.4rem}
}

/* ════════════════════════════
   PAGE TRANSITION CURTAIN
   Dark overlay slides up on enter, down on exit
════════════════════════════ */
.pt{
  position:fixed;inset:0;
  background:linear-gradient(160deg,#0C0C1E 0%,#140826 55%,#060612 100%);
  z-index:9998;pointer-events:none;
  transform:translateY(0);
  transition:transform .7s cubic-bezier(.77,0,.18,1);
}
.pt::after{
  content:'';
  position:absolute;bottom:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--purple),var(--pink),var(--orange));
  transition:opacity .3s;
}
.pt.pt-out{transform:translateY(-100%)}
.pt.pt-out::after{opacity:0}

/* ════════════════════════════
   HERO SPOTLIGHT
   Radial glow tracks cursor position via CSS vars
════════════════════════════ */
.hero{--mx:50%;--my:50%}
.hero::after{
  content:'';
  position:absolute;inset:0;
  background:radial-gradient(700px circle at var(--mx) var(--my),rgba(139,92,246,.1),transparent 65%);
  pointer-events:none;z-index:1;
  opacity:0;transition:opacity .5s ease;
}
.hero.spotlight-on::after{opacity:1}

/* scanlines texture on hero */
.hero::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.018) 3px,rgba(0,0,0,.018) 4px);
  pointer-events:none;z-index:2;
}
.hero-content{position:relative;z-index:3}
.hero-scroll{z-index:3}
#particleCanvas{z-index:0}

/* ════════════════════════════
   ENHANCED SCROLL REVEAL
   clip-path variant for headings, slide+fade for cards
════════════════════════════ */
.reveal{
  opacity:0;
  transform:translateY(38px);
  transition:opacity .85s cubic-bezier(.4,0,.2,1),transform .85s cubic-bezier(.4,0,.2,1);
}
.reveal.in{opacity:1;transform:translateY(0)}
.d1{transition-delay:.1s}.d2{transition-delay:.22s}.d3{transition-delay:.34s}

/* works-grid stagger: each card comes in from bottom with scaling */
.works-grid .wcard{
  opacity:0;
  transform:translateY(48px) scale(.97);
  transition:opacity .9s cubic-bezier(.4,0,.2,1),transform .9s cubic-bezier(.4,0,.2,1),
             border-color var(--ease),box-shadow var(--ease);
}
.works-grid .wcard.in{opacity:1;transform:translateY(0) scale(1)}

/* ════════════════════════════
   CARD PERSPECTIVE TILT
   preserve-3d so body floats above the card surface
════════════════════════════ */
.wcard{transform-style:preserve-3d}
.wcard-body{transform:translateZ(18px)}
.wcard-img{transform:translateZ(0)}

/* ════════════════════════════
   MAGNETIC BUTTON
   override transition to let JS apply elastic snap-back
════════════════════════════ */
.btn-p,.btn-s{will-change:transform}

/* ════════════════════════════
   PROJ MEDIA OVERFLOW CLIP
   contain the parallax shift inside the box
════════════════════════════ */
.proj-media{overflow:hidden}

/* ════════════════════════════
   PORTRAIT PULSE RING (About page)
════════════════════════════ */
.portrait-frame::after{
  content:'';
  position:absolute;inset:-1px;
  border-radius:8px;
  background:linear-gradient(135deg,rgba(139,92,246,.3),rgba(236,72,153,.15),rgba(249,115,22,.1),rgba(139,92,246,.3));
  background-size:300% 300%;
  animation:gradientShift 6s ease infinite;
  pointer-events:none;
  z-index:0;
}
.portrait-frame>*{position:relative;z-index:1}
@keyframes gradientShift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* ════════════════════════════
   TAG SHIMMER
════════════════════════════ */
.tag{position:relative;overflow:hidden;display:inline-block}
.tag::after{
  content:'';
  position:absolute;top:0;left:-80%;
  width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(139,92,246,.4),transparent);
  animation:tagShimmer 4s infinite 1.5s;
  pointer-events:none;
}
@keyframes tagShimmer{0%{left:-80%}60%,100%{left:130%}}

/* ════════════════════════════
   FOOTER LOGO GRADIENT HOVER
════════════════════════════ */
.footer-logo{
  transition:background-clip .5s,-webkit-background-clip .5s,-webkit-text-fill-color .5s;
  cursor:default;
}
.footer-logo:hover{
  background:linear-gradient(135deg,var(--purple),var(--pink),var(--orange));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* ════════════════════════════
   SECTION DIVIDER DRAW LINE
════════════════════════════ */
.draw-line{
  display:block;height:1px;width:0;
  background:linear-gradient(90deg,var(--purple),rgba(139,92,246,0));
  transition:width 1.2s cubic-bezier(.4,0,.2,1);
  margin-top:1rem;
}
.draw-line.in{width:100%}

/* ════════════════════════════
   ABOUT PORTRAIT FLOAT
════════════════════════════ */
.portrait-frame{animation:gentleFloat 5s ease-in-out infinite}
@keyframes gentleFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}

/* ════════════════════════════
   VI GRID — staggered pop-in
════════════════════════════ */
.vgrid .vi{
  opacity:0;transform:scale(.9) translateY(20px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.23,1,.32,1),
             border-color var(--ease),color var(--ease),background var(--ease);
}
.vgrid.in .vi:nth-child(1){opacity:1;transform:none;transition-delay:.0s}
.vgrid.in .vi:nth-child(2){opacity:1;transform:none;transition-delay:.1s}
.vgrid.in .vi:nth-child(3){opacity:1;transform:none;transition-delay:.2s}
.vgrid.in .vi:nth-child(4){opacity:1;transform:none;transition-delay:.3s}

/* ════════════════════════════
   WLINK ARROW ANIMATION
════════════════════════════ */
.wlink{display:inline-flex;align-items:center;gap:.3rem}
.wlink:hover{gap:.55rem;letter-spacing:.18em}

/* ════════════════════════════
   FORM FOCUS GLOW
════════════════════════════ */
.fc:focus{
  border-color:var(--purple);
  box-shadow:0 0 0 3px rgba(139,92,246,.12),0 0 20px rgba(139,92,246,.08);
}

/* ════════════════════════════
   PTAG HOVER
════════════════════════════ */
.ptag{
  transition:border-color var(--ease),color var(--ease),background var(--ease),transform .2s ease;
}
.ptag:hover{
  border-color:var(--purple);color:var(--purple);
  background:rgba(139,92,246,.12);
  transform:translateY(-2px);
}