/* Sushant Navle — portfolio loader. Variables are prefixed --ld- so they never clash with your site. */
/*r*/:where(#loader,#loader *,.strips,.strips *){box-sizing:border-box;margin:0;padding:0}
body.loading{overflow:hidden}
html.already-loaded body.loading{overflow:visible}
html.already-loaded #loader,
html.already-loaded .strips{display:none !important}
:root{--ld-bg:#f2f2f0;--ld-ink:#0c0c0c;--ld-mut:#7d7d7a;--ld-mono:'Space Mono',ui-monospace,Menlo,monospace;--ld-disp:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;--ld-sg:'Space Grotesk',system-ui,sans-serif}
#loader{font-family:var(--ld-sg);color:var(--ld-ink);position:fixed;inset:0;z-index:99999;background:var(--ld-bg);overflow:hidden;}
#loader.done{pointer-events:none;opacity:0}
.grid{position:absolute;inset:0;background-image:linear-gradient(rgba(0,0,0,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.055) 1px,transparent 1px);background-size:56px 56px}
.top{position:absolute;z-index:6;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:calc(16px + env(safe-area-inset-top,0px)) clamp(16px,4vw,60px) 16px;font-family:var(--ld-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--ld-disp);font-style:italic;font-weight:800;font-size:18px;letter-spacing:0}
.brand b{font-style:normal;font-weight:500;margin-left:-6px}
.brand i{width:34px;height:34px;border-radius:50%;border:2px solid var(--ld-ink);background:#fff url(../photos/avatar.png) 50% 8%/190% no-repeat}
.pill{background:var(--ld-ink);color:#fff;border-radius:999px;padding:9px 18px;font-family:var(--ld-sg);font-size:13px;letter-spacing:0;text-transform:none;font-weight:700}
.names{position:absolute;z-index:2;left:0;top:34%;width:max-content;display:flex;white-space:nowrap;font-family:var(--ld-disp);font-style:italic;font-weight:800;font-size:clamp(88px,19vw,300px);line-height:.9;letter-spacing:-.03em;animation:slide 18s linear infinite;will-change:transform}
.names span{padding-right:.35em}
.names em{font-style:italic;color:transparent;-webkit-text-stroke:2px var(--ld-ink)}
@keyframes slide{to{transform:translateX(-50%)}}
.av{position:absolute;z-index:3;left:50%;bottom:0;height:min(calc(100vh - 96px - env(safe-area-inset-top,0px)),100vw);aspect-ratio:468/495;transform:translateX(-50%);clip-path:inset(100% 0 0 0)}
.av img{width:100%;height:100%;display:block;filter:drop-shadow(0 0 1px #fff) drop-shadow(0 20px 28px rgba(0,0,0,.25));transform-origin:50% 100%}
.beam{position:absolute;z-index:4;left:50%;bottom:0;height:3px;width:min(calc((100vh - 96px) * .9455),94.55vw);transform:translateX(-50%);background:var(--ld-ink);box-shadow:0 0 18px rgba(0,0,0,.5)}
.copy{position:absolute;z-index:5;left:clamp(16px,4vw,60px);bottom:calc(86px + env(safe-area-inset-bottom,0px));max-width:min(330px,40vw);font-size:clamp(11px,1.15vw,16px);line-height:1.55;letter-spacing:.02em;text-transform:uppercase;color:#555}
.copy small{display:block;margin-top:12px;font-family:var(--ld-mono);font-size:11px;letter-spacing:.3em;color:var(--ld-ink)}
.count{position:absolute;z-index:5;right:clamp(16px,4vw,60px);bottom:calc(70px + env(safe-area-inset-bottom,0px));text-align:right;font-family:var(--ld-mono);font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--ld-mut)}
#pct{display:block;font-family:var(--ld-disp);font-style:italic;font-weight:800;font-size:clamp(72px,13vw,190px);line-height:.85;letter-spacing:-.04em;color:var(--ld-ink);font-variant-numeric:tabular-nums}
#pct u{text-decoration:none;font-size:.4em;color:transparent;-webkit-text-stroke:1.5px var(--ld-ink)}
#st::after{content:"_";animation:bl .8s steps(1) infinite}@keyframes bl{50%{opacity:0}}
.line{position:absolute;z-index:6;left:0;bottom:0;height:6px;width:100%;background:rgba(0,0,0,.1)}
.line div{height:100%;width:0;background:var(--ld-ink)}
.proj{position:absolute;z-index:5;left:0;right:0;bottom:calc(20px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;gap:clamp(10px,2vw,28px);flex-wrap:wrap;font-family:var(--ld-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ld-mut);padding:0 12px}
.proj span{transition:.3s}.proj span.on{color:var(--ld-ink);font-weight:700}
.strips{position:fixed;inset:0;z-index:99998;display:flex;pointer-events:none}
.strips i{flex:1;background:#0c0c0c;transform:translateY(100%);transition:transform .75s cubic-bezier(.76,0,.24,1)}
.strips.in i{transform:none}.strips.out i{transform:translateY(-100%)}
.strips i:nth-child(2){transition-delay:.06s}.strips i:nth-child(3){transition-delay:.12s}.strips i:nth-child(4){transition-delay:.18s}.strips i:nth-child(5){transition-delay:.24s}
@media(max-width:700px){.copy{display:none}.names{top:26%}.proj{font-size:9px}}
@media(prefers-reduced-motion:reduce){.names{animation:none}}

/* ---- extra elements ---- */
.nv{display:flex;gap:clamp(18px,3vw,48px);font-family:var(--ld-sg);font-size:14px;letter-spacing:0;color:#9a9a97;text-transform:none}
.nv span:first-child{color:var(--ld-ink);border-bottom:2px solid var(--ld-ink);padding-bottom:3px}
.chips{position:absolute;z-index:4;left:50%;bottom:0;height:min(calc(100vh - 96px - env(safe-area-inset-top,0px)),100vw);aspect-ratio:468/495;transform:translateX(-50%);pointer-events:none}
.chip{position:absolute;display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:#fff;border:1.5px solid var(--ld-ink);font-family:var(--ld-mono);font-size:11px;font-weight:700;letter-spacing:.12em;white-space:nowrap;box-shadow:4px 4px 0 var(--ld-ink);opacity:0;scale:.4;transition:opacity .4s,scale .6s cubic-bezier(.3,1.7,.5,1);animation:fl 3.2s ease-in-out infinite var(--d,0s)}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ld-ink)}
.chip.on{opacity:1;scale:1}.chip.inv{background:var(--ld-ink);color:#fff;box-shadow:4px 4px 0 #9a9a97}.chip.inv::before{background:#fff}
@keyframes fl{50%{translate:0 -10px}}
.badge{position:absolute;left:76%;top:1%;width:clamp(96px,9.5vw,150px);height:auto;overflow:visible;opacity:0;transition:opacity .6s}
.badge.on{opacity:1}
.badge .bs{transform-origin:60px 60px;animation:spin 14s linear infinite}
.badge text{font-family:var(--ld-mono);font-size:10px;font-weight:700;fill:var(--ld-ink)}
.badge circle{fill:#fff;stroke:var(--ld-ink);stroke-width:1.5}
@keyframes spin{to{transform:rotate(360deg)}}
.live{position:absolute;left:-4%;top:30%;display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--ld-ink);color:#fff;font-family:var(--ld-mono);font-size:10px;letter-spacing:.2em;white-space:nowrap}
.live i{width:8px;height:8px;border-radius:50%;background:#fff;animation:pl 1.2s infinite}@keyframes pl{50%{opacity:.2;scale:.6}}
.cr{position:absolute;z-index:5;width:20px;height:20px;border:0 solid var(--ld-ink)}
.cr.a{top:84px;left:14px;border-width:2px 0 0 2px}.cr.b{top:84px;right:14px;border-width:2px 2px 0 0}
.cr.c{bottom:14px;left:14px;border-width:0 0 2px 2px}.cr.d{bottom:14px;right:14px;border-width:0 2px 2px 0}
.side{position:absolute;z-index:5;right:clamp(14px,2.2vw,34px);top:50%;transform:translateY(-50%);writing-mode:vertical-rl;font-family:var(--ld-mono);font-size:10px;letter-spacing:.45em;color:var(--ld-mut)}
.star{position:absolute;z-index:5;left:clamp(16px,4vw,60px);top:104px;font-size:30px;line-height:1;animation:spin 8s linear infinite}
.code{position:absolute;z-index:5;left:clamp(16px,4vw,60px);top:calc(50% + 6vw);width:min(300px,26vw);padding:14px 16px;background:rgba(255,255,255,.85);backdrop-filter:blur(6px);border:1.5px solid var(--ld-ink);border-radius:12px;box-shadow:5px 5px 0 var(--ld-ink);font-family:var(--ld-mono);font-size:11px;line-height:1.6;white-space:pre;min-height:140px;color:#222}
.code::before{content:"● ● ●";display:block;letter-spacing:4px;font-size:8px;margin-bottom:8px;color:#aaa}
.code b{display:inline-block;width:7px;height:13px;background:var(--ld-ink);vertical-align:-2px;animation:bl .8s steps(1) infinite}
@media(max-width:1100px),(max-height:760px){.code,.side{display:none}}
@media(max-width:700px){.nv,.live,.star{display:none}.chip{font-size:9px;padding:6px 10px;box-shadow:3px 3px 0 var(--ld-ink)}.cr.a,.cr.b{top:74px}.badge{left:70%;width:84px}}

.top{background:#fff;box-shadow:0 6px 30px rgba(0,0,0,.12)}
.code{top:122px}
.star{left:auto;right:calc(4vw + 34px);top:100px}
.proj{bottom:6px;padding-top:30px;padding-bottom:14px;background:linear-gradient(transparent,var(--ld-bg) 60%)}
.line{z-index:7}

.brand b{margin-left:0}
@media(max-width:700px){
.names{top:33%}
.chip:nth-child(1){left:3%!important;top:30%!important}.chip:nth-child(2){left:62%!important;top:36%!important}
.chip:nth-child(3){left:2%!important;top:50%!important}.chip:nth-child(4){left:66%!important;top:52%!important}
.chip:nth-child(n+5){display:none}
#pct{font-size:58px}.count{bottom:58px}
}