/* ============================================================
   Shruti Karmarkar — Portfolio
   Palette: white / warm-white, gold accents only
============================================================ */
:root{
  --bg:#ffffff;
  --bg-warm:#faf9f6;
  --gold:#c8a96e;
  --gold-deep:#a8893a;
  --ink:#1a1a1a;
  --muted:#9a8c78;
  --border:#ede7dc;
  --serif:"Playfair Display", Georgia, serif;
  --sans:"DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --pad:clamp(80px,12vh,140px);
  --gut:clamp(24px,6vw,90px);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-weight:300;line-height:1.7;
  overflow-x:hidden;cursor:none;
}
::selection{background:var(--gold);color:#fff;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}

/* ---------- scroll progress ---------- */
.scroll-progress{
  position:fixed;top:0;left:0;height:2px;width:0%;
  background:linear-gradient(90deg,var(--gold),var(--gold-deep));
  z-index:9998;transition:width .15s linear;
}

/* ---------- custom cursor: couture diamond ---------- */
.cursor-dot,.cursor-ring{
  position:fixed;top:0;left:0;pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);will-change:transform;
}
.cursor-dot{
  width:6px;height:6px;background:var(--gold);border-radius:50%;
  transition:width .4s ease,height .4s ease;
}
.cursor-ring{
  width:32px;height:32px;border:1px solid var(--gold);border-radius:2px;
  opacity:.55;
  transition:width .55s ease,height .55s ease,opacity .55s ease,border-color .55s ease,border-radius .55s ease;
  animation:cursorSpin 9s linear infinite;
}
@keyframes cursorSpin{
  from{transform:translate(-50%,-50%) rotate(45deg);}
  to{transform:translate(-50%,-50%) rotate(405deg);}
}
body.cursor-hover .cursor-ring{
  width:54px;height:54px;opacity:.9;border-color:var(--gold-deep);border-radius:50%;
}
body.cursor-hover .cursor-dot{width:3px;height:3px;}
@media (hover:none),(max-width:760px){
  .cursor-dot,.cursor-ring{display:none;}
  body{cursor:auto;}
}

/* ---------- nav ---------- */
nav{
  position:fixed;top:0;left:0;width:100%;
  display:flex;justify-content:space-between;align-items:center;
  padding:24px var(--gut);z-index:900;
  transition:padding .6s ease,background .6s ease,box-shadow .6s ease;
}
nav .brand{font-family:var(--serif);font-weight:400;font-size:18px;letter-spacing:.04em;mix-blend-mode:difference;color:#fff;}
nav .nav-links{display:flex;gap:34px;}
nav .nav-links a{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  mix-blend-mode:difference;color:#fff;opacity:.85;transition:opacity .5s ease;
}
nav .nav-links a:hover{opacity:1;}
/* solid bar once scrolled */
nav.scrolled{
  padding-top:16px;padding-bottom:16px;background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(10px);box-shadow:0 1px 0 var(--border);
}
nav.scrolled .brand,nav.scrolled .nav-links a{mix-blend-mode:normal;color:var(--ink);}
@media(max-width:760px){ nav .nav-links{display:none;} }

/* ---------- layout helpers ---------- */
section{position:relative;padding:var(--pad) var(--gut);}
.warm{background:var(--bg-warm);}
.label{
  font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);
  font-weight:400;margin-bottom:28px;display:inline-block;position:relative;padding-left:34px;
}
.label::before{content:"";position:absolute;left:0;top:50%;width:24px;height:1px;background:var(--gold);}
h1,h2,h3{font-family:var(--serif);font-weight:300;letter-spacing:-.02em;line-height:1.08;}
h2{font-size:clamp(32px,5vw,62px);}
em,.it{font-style:italic;color:var(--gold);}
p{color:#3a3733;font-weight:300;}
.muted{color:var(--muted);}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s ease;}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal.d1{transition-delay:.12s;}
.reveal.d2{transition-delay:.24s;}
.reveal.d3{transition-delay:.36s;}
.reveal.d4{transition-delay:.48s;}

/* ============ [01] HERO ============ */
#hero{
  min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding-top:160px;padding-bottom:120px;overflow:hidden;
}
#particles{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}
.hero-inner{position:relative;z-index:2;max-width:1200px;}
.hero-name{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(56px,9vw,120px);letter-spacing:-.03em;line-height:.98;
}
/* per-letter intro animation */
.hero-name .char{
  display:inline-block;opacity:0;transform:translateY(40px) rotate(4deg);
  animation:charIn .9s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero-name .space{display:inline-block;width:.28em;}
@keyframes charIn{to{opacity:1;transform:translateY(0) rotate(0);}}
.hero-sub{margin-top:30px;font-size:clamp(11px,1.4vw,13px);letter-spacing:.28em;text-transform:uppercase;color:var(--muted);font-weight:400;}
.hero-tag{margin-top:34px;font-family:var(--serif);font-style:italic;font-weight:400;color:var(--gold);font-size:clamp(17px,2.3vw,26px);max-width:760px;line-height:1.4;}
.hero-cta{display:flex;gap:22px;align-items:center;margin-top:54px;flex-wrap:wrap;}
.btn{
  display:inline-block;padding:16px 34px;border:1px solid var(--gold);background:#fff;color:var(--ink);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:400;position:relative;overflow:hidden;z-index:1;
  transition:color .6s ease,border-color .6s ease;
}
.btn::before{content:"";position:absolute;inset:0;background:var(--gold);transform:translateY(101%);transition:transform .6s ease;z-index:-1;}
.btn:hover{color:#fff;border-color:var(--gold);}
.btn:hover::before{transform:translateY(0);}
.link-cta{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);position:relative;padding-bottom:4px;font-weight:400;}
.link-cta::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .6s ease;}
.link-cta:hover::after{transform:scaleX(1);}
.scroll-hint{position:absolute;bottom:38px;left:var(--gut);z-index:2;font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:12px;}
.scroll-hint .line{width:46px;height:1px;background:var(--gold);display:inline-block;animation:scrollLine 2.4s ease-in-out infinite;transform-origin:left;}
@keyframes scrollLine{0%,100%{transform:scaleX(.3);opacity:.4;}50%{transform:scaleX(1);opacity:1;}}

/* ============ [02] ORIGIN ============ */
.two-col{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,7vw,100px);align-items:stretch;}
.origin-copy p{margin-top:22px;max-width:520px;}
.origin-copy h2{margin-top:10px;max-width:560px;}
.pull-quote{margin-top:48px;font-family:var(--serif);font-style:italic;font-weight:400;color:var(--gold);font-size:clamp(22px,3vw,34px);line-height:1.3;max-width:560px;}
.photo-frame{border:1px solid var(--gold);padding:10px;min-height:560px;height:100%;overflow:hidden;}
.photo-frame img{width:100%;height:100%;object-fit:cover;filter:saturate(1.04) sepia(.08) contrast(1.02);transition:transform 1.2s ease,filter 1.2s ease;}
.photo-frame:hover img{transform:scale(1.04);filter:saturate(1.08) sepia(.02);}
@media(max-width:860px){.two-col{grid-template-columns:1fr;}.photo-frame{min-height:440px;order:-1;}}

/* ============ [03] WHAT I DO ============ */
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:64px;border-top:1px solid var(--border);}
.do-card{padding:54px 40px 60px;border-bottom:1px solid var(--border);border-right:1px solid var(--border);transition:border-color .6s ease,background .6s ease,transform .6s ease;}
.do-card:first-child{border-left:1px solid var(--border);}
.do-card:hover{border-color:var(--gold);background:var(--bg-warm);transform:translateY(-4px);}
.do-card .num{font-family:var(--serif);font-weight:300;font-size:46px;color:var(--gold);opacity:.28;letter-spacing:-.02em;transition:opacity .6s ease;}
.do-card:hover .num{opacity:.5;}
.do-card .cl{margin:26px 0 16px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);font-weight:500;}
.do-card p{font-size:15px;color:var(--muted);line-height:1.65;}
@media(max-width:860px){.cards-3{grid-template-columns:1fr;}.do-card{border-left:1px solid var(--border);}}

/* ============ [04] PROJECTS ============ */
.proj-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px;}
.proj-head h2{max-width:620px;}
.proj-scroll{margin-top:64px;display:flex;gap:34px;overflow-x:auto;overflow-y:hidden;padding:30px 2px 50px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;cursor:grab;}
.proj-scroll::-webkit-scrollbar{height:2px;}
.proj-scroll::-webkit-scrollbar-thumb{background:var(--border);}
.proj-scroll::-webkit-scrollbar-thumb:hover{background:var(--gold);}
.proj-card{position:relative;flex:0 0 clamp(300px,33vw,420px);scroll-snap-align:start;border:1px solid var(--border);background:#fff;padding:38px 34px 34px;display:flex;flex-direction:column;transition:border-color .7s ease,transform .7s ease,box-shadow .7s ease;}
.proj-card:hover{border-color:var(--gold);transform:translateY(-8px);box-shadow:0 30px 60px -40px rgba(168,137,58,.4);}
.proj-card .pnum{position:absolute;top:18px;right:26px;font-family:var(--serif);font-weight:300;font-size:74px;color:var(--gold);opacity:.12;letter-spacing:-.04em;line-height:1;pointer-events:none;transition:opacity .7s ease;}
.proj-card:hover .pnum{opacity:.22;}
.proj-shot{width:100%;height:200px;object-fit:cover;border:1px solid var(--border);margin-bottom:26px;filter:saturate(1.02);}
.proj-card h3{font-size:24px;font-weight:400;position:relative;z-index:2;}
.proj-card .ptype{margin-top:10px;font-size:13px;color:var(--muted);line-height:1.55;flex-grow:1;}
.proj-stack{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px;}
.proj-stack span{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep);border:1px solid var(--border);padding:5px 11px;transition:border-color .5s ease;}
.proj-card:hover .proj-stack span{border-color:var(--gold);}
.proj-link{margin-top:24px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);position:relative;display:inline-block;padding-bottom:4px;width:fit-content;}
.proj-link::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .6s ease;}
.proj-card:hover .proj-link::after,.proj-link:hover::after{transform:scaleX(1);}
.drag-hint{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);}

/* ============ [05] EXPERIENCE ============ */
.timeline{margin-top:56px;border-top:1px solid var(--border);}
.tl-item{display:grid;grid-template-columns:180px 1fr;gap:30px;padding:38px 18px 38px 0;border-bottom:1px solid var(--border);transition:padding-left .7s ease,background .7s ease;}
.tl-item:hover{padding-left:12px;background:linear-gradient(90deg,rgba(200,169,110,.05),transparent 40%);}
.tl-year{color:var(--gold);font-size:14px;letter-spacing:.05em;font-weight:400;}
.tl-role{font-family:var(--serif);font-size:25px;font-weight:400;}
.tl-co{color:var(--muted);font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin-top:6px;}
.tl-desc{margin-top:14px;font-size:15px;color:#3a3733;max-width:640px;}
@media(max-width:680px){.tl-item{grid-template-columns:1fr;gap:10px;}}

/* ============ [06] AMBITION ============ */
.ambition-h{font-size:clamp(38px,7vw,90px);font-weight:300;letter-spacing:-.025em;max-width:1100px;line-height:1.04;margin-top:14px;}
.ambition-body{margin-top:48px;max-width:720px;font-size:18px;line-height:1.75;color:#3a3733;}
.ambition-sub{margin-top:36px;font-family:var(--serif);font-style:italic;color:var(--gold);font-size:clamp(18px,2.4vw,26px);max-width:680px;line-height:1.4;}

/* ============ [07] SKILLS ============ */
.skills-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(28px,4vw,56px);margin-top:60px;}
.skill-col h3{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);font-weight:500;padding-bottom:18px;border-bottom:1px solid var(--gold);margin-bottom:22px;font-family:var(--sans);}
.skill-col ul{list-style:none;}
.skill-col li{position:relative;padding-left:20px;margin-bottom:14px;font-size:15px;color:#3a3733;transition:color .5s ease,transform .5s ease;}
.skill-col li::before{content:"";position:absolute;left:0;top:11px;width:5px;height:5px;border-radius:50%;background:var(--gold);transition:transform .5s ease;}
.skill-col li:hover{color:var(--ink);transform:translateX(4px);}
.skill-col li:hover::before{transform:scale(1.6);}
@media(max-width:860px){.skills-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.skills-grid{grid-template-columns:1fr;}}

/* ============ [08] CONTACT ============ */
#contact{text-align:center;padding-top:160px;padding-bottom:120px;}
.contact-h{font-size:clamp(38px,6.5vw,84px);font-weight:300;letter-spacing:-.025em;line-height:1.05;}
.contact-line{margin-top:32px;font-size:18px;color:var(--muted);}
.contact-links{margin-top:60px;display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(20px,4vw,46px);}
.contact-links a{position:relative;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);padding-bottom:6px;font-weight:400;}
.contact-links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .6s ease;}
.contact-links a:hover::after{transform:scaleX(1);}
footer{margin-top:120px;text-align:center;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);}
.footer-dot{color:var(--gold);}

@media(max-width:760px){
  :root{--pad:clamp(70px,9vh,90px);}
  .hero-name{font-size:clamp(46px,13vw,64px);}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;}
  .reveal{opacity:1;transform:none;}
}