/* Niyan Ritvi: motion layer. Loads after style.css.
   Wrapped so visitors who prefer reduced motion get the plain, still site. */
@media (prefers-reduced-motion:no-preference){
:root{--ease:cubic-bezier(.2,.8,.2,1);--base:.25s}

/* ---------- Scroll progress + page wipe + intro ---------- */
.fx-prog{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--wood),var(--seashell));pointer-events:none}
.fx-wipe{position:fixed;inset:0;z-index:100;background:var(--emerald);display:grid;place-content:center;justify-items:center;gap:22px;opacity:0;visibility:hidden;pointer-events:none;will-change:opacity}
.fx-wipe:not(.show) i{display:none}
.fx-wipe img{width:84px;height:84px;border-radius:22px;opacity:0}
.fx-wipe i{width:120px;height:3px;border-radius:3px;background:rgba(233,216,197,.2);overflow:hidden;opacity:0}
.fx-wipe i::after{content:"";display:block;height:100%;background:var(--seashell);transform:translateX(-100%)}
.fx-wipe.on img{animation:logoIn .9s var(--ease) .1s both}
.fx-wipe.show i{opacity:1}
.fx-wipe.show i::after{animation:load 1s var(--ease) .15s forwards}

/* ---------- Navigation ---------- */
.bar{transition:transform .5s var(--ease),box-shadow .4s,background-color .4s;animation:barIn .9s var(--ease) var(--base) backwards}
.bar.hide{transform:translate(-50%,-170%)}
.bar.stuck{background:rgba(18,31,22,.94);box-shadow:0 14px 40px rgba(0,0,0,.35)}
.bar ul a{position:relative;transition:background-color .25s,color .25s}
.bar ul a::after{content:"";position:absolute;left:50%;bottom:5px;width:16px;height:2px;border-radius:2px;background:var(--seashell);transform:translateX(-50%) scaleX(0);transition:transform .35s var(--ease)}
.bar ul a:hover::after,.bar ul a.on::after{transform:translateX(-50%) scaleX(1)}
.bar ul a.on{color:var(--sand)}
.brand img{transition:transform .8s var(--ease)}
.brand:hover img{transform:rotate(360deg) scale(1.08)}
@media (max-width:1200px){
.bar.open ul{animation:menuIn .35s var(--ease)}
.bar.open ul li{animation:fadeUp .45s var(--ease) both}
.bar.open ul li:nth-child(1){animation-delay:.04s}.bar.open ul li:nth-child(2){animation-delay:.09s}.bar.open ul li:nth-child(3){animation-delay:.14s}
.bar.open ul li:nth-child(4){animation-delay:.19s}.bar.open ul li:nth-child(5){animation-delay:.24s}.bar.open ul li:nth-child(6){animation-delay:.29s}
}

/* ---------- Hero ---------- */
.hero::before,.contact::before,.dk2::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(520px circle at var(--mx,72%) var(--my,28%),rgba(209,174,164,.15),transparent 62%)}
.contact,.dk2{position:relative;overflow:hidden}
.contact .w,.dk2 .w{position:relative;z-index:1}
.hero::after{animation:blob 18s ease-in-out infinite;translate:calc(var(--px,0)*-26px) calc(var(--py,0)*-26px + var(--sy,0)*-.18px)}
.hero .w{translate:0 calc(var(--sy,0)*.1px)}
.fx-orb{position:absolute;border-radius:50%;pointer-events:none;z-index:0;animation:float 8s ease-in-out infinite;translate:calc(var(--px,0)*var(--k,20)*1px) calc(var(--py,0)*var(--k,20)*1px)}
.fx-orb.o1{top:24%;left:60%;width:18px;height:18px;border:2px solid var(--seashell);--k:40}
.fx-orb.o2{top:68%;left:46%;width:44px;height:44px;background:rgba(209,174,164,.35);--k:-30;animation-delay:-3s}
.fx-orb.o3{top:38%;left:88%;width:12px;height:12px;background:var(--wood);--k:55;animation-delay:-5s}
.wd{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .08em .16em;margin:0 -.08em -.16em}
.wi{display:inline-block;animation:wordIn 1s var(--ease) calc(var(--base) + var(--i,0)*.07s) both}
.hz{animation:fadeUp .9s var(--ease) calc(var(--base) + .35s + var(--k,0)*.12s) both}

/* ---------- Scroll reveal ---------- */
.rv{transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0ms)}
.rv:not(.in){opacity:0;transform:translateY(36px)}
.rv.pop:not(.in){transform:scale(.6) translateY(20px)}
.rv.lt:not(.in){transform:translateX(-28px)}
.rv.rt:not(.in){transform:translateX(32px)}
.rv.in{opacity:1;transform:none}

/* ---------- Cards: tilt + glow ---------- */
.tilt{position:relative;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.tilt:hover{--ty:-8px;box-shadow:0 26px 44px -22px rgba(18,31,22,.5)}
.tilt::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(209,174,164,.3),transparent 60%)}
.tilt:hover::before{opacity:1}
.sc b::after{content:"\2192";display:inline-block;margin-left:8px;transition:transform .3s var(--ease)}
.sc:hover b::after{transform:translateX(8px)}
.tool .bg{transition:transform .5s var(--ease)}
.tool:hover .bg{transform:rotate(-12deg) scale(1.12)}
.bub{animation:bob 7s ease-in-out infinite;transition:transform .4s var(--ease)}
.bub:nth-child(2){animation-delay:-2.3s}.bub:nth-child(3){animation-delay:-4.6s}
.bub:hover{transform:scale(1.08)}
.bub b{font-variant-numeric:tabular-nums}
.bc .th.th,.proj .th.th{background-size:220% 220%;animation:grad 9s ease-in-out infinite}
.check li::before{transition:transform .6s cubic-bezier(.34,1.56,.64,1) .25s}
.check li.rv:not(.in)::before{transform:rotate(-45deg) scale(0)}


.pg-tm .pg-c>blockquote::after{animation:float 9s ease-in-out infinite}

/* ---------- Buttons ---------- */
.pill{position:relative;overflow:hidden;isolation:isolate;transition:translate .25s var(--ease),transform .25s var(--ease),box-shadow .3s,background-color .3s,color .3s,border-color .3s}
.pill::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%)}
.pill:hover::before{animation:shine .8s ease}
.pill:hover{transform:translateY(-3px);box-shadow:0 12px 24px -10px rgba(0,0,0,.45)}
.pill:active{transform:scale(.96)}
.pill:not(.fill):not(.dk):hover{background:var(--sand);color:var(--emerald);border-color:var(--sand)}

/* ---------- Skills marquee ---------- */
.chips2.mq{display:block;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mq-row{overflow:hidden;margin-bottom:12px}
.mq-track{display:flex;width:max-content;animation:mq 42s linear infinite}
.mq-row.rev .mq-track{animation-direction:reverse}
.chips2.mq:hover .mq-track{animation-play-state:paused}
.chips2.mq span{flex:none;white-space:nowrap;margin-right:12px;transition:background-color .3s,transform .3s var(--ease)}
.chips2.mq span:hover{background:rgba(209,174,164,.25);transform:translateY(-3px)}

/* ---------- FAQ, links, form ---------- */
summary{transition:color .25s}summary:hover{color:var(--wood)}
summary::after{transition:transform .35s var(--ease)}
details[open] summary::after{content:"+";transform:rotate(45deg)}
details.closing summary::after{transform:none}
.info a,.box a.l,.fg div>a:not(.fname){transition:padding-left .3s var(--ease),color .3s}
.info a:hover,.box a.l:hover{padding-left:10px}
.fg div>a:not(.fname):hover{padding-left:8px}
.fname{transition:letter-spacing .4s var(--ease)}.fname:hover{letter-spacing:.02em}
input,textarea{transition:border-color .3s,box-shadow .3s,background-color .3s}
input:focus,textarea:focus{outline:0;border-color:var(--seashell);box-shadow:0 0 0 4px rgba(209,174,164,.22);background:rgba(0,0,0,.35)}
label{transition:color .3s}label:focus-within{color:var(--seashell)}

/* ---------- Keyframes ---------- */
@keyframes barIn{from{transform:translate(-50%,-180%);opacity:0}to{transform:translate(-50%,0);opacity:1}}
@keyframes menuIn{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes wordIn{from{transform:translateY(112%) rotate(5deg)}to{transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes blob{0%,100%{border-radius:50%;transform:rotate(0) scale(1)}33%{border-radius:58% 42% 47% 53%/45% 55% 45% 55%;transform:rotate(60deg) scale(1.06)}66%{border-radius:44% 56% 52% 48%/56% 44% 58% 42%;transform:rotate(130deg) scale(.96)}}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-22px) rotate(12deg)}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes mq{to{transform:translateX(-50%)}}
@keyframes grad{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes shine{to{transform:translateX(120%)}}
@keyframes logoIn{from{opacity:0;transform:scale(.6) rotate(-12deg)}to{opacity:1;transform:none}}
@keyframes load{to{transform:translateX(0)}}
}