/* =========================================================
   Wrenchmate Site Motion System
   pre-Alpha V1.0.257

   Scope:
   - Background: a few fixed star-shaped twinkles, no drifting snow.
   - Sidebar: no motion; the sidebar background stays static.
   - Content, tabs and steppers stay clean and static.
   ========================================================= */

:root{
  --wm-site-sparkle-color:255,255,255;
  --wm-site-sparkle-opacity:.52;
  --wm-site-sparkle-glow:.26;
}

html[data-theme="light"]{
  --wm-site-sparkle-color:26,34,46;
  --wm-site-sparkle-opacity:.30;
  --wm-site-sparkle-glow:.12;
}

html[data-accent="red"]{
  --wm-site-motion-accent:168,83,77;
}

html[data-accent="blue"],
html:not([data-accent]){
  --wm-site-motion-accent:92,136,200;
}

.mp-app,
.public-trust-shell,
.auth-shell{
  position:relative;
  z-index:1;
}

.wm-site-motion-layer{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  contain:layout paint style;
}

/* The app used to include a second motion layer inside the content surface.
   Keep the include harmless so sparkles never sit on top of panels/cards. */
.wm-site-motion-layer--content{
  display:none!important;
}

.wm-site-motion__sweep{
  display:none!important;
  animation:none!important;
  opacity:0!important;
}

html[data-sparkles="off"] .wm-site-motion__sparkle{
  display:none!important;
  animation:none!important;
  opacity:0!important;
}

.wm-site-motion__sparkle{
  position:absolute;
  width:var(--wm-sparkle-size,18px);
  height:var(--wm-sparkle-size,18px);
  opacity:0;
  transform:translateZ(0) scale(.62);
  animation:wmStarTwinkle var(--wm-sparkle-duration,7s) ease-in-out infinite;
  animation-delay:var(--wm-sparkle-delay,0s);
  will-change:opacity,transform;
}

.wm-site-motion__sparkle::before,
.wm-site-motion__sparkle::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  border-radius:999px;
  transform:translate(-50%,-50%);
  background:
    linear-gradient(180deg,
      rgba(var(--wm-site-sparkle-color),0),
      rgba(var(--wm-site-sparkle-color),.95) 46%,
      rgba(var(--wm-site-sparkle-color),.95) 54%,
      rgba(var(--wm-site-sparkle-color),0));
  box-shadow:0 0 14px rgba(var(--wm-site-sparkle-color),var(--wm-site-sparkle-glow));
}

.wm-site-motion__sparkle::before{
  width:2px;
  height:100%;
}

.wm-site-motion__sparkle::after{
  width:100%;
  height:2px;
  background:
    linear-gradient(90deg,
      rgba(var(--wm-site-sparkle-color),0),
      rgba(var(--wm-site-sparkle-color),.95) 46%,
      rgba(var(--wm-site-sparkle-color),.95) 54%,
      rgba(var(--wm-site-sparkle-color),0));
}

/* Deliberately sparse: stronger points, no particle field. */
.wm-site-motion__sparkle--1{top:12%;left:26%;--wm-sparkle-size:22px;--wm-sparkle-duration:6.6s;--wm-sparkle-delay:.2s}
.wm-site-motion__sparkle--2{top:20%;left:77%;--wm-sparkle-size:16px;--wm-sparkle-duration:7.8s;--wm-sparkle-delay:1.5s}
.wm-site-motion__sparkle--3{top:37%;left:14%;--wm-sparkle-size:18px;--wm-sparkle-duration:8.4s;--wm-sparkle-delay:3.1s}
.wm-site-motion__sparkle--4{top:45%;left:88%;--wm-sparkle-size:24px;--wm-sparkle-duration:7.2s;--wm-sparkle-delay:.9s}
.wm-site-motion__sparkle--5{top:63%;left:31%;--wm-sparkle-size:15px;--wm-sparkle-duration:8.9s;--wm-sparkle-delay:2.8s}
.wm-site-motion__sparkle--6{top:72%;left:70%;--wm-sparkle-size:20px;--wm-sparkle-duration:7.5s;--wm-sparkle-delay:4s}
.wm-site-motion__sparkle--7{top:84%;left:44%;--wm-sparkle-size:14px;--wm-sparkle-duration:9.2s;--wm-sparkle-delay:5.3s}
.wm-site-motion__sparkle--8{display:none}

body:not(.auth-page) .mp-main{
  position:relative;
  isolation:isolate;
}

body:not(.auth-page) .mp-main > :not(.wm-site-motion-layer--content){
  position:relative;
  z-index:4;
}

/* Keep the sidebar as a static surface. The actual sidebar background and
   overlay are defined in app.css; this file must not override them. */
body:not(.auth-page) .mp-sidebar{
  position:sticky;
  isolation:isolate;
  overflow:hidden;
}

/* Old route-level motion is intentionally disabled. Navigation state comes
   from active surfaces, borders and indicators, not moving chrome bars. */
body:not(.auth-page) :where(
  .mp-nav-main,
  .mp-subnav a,
  .workspace-tab,
  .dossier-tabs .workspace-tab,
  .wm-folder-tab.wm-dossier-tab,
  .wm-vd-dossier .wm-folder-tab,
  [data-tabs] [role="tab"],
  .quick-stepper li,
  .invoice-step-rail span,
  .flow-step-rail span,
  .wm-flow-step,
  .wm-flow-step-card,
  .wm-step-rail__item,
  .invoice-review-step,
  .form-step
)::before,
body:not(.auth-page) :where(
  .mp-nav-main,
  .mp-subnav a,
  .workspace-tab,
  .dossier-tabs .workspace-tab,
  .wm-folder-tab.wm-dossier-tab,
  .wm-vd-dossier .wm-folder-tab,
  [data-tabs] [role="tab"],
  .quick-stepper li,
  .invoice-step-rail span,
  .flow-step-rail span,
  .wm-flow-step,
  .wm-flow-step-card,
  .wm-step-rail__item,
  .invoice-review-step,
  .form-step
)::after{
  animation:none!important;
  box-shadow:none!important;
}

@keyframes wmStarTwinkle{
  0%,100%{
    opacity:0;
    transform:translateZ(0) scale(.58) rotate(0deg);
  }
  24%{
    opacity:calc(var(--wm-site-sparkle-opacity) * .26);
    transform:translateZ(0) scale(.76) rotate(12deg);
  }
  43%{
    opacity:var(--wm-site-sparkle-opacity);
    transform:translateZ(0) scale(1) rotate(0deg);
  }
  58%{
    opacity:calc(var(--wm-site-sparkle-opacity) * .42);
    transform:translateZ(0) scale(.82) rotate(-10deg);
  }
  72%{
    opacity:.03;
    transform:translateZ(0) scale(.64) rotate(0deg);
  }
}

@media(max-width:760px){
  .wm-site-motion__sparkle--6,
  .wm-site-motion__sparkle--7{
    display:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .wm-site-motion__sparkle{
    animation:none!important;
  }

  .wm-site-motion__sparkle{
    opacity:.08;
    transform:translateZ(0) scale(.76);
  }
}