/* v3 motion layer on top of the live shubh.lately styles.
   Without JS every page reads like the live site; JS only adds the choreography. */

/* switch off the live site's CSS scroll reveals; GSAP runs the show here */
.js-motion .tile,.js-motion .icard,.js-motion .meter,.js-motion .proj,.js-motion .photo,.js-motion .role,.js-motion .impact,.js-motion .duo>div,.js-motion .methods4>div,.js-motion .persona,.js-motion .pcard,.js-motion .solution,.js-motion .finding,.js-motion .tablewrap,.js-motion .glance,.js-motion .fill{animation:none!important}

/* scroll progress */
.progress{position:fixed;left:0;top:0;height:4px;width:100%;background:var(--pop);transform-origin:0 50%;transform:scaleX(0);z-index:100;pointer-events:none;border-radius:0 4px 4px 0}

/* custom cursor dot (fine pointers only, added by JS) */
.cursor{position:fixed;left:0;top:0;width:26px;height:26px;margin:-13px 0 0 -13px;pointer-events:none;z-index:200}
.cursor svg{width:100%;height:100%;display:block;transition:transform .3s cubic-bezier(.65,.05,0,1);filter:drop-shadow(0 3px 4px rgba(0,0,0,.18))}
.cursor.big svg{transform:scale(1.4)}

/* brand dot bounces now and then */
.brand span{display:inline-block;animation:dot 4s ease-in-out infinite}
@keyframes dot{0%,85%,100%{transform:translateY(0)}92%{transform:translateY(-3px)}}

.char,.word{display:inline-block;will-change:transform}
h1 .pop{display:inline-block}

/* rolling labels */
.roll{display:inline-grid;overflow:hidden;vertical-align:top;line-height:inherit}
.roll>span{grid-area:1/1;transition:transform .45s cubic-bezier(.25,.6,.3,1)}
.roll>span+span{transform:translateY(105%)}
a:hover>.roll>span:first-child{transform:translateY(-105%)}
a:hover>.roll>span+span{transform:translateY(0)}
.nav a .roll{padding-bottom:2px}
.nav a[aria-current="page"] .roll{box-shadow:inset 0 -2px 0 var(--pop)}

/* rotator */
.now{font-family:'Fredoka',sans-serif;font-size:clamp(17px,1.4vw,20px);margin:-4px 0 18px;color:var(--muted)}
.rotator{color:var(--ink);background:var(--soft);border-radius:8px;padding:1px 8px;white-space:nowrap}
.rotator::after{content:"";display:inline-block;width:2px;height:1em;margin-left:3px;background:var(--pop);vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* marker highlight */
.js-motion main p b,.js-motion main li b{background:linear-gradient(transparent 58%,var(--soft) 58%) no-repeat 0 0/0% 100%;transition:background-size .9s cubic-bezier(.65,.05,0,1)}
.js-motion main b.is-in{background-size:100% 100%}

/* ---------- About v3: v2 hero + photo on the side ---------- */
.hello-pill{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.04em;background:#fff;border:1.5px solid var(--ink);color:var(--ink);border-radius:999px;padding:6px 14px;margin:0}
.live-dot{width:8px;height:8px;border-radius:50%;background:#2bd46a;box-shadow:0 0 0 0 rgba(43,212,106,.6);animation:pulse 1.8s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(43,212,106,0)}100%{box-shadow:0 0 0 0 rgba(43,212,106,0)}}
.hero2{position:relative;overflow:hidden;background:#f6f1ea;border-radius:clamp(22px,2.6vw,40px);display:grid;place-items:center;text-align:center;margin:-30px 0 46px;padding:calc(var(--stk) * .75 + 28px) 16px}
.squiggle{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sq{fill:none;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.s1{stroke:var(--pop);stroke-width:46}
.s2{stroke:var(--pop);stroke-width:16;opacity:.55}
.hero2-inner{position:relative;z-index:2;display:grid;justify-items:center;gap:14px;padding:8px 0}
.hero-word{font-family:'Fredoka',sans-serif;font-weight:700;font-size:clamp(100px,21vw,300px);line-height:.82;letter-spacing:-.04em;color:var(--ink)}
.hero-tagline{font-family:'Fredoka',sans-serif;font-weight:600;font-size:clamp(22px,3.2vw,44px);margin:0;max-width:none;background:#fff;padding:0 .35em;border-radius:12px}
.stickers{position:absolute;inset:0;pointer-events:none;z-index:1}
.hero2{--stk:clamp(96px,13vw,190px)}
.sticker{position:absolute;width:var(--stk);aspect-ratio:4/3;border:6px solid #fff;border-radius:18px;overflow:hidden;box-shadow:0 18px 36px -18px rgba(0,0,0,.5);transform:rotate(var(--r))}
.sticker img{width:100%;height:100%;object-fit:cover}
.k1{left:3%;top:14px;--r:-6deg}.k2{right:3%;top:14px;--r:6deg}.k3{left:4%;bottom:14px;--r:5deg}.k4{right:4%;bottom:14px;--r:-5deg}
.intro-split{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(24px,4vw,60px);align-items:center;margin-bottom:30px}
.side-photo{width:100%;max-width:400px;justify-self:end;aspect-ratio:4/5;object-fit:cover;border-radius:22px;transform:rotate(1.5deg);box-shadow:0 22px 44px -26px rgba(0,0,0,.4);transition:transform .45s cubic-bezier(.25,.6,.3,1)}
.side-photo:hover{transform:rotate(0deg) scale(1.01)}

.ticker{overflow:hidden;margin:6px calc(-1 * clamp(0px,3vw,48px)) 10px;padding:12px 0;background:var(--ink);color:#fff;transform:rotate(-1.2deg);border-radius:6px}
.ticker-track{display:flex;gap:18px;width:max-content;white-space:nowrap;font-family:'Fredoka',sans-serif;font-size:clamp(16px,1.6vw,21px);animation:tick 24s linear infinite}
.ticker b{color:var(--pop)}
@keyframes tick{to{transform:translateX(-50%)}}

.done3{list-style:none;padding:0;margin:16px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.done3 li{display:grid;grid-template-columns:92px 1fr;gap:16px;align-items:start;padding:18px;border-radius:20px;background:#f6f1ea;border:1px solid var(--line);transition:background .25s,border-color .25s,transform .35s cubic-bezier(.65,.05,0,1)}
.done3 li:last-child:nth-child(odd){grid-column:1/-1}
.done3 li:hover{background:var(--soft);border-color:var(--pop);transform:translateY(-2px)}
.done3 p{margin:0;max-width:none;font-size:16px;line-height:1.55}
.thumb{width:92px;height:92px;border-radius:20px;object-fit:contain;background:#fff;padding:12px;border:1px solid var(--line);box-shadow:0 10px 22px -14px rgba(0,0,0,.35);transition:transform .45s cubic-bezier(.25,.6,.3,1)}
.done3 li:hover .thumb{transform:scale(1.04)}

.polaroids{overflow:hidden;margin:0 calc(-1 * clamp(16px,3vw,48px)) 30px;padding:34px 0 48px;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.pol-track{display:flex;gap:22px;width:max-content;animation:polslide 30s linear infinite}
@keyframes polslide{to{transform:translateX(calc(-50% - 11px))}}
.pol-track .pol{width:clamp(180px,20vw,250px);flex:none}
.pol{margin:0;background:#fff;padding:10px 10px 14px;border-radius:8px;border:1px solid #ebe3d6;box-shadow:0 1px 2px rgba(32,32,30,.06),0 10px 22px -10px rgba(32,32,30,.22);transition:transform .45s cubic-bezier(.25,.6,.3,1),box-shadow .45s}
.pol:nth-child(4n+1){rotate:-4deg}.pol:nth-child(4n+2){rotate:3deg;translate:0 14px}.pol:nth-child(4n+3){rotate:-2deg}.pol:nth-child(4n){rotate:5deg;translate:0 10px}
.pol:hover{transform:scale(1.03);box-shadow:0 2px 4px rgba(32,32,30,.08),0 18px 30px -14px rgba(32,32,30,.3);z-index:2;position:relative}
.pol img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:3px}
.pol figcaption{font-family:'Fredoka',sans-serif;font-size:14px;text-align:center;margin-top:8px}
.big-line{font-family:'Fredoka',sans-serif;font-size:clamp(24px,3vw,38px);line-height:1.15;margin:10px 0 18px}

@media(max-width:760px){
  .intro-split,.done3{grid-template-columns:1fr}
  .side-photo{justify-self:center;max-width:300px}
  .hero2{margin-top:-20px;--stk:clamp(92px,27vw,140px)}
  .done3 li{grid-template-columns:64px 1fr}
  .thumb{width:64px;height:64px;padding:8px}

}
@media(prefers-reduced-motion:reduce){.brand span,.rotator::after,.ticker-track,.live-dot,.pol-track{animation:none}}

/* no CSS transitions while GSAP is moving something in */
.js-motion .entering{transition:none!important}
/* cards waiting to slide in from the sides must not widen the page */
html.js-motion,.js-motion body{overflow-x:clip}

/* hero heading: "hi, i am" above the big name */
.hero-h1{display:grid;justify-items:center;gap:4px;margin:0}
.hi{font-family:'Fredoka',sans-serif;font-weight:600;font-size:clamp(22px,3vw,40px);background:var(--pop);color:#fff;border-radius:999px;padding:2px 18px;transform:rotate(-3deg)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.name-line{font-family:'Fredoka',sans-serif;font-weight:700;font-size:clamp(36px,4.6vw,60px);line-height:1;margin:0 0 10px;max-width:none}
@media(prefers-reduced-motion:reduce){.polaroids{overflow-x:auto}}

.intro.age{margin:0 0 10px;max-width:none}
.about-h{margin:0 0 14px}
.ticker{margin-top:-14px;margin-bottom:40px}
.intro.age .rotator{white-space:normal;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ---------- Beyond work: compact, in the site's own tile style ---------- */
.boxes3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.box3{display:flex;flex-direction:column;gap:6px;background:var(--soft);border-radius:16px;padding:12px 12px 18px;text-decoration:none;color:var(--ink);transition:transform .6s cubic-bezier(.25,.6,.3,1),box-shadow .6s}
.box3:hover{transform:translateY(-3px);box-shadow:0 18px 34px -26px rgba(32,32,30,.45)}
.box3 .kicker{margin:6px 4px 0}
.box3 b{font-family:'Fredoka',sans-serif;font-weight:500;font-size:19px;line-height:1.2;margin:0 4px}
.box3 p{font-size:14px;color:var(--muted);margin:0 4px;max-width:none}
.bthumb{position:relative;display:block;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:#111}
.bthumb img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.25,.6,.3,1)}
.box3:hover .bthumb img{transform:scale(1.04)}
.play{position:absolute;inset:0;margin:auto;width:50px;height:50px;border-radius:50%;background:#fff;color:var(--pop);display:grid;place-items:center;font-size:17px;padding-left:4px;box-shadow:0 10px 24px -10px rgba(0,0,0,.5);transition:transform .5s,background .5s,color .5s}
.box3:hover .play{transform:scale(1.06);background:var(--pop);color:#fff}
@media(max-width:760px){.boxes3{grid-template-columns:1fr}}

/* Beyond: President photo beside the achievement tiles */
.nerd{display:grid;grid-template-columns:1fr minmax(0,330px);gap:12px;align-items:stretch}
.nerd .tiles{margin-top:0}
.nerd-photo{position:relative;margin:0;border-radius:16px;overflow:hidden;min-height:420px}
.nerd-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;transition:transform .9s cubic-bezier(.25,.6,.3,1)}
.nerd-photo:hover img{transform:scale(1.03)}
.nerd-photo figcaption{position:absolute;left:10px;right:10px;bottom:10px;background:rgba(255,255,255,.94);border-radius:12px;padding:10px 12px;font-size:12.5px;color:var(--muted);display:grid;gap:2px}
.nerd-photo figcaption b{font-family:'Fredoka',sans-serif;font-weight:500;font-size:16px;color:var(--ink)}
@media(max-width:760px){.nerd{grid-template-columns:1fr}.nerd-photo{min-height:440px}}

/* star replaces the system cursor on mouse/trackpad devices (class added by JS) */
html.star-cursor,html.star-cursor *{cursor:none!important}
.cursor{opacity:0;transition:opacity .3s}

/* wide screens: photos sit in the side space next to the name, so the hero is shorter and fuller */
@media(min-width:1200px){
  .hero2{padding:64px 16px;min-height:min(78vh,640px)}
  .hero-word{font-size:min(21vw,300px)}
  .k1{left:3%;top:9%}.k2{right:3%;top:9%}.k3{left:4%;bottom:9%}.k4{right:4%;bottom:9%}
}

/* About me: bigger text, smaller photo, no dead space (no panel: Shubh wants open layout, not boxes) */
.intro-split{grid-template-columns:1fr minmax(0,300px);gap:clamp(24px,4vw,56px);align-items:center;margin-bottom:46px}
.intro-split .about-h{font-size:clamp(30px,3.2vw,44px);margin:0 0 16px}
.intro-split .intro{font-size:clamp(20px,1.9vw,27px);line-height:1.4;max-width:none;margin-bottom:12px}
.intro-split .intro.age{margin-bottom:6px}
.intro-split p:last-child{font-size:clamp(16px,1.25vw,19px);line-height:1.65;max-width:62ch;margin:0}
.intro-split .rotator{background:var(--soft)}
.side-photo{max-width:300px;justify-self:end}
@media(max-width:760px){.intro-split{grid-template-columns:1fr}.side-photo{justify-self:center;max-width:260px}}

/* About closing lines: open text, big first line */
.outro{margin:10px 0 20px}
.outro .big-line{margin:0 0 14px;max-width:none}
.outro p{font-size:clamp(16px,1.25vw,19px);line-height:1.65;max-width:none;margin:0 0 6px}
.outro p:last-child{margin:0}
.outro p.big-line{font-family:'Fredoka',sans-serif;font-size:clamp(24px,2.6vw,36px);line-height:1.2;margin:0 0 16px}