/* ============================================================
   THARUN TEJ ANDHE — portfolio
   palette: high-altitude blue · glacial teal · snow
   ============================================================ */

:root{
  --ink:#070d18;
  --deep:#0b1626;
  --panel:#0d1930;
  --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{scroll-behavior:smooth}
html,body{background:var(--ink);color:var(--snow)}
body{
  font-family:'Sora',system-ui,sans-serif;
  font-weight:400;
  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}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

::selection{background:rgba(127,210,232,.28);color:var(--snow)}

/* ---------------- fixed chrome ---------------- */

.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;
}
.lb-top{top:0;transform:translateY(-101%)}
.lb-bot{bottom:0;transform:translateY(101%)}

.topbar{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:22px 30px;
  font-size:12px;letter-spacing:.14em;
  mix-blend-mode:normal;
}
.topbar a{text-shadow:0 1px 10px rgba(4,8,16,.65)}
.brand{color:var(--snow);opacity:.9}
.topnav{display:flex;gap:26px}
.topnav a{color:var(--mist);transition:color .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}

/* ---------------- scenes ---------------- */

.scene{
  position:relative;
  min-height:100svh;
  overflow:clip;
}
.scene .bg{position:absolute;inset:0;z-index:0}
.scene .bg img,.scene .bg canvas{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
}
.scene::before,.scene::after{
  content:"";position:absolute;left:0;right:0;height:16svh;z-index:1;pointer-events:none;
}
.scene::before{top:0;background:linear-gradient(180deg,var(--ink),transparent)}
.scene::after{bottom:0;background:linear-gradient(0deg,var(--ink),transparent)}
#arrival::before{height:0}

.shade{position:absolute;inset:0;z-index:1;pointer-events:none}
.wrap{position:relative;z-index:2}

.kicker{
  font-size:11px;letter-spacing:.3em;color:var(--glacial);
  text-transform:lowercase;opacity:.85;
}

/* ---------------- scene 01 · arrival ---------------- */

.shade-hero{background:
  radial-gradient(120% 70% at 50% 108%, rgba(7,13,24,.55), transparent 60%);
}
.hero-wrap{
  position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);
  text-align:center;width:min(94vw,1100px);
}
.hero-wrap .kicker{margin-bottom:26px}
.name{
  font-size:clamp(2rem,6.4vw,4.9rem);
  font-weight:600;
  letter-spacing:.13em;
  line-height:1.14;
  text-indent:.13em; /* optical balance for tracking */
  text-shadow:0 2px 42px rgba(2,10,24,.55);
}
.role{
  margin-top:22px;
  font-size:12.5px;letter-spacing:.34em;color:var(--mist);
}
.coords{
  position:absolute;left:30px;bottom:26px;z-index:2;
  font-size:10.5px;letter-spacing:.14em;color:var(--mist);opacity:.7;
}
.cue{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:10px;letter-spacing:.3em;color:var(--mist);
}
.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 · the word ---------------- */

.shade-word{background:
  linear-gradient(180deg,rgba(7,13,24,.3),rgba(7,13,24,.52)),
  radial-gradient(90% 60% at 50% 50%, transparent, rgba(7,13,24,.45));
}
#word{display:grid;place-items:center}
.word-wrap{text-align:center;padding:0 6vw}
.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,.6);
}
.word .ch{opacity:.1;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 · the observer ---------------- */

.scene-observer{min-height:130svh}
.shade-observer{background:
  linear-gradient(90deg,rgba(7,13,24,.55) 0%,rgba(7,13,24,.18) 45%,transparent 70%);
}
.observer-wrap{
  min-height:130svh;
  display:flex;align-items:center;
  padding:0 0 0 clamp(24px,7vw,110px);
}
.about{max-width:46ch}
.about .kicker{margin-bottom:24px}
.about-text{
  font-size:clamp(1.02rem,1.45vw,1.25rem);
  font-weight:400;color:var(--snow);
  text-shadow:0 1px 24px rgba(2,10,24,.5);
}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.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);
  backdrop-filter:blur(4px);
}
.sil{
  position:absolute;right:clamp(0px,4vw,80px);bottom:-2px;z-index:2;
  width:min(42vw,560px);
  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;z-index:3;
  font-size:10px;letter-spacing:.22em;color:var(--glacial);opacity:0;
}

/* ---------------- scene 04 · four ridges ---------------- */

.ridges{background:var(--ink)}
.ridges::before,.ridges::after{display:none}
.contours{
  position:absolute;inset:-12% 0;z-index:0;pointer-events:none;
  background:url('../assets/img/contours.png') center/cover no-repeat;
  opacity:.12;
}
.ridges-wrap{
  width:min(92vw,1060px);margin:0 auto;
  padding:18svh 0 16svh;
}
.ridges-title{
  font-size:clamp(1.9rem,5vw,3.6rem);
  font-weight:600;letter-spacing:.16em;
  margin-top:18px;
}
.ridges-sub{color:var(--mist);margin-top:12px;font-size:.95rem}
.ridge-list{margin-top:7svh;border-bottom:1px solid var(--line)}
.ridge{border-top:1px solid var(--line)}
.ridge-head{
  display:grid;width:100%;text-align:left;
  grid-template-columns:3.4rem minmax(12rem,.9fr) 1.6fr 2.4rem;
  gap:20px;align-items:baseline;
  padding:30px 4px;
  transition:background .35s;
}
.ridge-head:hover{background:rgba(127,210,232,.035)}
.r-idx{font-size:11px;color:var(--glacial);letter-spacing:.12em}
.r-name{
  font-size:clamp(1.15rem,2vw,1.5rem);font-weight:600;letter-spacing:.02em;
  transition:color .3s;
}
.ridge-head:hover .r-name{color:var(--glacial)}
.r-hook{color:var(--mist);font-size:.94rem;line-height:1.55}
.r-plus{
  justify-self:end;font-weight:300;font-size:1.5rem;color:var(--mist);
  transition:transform .45s var(--ease),color .3s;line-height:1;
}
.ridge-head[aria-expanded="true"] .r-plus{transform:rotate(45deg);color:var(--glacial)}
.ridge-body{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .55s var(--ease);
}
.ridge-head[aria-expanded="true"]+.ridge-body{grid-template-rows:1fr}
.ridge-inner{overflow:hidden;min-height:0}
.proj{
  display:grid;grid-template-columns:minmax(11rem,16rem) 1fr 2rem;
  gap:20px;align-items:baseline;
  padding:16px 4px 16px 3.4rem;
  border-top:1px dashed rgba(169,186,209,.12);
  transition:background .3s;
}
.proj:hover{background:rgba(127,210,232,.05)}
.p-name{font-weight:500;font-size:1rem}
.proj:hover .p-name{color:var(--glacial)}
.p-desc{color:var(--mist);font-size:.9rem;line-height:1.6}
.p-go{justify-self:end;color:var(--glacial);opacity:.7}
.r-meta{
  padding:14px 4px 26px 3.4rem;
  font-size:10.5px;letter-spacing:.18em;color:var(--mist);opacity:.75;
}

/* ---------------- scene 05 · above the clouds ---------------- */

#above{display:grid;place-items:center}
.shade-above{background:
  linear-gradient(180deg,rgba(7,13,24,.35),transparent 30%,transparent 72%,rgba(7,13,24,.5));
}
.above-wrap{padding:16svh 5vw}
.above-panel{
  background:rgba(244,248,253,.86);
  color:var(--ink);
  border-radius:22px;
  padding:clamp(30px,4.5vw,56px);
  max-width:600px;
  box-shadow:0 30px 80px rgba(4,10,22,.4);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  text-align:left;
}
.above-panel .kicker{color:#20647a}
.above-title{
  font-size:clamp(1.7rem,3.6vw,2.6rem);font-weight:600;letter-spacing:.02em;
  margin-top:16px;
}
.above-text{color:#33445e;margin-top:12px}
.mail{
  display:inline-block;margin-top:26px;
  font-size:clamp(1rem,2vw,1.3rem);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:26px;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:34px;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;z-index:2;
  text-align:center;font-size:10px;letter-spacing:.2em;color:var(--mist);opacity:.7;
}

/* ---------------- responsive ---------------- */

@media (max-width:920px){
  .timeline{display:none}
  .topbar{padding:18px 20px}
  .hero-wrap{top:38%}
  .name{letter-spacing:.09em;text-indent:.09em}
  .coords{left:20px;bottom:20px}
  .observer-wrap{
    min-height:0;align-items:flex-start;
    padding:16svh 24px 0;
  }
  .scene-observer{min-height:150svh}
  .sil{width:min(78vw,430px);right:0}
  .sil-cap{right:18px;bottom:20px}
  .ridge-head{grid-template-columns:2.6rem 1fr 2rem;grid-template-areas:"i n p" "i h p"}
  .r-idx{grid-area:i}.r-name{grid-area:n}.r-hook{grid-area:h;margin-top:6px}.r-plus{grid-area:p;align-self:center}
  .proj{grid-template-columns:1fr 2rem;grid-template-areas:"n g" "d g";padding-left:2.6rem}
  .p-name{grid-area:n}.p-desc{grid-area:d}.p-go{grid-area:g;align-self:center}
  .r-meta{padding-left:2.6rem}
  .above-wrap{padding:14svh 18px}
}

@media (prefers-reduced-motion:reduce){
  .grain,.cue i{animation:none}
  html{scroll-behavior:auto}
  .word .ch{opacity:1}
  .word-line{transform:scaleX(1)}
  .sil-machine{opacity:.9}
  .sil-cap{opacity:.8}
}