/*
 * Mahbuba Saniya Portfolio — interactive motion layer
 * Scope: Hero (.hero on the front page) and About template (body.ms-about) ONLY.
 * Additive: no existing rule is overridden except `position:relative` on the
 * scoped sections (needed to anchor the glow layer) – no layout/spacing change.
 * Initial "hidden" states only apply when <html> has .ms-fx (set in <head> only
 * when motion is allowed), so reduced-motion / no-JS visitors see the original site.
 */
:root{--ms-e:cubic-bezier(.2,.7,.2,1);--ms-g:163,177,138}/* --ms-g = existing --accent #A3B18A as RGB */

/* ───────── shared: glow + cursor ───────── */
.ms-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
 -webkit-mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent),linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);-webkit-mask-composite:source-in;
 mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent),linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-composite:intersect}
.ms-glow{position:absolute;inset:0;opacity:var(--base,0);transition:opacity 1s ease;
 background:radial-gradient(circle 520px at var(--gx,70%) var(--gy,35%),rgba(var(--ms-g),.17),rgba(var(--ms-g),.06) 38%,transparent 68%)}
.ms-hot>.ms-bg .ms-glow{opacity:1}

.ms-cur,.ms-dot{position:fixed;left:0;top:0;pointer-events:none;z-index:45;opacity:0;transition:opacity .3s ease}
.ms-cur.on,.ms-dot.on{opacity:1}
.ms-cur i{display:block;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;border:1.5px solid rgba(var(--ms-g),.65);
 transition:transform .35s var(--ms-e),background-color .35s ease,border-color .35s ease}
.ms-cur.link i{transform:scale(1.7);background:rgba(var(--ms-g),.12);border-color:rgba(var(--ms-g),.9)}
.ms-cur.down i{transform:scale(.78)}.ms-cur.link.down i{transform:scale(1.4)}
.ms-dot i{display:block;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:rgb(var(--ms-g));transition:transform .25s ease}
.ms-dot.link i{transform:scale(0)}

/* ───────── HERO ───────── */
.hero{position:relative}
.hero .wrap{position:relative;z-index:1}
.hero .ms-bg{--base:.55}
.ms-orb{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(var(--ms-g),.13),transparent 68%);
 translate:calc(var(--px,0)*var(--z,-30)*1px) calc(var(--py,0)*var(--z,-30)*1px);transition:translate .2s linear}
.ms-orb-a{--z:-34;width:46vmin;height:46vmin;left:48%;top:-6%;animation:ms-drift 14s ease-in-out infinite alternate}
.ms-orb-b{--z:26;width:38vmin;height:38vmin;right:-8%;bottom:6%;animation:ms-drift 17s ease-in-out -6s infinite alternate-reverse}
@keyframes ms-drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-3%,5%,0) scale(1.12)}}

/* depth parallax on EXISTING decorative pieces (individual `translate` composes with any existing transform) */
.hero .portrait:before{translate:calc(var(--px,0)*14px) calc(var(--py,0)*10px);transition:translate .25s linear}
.hero .portrait img{translate:calc(var(--px,0)*-9px) calc(var(--py,0)*-6px);transition:translate .25s linear}
.hero .badge5{translate:calc(var(--px,0)*-22px) calc(var(--py,0)*-14px);transition:translate .25s linear}

/* interactive headline: words lift + softly glow as the cursor nears them */
.ms-hw{display:inline-block;translate:0 calc(var(--pr,0)*-5px);
 text-shadow:0 0 calc(var(--pr,0)*26px) rgba(var(--ms-g),calc(var(--pr,0)*.5));
 transition:translate .35s var(--ms-e),text-shadow .35s ease}
.kw.ms-swap{animation:ms-kw .55s var(--ms-e)}
@keyframes ms-kw{from{opacity:0;transform:translateY(.45em);filter:blur(5px)}to{opacity:1;transform:none;filter:blur(0)}}

/* magnetic buttons: `translate` is separate from the existing hover `transform`,
   so size, label, link and the original hover lift are all preserved */
.ms-mag{transition:var(--ease),translate .3s var(--ms-e)}

/* entrance (starts when JS adds .ms-go to .hero; hidden state only while .ms-fx) */
.ms-fx .hero:not(.ms-go) :is(h1,.wrap>div:first-child>p,.ctas,.portrait img,.badge5),
.ms-fx .hero:not(.ms-go) .portrait:before,.ms-fx .hero:not(.ms-go) .ms-bg{opacity:0}
.ms-fx .hero.ms-go .ms-bg{animation:ms-fade 1.6s ease backwards}
.ms-fx .hero.ms-go .ms-hw{animation:ms-word .9s var(--ms-e) backwards;animation-delay:calc(.12s + var(--i,0)*.07s)}
.ms-fx .hero.ms-go .wrap>div:first-child>p:nth-of-type(1){animation:ms-up .9s var(--ms-e) .55s backwards}
.ms-fx .hero.ms-go .wrap>div:first-child>p:nth-of-type(2){animation:ms-up .9s var(--ms-e) .72s backwards}
.ms-fx .hero.ms-go .ctas{animation:ms-up .9s var(--ms-e) .9s backwards}
.ms-fx .hero.ms-go .portrait img{animation:ms-up 1.2s var(--ms-e) .3s backwards}
.ms-fx .hero.ms-go .portrait:before{animation:ms-ring 1.4s var(--ms-e) .5s backwards}
.ms-fx .hero.ms-go .badge5{animation:ms-up .9s var(--ms-e) 1.15s backwards,ms-float 6s ease-in-out 2.1s infinite}
@keyframes ms-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes ms-word{from{opacity:0;transform:translateY(.5em);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes ms-ring{from{opacity:0;transform:scale(.9) translateY(4%)}to{opacity:1;transform:none}}
@keyframes ms-fade{from{opacity:0}to{opacity:1}}
@keyframes ms-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* ───────── ABOUT ───────── */
.ms-about main>section{position:relative}
.ms-about main>section>.wrap{position:relative;z-index:1}
.ms-about .ms-bg{--base:0}

/* hidden → revealed on scroll (JS adds .ms-in) */
.ms-fx .ms-about main>section .grid>div:first-child>*:not(.ph){opacity:0;translate:0 22px;
 transition:opacity .8s var(--ms-e) var(--d,0s),translate .8s var(--ms-e) var(--d,0s)}
.ms-fx .ms-about main>section .grid>div:first-child>*.ms-in:not(.ph){opacity:1;translate:0 0}
/* after the reveal, hand the button back its original transition (+ magnetic translate) */
.ms-fx .ms-about main>section .grid>div:first-child>.btn.ms-done{transition:var(--ease),translate .3s var(--ms-e)}
.ms-fx .ms-about ul.tick li{opacity:0;translate:-14px 0;transition:opacity .6s var(--ms-e),translate .6s var(--ms-e)}
.ms-fx .ms-about ul.tick.ms-in li{opacity:1;translate:0 0}
.ms-fx .ms-about ul.tick.ms-in li:nth-child(1){transition-delay:.25s}.ms-fx .ms-about ul.tick.ms-in li:nth-child(2){transition-delay:.35s}
.ms-fx .ms-about ul.tick.ms-in li:nth-child(3){transition-delay:.45s}.ms-fx .ms-about ul.tick.ms-in li:nth-child(4){transition-delay:.55s}

/* photos: masked rise + slow image settle, then mouse + scroll parallax */
.ms-fx .ms-about .ph{opacity:0;clip-path:inset(14% 0 0 0 round var(--r));transform:translateY(34px);
 translate:calc(var(--tx,0)*var(--k,1)*6px) calc(var(--ty,0)*var(--k,1)*5px);
 transition:opacity .9s var(--ms-e) var(--d,0s),clip-path 1.2s var(--ms-e) var(--d,0s),transform 1.1s var(--ms-e) var(--d,0s),translate .5s ease-out}
.ms-fx .ms-about .ph.ms-in{opacity:1;clip-path:inset(0 0 0 0 round var(--r));transform:none}
.ms-fx .ms-about .ph img{scale:1.22;
 translate:calc(var(--tx,0)*var(--k,1)*-8px) calc(var(--ty,0)*var(--k,1)*-6px + var(--sy,0)*1px);
 transition:scale 1.6s var(--ms-e) var(--d,0s),translate .5s ease-out}
.ms-fx .ms-about .ph.ms-in img{scale:1.08}
.ms-about .ph-b,.ms-about .ph-d{--k:1.6}
/* soft green sheen that tracks the cursor across each photo */
.ms-about .ph:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s ease;
 background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(var(--ms-g),.2),transparent 65%)}
.ms-about .ph:hover:after{opacity:1}

@media(hover:none),(pointer:coarse){.ms-cur,.ms-dot{display:none}}