:root{
  --bg:#0a0a0f;
  --bg-2:#0d0d14;
  --glass-fill: rgba(255,255,255,0.045);
  --glass-fill-strong: rgba(255,255,255,0.075);
  --glass-border: rgba(255,255,255,0.09);
  --rim-hi: rgba(255,255,255,0.55);
  --violet:#8b6bff;
  --cyan:#5be8ff;
  --amber:#ffb15e;
  --text-hi:#f4f3f8;
  --text-mid:#a9a7b8;
  --text-low:#68667a;
  --spring: cubic-bezier(.2,1.1,.3,1);
  --spring-soft: cubic-bezier(.34,1.35,.4,1);
  --liquid: cubic-bezier(.16,1.32,.28,1);
  --mx: 50%; --my: 50%;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text-hi);
  font-family:'Space Grotesk', sans-serif;
  overflow-x:hidden;
  cursor:none;
  -webkit-font-smoothing:antialiased;
}
body.locked{ overflow:hidden; }
::selection{ background:var(--violet); color:#fff; }

@media (hover:none), (pointer:coarse){
  body{ cursor:auto; }
  #cursor, #cursor-trail{ display:none !important; }
}

h1,h2,h3,.display{
  font-family:'Bebas Neue', sans-serif;
  letter-spacing:0.01em;
  line-height:0.92;
  font-weight:400;
}
.mono{
  font-family:'IBM Plex Mono', monospace;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; border:none; background:none; color:inherit; }

/* ============ BACKGROUND & TEXTURE LAYERS ============ */
#bgcanvas{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; background:var(--bg);
}
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:0.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 1.2s steps(4) infinite;
}
@keyframes grainShift{
  0%{ transform:translate(0,0); } 25%{ transform:translate(-1%,1%); }
  50%{ transform:translate(1%,-1%); } 75%{ transform:translate(-1%,-1%); } 100%{ transform:translate(0,0); }
}
.scanlines{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0.035;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,0.6) 0px, transparent 1px, transparent 3px);
}
.vignette-fixed{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.5) 100%);
}

/* ============ CURSOR ============ */
#cursor{
  position:fixed; top:0; left:0; width:10px; height:10px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff, var(--cyan) 45%, var(--violet) 100%);
  box-shadow:0 0 12px rgba(139,107,255,0.9), 0 0 24px rgba(91,232,255,0.4);
  pointer-events:none; z-index:9999; transform:translate(-50%,-50%);
  transition:width .25s var(--spring), height .25s var(--spring), opacity .2s;
}
#cursor-trail{
  position:fixed; top:0; left:0; width:4px; height:4px; border-radius:50%;
  background:var(--violet); opacity:0.5; filter:blur(2px);
  pointer-events:none; z-index:9997; transform:translate(-50%,-50%);
}
body.cur-link #cursor{
  width:20px; height:20px;
  box-shadow:0 0 18px rgba(139,107,255,1), 0 0 34px rgba(91,232,255,0.5);
}
body.cur-card #cursor{
  width:26px; height:26px;
  box-shadow:0 0 22px rgba(91,232,255,1), 0 0 40px rgba(139,107,255,0.5);
}
body.cur-drag #cursor{
  width:16px; height:16px;
  background:radial-gradient(circle at 35% 30%, #fff, var(--amber) 45%, var(--violet) 100%);
  box-shadow:0 0 18px rgba(255,177,94,0.9);
}

/* ============ INTRO ============ */
#intro{
  position:fixed; inset:0; z-index:10000; background:var(--bg);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:18px;
  transition:opacity .9s ease, visibility .9s ease; overflow:hidden;
}
#intro.hide{ opacity:0; visibility:hidden; pointer-events:none; }
.intro-glass-shard{
  position:absolute; border-radius:30%; background:var(--glass-fill); border:1px solid var(--glass-border);
  backdrop-filter:blur(10px); opacity:0; animation:shardIn 1.4s var(--liquid) forwards;
}
.intro-glass-shard.s1{ width:120px; height:120px; top:20%; left:18%; animation-delay:.05s; }
.intro-glass-shard.s2{ width:80px; height:80px; bottom:22%; right:22%; animation-delay:.2s; }
.intro-glass-shard.s3{ width:60px; height:60px; top:60%; left:70%; animation-delay:.35s; }
@keyframes shardIn{
  0%{ opacity:0; transform:scale(0.4) translateY(40px) rotate(-20deg); }
  60%{ opacity:0.5; }
  100%{ opacity:0.22; transform:scale(1) translateY(0) rotate(0deg); }
}
.intro-mark{
  font-family:'Bebas Neue',sans-serif; font-size:clamp(48px,10vw,110px);
  letter-spacing:0.05em; position:relative; z-index:2;
  background:linear-gradient(120deg, var(--violet), var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 30px rgba(139,107,255,0.5));
  opacity:0; transform:scale(0.85) translateY(10px) blur(6px);
  animation:markIn 1.1s var(--spring-soft) 0.15s forwards;
}
@keyframes markIn{ to{ opacity:1; transform:scale(1) translateY(0); } }
.intro-bar{ width:220px; height:1px; background:rgba(255,255,255,0.1); position:relative; overflow:hidden; z-index:2; }
.intro-bar::after{
  content:""; position:absolute; inset:0; width:0%; background:linear-gradient(90deg,var(--violet),var(--cyan));
  animation:barFill 1.4s var(--spring) 0.3s forwards;
}
@keyframes barFill{ to{ width:100%; } }
.intro-label{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.25em; color:var(--text-low); opacity:0; animation:fadeUp .8s ease 0.6s forwards; z-index:2; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }
.intro-skip{
  position:absolute; bottom:36px; right:36px; font-family:'IBM Plex Mono',monospace; font-size:10px;
  letter-spacing:0.15em; color:var(--text-low); border:1px solid var(--glass-border); padding:8px 14px; border-radius:999px;
  opacity:0; animation:fadeUp .8s ease 1s forwards; background:var(--glass-fill); backdrop-filter:blur(10px); cursor:none; z-index:2;
}
.intro-skip:hover{ color:var(--text-hi); border-color:rgba(255,255,255,0.25); }

/* ============ LAYOUT BASE ============ */
main{ position:relative; z-index:2; }
section{ position:relative; padding:0 clamp(20px,6vw,90px); }

.wipe{
  position:relative; height:1px; margin:0 auto; max-width:1180px; overflow:visible;
}
.wipe::after{
  content:""; position:absolute; left:0; top:0; height:1px; width:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  transform:scaleX(0); transform-origin:center;
  transition:transform 1.1s var(--liquid);
}
.wipe.in::after{ transform:scaleX(1); }
.wipe.in{ box-shadow:0 0 40px 6px rgba(139,107,255,0.15); }

/* ============ GLASS SYSTEM ============ */
.glass{
  position:relative;
  background:var(--glass-fill);
  border:1px solid var(--glass-border);
  border-radius:24px;
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 0 40px rgba(255,255,255,0.02),
    0 20px 60px rgba(0,0,0,0.45);
  overflow:hidden;
  transition:box-shadow .5s var(--spring), border-color .5s, transform .6s var(--liquid);
}
.glass::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg, rgba(255,255,255,0.55), rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(139,107,255,0.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none; opacity:0.7; transition:opacity .4s;
}
.glass::after{
  content:""; position:absolute;
  width:70%; height:90%;
  left:calc(var(--mx, 50%) - 35%); top:calc(var(--my, 50%) - 45%);
  background:radial-gradient(ellipse at center, rgba(255,255,255,0.14), transparent 62%);
  pointer-events:none; transition:left .5s var(--spring), top .5s var(--spring), opacity .4s;
  opacity:0.7;
}
.glass:hover::before{ opacity:1; }
.glass:hover{ box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 0 50px rgba(255,255,255,0.03),
    0 26px 80px rgba(0,0,0,0.5), 0 0 60px -20px var(--violet);
}
/* chromatic rim fringe, revealed on hover for that "real glass edge" feel */
.edge-fringe{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:
    inset 1.4px 0 0 rgba(91,232,255,0.0),
    inset -1.4px 0 0 rgba(139,107,255,0.0);
  transition:box-shadow .5s var(--spring);
}
.glass:hover .edge-fringe{
  box-shadow:
    inset 1.4px 0.6px 0 rgba(91,232,255,0.22),
    inset -1.4px -0.6px 0 rgba(139,107,255,0.22);
}

/* ============ NAV ============ */
#nav{
  position:fixed; top:22px; left:50%; transform:translateX(-50%); z-index:500;
  display:flex; align-items:center; gap:4px; padding:8px; border-radius:999px;
  transition:padding .5s var(--spring), gap .5s var(--spring), background .5s;
}
#nav.scrolled{ padding:6px; backdrop-filter:blur(28px) saturate(180%); background:rgba(255,255,255,0.06); border:1px solid var(--glass-border); }
#nav a{
  position:relative; padding:9px 16px; border-radius:999px; font-family:'IBM Plex Mono',monospace;
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-mid);
  transition:color .3s;
}
#nav a:hover{ color:var(--text-hi); }
#nav a.active{ color:#0a0a0f; }
#nav-pill{
  position:absolute; top:8px; height:calc(100% - 16px); border-radius:999px;
  background:linear-gradient(120deg, var(--cyan), var(--violet));
  z-index:-1; transition:left .55s var(--liquid), width .55s var(--liquid);
  box-shadow:0 0 20px rgba(139,107,255,0.55);
}
.nav-logo{
  font-family:'Bebas Neue',sans-serif; font-size:16px; letter-spacing:0.08em; padding:8px 14px !important;
  color:var(--text-hi) !important; cursor:none;
}

/* ============ SOUND TOGGLE ============ */
.glass-mini{
  position:fixed; bottom:26px; left:26px; z-index:500; width:42px; height:42px; border-radius:50%;
  background:var(--glass-fill); border:1px solid var(--glass-border); backdrop-filter:blur(14px);
  display:flex; align-items:center; justify-content:center; cursor:none;
  transition:transform .35s var(--spring), border-color .3s, background .3s;
}
.glass-mini:hover{ transform:scale(1.08); border-color:var(--cyan); }
.sound-icon{ font-size:15px; color:var(--text-mid); position:absolute; transition:opacity .3s, transform .3s; }
.sound-icon[data-on]{ opacity:0; transform:scale(0.6); color:var(--cyan); }
#soundToggle[aria-pressed="true"] .sound-icon[data-off]{ opacity:0; transform:scale(0.6); }
#soundToggle[aria-pressed="true"] .sound-icon[data-on]{ opacity:1; transform:scale(1); }
@media (max-width:720px){ .glass-mini{ bottom:20px; left:20px; width:38px; height:38px; } }

/* ============ HUD ============ */
.hud{
  position:fixed; z-index:400; font-family:'IBM Plex Mono',monospace; font-size:10px;
  letter-spacing:0.12em; color:var(--text-low); pointer-events:none; opacity:0.8;
}
.hud-live{ color:var(--cyan); animation:pulse 2.4s infinite; }
#hud-tl{ top:26px; left:26px; }
#hud-tr{ top:26px; right:26px; text-align:right; }
#hud-bl{ bottom:26px; left:26px; }
#hud-br{ bottom:26px; right:26px; text-align:right; }
@media (max-width:720px){ .hud{ display:none; } }

/* ============ HERO ============ */
#hero{
  min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; position:relative;
}
.hero-depth-layer{
  position:absolute; inset:-20% -10%; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 60% 40% at 50% 40%, rgba(139,107,255,0.08), transparent 70%);
  will-change:transform;
}
.eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.3em; color:var(--cyan);
  margin-bottom:22px; opacity:0; animation:fadeUp 1s var(--spring) 0.2s forwards;
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); animation:pulse 2s infinite; }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:0.3;} }

.hero-title{
  font-size:clamp(64px, 15vw, 190px);
  background:linear-gradient(100deg, #fff 20%, var(--cyan) 45%, var(--violet) 65%, #fff 85%);
  background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 50px rgba(139,107,255,0.25));
  opacity:0; transform:translateY(24px);
  cursor:none;
}
.hero-title.in{ animation:heroIn 1.1s var(--spring-soft) forwards, shimmer 9s linear infinite 1.1s; }
@keyframes heroIn{ to{ opacity:1; transform:translateY(0); } }
@keyframes shimmer{ to{ background-position:-300% 0; } }

.hero-tagline{
  margin-top:22px; font-size:clamp(15px,2vw,20px); color:var(--text-mid); font-weight:400;
  max-width:560px; opacity:0; animation:fadeUp 1s var(--spring) 0.6s forwards;
}
.hero-cta-row{
  margin-top:44px; display:flex; gap:16px; align-items:center; opacity:0; animation:fadeUp 1s var(--spring) 0.85s forwards;
}

.btn{
  position:relative; font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.12em;
  text-transform:uppercase; padding:16px 30px; border-radius:999px; cursor:none;
  display:inline-flex; align-items:center; gap:8px;
  transition:transform .3s var(--spring), box-shadow .3s;
}
.btn-primary{
  color:#08070c; background:linear-gradient(120deg, var(--cyan), var(--violet));
  box-shadow:0 8px 30px rgba(139,107,255,0.35), inset 0 1px 0 rgba(255,255,255,0.5);
}
.btn-primary:hover{ box-shadow:0 12px 40px rgba(139,107,255,0.55), inset 0 1px 0 rgba(255,255,255,0.6); }
.btn-ghost{
  color:var(--text-hi); background:var(--glass-fill); border:1px solid var(--glass-border); backdrop-filter:blur(14px);
}
.btn-ghost:hover{ background:var(--glass-fill-strong); border-color:rgba(255,255,255,0.25); }

.scroll-cue{
  position:absolute; bottom:38px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  opacity:0; animation:fadeUp 1s ease 1.3s forwards;
}
.scroll-cue .line{ width:1px; height:40px; background:linear-gradient(to bottom, var(--cyan), transparent); position:relative; overflow:hidden; }
.scroll-cue .line::after{ content:""; position:absolute; top:-40px; left:0; width:100%; height:40px; background:linear-gradient(to bottom, transparent, #fff); animation:scrollDrop 1.8s ease-in-out infinite; }
@keyframes scrollDrop{ to{ top:40px; } }
.scroll-cue span{ font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:0.2em; color:var(--text-low); }

/* ============ SECTION COMMON ============ */
.section-wrap{ max-width:1180px; margin:0 auto; padding:130px 0; }
.section-head{ margin-bottom:52px; }
.section-num{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--violet); letter-spacing:0.2em; margin-bottom:10px; display:block; }
.section-title{ font-size:clamp(42px,7vw,84px); }
.section-hint{ margin-top:14px; font-size:10px; color:var(--text-low); }
.reveal{ opacity:0; transform:translateY(50px) scale(0.98); filter:blur(6px); transition:opacity 1s var(--spring-soft), transform 1s var(--spring-soft), filter 1s var(--spring-soft); }
.reveal.in{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); }

/* ============ ABOUT ============ */
.about-panel{ padding:clamp(28px,5vw,64px); }
.about-quote{
  font-family:'Bebas Neue',sans-serif; font-size:clamp(26px,3.4vw,40px); line-height:1.15;
  max-width:820px; margin-bottom:34px;
  background:linear-gradient(100deg,#fff,var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.about-body p{ color:var(--text-mid); font-size:15.5px; line-height:1.85; max-width:760px; margin-bottom:20px; font-weight:300; }
.about-body p:last-child{ margin-bottom:0; }

/* ============ SKILLS ============ */
.skills-groups{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; }
.skill-group{ padding:26px; }
.skill-group h3{ font-family:'IBM Plex Mono',monospace; text-transform:uppercase; font-size:11px; letter-spacing:0.2em; color:var(--cyan); margin-bottom:18px; font-weight:600; }
.chip-cloud{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  font-family:'IBM Plex Mono',monospace; font-size:12px; padding:9px 15px; border-radius:999px;
  background:var(--glass-fill); border:1px solid var(--glass-border);
  color:var(--text-mid); cursor:none; transition:transform .35s var(--spring), color .3s, border-color .3s, box-shadow .3s;
  animation:drift 6s ease-in-out infinite;
}
.chip:hover{ color:#0a0a0f; background:linear-gradient(120deg,var(--cyan),var(--violet)); border-color:transparent; box-shadow:0 8px 24px rgba(139,107,255,0.4); transform:translateY(-3px) scale(1.05); }
@keyframes drift{ 0%,100%{ transform:translateY(0px); } 50%{ transform:translateY(-4px); } }

/* ============ PROJECTS ============ */
.projects-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px; }
.project-card{
  padding:26px; min-height:230px; display:flex; flex-direction:column; justify-content:flex-end;
  cursor:none; text-align:left; width:100%; will-change:transform;
}
.project-card .glow{
  position:absolute; top:-30%; right:-20%; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, var(--glowcolor,var(--violet)) 0%, transparent 70%);
  opacity:0.35; filter:blur(10px); pointer-events:none; transition:opacity .4s;
}
.project-card:hover .glow{ opacity:0.6; }
.project-tag{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.15em; color:var(--cyan); text-transform:uppercase; margin-bottom:10px; position:relative; z-index:1; display:block; }
.project-title{ font-size:clamp(28px,3.4vw,38px); margin-bottom:10px; position:relative; z-index:1; }
.project-desc{ font-size:13.5px; color:var(--text-mid); line-height:1.6; font-weight:300; max-width:38ch; position:relative; z-index:1; }

/* ============ PROJECT MODAL (liquid morph) ============ */
.modal{
  position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center;
  padding:24px; opacity:0; pointer-events:none; transition:opacity .45s var(--liquid);
}
.modal.open{ opacity:1; pointer-events:auto; }
.modal-backdrop{
  position:absolute; inset:0; background:rgba(6,6,10,0.7); backdrop-filter:blur(6px); cursor:none;
}
.modal-panel{
  position:relative; width:min(640px, 92vw); padding:clamp(30px,5vw,56px);
  border-radius:32px; transform:scale(0.82) translateY(30px); transition:transform .55s var(--liquid);
  max-height:82vh; overflow-y:auto;
}
.modal.open .modal-panel{ transform:scale(1) translateY(0); }
.modal-close{
  position:absolute; top:20px; right:20px; width:36px; height:36px; border-radius:50%;
  background:var(--glass-fill); border:1px solid var(--glass-border); color:var(--text-mid); cursor:none;
  transition:transform .3s var(--spring), color .3s;
}
.modal-close:hover{ transform:rotate(90deg); color:var(--text-hi); }
.modal-title{ font-size:clamp(36px,6vw,58px); margin:14px 0 16px; }
.modal-desc{ font-size:15px; color:var(--text-mid); line-height:1.8; font-weight:300; margin-bottom:24px; max-width:56ch; }
.modal-meta{ font-size:10px; color:var(--text-low); letter-spacing:0.15em; border-top:1px solid var(--glass-border); padding-top:18px; }

/* ============ PHILOSOPHY ============ */
#philosophy{ padding:0; }
.philo-wrap{ min-height:80vh; display:flex; align-items:center; justify-content:center; padding:100px clamp(20px,6vw,90px); }
.philo-panel{ max-width:920px; padding:clamp(30px,6vw,72px); text-align:center; }
.philo-line{
  font-family:'Bebas Neue',sans-serif; font-size:clamp(24px,4vw,44px); line-height:1.25; color:var(--text-mid);
  opacity:0; transform:translateY(24px); filter:blur(4px);
  transition:opacity .9s var(--spring-soft), transform .9s var(--spring-soft), filter .9s var(--spring-soft), color .9s;
}
.philo-line.in{ opacity:1; transform:translateY(0); filter:blur(0); color:var(--text-hi); }

/* ============ CONTACT ============ */
#contact{ padding-bottom:80px; }
.contact-panel{ padding:clamp(40px,7vw,90px); text-align:center; }
.contact-title{ font-size:clamp(46px,9vw,120px); margin-bottom:26px; }
.contact-sub{ color:var(--text-mid); font-size:15px; max-width:480px; margin:0 auto 40px; font-weight:300; }

.contact-form{ max-width:480px; margin:0 auto; text-align:left; display:flex; flex-direction:column; gap:18px; }
.field{ position:relative; }
.field input, .field textarea{
  width:100%; background:var(--glass-fill); border:1px solid var(--glass-border); border-radius:14px;
  padding:18px 16px 10px; font-family:'Space Grotesk',sans-serif; font-size:14px; color:var(--text-hi);
  backdrop-filter:blur(10px); resize:none; transition:border-color .35s, background .35s, box-shadow .35s;
}
.field textarea{ padding-top:22px; }
.field input:focus, .field textarea:focus{ outline:none; }
.field label{
  position:absolute; left:16px; top:18px; font-size:13px; color:var(--text-low); pointer-events:none;
  transition:transform .3s var(--spring), font-size .3s var(--spring), color .3s;
  font-family:'IBM Plex Mono',monospace; letter-spacing:0.04em;
}
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label,
.field.has-value label{
  transform:translateY(-9px); font-size:9.5px; color:var(--cyan); letter-spacing:0.15em; text-transform:uppercase;
}
.field-rim{
  position:absolute; inset:0; border-radius:14px; pointer-events:none;
  box-shadow:0 0 0 0 rgba(91,232,255,0); transition:box-shadow .4s var(--spring);
}
.field:focus-within .field-rim{ box-shadow:0 0 0 2px rgba(91,232,255,0.45), 0 0 24px -4px rgba(91,232,255,0.5); }
.field:focus-within input, .field:focus-within textarea{ border-color:var(--cyan); }
.field.invalid input, .field.invalid textarea{ border-color:#ff6e6e; animation:shake .4s; }
.field.invalid .field-rim{ box-shadow:0 0 0 2px rgba(255,110,110,0.35); }
.field.valid input, .field.valid textarea{ border-color:rgba(91,232,255,0.4); }
@keyframes shake{ 0%,100%{transform:translateX(0);} 25%{transform:translateX(-5px);} 75%{transform:translateX(5px);} }

.cta-glow-btn{
  position:relative; font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:0.14em; text-transform:uppercase;
  padding:20px 46px; border-radius:999px; color:#08070c; cursor:none;
  background:linear-gradient(120deg, var(--cyan), var(--violet));
  box-shadow:0 0 0 1px rgba(255,255,255,0.4) inset, 0 20px 60px rgba(139,107,255,0.5);
  display:inline-flex; align-items:center; justify-content:center; gap:10px; overflow:hidden;
  transition:transform .35s var(--spring), box-shadow .35s, opacity .3s;
}
.cta-glow-btn:hover{ box-shadow:0 0 0 1px rgba(255,255,255,0.6) inset, 0 26px 70px rgba(139,107,255,0.7); }
.cta-glow-btn:disabled{ opacity:0.55; filter:saturate(0.4); cursor:not-allowed; }
.cta-glow-btn.loading .btn-label::after{ content:""; display:inline-block; width:12px; height:12px; margin-left:8px; border-radius:50%; border:2px solid rgba(8,7,12,0.3); border-top-color:#08070c; animation:spin .7s linear infinite; vertical-align:-2px; }
.cta-glow-btn.success{ background:linear-gradient(120deg, #6effa6, var(--cyan)); }
@keyframes spin{ to{ transform:rotate(360deg); } }

.form-status{ font-size:10px; color:var(--text-low); min-height:14px; text-align:center; transition:color .3s; }
.form-status.ok{ color:#6effa6; }
.form-status.err{ color:#ff6e6e; }

.social-row{ display:flex; gap:14px; justify-content:center; margin-top:44px; }
.social-chip{
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--glass-fill); border:1px solid var(--glass-border); backdrop-filter:blur(10px);
  font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--text-mid); cursor:none;
  transition:transform .3s var(--spring), color .3s, border-color .3s;
}
.social-chip:hover{ color:var(--text-hi); border-color:var(--cyan); }

footer{
  text-align:center; padding:40px 20px 60px; font-family:'IBM Plex Mono',monospace; font-size:10px;
  letter-spacing:0.15em; color:var(--text-low);
}

/* ============ EASTER EGG: GLASS SHATTER ============ */
.shatter{
  position:fixed; inset:0; z-index:9500; pointer-events:none; opacity:0;
}
.shatter.active{ opacity:1; }
.shard{
  position:absolute; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.2);
  backdrop-filter:blur(4px); opacity:0; transform-origin:center;
}
.shatter.active .shard{ animation:shardBurst 1.1s var(--liquid) forwards; }
@keyframes shardBurst{
  0%{ opacity:0; transform:translate(0,0) rotate(0deg) scale(0.3); }
  20%{ opacity:1; }
  60%{ opacity:1; transform:translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1); }
  100%{ opacity:0; transform:translate(calc(var(--dx) * 1.4), calc(var(--dy) * 1.4)) rotate(var(--rot)) scale(0.6); }
}

/* focus states */
a:focus-visible, .chip:focus-visible, .btn:focus-visible, .cta-glow-btn:focus-visible, .social-chip:focus-visible, .project-card:focus-visible{
  outline:2px solid var(--cyan); outline-offset:3px; border-radius:999px;
}

@media (max-width:720px){
  #nav a[data-nav]{ display:none; }
  #nav{ gap:0; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001s !important; animation-iteration-count:1 !important; transition-duration:0.2s !important; scroll-behavior:auto !important; }
  #bgcanvas{ opacity:0.4; }
  .grain{ animation:none; }
}