/* Desktop-only motion (11-Oct): starry sky + rotating zodiac wheel in the hero, scroll progress, richer scroll reveals,
   tilt / glow on cards, drifting planets, drawn "how it works" line. Loaded with media="(min-width:1024px)" — phones and
   tablets never apply it (mobile UI = app-like, unchanged). Elements are injected by motion.js (desktop only).
   prefers-reduced-motion: calm mode (slow twinkle + slow wheel, no parallax / tilt / shooting stars). */

.mx-progress{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);z-index:200;background:linear-gradient(90deg,var(--g1),var(--sec));pointer-events:none}

/* hero sky */
.hero .mx-sky{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.9}
.hero .hero-grid{position:relative;z-index:1}
.hero::before{content:"";position:absolute;width:620px;height:620px;right:-120px;top:-160px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--sec) 22%,transparent),transparent 65%);filter:blur(10px);animation:mx-breathe 9s ease-in-out infinite;pointer-events:none}
.hero::after{content:"";position:absolute;width:520px;height:520px;left:-180px;bottom:-220px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--g1) 20%,transparent),transparent 65%);filter:blur(10px);animation:mx-breathe 11s ease-in-out infinite reverse;pointer-events:none}

/* zodiac wheel behind the phone */
.mx-wheel{position:absolute;width:560px;height:560px;left:50%;top:50%;margin:-280px 0 0 -280px;pointer-events:none;z-index:0;opacity:.85}
.mx-wheel svg{width:100%;height:100%;animation:spin 120s linear infinite}
.mx-wheel .ring{fill:none;stroke:color-mix(in srgb,var(--p) 30%,transparent);stroke-width:1.2}
.mx-wheel .ring.fine{stroke-dasharray:2 6;stroke-width:1}
.mx-wheel .tick{stroke:color-mix(in srgb,var(--p) 35%,transparent);stroke-width:1}
.mx-wheel text{fill:var(--p);font-size:22px;text-anchor:middle;dominant-baseline:central;opacity:.85}
.mx-wheel .glyph{animation:mx-counter 120s linear infinite;transform-box:fill-box;transform-origin:center}
.hero-art .phone,.hero-art .float-card{z-index:2}
.hero-art .orbit{z-index:1}
.mx-layer{transition:translate .35s ease-out}

/* glowing planets drifting across sections */
.mx-planet{position:absolute;border-radius:50%;pointer-events:none;z-index:0;opacity:.55;animation:mx-drift 26s ease-in-out infinite}
.mx-planet.sat{width:46px;height:46px;background:radial-gradient(circle at 35% 35%,#ffe1b0,#d9893b 70%);box-shadow:0 0 30px rgba(255,170,80,.45)}
.mx-planet.sat::after{content:"";position:absolute;left:-16px;right:-16px;top:50%;height:12px;margin-top:-6px;border:2px solid rgba(217,137,59,.55);border-radius:50%;transform:rotate(-18deg)}
.mx-planet.moon{width:30px;height:30px;background:radial-gradient(circle at 35% 35%,#fff,#cfd6e4 70%);box-shadow:0 0 26px rgba(200,215,255,.6);animation-duration:32s;animation-direction:reverse}
.mx-planet.mars{width:18px;height:18px;background:radial-gradient(circle at 35% 35%,#ffb39a,#c2411c 75%);box-shadow:0 0 18px rgba(230,90,40,.5);animation-duration:22s}
.mx-host{position:relative;isolation:isolate}
.mx-host>.wrap,.mx-host>*:not(.mx-planet){position:relative;z-index:1}

/* scroll reveals (desktop flavour: rise + blur-in, staggered) */
.js .mx-rv{opacity:0;transform:translateY(34px) scale(.98);filter:blur(6px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),filter .9s ease}
.js .mx-rv.in{opacity:1;transform:none;filter:none}
.js .mx-rv-left{opacity:0;transform:translateX(-40px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.js .mx-rv-left.in{opacity:1;transform:none}
.sec-head h2{background:linear-gradient(90deg,var(--text) 0%,var(--text) 40%,var(--p) 50%,var(--text) 60%,var(--text) 100%);background-size:250% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text}
.sec-head.in h2,.sec-head .in h2{animation:mx-shine 2.4s ease .2s 1 both}
.sec-head h2{color:var(--text)}
@supports (-webkit-background-clip:text){.sec-head h2{-webkit-text-fill-color:transparent}}

/* cards: lift, glow, tilt (tilt angle set by motion.js) */
.rashi,.fcard,.pcard,.post,.steps li{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
.rashi{transform:perspective(700px) rotateX(var(--rx,0)) rotateY(var(--ry,0))}
.rashi:hover{box-shadow:0 18px 40px color-mix(in srgb,var(--p) 22%,transparent)}
.rashi .sym{display:inline-block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.rashi:hover .sym{transform:rotate(360deg) scale(1.15)}
.fcard{position:relative;overflow:hidden}
.fcard::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 48%,transparent 66%);transform:translateX(-120%);transition:transform .9s ease;pointer-events:none}
.fcard:hover{transform:translateY(-8px);box-shadow:0 22px 44px color-mix(in srgb,var(--p) 18%,transparent)}
.fcard:hover::after{transform:translateX(120%)}

/* how it works: line drawn across the steps */
.how .steps{position:relative}
.how .steps::before{content:"";position:absolute;left:8%;right:8%;top:30px;height:2px;background:linear-gradient(90deg,var(--g1),var(--sec));transform:scaleX(0);transform-origin:0 50%;transition:transform 1.6s cubic-bezier(.2,.7,.2,1) .2s;z-index:0}
.how .steps.mx-drawn::before{transform:scaleX(1)}
.how .steps li{position:relative;z-index:1}
.how .steps li span{box-shadow:0 0 0 0 color-mix(in srgb,var(--p) 40%,transparent);animation:mx-pulse 2.8s ease-out infinite}
.how .steps li:nth-child(2) span{animation-delay:.9s}.how .steps li:nth-child(3) span{animation-delay:1.8s}

/* CTA band: slow shimmer */
.cta-band{background:linear-gradient(120deg,var(--g1),var(--g2),var(--sec),var(--g1));background-size:300% 300%;animation:mx-grad 16s ease infinite}

@keyframes mx-breathe{50%{transform:scale(1.12) translate(10px,8px);opacity:.75}}
@keyframes mx-counter{to{transform:rotate(-360deg)}}
@keyframes mx-drift{0%,100%{transform:translate(0,0)}25%{transform:translate(26px,-18px)}50%{transform:translate(-14px,-34px)}75%{transform:translate(-30px,10px)}}
@keyframes mx-shine{from{background-position:100% 0}to{background-position:0 0}}
@keyframes mx-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--p) 45%,transparent)}70%,100%{box-shadow:0 0 0 16px transparent}}
@keyframes mx-grad{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* calm mode: fewer and slower moves, nothing that follows the mouse or the scroll */
@media (prefers-reduced-motion:reduce){
  .mx-wheel svg,.mx-wheel .glyph{animation-duration:300s!important}
  .mx-planet{animation:none!important}
  .hero::before,.hero::after{animation:none!important}
  .js .mx-rv{filter:none;transform:none;transition:opacity 1.2s ease!important}
  .rashi{transform:none!important}
  .cta-band{animation:none!important}
}