/* Quiet spatial feedback.
   Ambient motion stays below the workspace; status cues appear only for meaningful actions. */
.neo-spatial-fx,
.neo-ambient-field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

body.theme-neofuture .neo-ambient-field,
body.admin-neofuture .neo-ambient-field {
  z-index: 30;
  opacity: .42;
}

.neo-bottom-particles {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 29;
  display: none;
  height: min(132px, 16vh);
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  opacity: .42;
}

body.theme-neofuture .neo-bottom-particles,
body.admin-neofuture .neo-bottom-particles {
  display: block;
}

.neo-bottom-particles i {
  --neo-particle-x: 50%;
  --neo-particle-delay: 0s;
  --neo-particle-duration: 14s;
  --neo-particle-drift: 0px;
  --neo-particle-rise: 110px;
  --neo-particle-size: 2px;
  position: absolute;
  left: var(--neo-particle-x);
  bottom: -8px;
  width: var(--neo-particle-size);
  height: calc(var(--neo-particle-size) * 2);
  border: 0;
  border-radius: 0;
  background: rgba(8, 127, 153, .56);
  box-shadow: 0 0 5px rgba(8, 127, 153, .26);
  opacity: 0;
  will-change: transform, opacity;
}

.neo-bottom-particles i:nth-child(3n + 2) {
  background: rgba(189, 63, 122, .42);
  box-shadow: 0 0 5px rgba(189, 63, 122, .2);
}

.neo-bottom-particles i:nth-child(3n) {
  background: rgba(223, 91, 46, .38);
  box-shadow: 0 0 5px rgba(223, 91, 46, .18);
}

.neo-spatial-fx {
  --neo-fx-x: 50vw;
  --neo-fx-y: 50vh;
  --neo-fx-left: 18vw;
  --neo-fx-top: 18vh;
  --neo-fx-width: 64vw;
  --neo-fx-height: 58vh;
  --neo-fx-color: 8, 127, 153;
  --neo-fx-color-2: 189, 63, 122;
  z-index: 31;
  overflow: hidden;
  opacity: 0;
  perspective: 1100px;
  transform-style: preserve-3d;
  contain: strict;
}

.neo-spatial-fx.is-active {
  opacity: 1;
}

.neo-spatial-fx::before,
.neo-spatial-fx::after {
  content: "";
  position: absolute;
  left: calc(var(--neo-fx-x) - 235px);
  top: calc(var(--neo-fx-y) - 1px);
  width: 470px;
  height: 2px;
  pointer-events: none;
  opacity: 0;
  background: rgba(var(--neo-fx-color), .76);
  box-shadow:
    -72px 0 0 rgba(var(--neo-fx-color-2), .44),
    86px 0 0 rgba(255, 255, 255, .3);
  transform-origin: 50% 50%;
}

.neo-spatial-fx::after {
  width: 310px;
  left: calc(var(--neo-fx-x) - 155px);
  background: rgba(var(--neo-fx-color-2), .72);
  box-shadow:
    -48px 0 0 rgba(255, 255, 255, .26),
    64px 0 0 rgba(var(--neo-fx-color), .4);
}

.neo-spatial-fx__plane,
.neo-spatial-fx__ring,
.neo-spatial-fx__reticle,
.neo-spatial-fx__frame {
  position: absolute;
  display: block;
  pointer-events: none;
  opacity: 0;
}

.neo-spatial-fx__plane {
  left: calc(var(--neo-fx-x) - min(42vw, 520px));
  top: calc(var(--neo-fx-y) - 90px);
  width: min(84vw, 1040px);
  height: 220px;
  border: 1px solid rgba(var(--neo-fx-color), .28);
  background:
    linear-gradient(90deg, transparent 0 9%, rgba(var(--neo-fx-color), .17) 9% 9.2%, transparent 9.2% 90%, rgba(var(--neo-fx-color-2), .15) 90% 90.2%, transparent 90.2%),
    linear-gradient(rgba(var(--neo-fx-color), .08) 1px, transparent 1px);
  background-size: 100% 100%, 100% 42px;
  transform-origin: 50% 50%;
}

.neo-spatial-fx__ring {
  left: calc(var(--neo-fx-x) - 110px);
  top: calc(var(--neo-fx-y) - 110px);
  width: 220px;
  height: 220px;
  border: 1px solid rgba(var(--neo-fx-color), .82);
  border-radius: 50%;
  box-shadow:
    0 0 0 8px rgba(var(--neo-fx-color), .04),
    0 0 28px rgba(var(--neo-fx-color), .22);
}

.neo-spatial-fx__reticle {
  left: calc(var(--neo-fx-x) - 42px);
  top: calc(var(--neo-fx-y) - 42px);
  width: 84px;
  height: 84px;
  border: 1px solid rgba(var(--neo-fx-color-2), .7);
  clip-path: polygon(0 0, 31% 0, 31% 2px, 2px 2px, 2px 31%, 0 31%, 0 0, 100% 0, 100% 31%, calc(100% - 2px) 31%, calc(100% - 2px) 2px, 69% 2px, 69% 0, 100% 0, 100% 100%, 69% 100%, 69% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 69%, 100% 69%, 100% 100%, 0 100%, 0 69%, 2px 69%, 2px calc(100% - 2px), 31% calc(100% - 2px), 31% 100%, 0 100%);
}

.neo-spatial-fx__frame {
  left: var(--neo-fx-left);
  top: var(--neo-fx-top);
  width: var(--neo-fx-width);
  height: var(--neo-fx-height);
  border: 1px solid rgba(var(--neo-fx-color), .4);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .24),
    0 20px 46px rgba(17, 35, 47, .16);
  transform-origin: var(--neo-fx-x) var(--neo-fx-y);
}

@keyframes neo-event-plane {
  0% { opacity: 0; transform: rotateX(74deg) translate3d(0, 58px, -250px) scale(.74); }
  28% { opacity: .82; }
  100% { opacity: 0; transform: rotateX(62deg) translate3d(0, -16px, 110px) scale(1.18); }
}

@keyframes neo-event-ring {
  0% { opacity: 0; transform: rotateX(66deg) scale(.18); }
  18% { opacity: .96; }
  100% { opacity: 0; transform: rotateX(66deg) scale(2.8); }
}

@keyframes neo-event-reticle {
  0% { opacity: 0; transform: translateZ(-160px) rotate(20deg) scale(.62); }
  28% { opacity: .92; }
  100% { opacity: 0; transform: translateZ(120px) rotate(-8deg) scale(1.16); }
}

@keyframes neo-event-frame {
  0% { opacity: 0; transform: perspective(1000px) rotateX(5deg) rotateY(-4deg) scale(.975); }
  24% { opacity: .82; }
  68% { opacity: .38; transform: perspective(1000px) rotateX(-1deg) rotateY(1deg) scale(1.006); }
  100% { opacity: 0; transform: perspective(1000px) rotateX(0) rotateY(0) scale(1); }
}

@keyframes neo-event-vector {
  0% { opacity: 0; transform: translate3d(-120px, 42px, -220px) rotate(-14deg) scaleX(.34); }
  22% { opacity: .88; }
  100% { opacity: 0; transform: translate3d(118px, -34px, 150px) rotate(-14deg) scaleX(1.16); }
}

@keyframes neo-event-vector-alt {
  0% { opacity: 0; transform: translate3d(92px, -52px, -180px) rotate(66deg) scaleX(.32); }
  26% { opacity: .74; }
  100% { opacity: 0; transform: translate3d(-76px, 46px, 130px) rotate(66deg) scaleX(1.08); }
}

@keyframes neo-bottom-float {
  0% { opacity: 0; transform: translate3d(0, 8px, 0) scaleY(.8); }
  22% { opacity: .46; }
  72% { opacity: .24; }
  100% { opacity: 0; transform: translate3d(var(--neo-particle-drift), var(--neo-particle-rise), 0) scaleY(1.08); }
}

@media (prefers-reduced-motion: no-preference) {
  .neo-bottom-particles i {
    animation: neo-bottom-float var(--neo-particle-duration) linear var(--neo-particle-delay) infinite;
  }

  .neo-spatial-fx.is-active::before {
    animation: neo-event-vector var(--neo-fx-duration, 820ms) cubic-bezier(.12, .72, .16, 1) both;
  }

  .neo-spatial-fx.is-active::after {
    animation: neo-event-vector-alt var(--neo-fx-duration, 820ms) cubic-bezier(.14, .68, .18, 1) both;
  }

  .neo-spatial-fx.is-active .neo-spatial-fx__plane {
    animation: neo-event-plane var(--neo-fx-duration, 820ms) cubic-bezier(.16, .72, .18, 1) both;
  }

  .neo-spatial-fx.is-active .neo-spatial-fx__ring {
    animation: neo-event-ring var(--neo-fx-duration, 820ms) cubic-bezier(.12, .64, .16, 1) both;
  }

  .neo-spatial-fx.is-active .neo-spatial-fx__reticle {
    animation: neo-event-reticle var(--neo-fx-duration, 820ms) cubic-bezier(.18, .72, .22, 1) both;
  }

  .neo-spatial-fx.is-active .neo-spatial-fx__frame {
    animation: neo-event-frame var(--neo-fx-duration, 820ms) cubic-bezier(.16, .74, .22, 1) both;
  }

  @media (hover: hover) and (pointer: fine) {
    body.theme-neofuture :is(
      .workspace-switch button,
      .studio-mode-switch button,
      .pro-node-card,
      .workflow-node-card,
      .video-quick-example,
      .example-apply,
      .studio-tool,
      .el-tabs__item
    ) {
      transform-style: preserve-3d;
      transition:
        transform 180ms cubic-bezier(.2, .7, .2, 1),
        border-color 180ms ease,
        box-shadow 180ms ease;
    }

    body.theme-neofuture :is(
      .workspace-switch button,
      .studio-mode-switch button,
      .pro-node-card,
      .workflow-node-card,
      .video-quick-example,
      .example-apply,
      .studio-tool,
      .el-tabs__item
    ):hover {
      transform: perspective(850px) translate3d(0, -2px, 7px) rotateX(.7deg);
      border-color: rgba(8, 127, 153, .48);
      box-shadow: 0 9px 22px rgba(23, 47, 62, .13);
    }
  }

  /* Remove idle loops retained by the earlier visual layer. */
  body.theme-neofuture,
  body.theme-neofuture::after,
  body.theme-neofuture .app-header::after,
  body.theme-neofuture .app-header h1::after,
  body.theme-neofuture .app-body.studio-v5 > .panel-canvas,
  body.theme-neofuture .video-workspace.canvas-v5.quick-mode,
  body.theme-neofuture .video-workspace.canvas-v5.library-mode,
  body.theme-neofuture .studio-workspace::before,
  body.theme-neofuture .pro-canvas-viewport,
  body.theme-neofuture .example-dot.active,
  body.admin-neofuture,
  body.admin-neofuture .top::after,
  body.admin-neofuture .nav-btn.active::after,
  body.admin-neofuture .status::before {
    animation: none !important;
  }

  body.theme-neofuture .workflow-node-card:not(:last-child)::after,
  body.theme-neofuture .pro-node-card:not(:last-child)::after {
    animation: none !important;
  }

  body.theme-neofuture .professional-workspace.busy .pro-node-card:not(:last-child)::after,
  body.theme-neofuture .workflow-wrap.running .workflow-node-card:not(:last-child)::after {
    animation: neo-flow 2.4s linear infinite !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .neo-spatial-fx,
  .neo-ambient-field,
  .neo-bottom-particles {
    display: none !important;
  }
}

@media (max-width: 760px) {
  body.theme-neofuture .neo-ambient-field,
  body.admin-neofuture .neo-ambient-field {
    opacity: .32;
  }

  .neo-bottom-particles {
    height: 96px;
    opacity: .32;
  }

  .neo-bottom-particles i:nth-child(n + 9) {
    display: none;
  }

  .neo-spatial-fx__plane {
    left: 4vw;
    width: 92vw;
    height: 170px;
  }
}