/* Shared effects for the option / draft pages (not used by the live pages yet). */

/* ---- Name loader (from her old site: curtain with only "Nikita Raj") ---- */
.pre-ov{position:fixed;inset:0;z-index:200;background:#0f0f0f;display:none;align-items:center;justify-content:center;overflow:hidden;will-change:transform}
.js .pre-ov{display:flex}
.pre-ov span{font-family:var(--sans);font-weight:500;font-size:clamp(16px,1.6vw,27px);letter-spacing:.26em;text-transform:uppercase;color:var(--ink);display:block;will-change:transform}
.pre-ov.out{transform:translateY(-100%);transition:transform 1.6s cubic-bezier(.86,0,.07,1) .2s}
.pre-ov.out span{transform:translateY(60vh);transition:transform 1.6s cubic-bezier(.86,0,.07,1) .2s}

/* ---- 4 · Underline grows on hover ---- */
.ul{position:relative;display:inline-block;padding:8px 0;font-size:12px;letter-spacing:.3em;text-transform:uppercase}
.ul::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);transform:scaleX(1);transform-origin:left;transition:transform .5s cubic-bezier(.7,0,.2,1)}
.ul:hover::after{animation:ulr .7s cubic-bezier(.7,0,.2,1)}
@keyframes ulr{0%{transform:scaleX(1);transform-origin:right}49%{transform:scaleX(0);transform-origin:right}50%{transform:scaleX(0);transform-origin:left}100%{transform:scaleX(1);transform-origin:left}}

/* ---- 5 · Circle link fills on hover ---- */
.circ{position:relative;display:inline-grid;place-items:center;width:112px;height:112px;border:1px solid var(--ink);border-radius:50%;overflow:hidden;font-size:10px;letter-spacing:.3em;text-transform:uppercase;text-align:center;isolation:isolate;transition:color .4s}
.circ::before{content:"";position:absolute;inset:0;background:var(--ink);border-radius:50%;transform:scale(0);transition:transform .55s cubic-bezier(.7,0,.2,1);z-index:-1}
.circ:hover::before{transform:scale(1.05)}
.circ:hover{color:var(--bg)}

/* ---- 3 · Parallax ---- */
[data-s],[data-sx]{will-change:transform}

/* ---- line-by-line text reveal ---- */
.ln{display:block;overflow:hidden;padding-bottom:.08em}
.ln>span{display:block;transform:translateY(108%);animation:up 1.1s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i,0)*.12s + .4s)}
.js .ln>span{animation-delay:calc(var(--i,0)*.12s + 1.7s)}
@keyframes up{to{transform:none}}
.fi{opacity:0;animation:fi 1.1s ease forwards;animation-delay:calc(var(--i,0)*.12s + .5s)}
.js .fi{animation-delay:calc(var(--i,0)*.12s + 1.8s)}
@keyframes fi{to{opacity:1}}

/* ---- Hero shell for option pages ---- */
.ho{position:relative;min-height:100svh;overflow:hidden;padding:120px clamp(16px,4vw,56px) 56px;border-bottom:8px solid #000}
.chip{position:absolute;z-index:9;top:84px;left:clamp(16px,4vw,56px);padding:8px 14px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;background:rgba(22,22,22,.85);border:1px solid var(--bronze);color:var(--bronze)}
.eyebrow-s{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--bronze)}
.gl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:22px 26px;background:rgba(22,22,22,.55);backdrop-filter:blur(14px);border:1px solid var(--line)}
.gl h4{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--bronze);font-weight:400;margin-bottom:6px}
.gl p{font-size:13px;color:#cdbfb1;line-height:1.5}

/* D+ : editorial collage, enhanced */
.hd{display:grid;align-items:center;background:radial-gradient(1200px 700px at 78% 40%,#262320 0,var(--bg2) 55%,#141414 100%)}
.hd .word{position:absolute;left:-1vw;top:50%;margin-top:-.5em;font-family:var(--serif);font-size:clamp(110px,22vw,340px);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(236,217,201,.13);white-space:nowrap;pointer-events:none}
.hd .rule{position:absolute;left:clamp(16px,4vw,56px);top:140px;bottom:56px;width:1px;background:linear-gradient(transparent,var(--line) 12%,var(--line) 88%,transparent)}
.hd .txt{position:relative;z-index:3;max-width:min(560px,46vw);margin-left:clamp(0px,2.4vw,40px)}
.hd h1{font-family:var(--serif);font-weight:400;font-size:clamp(36px,4.8vw,72px);line-height:1.02;letter-spacing:-.01em;margin:18px 0 28px}
.hd .gl{margin-top:34px}
.hd .ph{position:absolute;margin:0;border:1px solid var(--line);overflow:hidden;background:#111}
.hd .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.hd .ph:hover img{transform:scale(1.05)}
.hd .ph figcaption{position:absolute;left:12px;bottom:12px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;padding:6px 10px;background:rgba(22,22,22,.72);border:1px solid var(--line)}
.hd .p1{z-index:3;right:clamp(16px,6vw,120px);top:13vh;width:min(23vw,330px);aspect-ratio:3/4}
.hd .p1 img{object-position:center 72%}
.hd .p2{z-index:2;right:clamp(150px,21vw,400px);bottom:8vh;width:min(33vw,500px);aspect-ratio:16/10}
.hd .p3{z-index:4;right:clamp(8px,3vw,60px);bottom:6vh;width:min(11vw,150px);aspect-ratio:3/4;border-radius:999px 999px 0 0}
.hd .meta{position:absolute;z-index:5;left:calc(clamp(16px,4vw,56px) + 18px);bottom:34px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--mute)}
.hd .scr{position:absolute;z-index:6;right:clamp(16px,4vw,56px);bottom:34px;width:92px;height:92px;font-size:9px}
@media(max-width:860px){.hd .txt{max-width:100%;margin:0}.hd .p2,.hd .p3{display:none}.hd .p1{position:relative;right:auto;top:auto;width:62%;margin:36px 0 0 auto}.gl{grid-template-columns:1fr}.hd .scr{display:none}}
@media(prefers-reduced-motion:reduce){.ln>span{transform:none;animation:none}.fi{opacity:1;animation:none}.pre-ov{display:none!important}}

/* ---- Hero H: drifting columns of her work ---- */
.hh{padding:0;background:#101010;min-height:100svh;position:relative;overflow:hidden;border-bottom:0}
.hh .cols{position:absolute;inset:-12% 0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:0 14px}
.hh .col{display:grid;gap:14px;align-content:start;animation:colup 70s linear infinite}
.hh .col:nth-child(even){animation-direction:reverse;animation-duration:85s}
.hh .col img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:brightness(.62)}
@keyframes colup{to{transform:translateY(-50%)}}
.hh::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(15,15,15,.82) 0,rgba(15,15,15,.45) 55%,rgba(15,15,15,.7) 100%)}
.hh .ctr{position:relative;z-index:3;min-height:100svh;display:grid;place-content:center;text-align:center;padding:0 6vw}
.hh h1{font-family:var(--serif);font-weight:400;font-size:clamp(40px,7vw,112px);line-height:.98;letter-spacing:-.02em;margin:18px 0 28px}
@media(max-width:860px){.hh .cols{grid-template-columns:repeat(2,1fr)}.hh .col:nth-child(n+3){display:none}}
@media(prefers-reduced-motion:reduce){.hh .col{animation:none}}

/* ---- Plan to render triptych (plan, diagonal cut, final render) ---- */
.tri{display:grid;grid-template-columns:1fr 34px 1fr 34px 1fr;align-items:center;margin-top:36px}
.tri figure{margin:0}
.tri figcaption{margin-top:12px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--bronze);text-align:center}
.cd{aspect-ratio:3/4;overflow:hidden;border:1px solid var(--line);background:#f4f1ec;position:relative;display:grid;place-items:center}
.cd img{width:100%;height:100%;object-fit:cover}
.cd.pl img{object-fit:contain;padding:12px}
.cd.pl.cv img{object-fit:cover;padding:0}
.dg{position:relative;aspect-ratio:3/4;overflow:hidden;border:1px solid var(--line)}
.dg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dg .sk{clip-path:polygon(0 0,68% 0,32% 100%,0 100%)}
.dg svg{position:absolute;inset:0;width:100%;height:100%}
.dg .a,.dg .b{position:absolute;font-size:9px;letter-spacing:.24em;text-transform:uppercase;padding:6px 9px;background:rgba(22,22,22,.72);border:1px solid var(--line)}
.dg .a{left:10px;top:10px}.dg .b{right:10px;bottom:10px}
.tri .arr{text-align:center;color:var(--bronze);font-size:22px}
@media(max-width:860px){.tri{grid-template-columns:1fr}.tri .arr{display:none}.tri figure{margin-bottom:20px;max-width:420px}}

/* ---- Arched windows (Selected work) ---- */
.archgrid{--g:clamp(14px,2.6vw,40px);display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:var(--g)}
.arch{position:relative;display:block;flex:0 0 calc((100% - 2*var(--g))/3);height:clamp(300px,34vw,520px);border-radius:999px 999px 0 0;overflow:hidden;border:1px solid var(--line);border-bottom:0;background:#111}
.arch:nth-child(3n+2){height:clamp(360px,42vw,640px)}
.arch img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.8);transition:transform 1.2s cubic-bezier(.2,.7,.2,1),filter .6s}
.arch:hover img{transform:scale(1.06);filter:brightness(.95)}
.arch.dim img{filter:brightness(.42)}
.arch.dim:hover img{filter:brightness(.6)}
.arch::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(15,15,15,.88))}
.arch .lb{position:absolute;z-index:2;left:0;right:0;bottom:clamp(18px,2.4vw,34px);text-align:center;padding:0 10%}
.arch small{display:block;font-size:10px;letter-spacing:.3em;text-transform:uppercase;margin-bottom:8px;color:var(--bronze)}
.arch h3{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2.3vw,34px);line-height:1.1;margin-bottom:12px}
.arch .ul{font-size:10px;padding:6px 0}
@media(max-width:860px){.arch,.arch:nth-child(3n+2){flex-basis:100%;height:clamp(380px,115vw,560px)}}

.circ{flex:none}
@media(max-width:760px){.head>div:last-child{width:100%;justify-content:space-between}}