/* Homepage contextual illustrations: bounded, lightweight SVG motion. */
.context-vector-scene {
  contain: layout paint;
}

.context-vector,
.approach-vector {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.context-vector-scene > svg * {
  animation-play-state: paused;
}

.context-vector-scene[data-motion-inview] > svg * {
  animation-play-state: running;
}

.vector-caption {
  fill: color-mix(in srgb, var(--muted) 86%, transparent);
  font: 8px var(--mono);
  letter-spacing: .13em;
}

/* Drift: a slow, readable current rather than a spinning record. */
.drift-visual {
  display: block;
}

.drift-bed {
  fill: none;
  stroke: color-mix(in srgb, var(--green) 18%, transparent);
  stroke-width: 1;
  stroke-dasharray: 2 8;
}

.drift-bed-two {
  opacity: .62;
}

.drift-current {
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 54 118;
}

.drift-current-one {
  stroke: url(#drift-current-green);
  animation: drift-current-flow 8.4s linear infinite;
}

.drift-current-two {
  stroke: url(#drift-current-gold);
  animation: drift-current-flow 10.8s linear infinite reverse;
}

.drift-current-three {
  stroke: color-mix(in srgb, var(--green) 55%, transparent);
  opacity: .54;
  animation: drift-current-flow 12.2s linear infinite;
  animation-delay: -3.3s;
}

.drift-buoys circle {
  fill: var(--accent);
  opacity: .72;
  transform-box: fill-box;
  transform-origin: center;
  animation: drift-buoy 4.8s ease-in-out infinite alternate;
}

.drift-buoys circle:nth-child(2) {
  animation-delay: -1.8s;
  animation-duration: 6.1s;
}

.drift-buoys circle:nth-child(3) {
  animation-delay: -3.2s;
  animation-duration: 5.4s;
}

.drift-buoys circle:nth-child(4) {
  animation-delay: -.9s;
  animation-duration: 6.8s;
}

.drift-listener-halo {
  fill: color-mix(in srgb, var(--green) 11%, transparent);
  animation: listener-breathe 4.6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.drift-listener-ring {
  fill: color-mix(in srgb, var(--surface) 86%, transparent);
  stroke: var(--green);
  stroke-width: 1.2;
}

.drift-listener-core {
  fill: var(--accent);
}

.drift-listener path {
  stroke: color-mix(in srgb, var(--accent) 70%, transparent);
  stroke-width: 1;
  stroke-linecap: round;
}

/* Memory: nodes drift, threads appear and recede, and the return ring remains. */
.memory-vector {
  display: block;
}

.memory-thread {
  fill: none;
  stroke: color-mix(in srgb, var(--green) 62%, transparent);
  stroke-width: 1;
  stroke-dasharray: 3 7;
  animation: memory-thread-think 6.8s ease-in-out infinite;
}

.thread-two {
  animation-delay: -2.8s;
  animation-duration: 8.2s;
  stroke: color-mix(in srgb, var(--accent) 55%, transparent);
}

.thread-three {
  animation-delay: -4.3s;
  animation-duration: 5.6s;
}

.thread-four {
  animation-delay: -1.4s;
  animation-duration: 7.4s;
  stroke: color-mix(in srgb, var(--accent) 52%, transparent);
}

.thread-five {
  animation-delay: -5.1s;
  animation-duration: 9.1s;
}

.thread-six {
  animation-delay: -3.5s;
  animation-duration: 6.2s;
}

.memory-node {
  animation: memory-node-wander var(--dur, 7s) ease-in-out var(--delay, 0s) infinite alternate;
}

.memory-node > circle:first-child {
  fill: color-mix(in srgb, var(--green) 20%, transparent);
  stroke: var(--green);
  stroke-width: 1;
}

.memory-node-core {
  fill: var(--accent);
}

.node-one {
  --tx: 84px;
  --ty: 76px;
}

.node-two {
  --tx: 156px;
  --ty: 47px;
}

.node-three {
  --tx: 211px;
  --ty: 95px;
}

.node-four {
  --tx: 267px;
  --ty: 58px;
}

.node-five {
  --tx: 328px;
  --ty: 84px;
}

.node-six {
  --tx: 232px;
  --ty: 143px;
}

.memory-return circle {
  fill: none;
  stroke: color-mix(in srgb, var(--accent) 45%, transparent);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
}

.memory-return circle:nth-child(1) {
  stroke-dasharray: 4 7;
  animation: memory-return-ring 12s linear infinite;
}

.memory-return circle:nth-child(2) {
  stroke-dasharray: 1 5;
  animation: memory-return-ring 8s linear infinite reverse;
}

.memory-return path {
  fill: none;
  stroke: var(--green);
  stroke-width: 1.5;
  stroke-linecap: round;
  animation: memory-arc 4s ease-in-out infinite;
}

.memory-word {
  right: 15px;
  left: auto;
  bottom: 10px;
  color: color-mix(in srgb, var(--muted) 88%, transparent);
  text-align: right;
}

/* Semantic Field: labels visibly trade room while their relationships pulse. */
.semantic-vector {
  display: block;
}

.semantic-relations path {
  fill: none;
  stroke: color-mix(in srgb, var(--green) 35%, transparent);
  stroke-width: 1;
  stroke-dasharray: 3 8;
  animation: semantic-relation 5.8s ease-in-out infinite;
}

.semantic-relations path:nth-child(2n) {
  stroke: color-mix(in srgb, var(--accent) 34%, transparent);
  animation-delay: -2.6s;
  animation-duration: 7.1s;
}

.semantic-relations path:nth-child(3n) {
  animation-delay: -4.1s;
  animation-duration: 6.4s;
}

.semantic-chip rect {
  fill: color-mix(in srgb, var(--surface2) 88%, transparent);
  stroke: color-mix(in srgb, var(--green) 42%, transparent);
  stroke-width: 1;
}

.semantic-chip text {
  fill: var(--ink);
  font: 12px var(--mono);
  text-anchor: middle;
}

.semantic-chip.chip-gold rect {
  stroke: color-mix(in srgb, var(--accent) 52%, transparent);
}

.semantic-chip.chip-gold text {
  fill: color-mix(in srgb, var(--accent) 80%, var(--ink));
}

.chip-inner {
  animation: semantic-negotiate var(--dur, 6s) ease-in-out var(--delay, 0s) infinite alternate;
}

.semantic-core circle:first-child {
  fill: var(--accent);
  animation: semantic-core-pulse 3.2s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.semantic-core circle:last-child {
  fill: none;
  stroke: color-mix(in srgb, var(--accent) 45%, transparent);
  stroke-width: 1;
  stroke-dasharray: 2 5;
  animation: memory-return-ring 9s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}

/* The central Lens pulse and its electron-like outer fields. */
.approach-vector {
  overflow: hidden;
}

.approach-boundary {
  fill: none;
  stroke: color-mix(in srgb, var(--green) 24%, transparent);
  stroke-width: 1;
  stroke-dasharray: 2 10;
  animation: memory-return-ring 34s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.approach-orbit {
  transform-box: view-box;
  transform-origin: 240px 220px;
}

.approach-orbit ellipse {
  fill: none;
  stroke-width: 1;
}

.orbit-one ellipse {
  stroke: color-mix(in srgb, var(--green) 35%, transparent);
}

.orbit-two ellipse {
  stroke: color-mix(in srgb, var(--accent) 35%, transparent);
  stroke-dasharray: 3 10;
}

.orbit-three ellipse {
  stroke: color-mix(in srgb, var(--green) 45%, transparent);
  stroke-dasharray: 1 6;
}

.orbit-one {
  animation: electron-field-one 20s linear infinite;
}

.orbit-two {
  animation: electron-field-two 28s linear infinite reverse;
}

.orbit-three {
  animation: electron-field-three 14s linear infinite;
}

.electron {
  fill: var(--accent);
  stroke: color-mix(in srgb, var(--accent) 28%, transparent);
  stroke-width: 6;
}

.electron-c,
.electron-e {
  stroke: color-mix(in srgb, var(--green) 28%, transparent);
}

.approach-glow {
  opacity: .75;
  animation: approach-glow 4.2s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.pulse-ring {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.2;
  transform-box: fill-box;
  transform-origin: center;
}

.pulse-ring-out {
  animation: approach-pulse 3.8s ease-out infinite;
}

.pulse-ring-in {
  stroke: var(--green);
  animation: approach-pulse 3.8s 1.1s ease-out infinite;
}

.pulse-core {
  fill: var(--accent);
  animation: semantic-core-pulse 3.8s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.approach-word,
.approach-subword,
.approach-tag {
  text-anchor: middle;
}

.approach-word {
  fill: var(--ink);
  font: 16px var(--serif);
  letter-spacing: .08em;
}

.approach-subword {
  fill: var(--accent);
  font: italic 10px var(--sans);
}

.approach-tag {
  fill: var(--muted);
  font: 8px var(--mono);
  letter-spacing: .14em;
}

@keyframes drift-current-flow {
  to {
    stroke-dashoffset: -172;
  }
}

@keyframes drift-buoy {
  0% {
    transform: translateY(-2px) scale(.8);
    opacity: .4;
  }
  100% {
    transform: translateY(5px) scale(1.25);
    opacity: .9;
  }
}

@keyframes listener-breathe {
  0%,
  100% {
    opacity: .35;
    transform: scale(.86);
  }
  50% {
    opacity: .8;
    transform: scale(1.12);
  }
}

@keyframes memory-thread-think {
  0%,
  18% {
    opacity: .08;
    stroke-dashoffset: 0;
  }
  42%,
  68% {
    opacity: .72;
    stroke-dashoffset: -18;
  }
  100% {
    opacity: .16;
    stroke-dashoffset: -32;
  }
}

@keyframes memory-node-wander {
  0% {
    transform: translate(var(--tx, 0), var(--ty, 0));
  }
  100% {
    transform: translate(calc(var(--tx, 0px) + var(--dx, 0px)), calc(var(--ty, 0px) + var(--dy, 0px)));
  }
}

@keyframes memory-return-ring {
  to {
    transform: rotate(360deg);
  }
}

@keyframes memory-arc {
  0%,
  100% {
    opacity: .28;
  }
  50% {
    opacity: 1;
  }
}

@keyframes semantic-relation {
  0%,
  100% {
    opacity: .14;
    stroke-dashoffset: 0;
  }
  45%,
  70% {
    opacity: .58;
    stroke-dashoffset: -14;
  }
}

@keyframes semantic-negotiate {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(var(--dx, 0px), var(--dy, 0px));
  }
}

@keyframes semantic-core-pulse {
  0%,
  100% {
    opacity: .58;
    transform: scale(.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.18);
  }
}

@keyframes electron-field-one {
  to {
    transform: rotate(360deg);
  }
}

@keyframes electron-field-two {
  to {
    transform: rotate(360deg);
  }
}

@keyframes electron-field-three {
  to {
    transform: rotate(360deg);
  }
}

@keyframes approach-glow {
  0%,
  100% {
    opacity: .42;
    transform: scale(.86);
  }
  50% {
    opacity: .78;
    transform: scale(1.08);
  }
}

@keyframes approach-pulse {
  0% {
    opacity: .9;
    transform: scale(.72);
  }
  78%,
  100% {
    opacity: 0;
    transform: scale(1.34);
  }
}

@media (prefers-reduced-motion: reduce) {
  .context-vector *,
  .approach-vector * {
    animation: none !important;
  }
}