:root{
  --bg-dark:#0b0806;
  --bg-light:#f1efe9;
  --ink-dark:#0a0a0a;
  --ink-light:#f1efe9;
  --muted:#9a968c;
  --muted-onlight:#7a766c;
  --ember:#e03a1e;
  --font-display:'Space Grotesk', sans-serif;
  --font-serif:'Instrument Serif', serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
  --ease-out:cubic-bezier(.16,1,.3,1);      /* expo-out: fast start, long soft landing */
  --ease-inout:cubic-bezier(.76,0,.24,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ background:var(--bg-dark); }
body{
  font-family:var(--font-body);
  background:var(--bg-dark);
  color:var(--ink-light);
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; }

/* Lenis smooth scroll */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }
::selection{ background:#fff; color:#000; }

@media (min-width:861px) and (hover:hover) and (pointer:fine){
  body, body a, .venture-row{ cursor:none; }
}

/* ================= Preloader ================= */
#preloader{
  position:fixed; inset:0; background:var(--bg-dark);
  z-index:9999; display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
#preloader .pl-name{
  font-size:clamp(2rem, 6vw, 4rem); letter-spacing:-0.02em;
  display:flex; overflow:hidden;
}
#preloader .pl-name span{ display:inline-block; transform:translateY(110%); font-family:var(--font-display); font-weight:400; }
#preloader .pl-name span.serif{ font-family:var(--font-serif); font-style:italic; }
#preloader .pl-counter{
  position:absolute; bottom:2rem; right:2.4rem;
  font-family:var(--font-mono); font-size:.8rem; color:var(--muted); letter-spacing:.08em;
}
#curtain{
  position:fixed; inset:0; background:var(--bg-dark); z-index:9998;
  transform:translateY(0%);
}

/* ================= Scroll progress ================= */
#progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:900;
  pointer-events:none; mix-blend-mode:difference;
}
#progress-bar{
  display:block; height:100%; width:100%;
  background:#fff; transform:scaleX(0); transform-origin:left;
}

/* ================= Cursor — minimal + comet trail ================= */
#cursor{
  position:fixed; top:0; left:0; z-index:10001; pointer-events:none;
  width:12px; height:12px; border-radius:50%;
  background:#fff; mix-blend-mode:difference;
  transform:translate(-50%,-50%);
  display:none;
  transition:width .45s cubic-bezier(.3,1.3,.5,1), height .45s cubic-bezier(.3,1.3,.5,1), border-radius .45s var(--ease-out), background-color .3s;
}
#cursor-trail{
  position:fixed; top:0; left:0; z-index:10000; pointer-events:none;
  width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(255,255,255,.9);
  mix-blend-mode:difference;
  transform:translate(-50%,-50%);
  display:none;
  transition:opacity .3s var(--ease-out);
}
#cursor .c-label{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.05em;
  color:#000; opacity:0; transition:opacity .2s; white-space:nowrap;
}
@media (min-width:861px) and (hover:hover) and (pointer:fine){ #cursor, #cursor-trail{ display:block; } }
body[data-cursor="link"] #cursor{ width:48px; height:48px; }
body[data-cursor="link"] #cursor-trail{ opacity:0; }
body[data-cursor="view"] #cursor{ width:88px; height:44px; border-radius:26px; mix-blend-mode:normal; background:#f1efe9; }
body[data-cursor="view"] #cursor .c-label{ opacity:1; }
body[data-cursor="view"] #cursor-trail{ opacity:0; }
body[data-cursor="text"] #cursor{ width:3px; height:24px; border-radius:2px; }

/* ================= Nav ================= */
nav{
  position:fixed; top:0; left:0; right:0; z-index:800;
  display:flex; justify-content:space-between; align-items:center;
  padding:1.6rem clamp(1.2rem,4vw,3rem);
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.02em;
  transition:transform .8s var(--ease-out);
  mix-blend-mode:difference; color:#fff;
}
nav.nav-hidden{ transform:translateY(-120%); }
nav .logo{ font-weight:500; cursor:pointer; }
nav .nav-links{ display:flex; gap:2rem; }
nav .nav-links a{ position:relative; overflow:hidden; display:inline-block; height:1.1em; }
nav .nav-links a span{ display:block; transition:transform .55s var(--ease-inout); }
nav .nav-links a:hover span{ transform:translateY(-100%); }
nav .nav-links a::before{
  content:attr(data-label); position:absolute; top:100%; left:0;
  transition:transform .55s var(--ease-inout); font-style:italic; font-family:var(--font-serif); font-size:.9rem;
}
nav .nav-links a:hover::before{ transform:translateY(-100%); }
@media (max-width:640px){ nav .nav-links{ gap:1.1rem; } }

/* ================= Sticky-stack panels ================= */
.panel{
  position:sticky; top:0;
  width:100%; height:100svh;
  overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
}
.panel .p-content{
  position:relative; z-index:5;
  width:100%; height:100%;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 clamp(1.2rem,6vw,6rem);
  will-change:transform;
}

.venture-row{ opacity:0; transform:translateY(24px); }
.panel.dark{ background:var(--bg-dark); color:var(--ink-light); }
.panel.light{ background:var(--bg-light); color:var(--ink-dark); }
.dim{ position:absolute; inset:0; background:#000; opacity:0; pointer-events:none; z-index:20; }

.grain{
  position:absolute; inset:0; pointer-events:none; z-index:30; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ================= Interactive canvas wave field (hero) ================= */
#waves{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  filter:blur(52px) saturate(1.2) contrast(1.05);
  pointer-events:none;
}
@media (max-width:780px){
  #waves{ filter:blur(34px) saturate(1.2); }
}

/* ================= Animated ember gradient (other dark panels) ================= */
.aurora{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  filter:blur(70px) saturate(1.15);
  pointer-events:none;
}
.aurora .blob{
  position:absolute; border-radius:50%;
  will-change:transform;
}
.aurora .b1{
  width:65vw; height:65vw; top:-25%; right:-12%;
  background:radial-gradient(circle at 40% 40%, rgba(224,58,30,.75), rgba(150,20,10,.35) 55%, transparent 72%);
}
.aurora .b2{
  width:45vw; height:45vw; top:8%; right:18%;
  background:radial-gradient(circle at 50% 50%, rgba(255,120,50,.5), rgba(180,40,15,.22) 60%, transparent 75%);
}
.aurora .b3{
  width:50vw; height:50vw; bottom:-30%; left:-15%;
  background:radial-gradient(circle at 55% 45%, rgba(120,15,8,.55), transparent 70%);
}
.aurora.subtle .blob{ opacity:.45; }
@media (max-width:780px){
  .aurora{ filter:blur(45px) saturate(1.15); }
  .aurora .b1{ width:120vw; height:120vw; }
  .aurora .b3{ width:100vw; height:100vw; }
}

.mask{ overflow:hidden; display:block; }
.mask .line{ display:block; transform:translateY(110%); will-change:transform; }

.eyebrow{
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.08em;
  color:var(--muted); margin-bottom:1.2rem; text-transform:uppercase;
}
.panel.light .eyebrow{ color:var(--muted-onlight); }
.serif-i{ font-family:var(--font-serif); font-style:italic; font-weight:400; }

/* ================= Hero ================= */
#hero{ z-index:1; }
#hero .p-content{ justify-content:flex-end; padding-bottom:7.5rem; }

.hero-tagline{
  position:absolute; top:6.4rem; left:clamp(1.2rem,6vw,6rem);
  font-size:.92rem; color:#d8d5cd; line-height:1.6; font-weight:300; z-index:6;
}
.hero-tagline .serif-i{ font-size:1.05rem; }

.hand{
  position:absolute; z-index:2; pointer-events:none;
  mix-blend-mode:screen; opacity:0;
  filter:contrast(1.08) brightness(1.05);
  will-change:transform;
}
.hand img{ display:block; width:100%; height:auto; }
.hand-left{
  top:2vh; left:-6vw; width:clamp(280px, 36vw, 620px);
  transform:rotate(18deg);
  transform-origin:left center;
}
.hand-right{
  bottom:24vh; right:-5vw; width:clamp(280px, 36vw, 620px);
  transform:rotate(-8deg);
  transform-origin:right center;
}
@media (max-width:780px){
  .hand-left{ width:60vw; top:8vh; left:-10vw; }
  .hand-right{ width:60vw; bottom:30vh; right:-12vw; }
}

.hero-name{
  position:relative; z-index:6;
  display:flex; align-items:baseline; justify-content:space-between;
  flex-wrap:wrap; gap:0 3vw;
  line-height:.95; letter-spacing:-0.02em;
  width:100%;
}
.hero-name .first{
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(3.4rem, 12vw, 11rem);
  color:#eceae3;
}
.hero-name .last{
  font-family:var(--font-serif); font-style:italic; font-weight:400;
  font-size:clamp(3.6rem, 12.5vw, 11.5rem);
  color:#cdeee7; /* fallback — keeps "Sharma." visible no matter what */
  padding-right:.08em;
}
.hero-name .char{ display:inline-block; transform:translateY(115%); will-change:transform; }

/* FIX: gradient is applied per-character, so background-clip survives
   the JS char-split + transforms (the old `background:inherit` chain
   broke and rendered "Sharma." fully transparent). */
.hero-name .last .char{
  background:linear-gradient(160deg, #a8e8df 10%, #e9f4f0 55%, #f3f1ea 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

.hero-bottom{
  position:absolute; bottom:2.2rem; left:clamp(1.2rem,6vw,6rem); right:clamp(1.2rem,6vw,6rem);
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.04em;
  color:#cfccc3; z-index:6;
  padding-top:1.3rem;
}
.hero-bottom::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:rgba(241,239,233,.14);
  transform:scaleX(var(--line, 1)); transform-origin:left;
}
.hero-bottom .vtag{ display:flex; align-items:center; gap:.4rem; color:var(--muted); }
.hero-bottom .socials{ display:flex; gap:.6rem; align-items:center; }
.hero-bottom .socials .sep{ color:var(--muted); }
.hero-bottom .socials a{ position:relative; padding:.2rem .2rem; }
.hero-bottom .socials a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:100%;
  background:#f1efe9; transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease-out);
}
.hero-bottom .socials a:hover::after{ transform:scaleX(1); transform-origin:left; }
.hero-bottom .socials a:not(:hover)::after{ transform-origin:right; }
.hero-bottom .hint{ color:var(--muted); display:flex; align-items:center; gap:.5rem; }
.hero-bottom .hint .dot{ width:4px; height:4px; border-radius:50%; background:#f1efe9; animation:drift 1.6s ease-in-out infinite; }
@keyframes drift{ 0%,100%{ transform:translateY(0); opacity:1;} 50%{ transform:translateY(5px); opacity:.3;} }
@media (max-width:640px){
  .hero-bottom{ flex-direction:column; gap:.8rem; align-items:flex-start; }
  .hero-bottom .hint{ display:none; }
}

/* ================= About ================= */
#about{ z-index:2; }
.about-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:4vw; align-items:center; }
.about-statement{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(2.2rem, 6vw, 5rem); line-height:1.04; letter-spacing:-0.02em;
}
.about-statement .serif-i{ font-size:1.08em; }
.about-para{ margin-top:1.6rem; max-width:36rem; font-size:1.02rem; line-height:1.7; color:#3a3833; font-weight:300; }
.about-visual{
  position:relative; aspect-ratio:3/4; overflow:hidden; border-radius:2px;
  background:#0c0b0a;
  transform-style:preserve-3d; perspective:800px;
  will-change:transform;
}
.about-visual .inner{
  position:absolute; inset:0; transform:scale(1.3); clip-path:inset(100% 0 0 0);
  background:
    radial-gradient(circle at 30% 20%, rgba(224,58,30,.35), transparent 55%),
    radial-gradient(circle at 80% 90%, rgba(255,120,50,.2), transparent 50%),
    repeating-linear-gradient(0deg, rgba(241,239,233,.05) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(241,239,233,.05) 0 1px, transparent 1px 34px);
}
.about-stats{
  position:absolute; top:12%; left:10%; z-index:2;
  display:flex; flex-direction:column; gap:2.2rem;
  pointer-events:none;
}
.stat-num{
  font-family:var(--font-display); font-weight:400; color:#eceae3;
  font-size:clamp(2.4rem, 4.2vw, 3.8rem); line-height:1; letter-spacing:-0.03em;
}
.stat-label{
  margin-top:.55rem; font-family:var(--font-mono); font-size:.66rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
@media (max-width:780px){
  .about-stats{ top:14%; left:5%; right:14%; flex-direction:row; justify-content:space-between; gap:1rem; }
  .stat-num{ font-size:1.9rem; }
  .stat-label{ font-size:.52rem; letter-spacing:.1em; margin-top:.4rem; }
}
.about-tag{
  position:absolute; bottom:1rem; left:1rem; font-family:var(--font-mono);
  font-size:.7rem; letter-spacing:.05em; color:var(--ink-light); background:rgba(0,0,0,.55);
  padding:.35rem .6rem; border-radius:2px;
}
@media (max-width:780px){
  .about-grid{ grid-template-columns:1fr; gap:1.6rem; }
  .about-visual{ order:-1; aspect-ratio:16/9; }
}

/* ================= Ventures ================= */
#ventures{ z-index:3; }
.ventures-list{ margin-top:1rem; position:relative; z-index:6; }
.ventures-list::before,
.venture-row::after,
.skill-cat li::after{
  content:""; position:absolute; left:0; height:1px; width:100%;
  transform:scaleX(var(--draw, 1)); transform-origin:left; pointer-events:none;
}
.ventures-list::before{ top:0; background:rgba(241,239,233,.14); }
.venture-row::after{ bottom:0; background:rgba(241,239,233,.14); }
.skill-cat li::after{ bottom:0; background:rgba(10,10,10,.08); }
.venture-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:2rem;
  padding:2.1rem 0;
  position:relative;
}
.venture-row::before{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:#f1efe9; transform:scaleX(0); transform-origin:left;
  transition:transform .8s var(--ease-inout);
}
.venture-row:hover::before{ transform:scaleX(1); }
.venture-row .v-left{ display:flex; align-items:baseline; gap:1.4rem; }
.venture-row .v-index{ font-family:var(--font-mono); font-size:.8rem; color:var(--muted); }
.venture-row .v-name{
  font-family:var(--font-display); font-weight:400; font-size:clamp(1.5rem,4.4vw,3.2rem);
  letter-spacing:-0.01em; transition:transform .6s var(--ease-out);
}
.venture-row:hover .v-name{ transform:translateX(.6rem); font-style:italic; font-family:var(--font-serif); }
.venture-row .v-meta{ font-family:var(--font-mono); font-size:.78rem; color:var(--muted); white-space:nowrap; }
.venture-detail{
  height:0; overflow:hidden;
  font-size:.95rem; line-height:1.65; color:#c9c6bc; font-weight:300; max-width:42rem;
}
.ventures-note{ margin-top:1.6rem; font-family:var(--font-mono); font-size:.75rem; color:var(--muted); position:relative; z-index:6; }

/* ================= Skills ================= */
#skills{ z-index:4; }
.skills-grid{
  margin-top:1.6rem; display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr));
  gap:2.2rem 3rem;
}
.skill-cat h3{
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.06em;
  text-transform:uppercase; color:#8a5a3a; margin-bottom:.9rem;
}
.skill-cat ul{ list-style:none; }
.skill-cat li{
  font-size:.98rem; padding:.4rem 0; position:relative;
  color:#2c2a26; font-weight:400; transition:padding-left .5s var(--ease-out);
}
.skill-cat li:hover{ padding-left:.5rem; font-style:italic; }
.skill-cat li{ opacity:0; transform:translateY(14px); }
@media (max-height:720px){
  .skill-cat li{ font-size:.85rem; padding:.25rem 0; }
  .skills-grid{ gap:1.2rem 2rem; }
}
/* phones: two compact columns so all five groups fit inside one screen */
@media (max-width:640px){
  .skills-grid{ grid-template-columns:1fr 1fr; gap:1.1rem 1.2rem; margin-top:1.1rem; }
  .skill-cat h3{ font-size:.66rem; margin-bottom:.45rem; }
  .skill-cat li{ font-size:.8rem; padding:.22rem 0; line-height:1.3; }
}

/* ================= Contact ================= */
#contact{ z-index:5; }
.contact-heading{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(2.4rem, 7.5vw, 6rem); letter-spacing:-0.03em; line-height:1;
}
.contact-heading .serif-i{ font-size:1.06em; }
.contact-sub{ margin-top:1rem; max-width:34rem; font-size:1.05rem; color:#d8d5cd; font-weight:300; line-height:1.6; }
.contact-email{
  margin-top:2.2rem; display:inline-block; font-family:var(--font-serif); font-style:italic;
  font-size:clamp(1.4rem,3.8vw,2.6rem); position:relative;
  align-self:flex-start;
}
.contact-email::after{
  content:""; position:absolute; left:0; bottom:-.08em; height:1px; width:100%;
  background:#f1efe9; transform:scaleX(var(--u, .25)); transform-origin:left; transition:transform .7s var(--ease-out);
}
.contact-email:hover::after{ transform:scaleX(1); }
.contact-socials{ margin-top:1.8rem; display:flex; gap:2rem; font-family:var(--font-mono); font-size:.85rem; color:var(--muted); }
.contact-socials a{ transition:color .5s var(--ease-out); }
.contact-socials a:hover{ color:#f1efe9; }
.contact-footer{
  position:absolute; bottom:0; left:0; right:0; overflow:hidden; line-height:.78; z-index:4;
}
.contact-footer .giant{
  font-family:var(--font-serif); font-style:italic;
  font-size:clamp(3.5rem, 15vw, 13rem); color:rgba(241,239,233,.05);
  letter-spacing:-0.02em; white-space:nowrap; padding-left:.2em;
  will-change:transform;
}
.contact-legal{
  position:absolute; bottom:1.4rem; right:clamp(1.2rem,6vw,6rem);
  font-family:var(--font-mono); font-size:.68rem; color:var(--muted); z-index:6;
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .mask .line, .hero-name .char{ transform:none !important; }
  .venture-row, .skill-cat li{ opacity:1 !important; transform:none !important; }
  .hand{ opacity:.6 !important; }
  #waves{ display:none; }
}