/* Sanket Yadav portfolio v2 — light, colour-blocked, scroll-driven */
:root{
  --paper:#FAF8F3;--ink:#141414;--signal:#C9341B;--stone:#EEEBE3;
  --lilac:#CDB8FF;--sky:#9FD3FF;--mint:#A8E6C3;--butter:#FFE066;
  --ease:cubic-bezier(.16,1,.3,1);
  --dither:conic-gradient(var(--ink) 25%,transparent 0 50%,var(--ink) 0 75%,transparent 0) 0 0/4px 4px;
}
html{scroll-behavior:smooth}
::selection{background:var(--ink);color:var(--paper)}

/* 12-column hairline grid, like a layout guide left on */
.gridlines{background-image:repeating-linear-gradient(to right,var(--line,rgba(20,20,20,.08)) 0 1px,transparent 1px calc(100%/12));background-size:calc(100% - 2*clamp(20px,2.8vw,48px)) 100%;background-position:center;background-repeat:no-repeat}

/* 4px dithered seam where one colour hands over to the next */
.dither-top{position:relative}
.dither-top::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:8px;background:conic-gradient(var(--c) 25%,transparent 0 50%,var(--c) 0 75%,transparent 0) 0 0/8px 8px;pointer-events:none}

/* dithered drop shadow for bubbles, pills, frames */
/* face (::before, inherits the box's own fill) sits ABOVE the dither (::after), so content always reads on a clean fill */
.dshadow{position:relative;isolation:isolate}
.dshadow::after{content:"";position:absolute;inset:-2px;transform:translate(7px,7px);border-radius:inherit;background:var(--dither);z-index:-2;pointer-events:none}
.dshadow::before{content:"";position:absolute;inset:0;border-radius:inherit;background:inherit;z-index:-1;pointer-events:none}

/* ---------- load-in ---------- */
.w{display:inline-block;opacity:0;transform:translateY(.4em) rotate(2deg);animation:w-in .9s var(--ease) forwards}
@keyframes w-in{to{opacity:1;transform:none}}

/* ---------- buttons ---------- */
.pill{transition:transform .5s var(--ease)}
.pill:hover{transform:translate(-2px,-2px)}
.pill:active{transform:translate(4px,4px)}
.pill:focus-visible,.tile:focus-visible,.copy:focus-visible,.av-hit:focus-visible,.chip:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.chip{transition:transform .4s var(--ease),background .2s}
.chip:hover{transform:translateY(-2px)}
.chip-on{background:var(--ink) !important;color:var(--paper) !important}
.copy{transition:letter-spacing .6s var(--ease)}
.copy:hover{letter-spacing:.01em}
.ulink{background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .6s var(--ease)}
.ulink:hover{background-size:100% 2px}

/* ---------- work tiles ---------- */
.tile .tile-img{transition:transform .7s var(--ease)}
.tile:hover .tile-img{transform:scale(1.04)}
.tile .tile-arrow{transition:transform .5s var(--ease)}
.tile:hover .tile-arrow{transform:translate(4px,-4px)}

input[type=range].budget{accent-color:var(--ink);width:100%}

/* ---------- mascot ---------- */
.av-fig{transform-origin:50% 92%}
.av-breathe{animation:av-breathe 3.6s ease-in-out infinite}
@keyframes av-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.av-wave-arm{animation:av-wave .9s ease-in-out infinite;transform-box:view-box;transform-origin:154px 160px}
@keyframes av-wave{0%,100%{transform:rotate(0)}50%{transform:rotate(-16deg)}}
.av-head{transform-box:view-box;transform-origin:120px 138px;transition:transform .5s var(--ease)}
.av-head-think{transform-box:view-box;transform-origin:120px 138px;transform:rotate(-9deg);transition:transform .5s var(--ease)}
.av-head-doze{transform-box:view-box;transform-origin:120px 138px;animation:av-nod 2.4s ease-in-out infinite}
@keyframes av-nod{0%,100%{transform:rotate(4deg) translateY(4px)}50%{transform:rotate(9deg) translateY(8px)}}
.av-eyes{animation:av-blink 5s infinite;transform-box:view-box;transform-origin:120px 96px}
@keyframes av-blink{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
.av-zzz{animation:av-zzz 2.4s ease-out infinite}
@keyframes av-zzz{0%{opacity:0;transform:translate(0,0)}30%{opacity:1}100%{opacity:0;transform:translate(14px,-30px)}}
.t-dance{animation:av-dance .5s ease-in-out 5}
@keyframes av-dance{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg) translateY(-8px)}75%{transform:rotate(8deg) translateY(-8px)}}
.t-punch{animation:av-punch .32s ease-in-out 6}
@keyframes av-punch{0%,100%{transform:translateX(0)}50%{transform:translateX(12px)}}
.t-panic,.t-tickle{animation:av-shake .11s linear 18}
@keyframes av-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.t-fly{animation:av-fly 2.6s ease-in-out 1}
@keyframes av-fly{0%{transform:translateY(0)}35%,70%{transform:translateY(-90px) rotate(-3deg)}100%{transform:translateY(0)}}
.t-vanish{animation:av-vanish 2.2s steps(7) 1}
@keyframes av-vanish{0%{opacity:1}40%,62%{opacity:0}100%{opacity:1}}
.t-hiccup{animation:av-hic .55s ease-out 3}
@keyframes av-hic{0%,100%{transform:translateY(0)}30%{transform:translateY(-12px)}}
.t-peekaboo{animation:av-peek 2.6s ease-in-out 1}
@keyframes av-peek{0%{transform:translateY(0)}30%,55%{transform:translateY(110%)}75%{transform:translateY(30%)}100%{transform:translateY(0)}}
.t-dizzy{animation:av-dizzy 1.3s ease-in-out 2}
@keyframes av-dizzy{0%{transform:perspective(600px) rotateY(0)}100%{transform:perspective(600px) rotateY(720deg)}}
.t-sneeze{animation:av-sneeze 1.4s ease-in 1}
@keyframes av-sneeze{0%{transform:none}55%{transform:scale(1.05) translateY(-4px) rotate(-4deg)}65%{transform:translateX(16px) translateY(-12px) rotate(5deg)}100%{transform:none}}
.t-sulk{transform:scaleX(-1);transition:transform .4s}
.t-held{animation:av-swing 1.1s ease-in-out infinite;transform-origin:50% 0}
@keyframes av-swing{0%,100%{transform:translateY(-16px) rotate(-6deg)}50%{transform:translateY(-16px) rotate(6deg)}}
.av-flash{animation:av-flash .5s ease-out 1 forwards}
@keyframes av-flash{0%{opacity:.95}100%{opacity:0}}
.av-stars{animation:av-spin 1s linear infinite;transform-box:view-box;transform-origin:120px 40px}
@keyframes av-spin{to{transform:rotate(360deg)}}
.av-hit{appearance:none;background:none;border:0;padding:0;margin:0;cursor:grab;display:block;width:100%}
.av-hit:active{cursor:grabbing}
.pop-a{animation:pop-a .55s var(--ease)}
.pop-b{animation:pop-b .55s var(--ease)}
@keyframes pop-a{from{opacity:0;transform:translateY(10px) scale(.85) rotate(-3deg)}to{opacity:1;transform:none}}
@keyframes pop-b{from{opacity:0;transform:translateY(10px) scale(.85) rotate(3deg)}to{opacity:1;transform:none}}

/* ---------- scroll-driven motion (progressive enhancement) ---------- */
.scrub{color:var(--ink)}
.scrub-accent{color:var(--signal)}
@supports (animation-timeline: view()){
  .about-tl{view-timeline:--about block}
  .scrub,.scrub-accent{animation:scrub linear both;animation-timeline:--about}
  .scrub{--from:rgba(20,20,20,.16)}
  .scrub-accent{--from:rgba(201,52,27,.22);--to:var(--signal)}
  @keyframes scrub{from{color:var(--from)}to{color:var(--to,var(--ink))}}

  .note{animation:note-in linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  @keyframes note-in{from{opacity:0;transform:translateY(60px) scale(.9) rotate(-3deg)}to{opacity:1;transform:none}}

  .ch-tl{view-timeline:--ch block}
  .para-up{animation:para-up linear both;animation-timeline:--ch;animation-range:cover 0% cover 100%}
  @keyframes para-up{from{transform:translateY(140px) rotate(4deg)}to{transform:translateY(-140px) rotate(-2deg)}}
  .para-img{animation:para-img linear both;animation-timeline:--ch;animation-range:cover 0% cover 100%}
  @keyframes para-img{from{transform:scale(1.12) translateY(-3%)}to{transform:scale(1.02) translateY(3%)}}

  .hero-out{animation:hero-out linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
  @keyframes hero-out{to{transform:translateY(-18%) scale(.96);opacity:.25}}

  .rise{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
  @keyframes rise{from{opacity:0;transform:translateY(80px)}to{opacity:1;transform:none}}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .w{opacity:1;transform:none;animation:none}
  .scrub,.scrub-accent,.note,.para-up,.para-img,.hero-out,.rise,.pop-a,.pop-b{animation:none !important}
  .scrub{color:var(--ink)}.scrub-accent{color:var(--signal)}
  .av-fig,.av-fig *,.av-breathe,.av-zzz,.av-stars{animation:none !important}
}

/* floating device overlays: stacked on small screens, overlapping the frame on wide ones */
.float-l,.float-r{position:relative;margin-top:28px;max-width:320px}
@media (min-width:900px){
  .float-l{position:absolute;left:-5%;bottom:-9%;margin:0;z-index:2}
  .float-r{position:absolute;right:-4%;bottom:-11%;margin:0;z-index:2}
}
.sticky-col{position:relative}
@media (min-width:900px){.sticky-col{position:sticky;top:64px}}

/* ---------- mascot v3: entrances ---------- */
.av-enter-load{animation:av-zoom 1.6s cubic-bezier(.2,1.25,.35,1) both;transform-origin:50% 30%}
@keyframes av-zoom{0%{transform:scale(3.4) translateY(-6%);opacity:0}12%{opacity:1}100%{transform:none;opacity:1}}
.av-bubble-late{animation:pop-a .6s var(--ease) 1.1s both}
@supports (animation-timeline: view()){
  .av-enter-scroll{animation:av-zoom-s linear both;animation-timeline:view();animation-range:entry 0% cover 38%;transform-origin:50% 30%}
  @keyframes av-zoom-s{0%{transform:scale(2.6) translateY(-8%);opacity:0}25%{opacity:1}100%{transform:none;opacity:1}}
  .bubble-scroll{animation:pop-in linear both;animation-timeline:view();animation-range:entry 30% cover 45%}
  @keyframes pop-in{from{opacity:0;transform:translateY(16px) scale(.8) rotate(-4deg)}to{opacity:1;transform:none}}
}
.av-look{animation:av-look 6s ease-in-out infinite;transform-box:view-box;transform-origin:150px 150px}
@keyframes av-look{0%,40%,100%{transform:translateX(0)}50%,70%{transform:translateX(4px)}80%,90%{transform:translateX(-3px)}}
.av-lens{animation:av-lens 2.4s ease-in-out infinite;transform-box:view-box;transform-origin:240px 210px}
@keyframes av-lens{0%,100%{transform:rotate(0)}50%{transform:rotate(-6deg) translate(-4px,2px)}}
.av-board{animation:av-board 2.8s ease-in-out infinite;transform-box:view-box;transform-origin:150px 300px}
@keyframes av-board{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg) translateY(-3px)}}

/* ---------- story sets ---------- */
.crowd-dot{animation:crowd 7s linear infinite;offset-rotate:0deg}
@keyframes crowd{from{offset-distance:0%}to{offset-distance:100%}}
.tile-pop{animation:tile-pop .5s var(--ease) both}
@supports (animation-timeline: view()){
  .tile-pop{animation:tile-pop linear both;animation-timeline:view();animation-range:entry 10% entry 90%}
  .note-sort{animation:note-sort linear both;animation-timeline:--ch;animation-range:cover 20% cover 55%}
  .route-draw{stroke-dasharray:1400;animation:route-draw linear both;animation-timeline:--ch;animation-range:cover 15% cover 55%}
}
@keyframes tile-pop{from{opacity:0;transform:scale(.4) rotate(-8deg)}to{opacity:1;transform:none}}
@keyframes note-sort{from{transform:translate(var(--dx),var(--dy)) rotate(var(--r))}to{transform:none}}
@keyframes route-draw{from{stroke-dashoffset:1400}to{stroke-dashoffset:0}}
.pin-bob{animation:pin-bob 2s ease-in-out infinite}
@keyframes pin-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion: reduce){
  .av-enter-load,.av-enter-scroll,.av-bubble-late,.bubble-scroll,.av-look,.av-lens,.av-board,.crowd-dot,.tile-pop,.note-sort,.route-draw,.pin-bob{animation:none !important}
}

/* ---------- narrator (one persistent guide that follows the scroll) ---------- */
.nar-layer,.nar-layer *{pointer-events:none}
.nar-layer .av-hit,.nar-layer button{pointer-events:auto}
.nar-walk{animation:nar-walk .34s ease-in-out infinite;transform-origin:30% 100%}
@keyframes nar-walk{0%,100%{transform:translateY(0) rotate(-2.5deg)}50%{transform:translateY(-7px) rotate(2.5deg)}}
.nar-hop{animation:nar-hop .65s cubic-bezier(.3,1.6,.5,1);transform-origin:30% 100%}
@keyframes nar-hop{0%{transform:none}35%{transform:translateY(-34px) scale(1.04,.96)}70%{transform:translateY(0) scale(1.07,.9)}100%{transform:none}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.snd-btn{transition:transform .4s var(--ease)}
.snd-btn:hover{transform:scale(1.07)}
.snd-btn:active{transform:scale(.94)}
.snd-btn:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.snd-wave{animation:snd-wave 1.1s ease-in-out infinite}
@keyframes snd-wave{0%,100%{opacity:1}50%{opacity:.25}}
.snd-hint{animation:snd-hint 2.4s ease-in-out infinite}
@keyframes snd-hint{0%,100%{transform:translateX(0)}50%{transform:translateX(-6px)}}
.spot{pointer-events:none}
@media (prefers-reduced-motion: reduce){.nar-walk,.nar-hop,.snd-wave,.snd-hint{animation:none !important}}

/* ---------- v6: bust guide ---------- */
.av-wave-hand{animation:av-wh .8s ease-in-out infinite;transform-box:view-box;transform-origin:284px 170px}
@keyframes av-wh{0%,100%{transform:rotate(0)}50%{transform:rotate(-18deg)}}
.nar-layer{transition:width .7s cubic-bezier(.16,1,.3,1)}
.scroll-cue{animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(6px);opacity:.5}}
.hl{color:inherit}
@media (prefers-reduced-motion: reduce){.av-wave-hand,.scroll-cue{animation:none !important}}

/* ---------- v7: 3D guide + pointing ---------- */
canvas.av3d{image-rendering:pixelated;image-rendering:crisp-edges;display:block;width:100%;aspect-ratio:1/1}
.sy-target{outline:3px dashed currentColor;outline-offset:10px;border-radius:12px;animation:sy-t 1.4s ease-in-out infinite}
@keyframes sy-t{0%,100%{outline-offset:8px}50%{outline-offset:16px}}
.stage-col{position:relative}
@media (prefers-reduced-motion: reduce){.sy-target{animation:none !important}}

/* ---------- v8: only the guide's head is grabbable, so he never blocks clicks underneath ---------- */
.av-hot{display:none}
.nar-layer button.av-hit{pointer-events:none;cursor:default}
.nar-layer .av-hot{display:block;position:absolute;left:30%;top:6%;width:40%;height:42%;background:transparent;border:0;padding:0;margin:0;cursor:grab;pointer-events:auto;border-radius:50%}
.nar-layer .av-hot:focus-visible{outline:3px solid var(--ink);outline-offset:4px}

/* ---------- v9: project steps stay pinned and reveal one by one with the scroll ---------- */
.note-step{opacity:1}
@supports (animation-timeline: view()){
  .note-step{animation:step-in linear both;animation-timeline:--ch}
}
@keyframes step-in{from{opacity:0;transform:translateY(28px) scale(.95)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.note-step{animation:none !important;opacity:1}}

/* ---------- v10: app walkthroughs (pinned, horizontal, scroll-driven) ---------- */
.tour-tl{view-timeline:--tour block}
.tour-track{will-change:transform}
.tour-scroller{overflow:visible}
@supports (animation-timeline: view()){
  .tour-track{animation:tour-x linear both;animation-timeline:--tour;animation-range:contain 0% contain 100%}
  .tcard{animation:tcard-in linear both;animation-timeline:--tour}
  .zoom-img{animation:zoom-in linear both;animation-timeline:view();animation-range:entry 0% cover 55%}
}
@keyframes tour-x{from{transform:translateX(0)}to{transform:translateX(var(--shift))}}
@keyframes tcard-in{from{opacity:.25;transform:translateY(40px) scale(.9)}to{opacity:1;transform:none}}
@keyframes zoom-in{from{transform:scale(1.14);opacity:.6}to{transform:none;opacity:1}}
@supports not (animation-timeline: view()){
  .tour-tl{height:auto !important}
  .tour-pin{position:relative !important;height:auto !important;padding:90px 0 !important}
  .tour-scroller{overflow-x:auto !important}
}
@media (max-width:760px){
  .tour-tl{height:auto !important}
  .tour-pin{position:relative !important;height:auto !important;padding:80px 0 !important}
  .tour-scroller{overflow-x:auto !important;scroll-snap-type:x mandatory}
  .tour-track{animation:none !important;transform:none !important}
  .tcard{width:74vw !important;scroll-snap-align:center}
}
.float-y{animation:float-y 6.5s ease-in-out infinite}
@keyframes float-y{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-16px) rotate(1.2deg)}}
.pan-y{animation:pan-y 22s cubic-bezier(.45,0,.55,1) infinite alternate;will-change:transform;backface-visibility:hidden}
@keyframes pan-y{0%,8%{transform:translate3d(0,0,0)}92%,100%{transform:translate3d(0,var(--pan,0%),0)}}
.tcard .shot{transition:transform .7s var(--ease)}
.tcard:hover .shot{transform:translateY(-6px) scale(1.02)}
@media (prefers-reduced-motion: reduce){.float-y,.pan-y,.tour-track,.tcard,.zoom-img{animation:none !important}}

/* ---------- v11: smoother motion ---------- */
.tour-track,.tcard,.float-y,.note-step,.zoom-img{backface-visibility:hidden}
.tcard{will-change:transform,opacity}
.nar-layer{contain:layout style}
canvas.av3d{will-change:transform}