/* ============ Motion layer (Xometry theme) ============
   Everything here is transform/opacity-only (GPU-friendly), gated behind
   html.js for no-JS fallback, and fully disabled under
   prefers-reduced-motion. Loaded after style.css. No 3D effects. */

/* ---------- page entrance ---------- */
html.js body{animation:fx-page-in .7s cubic-bezier(.16,.6,.24,1) both}
@keyframes fx-page-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- scroll progress bar ---------- */
.fx-progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:2000;
  background:linear-gradient(90deg,#1B73E8,#2A35A6);box-shadow:0 0 12px rgba(27,115,232,.55)}

/* ---------- reveal variants (extend .rv) ---------- */
html.js .rv-l{opacity:0;transform:translateX(-34px);transition:opacity .8s ease,transform .8s cubic-bezier(.16,.6,.24,1)}
html.js .rv-r{opacity:0;transform:translateX(34px);transition:opacity .8s ease,transform .8s cubic-bezier(.16,.6,.24,1)}
html.js .rv-s{opacity:0;transform:scale(.92);transition:opacity .7s ease,transform .7s cubic-bezier(.16,.6,.24,1)}
html.js .rv-blur{opacity:0;transform:translateY(22px);filter:blur(8px);transition:opacity .9s ease,transform .9s cubic-bezier(.16,.6,.24,1),filter .9s ease}
.rv-l.in,.rv-r.in,.rv-s.in{opacity:1;transform:none}
.rv-blur.in{opacity:1;transform:none;filter:blur(0)}

/* ---------- futuristic hero ---------- */
.fx-hero{position:relative;overflow:hidden;isolation:isolate}
.fx-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;pointer-events:none;z-index:0;
  animation:fx-drift 14s ease-in-out infinite alternate}
.fx-orb-a{width:420px;height:420px;left:-120px;top:-140px;background:radial-gradient(circle,rgba(27,115,232,.45),transparent 70%)}
.fx-orb-b{width:360px;height:360px;right:-100px;bottom:-160px;background:radial-gradient(circle,rgba(42,53,166,.35),transparent 70%);animation-delay:-6s}
@keyframes fx-drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(46px,30px,0) scale(1.12)}}
.fx-grid{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(27,115,232,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(27,115,232,.10) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 20%,#000 30%,transparent 75%);
  mask-image:radial-gradient(ellipse 90% 80% at 50% 20%,#000 30%,transparent 75%);
  animation:fx-grid-pan 26s linear infinite}
@keyframes fx-grid-pan{to{background-position:44px 44px,44px 44px}}

/* gradient sweep on the hero headline accent */
.fx-shine{background:linear-gradient(110deg,#1B73E8 20%,#2A35A6 40%,#1B73E8 60%);
  background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:fx-shine 5s linear infinite}
@keyframes fx-shine{to{background-position:220% center}}

/* floating glass chips */
.fx-chip{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap;
  background:rgba(255,255,255,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(27,115,232,.22);box-shadow:0 10px 28px rgba(11,36,71,.10);
  animation:fx-float 6s ease-in-out infinite}
.fx-chip b{color:#1B73E8}
@keyframes fx-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media(max-width:760px){.fx-chip{display:none}}

/* ---------- magnetic + glow buttons ---------- */
.btn-mag{transition:transform .25s cubic-bezier(.16,.6,.24,1),box-shadow .25s ease;will-change:transform}
.btn-mag:hover{box-shadow:0 12px 32px rgba(27,115,232,.35)}
.btn-pulse{position:relative}
.btn-pulse::before{content:"";position:absolute;inset:-3px;border-radius:inherit;
  border:2px solid rgba(27,115,232,.55);opacity:0;animation:fx-pulse 2.6s ease-out infinite;pointer-events:none}
@keyframes fx-pulse{0%{transform:scale(.96);opacity:.8}70%{transform:scale(1.06);opacity:0}100%{opacity:0}}

/* ---------- product cards lift on hover (2D, GPU-friendly) ----------
   (base lift already defined in style.css; motion layer adds nothing here) */

/* ---------- animated counters ---------- */
[data-count]{font-variant-numeric:tabular-nums}

/* ---------- marquee edge fade ---------- */
.fx-marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}

/* ---------- shimmer skeleton ---------- */
.fx-shimmer{position:relative;overflow:hidden;background:#eef1f4}
.fx-shimmer::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.75) 50%,transparent 80%);
  animation:fx-shimmer 1.6s infinite}
@keyframes fx-shimmer{to{transform:translateX(100%)}}

/* ---------- animated gradient text + underline links ---------- */
.txt-grad{background:linear-gradient(100deg,#111111 30%,#1B73E8 50%,#111111 70%);background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:fx-shine 6s linear infinite}
.lnk-fx{background-image:linear-gradient(#1B73E8,#1B73E8);background-size:0% 2px;background-repeat:no-repeat;
  background-position:left calc(100% - 1px);transition:background-size .3s ease;padding-bottom:2px}
.lnk-fx:hover{background-size:100% 2px}

/* ---------- section glow dividers ---------- */
.fx-hr{height:1px;border:0;margin:0;
  background:linear-gradient(90deg,transparent,rgba(27,115,232,.45),transparent)}

/* ---------- back-to-top press + arrow lift ---------- */
.to-top:active{transform:scale(.88)!important}
.to-top span{display:inline-block;transition:transform .3s cubic-bezier(.16,.6,.24,1)}
.to-top:hover span{transform:translateY(-3px)}

/* ---------- reduced motion: everything off ---------- */@media(prefers-reduced-motion:reduce){
  html.js body{animation:none}
  .fx-orb,.fx-grid,.fx-shine,.fx-chip,.btn-pulse::before,.fx-shimmer::after,.txt-grad{animation:none!important}
  .fx-chip{transform:none}
  html.js .rv-l,html.js .rv-r,html.js .rv-s,html.js .rv-blur{opacity:1!important;transform:none!important;filter:none!important;transition:none}
  .fx-progress{display:none}
}