/* Site-wide micro-interactions. Loaded on every page.
   Everything here is decorative: it degrades to the static design, and is
   switched off entirely for visitors who ask for reduced motion. */

/* ---- scroll progress bar ---- */
.mx-progress{position:fixed;left:0;top:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#F49320,#C0527E,#7B4AAC,#5150BA);z-index:400;pointer-events:none}

/* ---- nav gains depth once the page scrolls ---- */
nav{transition:box-shadow .3s ease,background-color .3s ease}
nav.mx-scrolled{box-shadow:0 10px 30px rgba(20,31,68,.10)}

/* ---- buttons: sheen sweep on hover, press feedback ---- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);transition:left .6s cubic-bezier(.22,1,.36,1);pointer-events:none;z-index:-1}
.btn:hover::after{left:120%}
.btn:active{transform:translateY(1px) scale(.98)}

/* ---- cards: lift and a soft spotlight that follows the cursor ---- */
.mx-card{transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease,border-color .35s ease}
.mx-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(28,44,95,.12)}
.mx-card::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(157,77,255,.16),transparent 60%);z-index:0}
.mx-card:hover::before{opacity:1}
.mx-card > *{position:relative;z-index:1}

/* dark cards (AeroFusion pages) get a violet glow instead */
.mx-dark:hover{box-shadow:0 18px 44px rgba(157,77,255,.18)}
.mx-dark::before{background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(200,255,46,.10),transparent 60%)}

/* ---- links: arrow nudges right on hover ---- */
.mx-arrow{display:inline-block;transition:transform .3s cubic-bezier(.22,1,.36,1)}
a:hover > .mx-arrow{transform:translateX(4px)}

/* ---- headings: gentle reveal on first paint ---- */
@keyframes mx-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
h1{animation:mx-rise .8s cubic-bezier(.22,1,.36,1) both}
.eyebrow,.kicker{animation:mx-rise .6s cubic-bezier(.22,1,.36,1) both}

/* ---- decorative AeroFusion elements drift gently ---- */
@keyframes mx-spin{to{transform:rotate(360deg)}}
@keyframes mx-drift{0%,100%{transform:translate(0,0)}50%{transform:translate(6px,-8px)}}
@keyframes mx-stripe{to{background-position:56px 0}}
.orbit{animation:mx-spin 90s linear infinite;transform-origin:50% 50%}
.dots{animation:mx-drift 9s ease-in-out infinite}
.hazard{background-size:28px 28px;animation:mx-stripe 6s linear infinite}

/* ---- scroll-reveal for elements the page does not reveal itself ---- */
.mx-pre{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.mx-in{opacity:1;transform:none}

/* ---- pill tags pop in ---- */
@keyframes mx-pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.arc span,.ed-meta span,.tag2,.path span{animation:mx-pop .5s cubic-bezier(.22,1,.36,1) both}

/* ---- respect reduced motion: switch everything off ---- */
@media (prefers-reduced-motion:reduce){
  .mx-progress{display:none}
  .btn::after,.mx-card,.mx-card::before,.mx-pre,.orbit,.dots,.hazard,.orbit .node,h1,.eyebrow,.kicker,.arc span,.ed-meta span,.tag2,.path span{animation:none!important;transition:none!important}
  .mx-pre{opacity:1!important;transform:none!important}
}
@media (hover:none){
  .mx-card:hover{transform:none;box-shadow:none}
  .mx-card::before{display:none}
}