/* ==========================================================
   SAMEER KUMAR — PORTFOLIO (shared by the site and /admin)
   Colours and fonts live in :root.
   ========================================================== */
:root{
  --ink:#05060d; --navy:#0a1030; --cyan:#22e3ff; --violet:#8b5cf6;
  --text:rgba(255,255,255,.88); --muted:rgba(255,255,255,.58); --dim:rgba(255,255,255,.4); --line:rgba(255,255,255,.1);
  --display:'Syne',system-ui,sans-serif; --serif:'Instrument Serif',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace; --sans:'Inter',system-ui,sans-serif;
  --max:1180px; --pad:clamp(1.2rem,4vw,2.6rem);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{background:var(--ink);color:var(--text);font:400 1rem/1.7 var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
ul,ol{list-style:none;padding:0}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
::selection{background:var(--cyan);color:var(--ink)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--cyan);color:var(--ink);padding:.6rem 1rem;border-radius:8px}
.skip:focus{left:12px}
.wrap{max-width:var(--max);margin:auto;padding:0 var(--pad)}
.label{font:500 .7rem var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--cyan)}
.cy{color:var(--cyan)} .serif{font-family:var(--serif);font-style:italic;font-weight:400}
h1,h2,h3{font-family:var(--display);line-height:1}

/* film grain */
body::before{content:"";position:fixed;inset:0;z-index:150;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* buttons & glass */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem 1.5rem;border-radius:99px;border:1px solid transparent;font:600 .88rem var(--sans);text-decoration:none;cursor:pointer;transition:.3s;background:none}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--cyan);color:var(--ink)}
.btn-primary:hover:not(:disabled){background:#fff;box-shadow:0 0 40px -6px var(--cyan)}
.btn-ghost{border-color:rgba(255,255,255,.2)}
.btn-ghost:hover:not(:disabled){border-color:var(--cyan);color:var(--cyan)}
.btn-danger{border-color:rgba(248,113,113,.45);color:#fca5a5}
.btn-danger:hover:not(:disabled){background:rgba(248,113,113,.12)}
.btn-sm{padding:.45rem 1rem;font-size:.78rem}
.glass{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:24px;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:100;border-bottom:1px solid transparent;transition:.4s}
.nav.scrolled,.nav.open{background:rgba(5,6,13,.72);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-color:var(--line)}
.nav-in{height:64px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;font:600 .9rem var(--display)}
.logo-mark{width:36px;height:36px;border-radius:12px;border:1px solid rgba(34,227,255,.5);display:grid;place-items:center;color:var(--cyan);font-weight:700;font-size:.8rem;transition:.3s}
.logo:hover .logo-mark{background:var(--cyan);color:var(--ink)}
.nav ul.links{display:flex;gap:2.2rem}
.nav .links a{position:relative;text-decoration:none;font:500 .72rem var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding:.4rem 0;transition:.3s}
.nav .links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:.3s}
.nav .links a:hover{color:#fff}.nav .links a:hover::after{transform:scaleX(1)}
.menu-btn{display:none}
@media(max-width:760px){
  .menu-btn{display:inline-flex}
  .nav ul.links{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;gap:0;padding:.5rem var(--pad) 1.5rem;background:rgba(5,6,13,.95);border-bottom:1px solid var(--line)}
  .nav.open ul.links{display:flex}
  .nav .links a{font:700 2rem var(--display);letter-spacing:0;text-transform:none;padding:.6rem 0;color:#fff}
}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:6rem 0 3.5rem;overflow:hidden}
.glow{position:absolute;border-radius:50%;filter:blur(130px);pointer-events:none}
.glow.v{width:34rem;height:34rem;right:-10rem;top:2rem;background:rgba(139,92,246,.2)}
.glow.c{width:26rem;height:26rem;left:-8rem;bottom:0;background:rgba(34,227,255,.1)}
.scene{position:absolute;left:30%;right:0;top:0;bottom:0}
.scene canvas{display:block;width:100%;height:100%}
.scene-fallback{position:absolute;inset:0;display:grid;place-items:center}
.orb{position:relative;width:min(20rem,60vw);aspect-ratio:1}
.orb i{position:absolute;border-radius:50%;border:1px solid rgba(139,92,246,.5)}
.orb i:nth-child(1){inset:0}.orb i:nth-child(2){inset:10%;border-color:rgba(34,227,255,.3)}
.orb i:nth-child(3){inset:25%;border-radius:18px;transform:rotate(45deg);background:var(--navy);border-color:rgba(34,227,255,.6);box-shadow:0 0 80px -10px var(--cyan)}
.hero-copy{position:relative;pointer-events:none;width:100%;margin:0 auto}
.hero-copy a,.hero-copy button,.hero-copy .interactive{pointer-events:auto}
.hero h1{font-weight:800;font-size:clamp(2.7rem,8.2vw,8.5rem);line-height:.88;letter-spacing:-.02em;margin:1.2rem 0 0}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
@media(min-width:761px){.hero h1 .line{white-space:nowrap}}
.hero h1 .line>span{display:block;transform:translateY(105%);animation:rise 1s cubic-bezier(.2,.7,.2,1) forwards}
.hero h1 .line:nth-child(1)>span{animation-delay:.15s}
.hero h1 .line:nth-child(2){margin-left:9vw}.hero h1 .line:nth-child(2)>span{animation-delay:.3s;color:var(--cyan)}
@keyframes rise{to{transform:none}}
.hero-bottom{display:grid;grid-template-columns:minmax(0,26rem) 1fr;gap:2rem;align-items:end;margin-top:2.5rem}
.hero-bottom p{color:var(--muted);font-size:1.05rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;justify-content:flex-end}
.hint{font:500 .68rem var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
@media(max-width:760px){
  .scene{left:0;top:4rem;bottom:auto;height:52svh}
  .hero h1 .line:nth-child(2){margin-left:0}
  .hero-bottom{grid-template-columns:1fr}.hero-actions{justify-content:flex-start}
}

/* sections */
section.s{padding:clamp(5rem,12vw,9rem) 0}
.h2{font-weight:800;font-size:clamp(2.6rem,8vw,6.5rem);line-height:.95;letter-spacing:-.02em;margin-top:1rem}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1.5rem;margin-bottom:3.5rem}
.sec-head p.note{max-width:20rem;font-size:.85rem;color:var(--dim)}
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}

/* projects */
.projects{display:grid;grid-template-columns:repeat(12,1fr);gap:2rem}
.projects>*{grid-column:span 12}
@media(min-width:820px){
  .projects>:nth-child(4n+1){grid-column:span 7}.projects>:nth-child(4n+2){grid-column:span 5;margin-top:6rem}
  .projects>:nth-child(4n+3){grid-column:span 5}.projects>:nth-child(4n+4){grid-column:span 7;margin-top:6rem}
}
.tilt-wrap{perspective:1100px;height:100%}
.card{position:relative;height:100%;overflow:hidden;display:flex;flex-direction:column;transform-style:preserve-3d;transition:transform .2s ease-out,border-color .3s}
.card:hover{border-color:rgba(34,227,255,.4)}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(34,227,255,.14),transparent 60%)}
.card:hover::after{opacity:1}
.thumb{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--navy)}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .9s ease-out}
.card:hover .thumb img{transform:scale(1.07)}
.thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(5,6,13,.7),transparent 55%);pointer-events:none}
.scan{position:absolute;inset:0;overflow:hidden;opacity:0;transition:.3s;pointer-events:none;z-index:2}
.card:hover .scan{opacity:1}
.scan::before{content:"";position:absolute;left:0;right:0;height:33%;background:linear-gradient(transparent,rgba(34,227,255,.25),transparent);animation:scan 2.4s linear infinite}
@keyframes scan{from{transform:translateY(-100%)}to{transform:translateY(300%)}}
.placeholder{display:grid;place-items:center;height:100%;font:800 4.5rem var(--display);color:rgba(255,255,255,.1)}
.chip{position:absolute;z-index:3;top:1rem;left:1rem;padding:.3rem .8rem;border-radius:99px;border:1px solid rgba(255,255,255,.15);background:rgba(5,6,13,.7);font:500 .62rem var(--mono);letter-spacing:.18em;text-transform:uppercase}
.chip.draft{left:auto;right:1rem;background:var(--violet);border-color:var(--violet)}
.num{position:absolute;z-index:3;right:1rem;bottom:.4rem;font:800 3.6rem/1 var(--display);color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.25)}
.card-body{display:flex;flex-direction:column;gap:1rem;padding:1.6rem;flex:1}
.card-body h3{font-size:clamp(1.4rem,3vw,1.7rem);font-weight:700;line-height:1.15}
.card-body p{font-size:.9rem;color:var(--muted)}
.tags{display:flex;flex-wrap:wrap;gap:.5rem}
.tags li{padding:.2rem .75rem;border-radius:99px;border:1px solid var(--line);background:rgba(255,255,255,.03);font:500 .68rem var(--mono);color:rgba(34,227,255,.9)}
.card-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:auto;padding-top:.4rem}
.soon{cursor:default;border:1px solid rgba(255,255,255,.15);color:var(--dim)}
.soon i{width:8px;height:8px;border-radius:50%;background:var(--violet);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
.state{padding:2.5rem;text-align:center}
.state strong{display:block;font:700 1.5rem var(--display);margin-bottom:.4rem}
.state p{color:var(--dim);font-size:.9rem}
.state .btn{margin-top:1.2rem}
.skeleton{height:24rem;animation:pulse 1.6s ease-in-out infinite}

/* about */
.about{display:grid;grid-template-columns:5fr 7fr;gap:4rem;align-items:center}
.portrait{position:relative;width:min(82%,24rem);margin:0 auto}
.portrait .ring{position:absolute;inset:-1.5rem;border-radius:50%;border:1px dashed rgba(34,227,255,.3);animation:spin 50s linear infinite}
.portrait .ring.two{inset:-3rem;border:1px solid rgba(139,92,246,.2);animation:none}
@keyframes spin{to{transform:rotate(360deg)}}
.portrait img{position:relative;display:block;border-radius:2rem;border:1px solid var(--line);width:100%;height:auto;aspect-ratio:892/1192;object-fit:contain} /* whole photo, never cropped */
.about h2{font-weight:800;font-size:clamp(2.2rem,5vw,3.8rem);line-height:1.02;margin-top:1rem}
.about-text{margin-top:2rem;max-width:34rem;display:grid;gap:1.1rem;color:var(--muted)}
@media(max-width:820px){.about{grid-template-columns:1fr;gap:4rem}.portrait{margin:0}}

/* skills */
.skills{border-top:1px solid var(--line)}
.skills li{border-bottom:1px solid var(--line)}
.skill{display:grid;grid-template-columns:9rem 1fr minmax(0,20rem);gap:2rem;align-items:baseline;padding:1.8rem 0;transition:padding .3s}
.skill:hover{padding-left:1rem}
.skill .g{font:500 .68rem var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim);transition:.3s}
.skill:hover .g{color:var(--violet)}
.skill .n{font:700 clamp(1.8rem,5vw,3rem) var(--display);transition:.3s}
.skill:hover .n{color:var(--cyan)}
.skill .d{font-size:.88rem;color:var(--dim);text-align:right;transition:.3s}
.skill:hover .d{color:var(--text)}
@media(max-width:760px){.skill{grid-template-columns:1fr;gap:.4rem}.skill .d{text-align:left}}

/* contact */
.contact h2{font-weight:800;font-size:clamp(2.8rem,9vw,8rem);line-height:.9}
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:4rem;margin-top:4rem}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr;gap:3rem}}
.mail{display:inline-block;font:700 clamp(1.3rem,3.2vw,1.9rem) var(--display);word-break:break-all;text-decoration:underline;text-decoration-color:rgba(34,227,255,.4);text-decoration-thickness:2px;text-underline-offset:.5rem;transition:.3s}
.mail:hover{color:var(--cyan)}
.links-list{margin-top:2rem}
.links-list a{display:flex;justify-content:space-between;align-items:center;padding:1rem 0;border-bottom:1px solid var(--line);text-decoration:none;transition:.3s}
.links-list a:hover{border-color:var(--cyan)}
.links-list small{display:block;font:500 .68rem var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.links-list span.t{font:700 1.2rem var(--display)}
.links-list .arr{font-size:1.5rem;color:var(--dim);transition:.3s}
.links-list a:hover .arr{color:var(--cyan);transform:translateX(4px)}

/* forms */
.form{padding:clamp(1.4rem,4vw,2.2rem);display:grid;gap:1rem}
label.l{display:block;font-size:.85rem;font-weight:500;margin-bottom:.35rem}
.field{width:100%;border-radius:12px;border:1px solid var(--line);background:rgba(0,0,0,.3);padding:.8rem 1rem;font-size:.9rem;transition:.2s}
.field::placeholder{color:rgba(255,255,255,.3)}
.field:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(34,227,255,.2)}
.field[aria-invalid="true"]{border-color:rgba(248,113,113,.7)}
select.field option{background:#0a1030}
textarea.field{resize:vertical;min-height:7rem}
.err{min-height:1rem;margin-top:.25rem;font-size:.78rem;color:#fca5a5}
.status{min-height:1.3rem;font-size:.88rem;color:var(--cyan)}

footer{border-top:1px solid var(--line)}
.foot{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;align-items:center;padding:2rem var(--pad);font-size:.85rem;color:var(--dim)}
.foot ul{display:flex;flex-wrap:wrap;gap:1.5rem;font:500 .7rem var(--mono);letter-spacing:.16em;text-transform:uppercase}
.foot a{text-decoration:none;transition:.3s}.foot a:hover{color:var(--cyan)}

/* cursor ring */
.cursor{position:fixed;left:0;top:0;z-index:180;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:1px solid rgba(34,227,255,.7);pointer-events:none;mix-blend-mode:screen;transition:width .25s,height .25s,margin .25s,background .25s}
.cursor.big{width:56px;height:56px;margin:-28px 0 0 -28px;background:rgba(34,227,255,.12)}

/* admin */
.admin-center{min-height:100vh;display:grid;place-items:center;padding:1.5rem}
.admin-card{width:100%;max-width:24rem;padding:2rem;display:grid;gap:1rem}
.admin-card h1{font-size:2rem;font-weight:700}
.dash{max-width:1100px;margin:auto;padding:2rem var(--pad) 4rem}
.dash-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;border-bottom:1px solid var(--line);padding-bottom:1.5rem;margin-bottom:1.5rem}
.dash-head h1{font-size:2rem}.dash-head small{color:var(--dim);font-size:.75rem}
.row{display:flex;flex-wrap:wrap;gap:.6rem}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-bottom:1.2rem}
.stats div{padding:1rem}.stats b{display:block;font:700 2rem var(--display)}
.toolbar{display:flex;flex-wrap:wrap;gap:.7rem;margin:1rem 0 1.5rem}
.toolbar .grow{flex:1;min-width:12rem}
.notice{padding:.65rem 1rem;border-radius:12px;font-size:.88rem;border:1px solid}
.notice.ok{border-color:rgba(34,227,255,.3);background:rgba(34,227,255,.1);color:var(--cyan)}
.notice.bad{border-color:rgba(248,113,113,.4);background:rgba(248,113,113,.1);color:#fecaca}
.plist{display:grid;gap:.8rem}
.prow{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;padding:1rem}
.prow img,.prow .noimg{width:8rem;height:5rem;border-radius:12px;object-fit:cover;background:var(--navy);display:grid;place-items:center;font-size:.72rem;color:var(--dim)}
.prow .info{flex:1;min-width:10rem}
.prow h2{font-size:1.1rem;font-weight:700;display:inline}
.badge{margin-left:.5rem;padding:.15rem .6rem;border-radius:99px;font:500 .6rem var(--mono);letter-spacing:.1em;text-transform:uppercase;vertical-align:middle}
.badge.pub{background:rgba(34,227,255,.15);color:var(--cyan)}.badge.dr{background:rgba(139,92,246,.2);color:#c4b5fd}
.meta{font-size:.75rem;color:var(--dim);margin-top:.2rem}
.modal{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);overflow-y:auto;display:flex;justify-content:center;align-items:flex-start;padding:1rem}
.modal-box{width:100%;max-width:44rem;margin:2rem 0;padding:clamp(1.2rem,4vw,2rem);background:rgba(10,16,48,.95)}
.modal-box.narrow{max-width:26rem}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.4rem}
.modal-head h2{font-size:1.5rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.grid2 .full{grid-column:1/-1}
@media(max-width:640px){.grid2{grid-template-columns:1fr}.stats b{font-size:1.5rem}}
.upload{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.upload img,.upload .noimg{width:8rem;height:5rem;border-radius:10px;object-fit:cover;border:1px solid var(--line);display:grid;place-items:center;font-size:.72rem;color:var(--dim)}
.check{display:flex;align-items:center;gap:.7rem}
.check input{width:1.2rem;height:1.2rem;accent-color:var(--cyan)}
.preview-card{max-width:26rem;margin:auto}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  .hero h1 .line>span{transform:none}
}