/* NixFleet motion layer v2 (preview 04.11.2026) — modern, light-weight effects on top of nix-ui.css.
   Everything is pure CSS (plus tiny nix-motion.js for haptics/ripple), switched off for prefers-reduced-motion. */

@property --nx-a{syntax:"<angle>";inherits:false;initial-value:0deg}

@media (prefers-reduced-motion:no-preference){

  /* 1. Smooth page-to-page transitions (cross-document View Transitions: Safari 18.2+, Chrome 126+) */
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:nxOut .22s cubic-bezier(.4,0,1,1) both}
  ::view-transition-new(root){animation:nxNew .34s cubic-bezier(.2,.8,.2,1) both}
  header{view-transition-name:nx-header}
  ::view-transition-group(nx-header){animation-duration:.01s}
  @keyframes nxOut{to{opacity:0;transform:scale(.985)}}
  @keyframes nxNew{from{opacity:0;transform:translateY(14px)}}

  /* 2. Cards rise softly as you scroll to them (scroll-driven, no JS, no flicker on re-render) */
  @supports (animation-timeline:view()){
    .card,a.r,.fpromo,.why>*,.grid>*{animation:nxRise linear both;animation-timeline:view();animation-range:entry 0% entry 32%}
    @keyframes nxRise{from{opacity:.001;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}
  }

  /* 3. Living gradient border on promo / “new in fleet” banners and the agent card */
  .fpromo.news,html[data-ui=dark] a.r.ag{position:relative;isolation:isolate}
  .fpromo.news{border:0!important;border-radius:18px}
  .fpromo.news::before,html[data-ui=dark] a.r.ag::before{content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px;z-index:-1;
    background:conic-gradient(from var(--nx-a),#e6177a,#e8573a,#f08a2e,#fbb51a,#fff3c4,#fbb51a,#f08a2e,#e6177a);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:nxSpin 6s linear infinite}
  @keyframes nxSpin{to{--nx-a:360deg}}

  /* 4. Shine sweep on the main yellow buttons (every few seconds, like a glint) */
  .btn.y,a.btn.y,button.y,.fpromo button,html[data-ui=dark] a.r.ag{overflow:hidden;position:relative}
  .btn.y::after,a.btn.y::after,button.y::after,.fpromo button::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;pointer-events:none;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);animation:nxShine 4.8s ease-in-out infinite}
  @keyframes nxShine{0%,62%{left:-60%}82%,100%{left:130%}}

  /* 5. Logo: gentle float + warm sunset glow on the app start screen */
  html[data-ui=dark] main>img:first-child{animation:nxFloat 6s ease-in-out infinite;filter:drop-shadow(0 18px 30px rgba(240,138,46,.35))}
  @keyframes nxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

  /* 6. Points badge: soft pulse so clients notice their bonus */
  #ptsb{animation:nxPulse 3.2s ease-in-out infinite}
  @keyframes nxPulse{0%,100%{box-shadow:0 0 0 0 rgba(251,181,26,.0)}50%{box-shadow:0 0 0 6px rgba(251,181,26,.18)}}

  /* 7. Ripple from the touch point (added by nix-motion.js) */
  .nx-rip{position:absolute;border-radius:50%;pointer-events:none;transform:scale(0);background:currentColor;opacity:.18;animation:nxRip .55s ease-out forwards}
  @keyframes nxRip{to{transform:scale(1);opacity:0}}

  /* 8. Loading placeholders shimmer instead of “…” */
  .card.meta:only-child,.empty{background-image:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.7) 50%,rgba(255,255,255,0) 100%)!important;background-size:200% 100%!important;background-repeat:no-repeat!important;animation:nxShim 1.2s linear infinite}
  @keyframes nxShim{from{background-position:-150% 0}to{background-position:250% 0}}
}

/* 9. “Liquid glass” header (iOS 26 style): translucent, blurred, with a specular top edge */
html[data-ui] header{position:sticky;top:0;z-index:20;-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);
  background:linear-gradient(180deg,#252c6b 0%,#1b2150 100%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 30px -14px rgba(8,10,35,.75)!important}