body {
  --trace-active-opacity: 0.94;
  --trace-sparse-soft-opacity: 0.18;
  --trace-sparse-peak-opacity: 0.92;
  --trace-sparse-tail-opacity: 0.72;
}

html:not([data-mode="dark"]) body {
  --trace-active-opacity: 0.4;
  --trace-sparse-soft-opacity: 0.1;
  --trace-sparse-peak-opacity: 0.4;
  --trace-sparse-tail-opacity: 0.28;
}

body[data-effects] {
  --trace-base: rgba(78, 224, 207, 0.18);
  --trace-base-strong: rgba(78, 224, 207, 0.28);
  --trace-rail-base: rgba(78, 224, 207, 0.34);
  --trace-trail-soft: rgba(78, 224, 207, 0.18);
  --trace-trail-mid: rgba(78, 224, 207, 0.28);
}

html:not([data-mode="dark"]) body[data-effects] {
  --trace-base: rgba(13, 107, 98, 0.14);
  --trace-base-strong: rgba(13, 107, 98, 0.22);
  --trace-rail-base: rgba(13, 107, 98, 0.28);
  --trace-trail-soft: rgba(13, 107, 98, 0.14);
  --trace-trail-mid: rgba(13, 107, 98, 0.22);
}

.hero-flowlines,
.page-flowlines {
  display: none;
}

[data-converge-target] {
  font-variant-numeric: tabular-nums;
}

body[data-effects~="4"] [data-converge-target].is-converging {
  color: var(--signal);
  text-shadow: 0 0 8px var(--signal-soft), 0 0 18px var(--signal-soft);
}

body[data-trace-scope="document"] {
  position: relative;
}

body[data-trace-scope="document"] .page-flowlines {
  position: absolute;
  inset: 0 0 auto;
  display: block;
  width: 100%;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

body[data-trace-scope="document"] .page-traces {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 0.92;
}

body[data-trace-scope="document"] nav,
body[data-trace-scope="document"] .meta-strip,
body[data-trace-scope="document"] main,
body[data-trace-scope="document"] footer {
  position: relative;
  z-index: 1;
}

body[data-trace-scope="document"] .hero-flowlines {
  display: none !important;
}

body[data-trace-variant="home"] .page-flowline-base {
  opacity: 0;
}

.page-flowline-base,
.page-flowline-pulse {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.page-flowline-base {
  stroke: var(--trace-base);
  stroke-width: 1.25;
  opacity: 0.72;
}

.page-flowline-pulse {
  stroke: var(--signal);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 14 86;
  filter: drop-shadow(0 0 6px var(--signal-soft)) drop-shadow(0 0 16px var(--signal-soft));
  opacity: 0;
}

.home-trace-pulse-a {
  --trace-duration: 14s;
  animation: traceDown 24s linear infinite -4s;
}

.home-trace-pulse-b {
  --trace-duration: 16s;
  animation: traceDown 27s linear infinite -11s;
}

.home-trace-pulse-c {
  --trace-duration: 18s;
  animation: traceDown 30s linear infinite -19s;
}

body[data-trace-randomized="true"] .home-trace-pulse {
  animation: none;
  opacity: 0;
}

body[data-trace-randomized="true"] .home-trace-pulse.is-running {
  animation: traceDownOnce var(--trace-duration) linear 1 both;
}

.page-flowline-trail,
.page-flowline-pulse-gradient {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke: var(--signal);
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}

.page-flowline-trail-wide {
  stroke: var(--trace-trail-soft);
  stroke-width: 6.8;
  stroke-dasharray: 44 56;
  filter: blur(0.4px) drop-shadow(0 0 18px var(--signal-soft));
}

.page-flowline-trail-mid {
  stroke: var(--trace-trail-mid);
  stroke-width: 4.1;
  stroke-dasharray: 28 72;
  filter: drop-shadow(0 0 10px var(--signal-soft));
}

.page-flowline-pulse-sparse {
  stroke-width: 2.2;
  stroke-dasharray: 14 86;
}

.page-flowline-pulse-gradient-halo {
  stroke-width: 7.6;
  stroke-dasharray: 30 70;
  filter: blur(0.6px) drop-shadow(0 0 16px var(--signal-soft)) drop-shadow(0 0 28px var(--signal-soft));
}

.page-flowline-pulse-gradient-mid {
  stroke-width: 4.8;
  stroke-dasharray: 18 82;
  filter: drop-shadow(0 0 8px var(--signal-soft));
}

.page-flowline-pulse-gradient-core {
  stroke-width: 2.4;
  stroke-dasharray: 8 92;
}

body[data-trace-variant="test2"] .page-traces,
body[data-trace-variant="test3"] .page-traces {
  opacity: 0.9;
}

body[data-trace-variant="test2"] .page-flowline-base,
body[data-trace-variant="test3"] .page-flowline-base,
body[data-trace-variant="test4"] .page-flowline-base {
  opacity: 0;
}

body[data-trace-variant="test2"] .page-flowline-pulse {
  stroke-width: 2.2;
}

body[data-trace-variant="test4"] .page-traces {
  opacity: 0.9;
}

body[data-effects~="2"] .bracket::before,
body[data-effects~="2"] .bracket::after,
body[data-effects~="2"] .architecture-frame::before,
body[data-effects~="2"] .architecture-frame::after,
body[data-effects~="2"] .flow-inspector-card::before,
body[data-effects~="2"] .flow-inspector-card::after {
  opacity: 0;
  will-change: transform, opacity;
}

body[data-effects~="2"] .bracket::before,
body[data-effects~="2"] .architecture-frame::before,
body[data-effects~="2"] .flow-inspector-card::before {
  transform-origin: top left;
  animation: auditLatchIn 0.58s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

body[data-effects~="2"] .bracket::after,
body[data-effects~="2"] .architecture-frame::after,
body[data-effects~="2"] .flow-inspector-card::after {
  transform-origin: bottom right;
  animation: auditLatchIn 0.58s cubic-bezier(0.22, 1, 0.36, 1) 0.08s forwards;
}

body[data-effects~="2"] .bracket:hover::before,
body[data-effects~="2"] .bracket:hover::after,
body[data-effects~="2"] .architecture-frame:hover::before,
body[data-effects~="2"] .architecture-frame:hover::after {
  filter: drop-shadow(0 0 8px var(--signal-soft));
}

.pulse-down-a {
  animation: traceDown 14s linear infinite;
}

.pulse-down-b {
  animation: traceDown 16s linear infinite -3.2s;
}

.pulse-down-c {
  animation: traceDown 18s linear infinite -6.8s;
}

.pulse-sparse-a {
  animation: traceSparse 70s linear infinite -9s;
}

.pulse-sparse-b {
  animation: traceSparse 80s linear infinite -28s;
}

.pulse-sparse-c {
  animation: traceSparse 90s linear infinite -46s;
}

@keyframes traceDown {
  0% {
    stroke-dashoffset: 110;
    opacity: 0;
  }
  8% {
    opacity: var(--trace-active-opacity);
  }
  64% {
    opacity: var(--trace-active-opacity);
  }
  100% {
    stroke-dashoffset: -110;
    opacity: 0;
  }
}

@keyframes traceDownOnce {
  0% {
    stroke-dashoffset: 110;
    opacity: 0;
  }
  8% {
    opacity: var(--trace-active-opacity);
  }
  64% {
    opacity: var(--trace-active-opacity);
  }
  100% {
    stroke-dashoffset: -110;
    opacity: 0;
  }
}

@keyframes traceSparse {
  0%, 12% {
    stroke-dashoffset: 114;
    opacity: 0;
  }
  16% {
    opacity: var(--trace-sparse-soft-opacity);
  }
  24% {
    opacity: var(--trace-sparse-peak-opacity);
  }
  42% {
    stroke-dashoffset: -114;
    opacity: var(--trace-sparse-tail-opacity);
  }
  50% {
    opacity: 0;
  }
  100% {
    stroke-dashoffset: -114;
    opacity: 0;
  }
}

@keyframes auditLatchIn {
  0% {
    opacity: 0;
    transform: scale(0.22);
  }
  68% {
    opacity: 1;
    transform: scale(1.09);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 980px) {
  .page-flowline-pulse {
    stroke-width: 1.9;
  }

  .page-flowline-trail-wide {
    stroke-width: 5.8;
  }

  .page-flowline-pulse-gradient-halo {
    stroke-width: 6.2;
  }
}

@media (max-width: 780px) {
  .page-traces {
    opacity: 0.76;
  }

  .page-flowline-pulse {
    stroke-width: 1.7;
  }

  .page-flowline-trail-wide {
    stroke-width: 4.8;
  }

  .page-flowline-pulse-gradient-halo {
    stroke-width: 5.3;
  }

  .home-trace-pulse-a {
    animation-duration: 26s;
  }

  .home-trace-pulse-b {
    animation-duration: 29s;
  }

  .home-trace-pulse-c {
    animation-duration: 32s;
  }
}