/* ============================================================
   THE ASCENT — scroll up the real Everest
   ============================================================ */

:root{
  --ink:#070d18;
  --deep:#0b1626;
  --mist:#a9bad1;
  --snow:#f4f8fd;
  --glacial:#7fd2e8;
  --line:rgba(169,186,209,.16);
  --ease:cubic-bezier(.22,.9,.28,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{background:var(--ink);color:var(--snow)}
/* hide the scrollbar everywhere but keep the page scrollable (the scroll IS the experience) */
html{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}
body{
  font-family:'Sora',system-ui,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
li{list-style:none}
::selection{background:rgba(127,210,232,.28);color:var(--snow)}

/* ---------------- the 3D stage ---------------- */
#gl{
  position:fixed;inset:0;width:100%;height:100%;
  display:block;z-index:0;
}

#loader{
  position:fixed;inset:0;z-index:100;
  background:var(--ink);
  display:flex;flex-direction:column;gap:18px;
  align-items:center;justify-content:center;
  transition:opacity .9s var(--ease);
}
#loader.done{opacity:0;pointer-events:none}
#load-txt{font-size:11px;letter-spacing:.28em;color:var(--mist)}
#load-bar{width:min(300px,60vw);height:1px;background:rgba(169,186,209,.18)}
#load-bar i{display:block;width:0%;height:100%;background:var(--glacial);transition:width .3s}

#fallback{
  position:fixed;inset:0;z-index:99;background:var(--ink);
  display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;
  text-align:center;padding:20px;
}
#fallback[hidden]{display:none}
#fallback a{color:var(--glacial)}

/* ---------------- fixed chrome ---------------- */
.vignette{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(0deg, rgba(4,8,16,.55), transparent 30%),
    radial-gradient(120% 105% at 50% 42%, transparent 52%, rgba(4,8,16,.5));
}

.grain{
  position:fixed;inset:-120px;z-index:60;pointer-events:none;
  background:url('../assets/img/grain.png') repeat;
  opacity:.05;
  animation:grain 1.1s steps(2) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}
  50%{transform:translate(-46px,28px)}
  100%{transform:translate(24px,-38px)}
}

.letterbox{
  position:fixed;left:0;right:0;height:8svh;z-index:55;pointer-events:none;
  background:#040810;
  transition:transform .7s var(--ease);
}
.lb-top{top:0;transform:translateY(-101%)}
.lb-bot{bottom:0;transform:translateY(101%)}
.lb-on .lb-top{transform:translateY(0)}
.lb-on .lb-bot{transform:translateY(0)}

.topbar{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;justify-content:flex-end;align-items:center;
  padding:22px 30px 32px;
  font-size:12px;letter-spacing:.14em;
  pointer-events:none;                                  /* scrim never blocks the scroll-drag */
  background:linear-gradient(180deg,rgba(4,8,16,.42),rgba(4,8,16,0));
}
.topbar a{pointer-events:auto;color:var(--snow);text-shadow:0 1px 3px rgba(4,8,16,.92),0 1px 16px rgba(4,8,16,.7)}
.topnav{display:flex;gap:26px}
.topnav a{color:var(--snow);opacity:.94;transition:color .3s,opacity .3s}
.topnav a:hover{color:var(--glacial)}

.timeline{
  position:fixed;right:26px;top:50%;transform:translateY(-50%);
  z-index:50;display:flex;flex-direction:column;align-items:center;gap:14px;
}
.tl-track{position:relative;width:2px;height:40svh;background:rgba(169,186,209,.18);border-radius:2px}
.tl-fill{
  position:absolute;top:0;left:0;width:100%;height:0%;
  background:linear-gradient(180deg,var(--glacial),rgba(127,210,232,.35));
  border-radius:2px;
}
.tl-dot{
  position:absolute;left:50%;width:7px;height:7px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:var(--deep);border:1px solid rgba(169,186,209,.5);
  cursor:pointer;transition:background .3s,border-color .3s;
}
.tl-dot:hover,.tl-dot.on{background:var(--glacial);border-color:var(--glacial)}
.tl-dot .lab{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  font-size:10px;letter-spacing:.12em;color:var(--mist);
  white-space:nowrap;opacity:0;transition:opacity .25s;pointer-events:none;
  font-family:'IBM Plex Mono',monospace;
}
.tl-dot:hover .lab{opacity:1}
.tl-tc{font-size:10px;letter-spacing:.1em;color:var(--mist);opacity:.75}

.coords{
  position:fixed;left:30px;bottom:24px;z-index:50;
  font-size:10.5px;letter-spacing:.14em;color:var(--mist);opacity:.75;
  text-shadow:0 1px 10px rgba(4,8,16,.65);
}

/* ---------------- story sections ---------------- */
.chapter{position:relative;z-index:2;pointer-events:none}
.chapter .sticky{
  position:fixed;inset:0;height:100svh;overflow:clip;
  pointer-events:none;
}
.ov{will-change:transform,opacity;opacity:0}
#ov-hero{opacity:1}

.kicker{
  font-size:11px;letter-spacing:.3em;color:var(--glacial);
  text-transform:lowercase;opacity:.9;
  text-shadow:0 1px 14px rgba(4,8,16,.8);
}

.panel{
  background:rgba(7,13,24,.55);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line);
  border-radius:18px;
}

/* scene 01 */
.hero-wrap{
  position:absolute;left:50%;top:33%;transform:translate(-50%,-50%);
  text-align:center;width:min(94vw,1100px);
}
.hero-wrap .kicker{margin-bottom:26px}
.name{
  font-size:clamp(2.1rem,6.6vw,5rem);
  font-weight:700;letter-spacing:.15em;line-height:1.28;text-indent:.15em;
  color:#fff;                                  /* alpha source for the #liquidname SVG filter (rounded, glossy glass) */
  filter:url(#liquidname)
    drop-shadow(0 0 6px rgba(255,255,255,.5))
    drop-shadow(0 1px 2px rgba(4,10,22,.62))          /* tight dark contour — legible on the bright sky */
    drop-shadow(0 5px 18px rgba(4,10,22,.55));
}
.role{margin-top:22px;font-size:12.5px;letter-spacing:.34em;color:var(--mist)}
.cue{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:10px;letter-spacing:.3em;color:var(--mist);
  text-shadow:0 1px 12px rgba(4,8,16,.85);
}
.cue i{
  width:1px;height:44px;display:block;
  background:linear-gradient(180deg,var(--mist),transparent);
  animation:cue 2.2s var(--ease) infinite;transform-origin:top;
}
@keyframes cue{
  0%{transform:scaleY(0)}45%{transform:scaleY(1)}
  100%{transform:scaleY(1);opacity:0}
}

/* scene 02 */
.word-wrap{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  text-align:center;width:min(96vw,1200px);
}
.word-wrap .kicker{margin-bottom:34px}
.word{
  font-size:clamp(2rem,7.6vw,6rem);
  font-weight:400;letter-spacing:.045em;line-height:1.1;text-transform:lowercase;
  text-shadow:0 2px 50px rgba(2,10,24,.7);
}
.word .ch{opacity:.08;display:inline-block}
.word-line{
  width:min(280px,40vw);height:1px;margin:38px auto 0;
  background:linear-gradient(90deg,transparent,var(--glacial),transparent);
  transform:scaleX(0);
}

/* scene 03 */
.about{
  position:absolute;left:clamp(24px,6vw,100px);top:50%;transform:translateY(-50%);
  max-width:47ch;padding:clamp(22px,3vw,38px);
}
.about .kicker{margin-bottom:20px}
.about-text{
  font-size:clamp(1rem,1.4vw,1.2rem);
  text-shadow:0 1px 24px rgba(2,10,24,.5);
}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.chips li{
  font-size:10.5px;letter-spacing:.16em;color:var(--mist);
  border:1px solid var(--line);border-radius:99px;padding:7px 14px;
  background:rgba(7,13,24,.35);
}
.sil{
  position:absolute;right:clamp(0px,4vw,80px);bottom:-2px;
  width:min(40vw,520px);pointer-events:none;
}
.sil img{width:100%;height:auto}
.sil-machine{
  position:absolute;inset:0;
  background:url('../assets/img/machinesight.jpg') center/cover no-repeat;
  -webkit-mask-image:url('../assets/img/silhouette.png');
          mask-image:url('../assets/img/silhouette.png');
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  opacity:0;
}
.sil-cap{
  position:absolute;right:clamp(14px,5vw,96px);bottom:26px;
  font-size:10px;letter-spacing:.22em;color:var(--glacial);opacity:0;
}

/* scenes 04 — ridge cards */
.ridge-card{
  position:absolute;top:50%;transform:translateY(-50%);
  width:min(88vw,480px);
  padding:clamp(22px,3vw,36px);
}
.ridge-card.left{left:clamp(20px,6vw,100px)}
.ridge-card.right{right:clamp(20px,6vw,100px)}
.r-idx{font-size:10.5px;letter-spacing:.24em;color:var(--glacial)}
.r-name{
  font-size:clamp(1.4rem,2.6vw,2rem);font-weight:600;letter-spacing:.02em;
  margin-top:12px;
}
.r-hook{color:var(--mist);font-size:.95rem;margin-top:8px}
.projs{margin-top:18px;border-top:1px solid var(--line)}
.proj{
  display:grid;grid-template-columns:1fr 1.4rem;gap:4px 12px;
  padding:13px 2px;border-bottom:1px dashed rgba(169,186,209,.12);
  transition:background .3s;
  grid-template-areas:"n g" "d g";
}
.proj:hover{background:rgba(127,210,232,.06)}
.p-name{grid-area:n;font-weight:500;font-size:.98rem}
.proj:hover .p-name{color:var(--glacial)}
.p-desc{grid-area:d;color:var(--mist);font-size:.85rem;line-height:1.55}
.p-go{grid-area:g;align-self:center;color:var(--glacial);opacity:.7}
.r-meta{margin-top:14px;font-size:10px;letter-spacing:.18em;color:var(--mist);opacity:.75}

/* ---------------- anchored project callout (liquid glass) ---------------- */
#co-svg{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:39;pointer-events:none;overflow:visible;
}
#co-ring{
  fill:none;stroke:rgba(244,248,253,.95);stroke-width:1.6;
  filter:drop-shadow(0 1px 6px rgba(4,10,22,.55));
  opacity:0;transition:opacity .3s var(--ease);
}
#co-core{
  fill:rgba(244,248,253,.95);
  filter:drop-shadow(0 1px 6px rgba(4,10,22,.55));
  opacity:0;transition:opacity .3s var(--ease);
}
#co-line{
  fill:none;stroke:rgba(244,248,253,.8);stroke-width:1.4;
  stroke-linejoin:round;stroke-linecap:round;
  filter:drop-shadow(0 1px 6px rgba(4,10,22,.5));
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset .26s var(--ease) .02s;
}
#co-svg.on #co-ring,#co-svg.on #co-core{opacity:1}
#co-svg.on #co-line{stroke-dashoffset:0}
#co-svg.off #co-line{transition-delay:0s;transition-duration:.26s}

.lglass{
  position:fixed;z-index:40;width:min(90vw,478px);
  padding:32px 34px 24px;border-radius:24px;
  background:linear-gradient(160deg,rgba(30,44,66,.38),rgba(14,24,40,.44));
  backdrop-filter:blur(30px) saturate(1.9) brightness(1.08);
  -webkit-backdrop-filter:blur(30px) saturate(1.9) brightness(1.08);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:
    0 18px 48px rgba(4,10,22,.38),
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -1px 1px rgba(255,255,255,.1),
    inset 1.5px 0 1px -1px rgba(255,255,255,.28),
    inset -1.5px 0 1px -1px rgba(255,255,255,.28);
  opacity:0;transform:scale(.82);
  transition:opacity .3s var(--ease),transform .34s var(--ease);
  pointer-events:none;visibility:hidden;
  overflow:hidden;
}
.lglass.on{
  opacity:1;transform:scale(1);
  pointer-events:auto;visibility:visible;
  transition:opacity .3s var(--ease) .07s,transform .36s cubic-bezier(.2,.95,.3,1.04) .07s,visibility 0s;
}
.lglass:not(.on){transition:opacity .24s var(--ease),transform .26s var(--ease),visibility 0s .26s}
/* summit greeting — same liquid glass, sized small, pops up from above the head */
.greet{width:min(80vw,290px);padding:20px 24px 18px;transform-origin:center bottom}
.greet .greet-kicker{font-size:9.5px;letter-spacing:.24em;color:#cfe6f2;opacity:.92;margin-bottom:9px}
.greet .greet-big{font-size:25px;font-weight:600;letter-spacing:.004em;color:#f4f8fd;line-height:1.12}
.greet .greet-sub{margin-top:9px;font-size:12.5px;line-height:1.55;color:#dbe7f4}
.skills{width:min(90vw,372px);padding:22px 26px 20px}
.skills-title{font-size:22px;font-weight:600;letter-spacing:.01em;color:#f4f8fd;margin-bottom:14px}
.skill-group{margin:11px 0}
.skill-cat{display:block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--glacial,#7fd2e8);margin-bottom:4px}
.skill-tags{display:block;font-size:12px;line-height:1.5;color:#e2ecf7}
.lg-sheen{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:
    radial-gradient(120% 70% at 18% 0%,rgba(255,255,255,.2),transparent 46%),
    linear-gradient(215deg,rgba(255,255,255,.1),transparent 30%);
  mix-blend-mode:screen;
}
.co-kicker{font-size:10.5px;letter-spacing:.24em;color:#cfe6f2;opacity:.95}
.co-name{
  font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:600;letter-spacing:.02em;
  margin-top:10px;text-shadow:0 1px 18px rgba(4,10,22,.4);
}
.co-hook{color:#dbe6f3;font-size:.92rem;margin-top:6px}
.co-links{margin-top:16px;border-top:1px solid rgba(255,255,255,.18)}
.co-link{
  display:grid;grid-template-columns:1fr auto;gap:3px 14px;
  grid-template-areas:"n a" "d a";
  padding:11px 2px;
  border-bottom:1px dashed rgba(255,255,255,.14);
  transition:background .3s;
}
.co-link:hover{background:rgba(255,255,255,.07)}
.co-ln{grid-area:n;font-weight:500;font-size:.98rem}
.co-link:hover .co-ln{color:#bfeaf6}
.co-ld{grid-area:d;color:#c6d4e6;font-size:.84rem;line-height:1.55}
/* action cluster: a code (github) link + an optional live (deployed) link */
.co-acts{grid-area:a;align-self:center;display:flex;flex-direction:column;gap:7px;align-items:flex-end}
.co-act{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:10.5px;letter-spacing:.14em;white-space:nowrap;
  color:#cfe6f2;opacity:.82;padding:4px 10px;
  border:1px solid rgba(255,255,255,.22);border-radius:999px;
  transition:opacity .25s,color .25s,border-color .25s,background .25s;
}
.co-act:hover{opacity:1;color:#0c1626;background:rgba(207,230,242,.9);border-color:transparent}
.co-watch{border-color:rgba(255,120,120,.42);color:#f4c7c7}
.co-watch:hover{color:#fff;background:rgba(230,60,60,.92);border-color:transparent}
.co-meta{margin-top:12px;font-size:10px;letter-spacing:.18em;color:#c6d4e6;opacity:.8}

/* scene 05 — summit */
.sil-summit{
  position:absolute;right:clamp(0px,3vw,70px);bottom:-2px;
  width:min(46vw,580px);pointer-events:none;z-index:1;
}
.sil-summit img{width:100%;height:auto}

.summit-panel{
  position:absolute;left:clamp(20px,7vw,120px);top:50%;transform:translateY(-50%);
  z-index:2;
  background:rgba(244,248,253,.88);color:var(--ink);
  border-radius:22px;padding:clamp(28px,4vw,52px);
  width:min(88vw,520px);
  box-shadow:0 30px 80px rgba(4,10,22,.45);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.summit-panel .kicker{color:#20647a}
.summit-title{font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:600;margin-top:14px}
.summit-text{color:#33445e;margin-top:10px}
.mail{
  display:inline-block;margin-top:24px;
  font-size:clamp(1rem,1.9vw,1.25rem);font-weight:500;
  border-bottom:2px solid rgba(7,13,24,.25);padding-bottom:3px;
  transition:border-color .3s,color .3s;
}
.mail:hover{color:#177291;border-color:#177291}
.links{display:flex;gap:26px;margin-top:24px;font-size:12px;letter-spacing:.14em}
.links a{color:#33445e;transition:color .3s}
.links a:hover{color:#177291}
.badge{
  display:flex;align-items:center;gap:10px;
  margin-top:30px;font-size:10.5px;letter-spacing:.22em;color:#20647a;
}
.badge .dot{
  width:8px;height:8px;border-radius:50%;background:#2fae74;
  animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(47,174,116,.5)}
  70%{box-shadow:0 0 0 9px rgba(47,174,116,0)}
  100%{box-shadow:0 0 0 0 rgba(47,174,116,0)}
}
.foot{
  position:absolute;bottom:20px;left:0;right:0;
  text-align:center;font-size:10px;letter-spacing:.2em;color:var(--mist);opacity:.75;
}

/* ---------------- responsive ---------------- */
@media (max-width:920px){
  .timeline{display:none}
  .topbar{padding:18px 20px}
  .coords{left:20px;bottom:18px}
  .hero-wrap{top:36%}
  .name{letter-spacing:.09em;text-indent:.09em;
    filter:url(#liquidname)
      drop-shadow(0 0 5px rgba(255,255,255,.55))
      drop-shadow(0 2px 3px rgba(4,10,22,.72))
      drop-shadow(0 4px 14px rgba(4,10,22,.6));}
  .role{color:#c7d6e8}
  .about{left:18px;right:18px;top:44%;max-width:none}
  .sil{width:min(74vw,400px);right:0}
  .sil-cap{right:16px;bottom:18px}
  .hero-wrap{top:24%}
  .ridge-card.left,.ridge-card.right{left:18px;right:18px;width:auto}
  .summit-panel{left:18px;right:18px;width:auto;top:38%}
  .sil-summit{width:min(58vw,300px);right:-3vw}
  .foot{left:auto;right:16px;bottom:40px;text-align:right;font-size:9px;max-width:58vw}
}

@media (prefers-reduced-motion:reduce){
  .grain,.cue i{animation:none}
}