/* GUSTS.AI motion layer v1 — original, no deps. Loaded after site.css. */
:root{--m-out:cubic-bezier(.22,1,.36,1);--m-io:cubic-bezier(.65,0,.35,1);--m-spring:cubic-bezier(.34,1.32,.44,1);--m-f:.22s;--m-d:.45s;--m-s:.8s;--m-glow1:rgba(26,60,255,.16);--m-glow2:rgba(81,70,214,.13);--m-glow3:rgba(10,122,87,.12)}
[data-theme=dark]{--m-glow1:rgba(123,147,255,.17);--m-glow2:rgba(163,156,255,.12);--m-glow3:rgba(79,214,168,.10)}

/* ---------- hero atmosphere: mesh glow + dot texture + gust lines ---------- */
.hero>.wrap{position:relative;z-index:1}
.m-sky{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.m-sky:before{content:"";position:absolute;inset:0;background:radial-gradient(circle,color-mix(in srgb,var(--ink) 14%,transparent) 1px,transparent 1.4px) 0 0/22px 22px;-webkit-mask:radial-gradient(ellipse 70% 80% at 72% 40%,#000,transparent 70%);mask:radial-gradient(ellipse 70% 80% at 72% 40%,#000,transparent 70%);opacity:.5}
.m-sky i{position:absolute;border-radius:50%;will-change:translate}
.m-sky i:nth-child(1){width:52vw;height:52vw;max-width:720px;max-height:720px;right:-14vw;top:-30%;background:radial-gradient(closest-side,var(--m-glow1),transparent);animation:m-drift-a 24s ease-in-out infinite alternate}
.m-sky i:nth-child(2){width:38vw;height:38vw;max-width:540px;max-height:540px;left:-12vw;top:10%;background:radial-gradient(closest-side,var(--m-glow2),transparent);animation:m-drift-b 31s ease-in-out infinite alternate}
.m-sky i:nth-child(3){width:34vw;height:34vw;max-width:480px;max-height:480px;left:38%;bottom:-40%;background:radial-gradient(closest-side,var(--m-glow3),transparent);animation:m-drift-c 28s ease-in-out infinite alternate}
@keyframes m-drift-a{to{translate:-7vw 9vh;scale:1.1}}
@keyframes m-drift-b{to{translate:9vw -5vh;scale:.92}}
@keyframes m-drift-c{to{translate:-6vw -8vh;scale:1.12}}
.m-gust{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.m-gust path{fill:none;stroke:url(#m-gust-g);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:var(--l,160) 1400;stroke-dashoffset:1560;animation:m-blow var(--t,9s) cubic-bezier(.45,.05,.35,1) var(--dl,0s) infinite;opacity:.9}
.m-gust path.m-base{stroke:color-mix(in srgb,var(--pri) 10%,transparent);stroke-dasharray:none;animation:none;stroke-width:1}
@keyframes m-blow{0%{stroke-dashoffset:1560;opacity:0}12%{opacity:.9}70%{opacity:.7}100%{stroke-dashoffset:0;opacity:0}}
/* existing geometric shapes float gently (individual props keep inline rotate) */
.hero .geo span{animation:m-bob 7s ease-in-out infinite alternate}
.hero .geo span:nth-child(1){animation:m-turn 80s linear infinite}
.hero .geo span:nth-child(2){animation:m-breathe 9s ease-in-out infinite alternate}
.hero .geo span:nth-child(3){animation-duration:6s}
.hero .geo span:nth-child(4){animation-duration:8.5s;animation-delay:-3s}
.hero .geo span:nth-child(5){animation-duration:7.5s;animation-delay:-1.5s}
.hero .geo span:nth-child(6){animation:m-twinkle 3.2s ease-in-out infinite}
@keyframes m-bob{to{translate:0 -14px}}
@keyframes m-turn{to{rotate:360deg}}
@keyframes m-breathe{to{scale:1.05}}
@keyframes m-twinkle{50%{scale:.55;opacity:.5}}
.m-paused :is(.m-sky i,.m-gust path,.geo span,.m-pulse){animation-play-state:paused!important}

/* ---------- hero intro choreography (reading order) ---------- */
.m-js .hero>.wrap>:not(.geo){animation:m-rise .9s var(--m-out) backwards}
.m-js .hero>.wrap>.kicker{animation-delay:.05s}
.m-js .hero>.wrap>h1{animation:m-wipe 1s var(--m-io) .12s backwards}
.m-js .hero>.wrap>.lead{animation-delay:.38s}
.m-js .hero>.wrap>:is(.cta,.map,.fbar){animation-delay:.52s}
.m-js .hero>.wrap>:is(.stats,.prog,.sinput){animation-delay:.66s}
.m-js .hero>.wrap>.geo{animation:m-fade 1.4s ease .3s backwards}
@keyframes m-rise{from{opacity:0;translate:0 16px;filter:blur(5px)}to{opacity:1;translate:none;filter:none}}
@keyframes m-wipe{from{opacity:.2;clip-path:inset(-.2em 100% -.3em -.1em);translate:0 8px}to{opacity:1;clip-path:inset(-.3em -.3em -.4em -.3em);translate:none}}
@keyframes m-fade{from{opacity:0}}

/* ---------- rotating keyword (per-character gust) ---------- */
.m-slot{display:inline-block;position:relative;vertical-align:top;width:var(--w,auto);height:1.12em;transition:width .6s var(--m-out);white-space:nowrap}
.m-slot>span{position:absolute;left:0;top:0;white-space:nowrap}
.m-slot>span>b{display:inline-block;font-weight:inherit;opacity:0;translate:0 .55em;rotate:10deg;filter:blur(4px);transition:opacity .45s ease,translate .7s var(--m-out),rotate .7s var(--m-out),filter .45s ease;transition-delay:calc(var(--c)*38ms)}
.m-slot>span.on>b{opacity:1;translate:none;rotate:none;filter:none}
.m-slot>span.off>b{opacity:0;translate:.5em -.45em;rotate:-8deg;filter:blur(4px);transition-duration:.35s,.5s,.5s,.35s;transition-delay:calc(var(--c)*28ms)}
.m-slot:after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.2em;border-radius:99px;background:linear-gradient(90deg,var(--pri),var(--vio),var(--mint));opacity:.28;transform-origin:left;transform:scaleX(var(--u,1));transition:transform .9s var(--m-out)}
.m-slot.sw:after{--u:0;transition:transform .25s ease}

/* ---------- header / nav ---------- */
.hd{transition:box-shadow .35s var(--m-out),background-color .35s var(--m-out),border-color .35s}
.hd.m-scrolled{box-shadow:0 12px 32px -22px rgba(12,16,36,.45);background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(16px) saturate(1.4)}
.logo i{transition:rotate .7s var(--m-spring)}.logo:hover i{rotate:-90deg}
.nav>div>button,.nav>a{transition:background-color var(--m-f) var(--m-out),color var(--m-f)}
.nav>div>button:after{display:inline-block;transition:rotate .3s var(--m-out);margin-left:2px}
.nav>div.open>button:after{rotate:180deg}
.nav>div.open .dd{animation:m-dd .34s var(--m-out) both;transform-origin:20% 0}
.nav>div.open .dd a{animation:m-dd-i .42s var(--m-out) both}
.nav>div.open .dd a:nth-child(2){animation-delay:.04s}.nav>div.open .dd a:nth-child(3){animation-delay:.08s}.nav>div.open .dd a:nth-child(4){animation-delay:.12s}.nav>div.open .dd a:nth-child(5){animation-delay:.16s}.nav>div.open .dd a:nth-child(n+6){animation-delay:.2s}
.dd a{transition:background-color var(--m-f) var(--m-out),translate var(--m-f) var(--m-out)}
.dd a:hover{translate:3px 0}
.dd a .k{transition:letter-spacing .3s var(--m-out)}.dd a:hover .k{letter-spacing:.22em}
.nav.show{animation:m-dd .3s var(--m-out) both}
@keyframes m-dd{from{opacity:0;translate:0 -8px;scale:.98}}
@keyframes m-dd-i{from{opacity:0;translate:0 6px}}
.btn-ic{transition:color var(--m-f),border-color var(--m-f),background-color var(--m-f),translate var(--m-f) var(--m-out)}
.btn-ic:hover{translate:0 -1px}
#themeBtn{transition:rotate .6s var(--m-spring),color var(--m-f),border-color var(--m-f)}
/* reading progress (scroll-driven, zero JS) */
.m-bar{position:fixed;left:0;right:0;top:0;height:3px;z-index:60;background:linear-gradient(90deg,var(--pri),var(--vio),var(--mint));transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
@supports (animation-timeline:scroll()){.m-bar{animation:m-grow linear both;animation-timeline:scroll(root)}}
@keyframes m-grow{to{transform:scaleX(1)}}

/* ---------- scroll reveal ---------- */
.m-rv{opacity:0;translate:0 22px;transition:opacity .7s var(--m-out) var(--m-dl,0s),translate .85s var(--m-out) var(--m-dl,0s),transform .3s var(--m-out),border-color .25s,box-shadow .3s var(--m-out),background-color .25s}
.m-rv.m-in{opacity:1;translate:none}
.sh.m-rv h2{clip-path:inset(-.2em 100% -.35em -.1em);transition:clip-path 1s var(--m-io) .12s}
.sh.m-in h2{clip-path:inset(-.2em -.3em -.35em -.1em)}
.m-js .sec .kicker:before{width:0;transition:width .7s var(--m-out) .25s}
.m-js .sec .m-in .kicker:before,.m-js .sec .kicker.m-in:before{width:18px}

/* ---------- cards: lift, tilt, spotlight, gradient edge ---------- */
.card,.acard,.res>a,.next>a,.item{--mx:50%;--my:0%}
a.card:hover,.acard:hover,.res>a:hover,.next>a:hover{box-shadow:0 22px 44px -26px color-mix(in srgb,var(--pri) 55%,transparent),var(--sh)}
a.card:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px)}
.acard,.res>a,.next>a{position:relative;transition:transform .3s var(--m-out),border-color .25s,box-shadow .3s var(--m-out)}
.acard:hover,.res>a:hover,.next>a:hover{transform:translateY(-3px)}
:is(a.card,.acard,.res>a,.next>a):before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--ma,140deg) at var(--mx) var(--my),var(--pri),var(--vio),var(--mint),var(--pri));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity .3s var(--m-out);pointer-events:none}
:is(a.card,.acard,.res>a,.next>a):after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(380px circle at var(--mx) var(--my),color-mix(in srgb,var(--pri) 9%,transparent),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
:is(a.card,.acard,.res>a,.next>a):hover:before,:is(a.card,.acard,.res>a,.next>a):hover:after{opacity:1}
.card .ico{transition:rotate .45s var(--m-spring),translate .45s var(--m-spring),scale .45s var(--m-spring)}
a.card:hover .ico{rotate:-8deg;translate:0 -2px;scale:1.06}
.card .more{display:inline-block;transition:translate .3s var(--m-out)}a.card:hover .more{translate:4px 0}
.tag{transition:background-color var(--m-f),color var(--m-f)}
.chip{transition:background-color var(--m-f),border-color var(--m-f),color var(--m-f),translate var(--m-f) var(--m-out),box-shadow var(--m-f)}
.chip:hover{translate:0 -1px;border-color:color-mix(in srgb,var(--pri) 45%,var(--line))}
.chip.on{box-shadow:0 8px 18px -10px var(--pri)}

/* ---------- buttons ---------- */
.b{position:relative;overflow:hidden;isolation:isolate;transition:transform .25s var(--m-out),box-shadow .3s var(--m-out),border-color .2s,background-color .2s}
.b:hover{transform:translateY(-2px)}.b:active{transform:translateY(0) scale(.98)}
.b:not(.p):hover{border-color:color-mix(in srgb,var(--pri) 45%,var(--line))}
.b.p:hover{box-shadow:0 14px 28px -12px color-mix(in srgb,var(--pri) 75%,transparent)}
.b.p:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.38) 50%,transparent 65%);translate:-120% 0;transition:translate 0s}
.b.p:hover:after{translate:120% 0;transition:translate .8s var(--m-out)}

/* ---------- stat counters ---------- */
.stats b{font-variant-numeric:tabular-nums}
.stats div{transition:transform .3s var(--m-out),border-color .25s}
.stats div:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--pri) 35%,var(--line))}

/* ---------- learning roadmap: gust fills the path to your station ---------- */
.map{position:relative}
.map>*{transition:background-color .3s,translate .3s var(--m-out)}
.map>*:before{content:"";position:absolute;left:0;right:0;top:-3px;height:3px;background:linear-gradient(90deg,var(--pri),var(--vio));transform-origin:0 50%;transform:scaleX(0)}
.map>:not(.m-done):before{transform:none;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--pri) 45%,transparent) 0 6px,transparent 6px 14px);opacity:.55;animation:m-march 1.4s linear infinite}
@keyframes m-march{to{background-position:28px 0}}
.map.m-in>.m-done:before{transform:scaleX(1);transition:transform .55s cubic-bezier(.5,0,.5,1) calc(var(--m-k,0)*.42s + .2s)}
.map>*>i{position:static}
.map>:is(.cur,.m-end)>i:before{content:"";position:absolute;right:-7px;top:-8.5px;width:14px;height:14px;border-radius:50%;background:var(--pri);box-shadow:0 0 0 4px color-mix(in srgb,var(--pri) 22%,transparent),0 0 18px var(--pri);scale:0;transition:scale .5s var(--m-spring) calc(var(--m-k,0)*.42s + .7s);z-index:2}
.map.m-in>:is(.cur,.m-end)>i:before{scale:1}
.map.m-in>.cur>i:after{content:"";position:absolute;right:-7px;top:-8.5px;width:14px;height:14px;border-radius:50%;border:2px solid var(--pri);animation:m-ping 2.2s var(--m-out) 1.6s infinite;opacity:0}
@keyframes m-ping{0%{opacity:.7;scale:1}100%{opacity:0;scale:3}}
.map>a:hover{translate:0 -2px}
.map>div{opacity:.75}

/* ---------- flip cards ---------- */
.cc .in,.flip .in{transition:transform .85s var(--m-spring),box-shadow .4s}
.cc:hover:not(.on) .in{transform:rotateY(-12deg) translateY(-3px)}
.flip:hover:not(.on) .in{transform:rotateY(-7deg)}
.cc .f,.flip .f{overflow:hidden}
.cc .f:after,.flip .f:before{content:"";position:absolute;inset:-20% -60%;background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);translate:-60% 0;transition:translate 0s;pointer-events:none}
[data-theme=dark] .cc .f:after{background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.12) 50%,transparent 60%)}
.cc:hover .f:after,.flip:hover .f:before{translate:60% 0;transition:translate 1s var(--m-out)}
.cc .f,.cc .bk,.flip .f,.flip .bk{transition:box-shadow .4s var(--m-out)}
.cc:hover .f,.cc.on .bk{box-shadow:0 22px 40px -26px color-mix(in srgb,var(--pri) 60%,transparent)}
.cc .hint{transition:color .2s}.cc:hover .hint{color:var(--pri)}
details.q summary{transition:color .2s}details.q[open]{border-color:color-mix(in srgb,var(--pri) 40%,var(--line))}
details.q[open]>p{animation:m-rise .45s var(--m-out) both}
.done .b.on{animation:m-pop .5s var(--m-spring)}
@keyframes m-pop{40%{scale:1.08}}

/* ---------- theme switch: circular reveal (View Transitions) ---------- */
html.m-vt::view-transition-old(root),html.m-vt::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.m-vt::view-transition-new(root){z-index:2}
html.m-fade,html.m-fade *{transition:background-color .55s ease,color .55s ease,border-color .55s ease,box-shadow .55s ease!important}

/* ---------- reduced motion: everything static & visible ---------- */
@media (prefers-reduced-motion:reduce){
.m-rv,.m-js .hero>.wrap>*{opacity:1!important;translate:none!important;filter:none!important;clip-path:none!important;animation:none!important}
.sh.m-rv h2{clip-path:none}
.m-sky i,.m-gust path:not(.m-base),.map>:not(.m-done):before,.map.m-in>.cur>i:after{animation:none!important}
.m-gust path:not(.m-base){opacity:0}
.map>*:before,.map>:is(.cur,.m-end)>i:before{transition:none!important}
a.card:hover,.cc:hover:not(.on) .in,.flip:hover:not(.on) .in{transform:none}
}