/* ============================================================
   ROHIT DIGGI — cinematic scroll portfolio
   ============================================================ */

:root{
  --bg:        #05060a;
  --bg-soft:   #0a0d14;
  --panel:     rgba(16,20,30,0.55);
  --panel-bd:  rgba(255,255,255,0.08);
  --ink:       #fbfdff;
  --ink-dim:   #c3ccdb;
  --ink-faint: #7d8799;
  --accent:    #4fe3ff;
  --accent-2:  #a688ff;
  --accent-3:  #34e6b0;
  --glow:      0 0 40px rgba(79,227,255,0.35);
  --ease:      cubic-bezier(0.22,1,0.36,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html,body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Space Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body{ position:relative; }

/* hide native cursor on capable pointers */
@media (hover:hover) and (pointer:fine){
  body, a, button{ cursor:none; }
}

::selection{ background:var(--accent); color:#00131a; }

/* ---------- scroll driver ---------- */
#spacer{ width:1px; }               /* height set by JS */

/* ---------- GL canvas ---------- */
#gl{
  position:fixed; inset:0;
  width:100vw; height:100vh;
  z-index:0; display:block;
}

/* film grain + vignette overlays */
#grain{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.045; mix-blend-mode:screen;
  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='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 120% at 50% 45%, transparent 55%, rgba(0,0,0,0.55) 100%);
}

/* ---------- UI film ---------- */
#ui{
  position:fixed; inset:0; z-index:2;
  pointer-events:none;
}
#ui a, #ui button{ pointer-events:auto; }

.chapter{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:6vh 7vw;
  opacity:0; visibility:hidden;
  will-change:opacity, transform;
}
.chapter.hidden-chapter[hidden]{ display:none; }

/* ============================================================
   HERO
   ============================================================ */
.hero-center{ text-align:center; max-width:1000px; }

.kicker{
  font-size:clamp(10px,1.1vw,13px);
  letter-spacing:.42em; font-weight:600;
  color:var(--accent); margin-bottom:2.2rem;
  text-transform:uppercase;
}

.hero-title{
  font-family:'Unbounded', sans-serif;
  font-weight:800; line-height:.92;
  font-size:clamp(56px, 15vw, 220px);
  letter-spacing:-.02em;
}
.hero-title .line{ display:block; overflow:hidden; }
.hero-title .w{ display:inline-block; }
.hero-title .accent{
  background:linear-gradient(100deg,var(--accent),var(--accent-2) 60%,var(--accent-3));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

.hero-sub{
  margin:2.4rem auto 0; max-width:640px;
  font-size:clamp(15px,1.7vw,21px);
  line-height:1.6; color:var(--ink-dim);
}
.hero-sub b{ color:var(--ink); font-weight:600; }

.hero-tags{
  display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center;
  margin-top:2.2rem;
}
.hero-tags span{
  font-size:12px; letter-spacing:.05em;
  padding:.5rem 1rem; border-radius:100px;
  border:1px solid var(--panel-bd);
  background:rgba(255,255,255,0.03);
  color:var(--ink-dim); backdrop-filter:blur(8px);
}

.scroll-cue{
  position:absolute; bottom:5vh; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.8rem;
  font-size:10px; letter-spacing:.35em; color:var(--ink-faint);
}
.scroll-cue i{
  width:1px; height:46px;
  background:linear-gradient(var(--accent),transparent);
  animation:cue 2.2s var(--ease) infinite;
}
@keyframes cue{ 0%{transform:scaleY(0);transform-origin:top}
  40%{transform:scaleY(1);transform-origin:top}
  60%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom} }

/* ============================================================
   PANELS / GENERIC
   ============================================================ */
.panel{
  width:100%; max-width:820px;
  background:var(--panel);
  border:1px solid var(--panel-bd);
  border-radius:22px;
  padding:clamp(1.8rem,4vw,3.2rem);
  backdrop-filter:blur(16px) saturate(120%);
  box-shadow:0 30px 80px -30px rgba(0,0,0,0.8);
}
.panel.wide{ max-width:1120px; }

.eyebrow{
  font-size:11px; letter-spacing:.32em; font-weight:600;
  color:var(--accent); margin-bottom:1.1rem;
}
.h-lg{
  font-family:'Unbounded', sans-serif; font-weight:500;
  font-size:clamp(26px,3.6vw,46px); line-height:1.08;
  letter-spacing:-.01em; margin-bottom:1.6rem;
}
.h-lg em{
  font-style:normal;
  background:linear-gradient(100deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.body-lg{
  font-size:clamp(14px,1.5vw,18px); line-height:1.7;
  color:var(--ink-dim); margin-bottom:1.1rem; max-width:66ch;
}
.body-lg b{ color:var(--ink); font-weight:600; }
.body-lg.center{ margin-inline:auto; text-align:center; }

/* stat row */
.stat-row{ display:flex; flex-wrap:wrap; gap:2.4rem; margin-top:2rem; }
.stat b{
  display:block; font-family:'Unbounded',sans-serif; font-weight:800;
  font-size:clamp(28px,3.4vw,42px);
  background:linear-gradient(120deg,var(--accent),var(--accent-3));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.stat span{ font-size:12px; color:var(--ink-faint); letter-spacing:.05em; }

/* ============================================================
   SKILLS
   ============================================================ */
.skill-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.skill-cat{
  border:1px solid var(--panel-bd); border-radius:16px;
  padding:1.3rem 1.2rem; background:rgba(255,255,255,0.02);
  transition:transform .5s var(--ease), border-color .5s var(--ease), background .5s var(--ease);
}
.skill-cat h3{
  font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent); margin-bottom:1rem; font-weight:600;
}
.skill-cat ul{ list-style:none; display:flex; flex-direction:column; gap:.55rem; }
.skill-cat li{ font-size:14px; color:var(--ink-dim); padding-left:1rem; position:relative; }
.skill-cat li::before{
  content:''; position:absolute; left:0; top:.55em;
  width:5px; height:5px; border-radius:50%; background:var(--accent-2);
}

/* ============================================================
   EXPERIENCE
   ============================================================ */
.xp-card{
  border:1px solid var(--panel-bd); border-radius:16px;
  padding:1.6rem; background:rgba(255,255,255,0.02);
  transition:transform .5s var(--ease), border-color .5s var(--ease);
}
.xp-card + .xp-card{ margin-top:.9rem; }
.xp-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.xp-head h3{ font-size:clamp(17px,2vw,22px); font-weight:600; }
.xp-org{ color:var(--accent); font-size:13px; margin-top:.3rem; }
.xp-date{ font-size:12px; color:var(--ink-faint); letter-spacing:.05em; white-space:nowrap; }
.xp-body{ font-size:15px; line-height:1.7; color:var(--ink-dim); margin-bottom:1.2rem; }
.xp-body b{ color:var(--ink); font-weight:600; }

.chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chips span{
  font-size:11px; letter-spacing:.03em; padding:.4rem .8rem;
  border-radius:100px; border:1px solid var(--panel-bd);
  background:rgba(79,227,255,0.06); color:var(--accent);
}
.chips.sm span{ background:rgba(255,255,255,0.03); color:var(--ink-dim); }

/* ============================================================
   PROJECTS
   ============================================================ */
.proj-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.proj{
  display:block; text-decoration:none; color:inherit;
  border:1px solid var(--panel-bd); border-radius:16px;
  padding:1.4rem; background:rgba(255,255,255,0.02);
  transition:transform .5s var(--ease), border-color .5s var(--ease), background .5s var(--ease);
  position:relative; overflow:hidden;
}
.proj::after{
  content:''; position:absolute; inset:0; border-radius:16px;
  background:radial-gradient(circle at var(--mx,50%) var(--my,0%), rgba(79,227,255,0.10), transparent 55%);
  opacity:0; transition:opacity .4s var(--ease); pointer-events:none;
}
.proj:hover::after{ opacity:1; }
.proj-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:.9rem; }
.proj-tag{
  font-size:11px; letter-spacing:.03em; padding:.35rem .7rem; border-radius:100px;
  background:linear-gradient(100deg,rgba(79,227,255,0.14),rgba(166,136,255,0.14));
  border:1px solid var(--panel-bd); color:var(--ink);
}
.proj-arrow{ font-size:18px; color:var(--ink-faint); transition:transform .4s var(--ease), color .4s var(--ease); }
.proj:hover .proj-arrow{ transform:translate(3px,-3px); color:var(--accent); }
.proj h3{ font-size:17px; font-weight:600; margin-bottom:.6rem; line-height:1.25; }
.proj p{ font-size:13.5px; line-height:1.6; color:var(--ink-dim); margin-bottom:1rem; }

/* ============================================================
   AWARDS
   ============================================================ */
.award-list{ list-style:none; display:flex; flex-direction:column; gap:.8rem; }
.award-list li{
  display:flex; gap:1.3rem; align-items:center;
  border:1px solid var(--panel-bd); border-radius:16px;
  padding:1.2rem 1.4rem; background:rgba(255,255,255,0.02);
  transition:transform .5s var(--ease), border-color .5s var(--ease);
}
.award-rank{
  font-family:'Unbounded',sans-serif; font-weight:800;
  font-size:clamp(22px,3vw,34px); min-width:1.6em; text-align:center;
  background:linear-gradient(120deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.award-list h3{ font-size:16px; font-weight:600; margin-bottom:.3rem; }
.award-list p{ font-size:13.5px; color:var(--ink-dim); line-height:1.55; }
.award-list b{ color:var(--ink); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-title{
  font-family:'Unbounded',sans-serif; font-weight:800;
  font-size:clamp(44px,9vw,120px); line-height:.95; margin:1rem 0 1.6rem;
}
.contact-title em{
  font-style:normal;
  background:linear-gradient(100deg,var(--accent),var(--accent-2),var(--accent-3));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.contact-links{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.8rem; max-width:640px; margin:2.4rem auto 0;
}
.contact-links a{
  display:flex; flex-direction:column; gap:.25rem; text-align:left;
  text-decoration:none; color:inherit;
  border:1px solid var(--panel-bd); border-radius:14px;
  padding:1rem 1.2rem; background:rgba(255,255,255,0.02);
  transition:transform .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease);
}
.contact-links a span{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.contact-links a b{ font-size:14px; font-weight:500; color:var(--ink); }
.contact-links a:hover{ transform:translateY(-3px); border-color:rgba(79,227,255,0.4); background:rgba(79,227,255,0.05); }
.foot{ margin-top:2.4rem; font-size:12px; color:var(--ink-faint); letter-spacing:.05em; }

/* ============================================================
   CHROME · topbar / progress / nav
   ============================================================ */
#topbar{
  position:fixed; top:0; left:0; right:0; z-index:6;
  display:flex; justify-content:space-between; align-items:center;
  padding:1.4rem 2rem; pointer-events:none;
}
#topbar a{ pointer-events:auto; }
.brand{
  font-family:'Unbounded',sans-serif; font-weight:800; font-size:20px;
  text-decoration:none; color:var(--ink); letter-spacing:-.02em;
}
.brand span{ color:var(--accent); }
.resume-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:13px; font-weight:600; text-decoration:none; color:var(--ink);
  padding:.6rem 1.1rem; border-radius:100px;
  border:1px solid var(--panel-bd); background:rgba(255,255,255,0.04);
  backdrop-filter:blur(10px);
  transition:border-color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease);
}
.resume-btn:hover{ border-color:var(--accent); background:rgba(79,227,255,0.1); transform:translateY(-1px); }

#progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:7;
  background:rgba(255,255,255,0.06);
}
#progress span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent-3));
  box-shadow:var(--glow);
}

#nav{
  position:fixed; right:1.6rem; top:50%; transform:translateY(-50%);
  z-index:6; display:flex; flex-direction:column; gap:.9rem; align-items:flex-end;
}
#nav button{
  pointer-events:auto; display:flex; align-items:center; gap:.6rem;
  background:none; border:none; color:var(--ink-faint); font:inherit;
}
#nav .n-label{
  font-size:11px; letter-spacing:.05em; opacity:0; transform:translateX(6px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), color .4s var(--ease);
  white-space:nowrap;
}
#nav .n-dot{
  width:8px; height:8px; border-radius:50%;
  border:1px solid var(--ink-faint); background:transparent;
  transition:all .4s var(--ease);
}
#nav button:hover .n-label{ opacity:1; transform:translateX(0); color:var(--ink); }
#nav button.active .n-dot{ background:var(--accent); border-color:var(--accent); box-shadow:var(--glow); transform:scale(1.15); }
#nav button.active .n-label{ opacity:1; transform:translateX(0); color:var(--accent); }

/* ============================================================
   EASTER-EGG HINT
   ============================================================ */
#hint{
  position:fixed; left:1.6rem; bottom:1.4rem; z-index:6;
  display:flex; align-items:center; gap:.45rem;
  font-size:12px; letter-spacing:.01em; color:var(--ink-dim);
  padding:.55rem .95rem; border-radius:100px;
  border:1px solid var(--panel-bd); background:rgba(10,13,20,0.5);
  backdrop-filter:blur(10px); pointer-events:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
#hint b{ color:var(--ink); font-weight:600; }
#hint em{ color:var(--ink-faint); font-style:normal; }
#hint i{ color:var(--accent); font-style:normal; animation:twinkle 2.2s ease-in-out infinite; }
#hint.gone{ opacity:0; transform:translateY(10px); }
@keyframes twinkle{ 0%,100%{opacity:.35;transform:scale(.85)} 50%{opacity:1;transform:scale(1.25)} }
@media (max-width:560px){
  #hint{ left:50%; transform:translateX(-50%); }
  #hint.gone{ transform:translateX(-50%) translateY(10px); }
}
@media (prefers-reduced-motion:reduce){ #hint i{ animation:none; } }

/* ============================================================
   SOUND TOGGLE
   ============================================================ */
#sound{
  position:fixed; right:1.5rem; bottom:1.4rem; z-index:6;
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--panel-bd); background:rgba(10,13,20,0.5);
  backdrop-filter:blur(10px); color:var(--ink-dim);
  display:flex; align-items:center; justify-content:center;
  transition:color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
#sound:hover{ color:var(--ink); transform:translateY(-1px); }
#sound.on{ color:var(--accent); border-color:var(--accent); background:rgba(79,227,255,0.08); box-shadow:var(--glow); }
#sound .wave{ opacity:0; transition:opacity .3s var(--ease); }
#sound.on .wave{ opacity:1; }
#sound .slash{ opacity:1; transition:opacity .3s var(--ease); }
#sound.on .slash{ opacity:0; }
@media (max-width:560px){ #sound{ right:1rem; bottom:1rem; width:36px; height:36px; } }

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
#cursor{ position:fixed; top:0; left:0; z-index:50; pointer-events:none; mix-blend-mode:screen; }
.cursor-dot{
  position:fixed; top:0; left:0; width:6px; height:6px; border-radius:50%;
  background:var(--accent); transform:translate(-50%,-50%);
}
.cursor-ring{
  position:fixed; top:0; left:0; width:34px; height:34px; border-radius:50%;
  border:1.5px solid rgba(79,227,255,0.55); transform:translate(-50%,-50%);
  transition:width .3s var(--ease), height .3s var(--ease), border-color .3s var(--ease), opacity .3s var(--ease), background .3s var(--ease);
}
.cursor-label{
  position:fixed; top:0; left:0; transform:translate(-50%,-50%);
  font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:#00131a; font-weight:700; opacity:0; transition:opacity .25s var(--ease); white-space:nowrap;
}
/* states toggled by JS */
#cursor.is-link .cursor-ring{ width:52px; height:52px; border-color:var(--accent); background:rgba(79,227,255,0.08); }
#cursor.is-tilt .cursor-ring{ width:64px; height:64px; border-color:var(--accent-2); }
#cursor.is-hidden .cursor-ring,#cursor.is-hidden .cursor-dot{ opacity:0; }
#cursor.is-down .cursor-ring{ width:26px; height:26px; }
#cursor.has-label .cursor-ring{ width:64px; height:64px; background:var(--accent); border-color:var(--accent); }
#cursor.has-label .cursor-label{ opacity:1; }
#cursor.has-label .cursor-dot{ opacity:0; }

@media (hover:none),(pointer:coarse){ #cursor{ display:none; } }

/* ============================================================
   ANIM primitives (reveal)
   ============================================================ */
[data-anim]{ opacity:0; transform:translateY(28px); }

/* ============================================================
   LEETCODE (dormant styles, ready for activation)
   ============================================================ */
.lc-wrap{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:1rem; margin-top:1.4rem; }
.lc-stat{ border:1px solid var(--panel-bd); border-radius:14px; padding:1.2rem; text-align:center; background:rgba(255,255,255,0.02); }
.lc-stat b{ display:block; font-family:'Unbounded',sans-serif; font-weight:800; font-size:32px; color:var(--accent); }
.lc-stat span{ font-size:12px; color:var(--ink-faint); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .skill-grid{ grid-template-columns:repeat(2,1fr); }
  .proj-grid{ grid-template-columns:1fr; }
  #nav{ display:none; }
  .chapter{ padding:9vh 6vw; align-items:flex-start; overflow-y:auto; }
  .stat-row{ gap:1.4rem; }
}
@media (max-width:560px){
  .skill-grid{ grid-template-columns:1fr; }
  .contact-links{ grid-template-columns:1fr; }
  .xp-date{ white-space:normal; }
  #topbar{ padding:1rem 1.2rem; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  [data-anim]{ opacity:1 !important; transform:none !important; }
  .scroll-cue i{ animation:none; }
}

/* ============================================================
   PRINT — linearize the scroll-film into a readable document
   ============================================================ */
@media print{
  @page{ margin:14mm; }
  /* remap the palette so var()-based colors read dark on white */
  html{
    --ink:#111 !important; --ink-dim:#333 !important; --ink-faint:#666 !important;
    --accent:#0e6b8c !important; --accent-2:#0e6b8c !important; --accent-3:#0e6b8c !important;
    --panel-bd:#ddd !important;
  }
  html, body{ background:#fff !important; color:#111 !important; overflow:visible !important; height:auto !important; }
  /* drop everything that only makes sense on screen */
  #gl, #grain, #vignette, #cursor, #hint, #nav, #progress, .scroll-cue, #spacer, #topbar, #sound{
    display:none !important;
  }
  /* let the fixed film flow as a normal document */
  #ui{ position:static !important; }
  .chapter{
    position:static !important; inset:auto !important;
    opacity:1 !important; visibility:visible !important;
    transform:none !important; filter:none !important;
    display:block !important; min-height:auto !important;
    padding:0 0 14px !important; page-break-inside:avoid;
  }
  .hidden-chapter[hidden]{ display:none !important; }
  [data-anim]{ opacity:1 !important; transform:none !important; }

  .panel, .hero-center{
    background:#fff !important; border:none !important; box-shadow:none !important;
    backdrop-filter:none !important; max-width:100% !important; padding:0 !important;
    text-align:left !important; margin:0 auto !important;
  }
  .hero-title{ font-size:42px !important; color:#111 !important; }
  .contact-title{ font-size:34px !important; }
  .h-lg{ font-size:22px !important; color:#111 !important; }
  .body-lg, .xp-body, .proj p, .award-list p{ color:#222 !important; }
  .kicker, .eyebrow, .xp-org{ color:#0e6b8c !important; }

  /* gradient / transparent text would vanish on white — force solid ink */
  .hero-title .accent, .h-lg em, .stat b, .contact-title em, .award-rank{
    -webkit-text-fill-color:#0e6b8c !important; color:#0e6b8c !important; background:none !important;
  }
  .hero-tags, .scroll-cue{ display:none !important; }

  .skill-grid, .proj-grid{ display:block !important; }
  .skill-cat, .proj, .xp-card, .award-list li{
    border:1px solid #ddd !important; background:#fff !important;
    page-break-inside:avoid; margin-bottom:8px !important; transform:none !important;
  }
  .chips span, .chips.sm span{ border:1px solid #ddd !important; background:#fff !important; color:#0e6b8c !important; }
  .proj-tag{ background:#eef4f7 !important; color:#0e6b8c !important; }
  a{ color:#0e6b8c !important; text-decoration:none; }
}