/* Ajea Zahid — portfolio site styles */
*{box-sizing:border-box;margin:0;padding:0}
:root{
 --ground:#0e120d; --teal:#2b4a4a; --olive:#6b703a; --sage:#8a9a5a; --chart:#bcbf66; --ochre:#c9a85a; --terra:#a85f40; --rose:#bd8b85;
 --cream:#ece4d4; --cream-2:#cfc6b4; --muted:#9aa089;
 --display:'Fraunces',Georgia,serif; --sans:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
}
html{scroll-behavior:smooth}
body{font-family:var(--sans); background:var(--ground); color:var(--cream); -webkit-font-smoothing:antialiased; overflow-x:hidden; line-height:1.5}
body.hide-cursor, body.hide-cursor *{cursor:none !important}
img{display:block; max-width:100%}
a{color:inherit}
::selection{background:var(--chart); color:var(--ground)}

#bg{position:fixed; inset:0; width:100vw; height:100vh; z-index:0; display:block}
body.no-gl #bg{display:none}
body.no-gl{background:radial-gradient(120% 90% at 18% 8%, #1d2c23 0%, #0e120d 55%), radial-gradient(110% 80% at 82% 92%, #2c3a22 0%, rgba(14,18,13,0) 60%); background-attachment:fixed}
#scrim{position:fixed; inset:0; z-index:1; pointer-events:none; background:#090c07; opacity:0; will-change:opacity}

/* four distant corner spotlights, behind the artwork */
#lights{position:fixed; inset:0; z-index:2; pointer-events:none; opacity:0; will-change:opacity; --lit:0}
.slamp{position:absolute; width:0; height:0}
.slamp.tl{left:0; top:0} .slamp.tr{right:0; top:0} .slamp.bl{left:0; bottom:0} .slamp.br{right:0; bottom:0}
.sorb{position:absolute; left:-30px; top:-30px; width:60px; height:60px; border-radius:50%; background:radial-gradient(circle, rgba(255,245,222,.95), rgba(255,234,196,.3) 42%, rgba(255,230,188,0) 70%); opacity:calc(.1 + .85*var(--lit))}
.sbeam{position:absolute; left:0; top:-16vmax; width:84vmax; height:32vmax; transform-origin:0 50%; opacity:calc(.05 + .58*var(--lit)); background:radial-gradient(52% 60% at 3% 50%, rgba(255,242,216,.55), rgba(255,239,208,.13) 30%, rgba(255,238,205,0) 62%)}
.slamp.tl .sbeam{transform:rotate(45deg)}
.slamp.tr .sbeam{transform:rotate(135deg)}
.slamp.bl .sbeam{transform:rotate(-45deg)}
.slamp.br .sbeam{transform:rotate(-135deg)}

#brush{position:fixed; left:0; top:0; width:40px; height:54px; z-index:61; pointer-events:none; transform-origin:20px 51px; will-change:transform; filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}

#main{position:relative; z-index:3}

#hero{position:relative; min-height:100vh; min-height:100svh; display:grid; place-items:center; text-align:center; padding:24px}
.hero-name{font-family:var(--display); font-weight:340; font-size:clamp(3.4rem,13vw,12rem); line-height:.9; letter-spacing:-.022em; color:var(--cream); text-shadow:0 6px 60px rgba(0,0,0,.5)}
.hero-name em{font-style:italic; font-weight:320}

#gallery{position:relative}
.stage{min-height:96vh; min-height:96svh; display:flex; align-items:center; justify-content:center; padding:7vh 22px}
.frame{position:relative; width:min(92vw,1080px); display:flex; flex-direction:column; align-items:center; gap:clamp(18px,3vh,30px); --focus:0}
.artwrap{position:relative; display:inline-block; transform:scale(calc(.92 + .08*var(--focus))); filter:brightness(calc(.64 + .5*var(--focus))) saturate(calc(.88 + .22*var(--focus))); will-change:transform,filter}
.artwrap img{display:block; max-width:100%; max-height:66svh; width:auto; border-radius:2px; box-shadow:0 40px 82px -30px rgba(0,0,0,.58)}
.art-light{position:absolute; inset:0; pointer-events:none; border-radius:2px; opacity:calc(var(--focus)*.85); background:radial-gradient(82% 60% at 50% 6%, rgba(255,248,228,.18), rgba(255,248,228,0) 60%); mix-blend-mode:screen}
.cap2{display:flex; flex-direction:column; align-items:center; gap:7px; opacity:calc(.12 + .88*var(--focus)); transform:translateY(calc((1 - var(--focus)) * 12px))}
.cap2 .t{font-family:var(--display); font-style:italic; font-weight:400; font-size:clamp(1.05rem,2.2vw,1.5rem); color:var(--cream); text-shadow:0 2px 16px rgba(0,0,0,.6)}
.cap2 .m{font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}

/* narrative sections (statement / about) */
.narr{position:relative; padding:clamp(40px,8vh,90px) 0}
.about-wrap{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,5vw,80px); max-width:1200px; margin:0 auto; padding:0 clamp(28px,6vw,90px)}
.about-portrait{position:sticky; top:14vh; align-self:start}
.about-portrait img{width:100%; border-radius:2px; box-shadow:0 40px 80px -30px rgba(0,0,0,.62)}
.chapter{min-height:78vh; display:flex; flex-direction:column; justify-content:center; opacity:0; will-change:opacity,transform}
.ch-eyebrow{font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ochre); font-weight:600; margin-bottom:1.6rem}
.ch-text{font-family:var(--display); font-weight:360; font-size:clamp(1.2rem,2.05vw,1.62rem); line-height:1.46; color:var(--cream); text-shadow:0 2px 18px rgba(0,0,0,.5)}

#works{position:relative; padding:clamp(50px,9vh,120px) 0}
.marquee{position:relative; width:100%; overflow:hidden; cursor:grab; -webkit-mask:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%); mask:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
.marquee.drag{cursor:grabbing}
.mtrack{display:flex; gap:clamp(20px,3vw,48px); width:max-content; will-change:transform; align-items:flex-end}
.mslide{flex:0 0 auto; display:flex; flex-direction:column; gap:12px}
.mslide img{height:clamp(220px,40vh,420px); width:auto; display:block; border-radius:2px; box-shadow:0 28px 60px -26px rgba(0,0,0,.7); pointer-events:none; user-select:none}
.mcap{font-family:var(--display); font-style:italic; font-size:.85rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:46vw}

#contact{position:relative; padding:clamp(70px,12vh,150px) clamp(28px,6vw,90px)}
.contact-inner{max-width:600px; margin:0 auto}
.contact-h{font-family:var(--display); font-weight:360; font-size:clamp(1.7rem,4.4vw,2.8rem); line-height:1.1; color:var(--cream); text-shadow:0 2px 20px rgba(0,0,0,.5)}
#contactForm{margin-top:clamp(26px,4vh,42px); display:flex; flex-direction:column; gap:20px}
.field{display:flex; flex-direction:column; gap:8px}
.field label{font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.field input,.field textarea{font-family:var(--sans); font-size:1rem; color:var(--cream); background:rgba(236,228,212,.05); border:1px solid rgba(236,228,212,.2); border-radius:3px; padding:13px 15px; transition:border-color .2s,background .2s,box-shadow .2s; resize:vertical; width:100%}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--ochre); background:rgba(236,228,212,.09); box-shadow:0 0 0 3px rgba(201,168,90,.15)}
.cf-submit{align-self:flex-start; font-family:var(--sans); font-weight:500; font-size:.92rem; letter-spacing:.04em; color:var(--ground); background:var(--chart); border:0; border-radius:3px; padding:14px 30px; cursor:pointer; transition:background .25s,transform .15s}
.cf-submit:hover{background:var(--ochre)} .cf-submit:active{transform:translateY(1px)}
.cf-status{font-size:.86rem; color:var(--cream-2); min-height:1.2em}
.cf-status.ok{color:var(--chart)} .cf-status.err{color:var(--rose)}

#foot{position:relative; min-height:70vh; min-height:70svh; display:grid; place-items:center; gap:28px; text-align:center; padding:40px 24px}
.foot-name{font-family:var(--display); font-weight:340; font-size:clamp(2.4rem,9vw,7rem); letter-spacing:-.02em; color:var(--cream); text-shadow:0 4px 40px rgba(0,0,0,.5); animation:breathe 7s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.82; letter-spacing:-.02em}50%{opacity:1; letter-spacing:.004em}}
.ig-icon{display:inline-grid; place-items:center; width:64px; height:64px; border-radius:50%; border:1px solid rgba(236,228,212,.32); color:var(--cream); transition:background .25s,color .25s,border-color .25s,transform .25s}
.ig-icon:hover{background:var(--ochre); color:var(--ground); border-color:var(--ochre); transform:translateY(-3px)}
.ig-icon svg{width:30px; height:30px}

.hero-name{opacity:0; transform:translateY(26px); animation:rise 1.2s cubic-bezier(.2,.7,.2,1) .15s forwards}
@keyframes rise{to{opacity:1;transform:none}}

@media (max-width:820px){
 .stage{min-height:92svh; padding:6vh 18px}
 .artwrap img{max-height:62svh}
 .frame{width:min(94vw,1080px)}
 .about-wrap{grid-template-columns:1fr; gap:8px}
 .about-portrait{position:relative; top:0; max-width:380px; margin:0 auto}
 .chapter{min-height:60vh}
 .mslide img{height:clamp(200px,36vh,330px)}
 .sbeam{width:96vmax; height:44vmax; top:-22vmax}
}
@media (prefers-reduced-motion:reduce){
 *{animation:none !important; scroll-behavior:auto}
 .hero-name{opacity:1; transform:none}
 .foot-name{opacity:1}
 .chapter{opacity:1 !important}
}

/* ---- top navigation (multi-page) ---- */
.nav{position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:clamp(15px,2.3vw,26px) clamp(20px,5vw,60px); pointer-events:none}
.nav a{pointer-events:auto; text-decoration:none}
.nav-brand{font-family:var(--display); font-weight:400; font-size:clamp(1rem,1.6vw,1.25rem); letter-spacing:.01em; color:var(--cream); text-shadow:0 2px 14px rgba(0,0,0,.65)}
.nav-links{display:flex; gap:clamp(18px,2.4vw,30px)}
.nav-links a{font-family:var(--sans); font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--cream-2); text-shadow:0 2px 12px rgba(0,0,0,.65); padding-bottom:4px; border-bottom:1px solid transparent; transition:color .25s,border-color .25s}
.nav-links a:hover{color:var(--cream)}
.nav-links a[aria-current="page"]{color:var(--cream); border-color:var(--ochre)}

/* about page: first narrative clears the fixed nav */
.narr.first{padding-top:clamp(104px,16vh,170px)}

/* honeypot (anti-spam, visually hidden) */
.hp{position:absolute !important; left:-9999px !important; top:auto; width:1px; height:1px; overflow:hidden; opacity:0}

@media (max-width:820px){
 .nav{padding:13px 18px}
 .nav-brand{font-size:1rem}
 .nav-links{gap:16px}
 .nav-links a{font-size:.7rem; letter-spacing:.13em}
 .narr.first{padding-top:clamp(86px,13vh,120px)}
}