/* ============ Motion (Framer Motion) effects + animated graphics ============
   Everything here is added by assets/js/motion-fx.js at runtime. If that file is
   removed, the site works exactly as before. */

/* scroll progress bar */
.fx-progress{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);height:3px;background:var(--em-l);transform-origin:0 50%;transform:scaleX(0);z-index:60;pointer-events:none}

/* hero particle network */
.fx-net{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.hero h1 .fx-w{display:inline-block;will-change:transform}

/* how it works: scroll-drawn flow graphic (replaces the small phone) */
.how .mini-phone{display:none}
.fx-flow{width:100%;max-width:560px;height:auto;display:block;margin-inline:auto;overflow:visible}
.fx-flow .fx-node{transition:opacity .4s}
@media (max-width:980px){
  .how-visual{display:block;margin-top:36px}
}

/* feature cards, plans, video frames: tilt targets */
.fcard,.plan,.vframe,.soon-list li{will-change:transform}

/* FAQ spring accordion */
.faq details>p{overflow:hidden}

/* final CTA parallax blobs */
.final{position:relative;overflow:hidden}
.final-in{position:relative;z-index:1}
/* soft glow made with a gradient (a CSS blur filter here made scrolling stutter) */
.fx-blob{position:absolute;width:620px;height:620px;border-radius:50%;pointer-events:none;z-index:0;will-change:transform}
.fx-blob.a{background:radial-gradient(closest-side,rgba(var(--accent-rgb),.16),rgba(var(--accent-rgb),0));left:-220px;top:-240px}
.fx-blob.b{background:radial-gradient(closest-side,rgba(122,167,255,.14),rgba(122,167,255,0));right:-220px;bottom:-260px}
/* flow graphic: pulsing ring (CSS, pauses off screen) */
.fx-flow .fx-ring{transform-box:fill-box;transform-origin:center;animation:fxRing 2.4s ease-in-out infinite}
@keyframes fxRing{50%{transform:scale(1.25);opacity:.1}}

@media (prefers-reduced-motion:reduce){
  .fx-progress{display:none}
}

/* keep the hero video below the fixed menu so nothing in the video hides behind it */
@media (min-width:769px){ .hero-media{top:68px} }