/* /src/motion-bg.css */
/* Lena MOTION-BG. Volum 3D din ochi. Fara braces in content. Cele 8 STAU. */

#architecture-stage,
.lab-stage {
  isolation: isolate;
  perspective: 980px;
}

#architecture-stage .grid-lab,
#architecture-stage .grid-depth,
.grid-lab,
.grid-depth {
  display: none;
  animation: none;
}

#architecture-stage > .relative {
  background-color: transparent;
}

#architecture-stage canvas {
  background: transparent;
  mix-blend-mode: screen;
}

#architecture-stage > .relative > .absolute.inset-y-0.left-0 {
  opacity: 0.2;
}

#architecture-stage .depth-glow {
  background: none;
  animation: none;
}

#architecture-stage .hero-board {
  position: relative;
  z-index: 8;
}

/* Adancime din ochi — umple headerul, nu bara goala */
#architecture-stage::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: -6% -18% -10%;
  z-index: 0;
  border: 0;
  background:
    radial-gradient(ellipse 48% 22% at 50% 0%, color-mix(in oklab, #ecece6 16%, transparent), transparent 58%),
    repeating-conic-gradient(
      from 0deg at 50% 0%,
      transparent 0deg 12deg,
      color-mix(in oklab, #ecece6 14%, transparent) 12deg 12.12deg
    );
  mask-image: linear-gradient(180deg, #000 0%, #000 48%, transparent 88%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 48%, transparent 88%);
  animation: rays-breathe 16s ease-in-out infinite;
}

#architecture-stage > .bg-fog,
.bg-fog {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 0;
  background:
    radial-gradient(ellipse 56% 20% at 50% 0%, color-mix(in oklab, #ecece6 12%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in oklab, #ecece6 6%, transparent) 0%, transparent 18%, transparent 64%, color-mix(in oklab, #0b0e10 55%, transparent) 100%);
  animation: bg-fog 18s ease-in-out infinite;
}

.bg-fog::before {
  content: "spec topology memory boundary";
  pointer-events: none;
  position: absolute;
  left: 8%;
  top: 24%;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: color-mix(in oklab, #ecece6 20%, transparent);
  white-space: nowrap;
  animation: spec-drift 18s ease-in-out infinite;
}

.bg-fog::after {
  content: "orchestrator - agents - tools";
  pointer-events: none;
  position: absolute;
  right: 8%;
  top: 30%;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: color-mix(in oklab, #ecece6 16%, transparent);
  white-space: nowrap;
  animation: spec-drift 22s ease-in-out infinite reverse;
}

#architecture-stage > .bg-grain,
.bg-grain {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 0;
  opacity: 0.1;
  mix-blend-mode: soft-light;
  background-image: repeating-linear-gradient(180deg, transparent 0 3px, rgb(0 0 0 / 0.16) 3px 4px);
  background-size: 100% 4px;
  animation: bg-grain 0.5s steps(2) infinite;
}

.bg-grain::before,
.bg-grain::after {
  content: none;
}

#architecture-stage > .bg-shimmer,
.bg-shimmer {
  display: block;
  pointer-events: none;
  position: absolute;
  inset: 0 -14% -16%;
  z-index: 0;
  border: 0;
  background: repeating-conic-gradient(
    from 6deg at 50% 0%,
    transparent 0deg 12deg,
    color-mix(in oklab, #ecece6 9%, transparent) 12deg 12.1deg
  );
  mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 82%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 82%);
  animation: rays-breathe 20s ease-in-out infinite reverse;
}

.bg-shimmer::before,
.bg-shimmer::after,
.grid-lab::before,
.grid-lab::after,
#process ol::before,
#lab-tray::before,
.lab-tray-rail::before,
.lab-tray-slot.is-on::before,
.lab-tray-slot.is-on::after {
  content: none;
}

main#content {
  position: relative;
}

main#content::before {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 0;
  width: 1px;
  height: 132vh;
  margin-left: -0.5px;
  border: 0;
  background: #2f8a7d;
  opacity: 0.68;
}

#architecture-stage [data-reveal],
[data-reveal],
.lab-panel {
  transform: none;
  animation: none;
}

.node-glyph-wrap,
.node-glyph-wrap * {
  animation: none;
}

.node-glyph--observability,
.node-glyph--orchestrator,
.node-glyph--agents,
.node-glyph--memory,
.node-glyph--tools,
.node-glyph--gateway,
.node-glyph--database,
.node-glyph--security,
.orch-ring-a,
.orch-ring-b,
.orch-ring-c {
  animation: none;
}

@keyframes rays-breathe {
  0%, 100% { opacity: 0.42; }
  50% { opacity: 0.88; }
}

@keyframes bg-fog {
  0%, 100% { opacity: 0.7; }
  45% { opacity: 1; }
}

@keyframes bg-grain {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-1px, 1px, 0); }
}

@keyframes spec-drift {
  0%, 100% { opacity: 0.16; transform: translate3d(0, 0, 0); }
  50% { opacity: 0.36; transform: translate3d(6px, -3px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  #architecture-stage::before,
  .bg-fog,
  .bg-fog::before,
  .bg-fog::after,
  .bg-grain,
  .bg-shimmer,
  main#content::before {
    animation: none;
  }
}