.nav-progress {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--star);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

.nav-links a[aria-current="true"] {
  color: var(--text)
}

.nav-links a[aria-current="true"]::after {
  width: 100%
}

.reticle .ring {
  stroke-dasharray: 100;
  stroke-dashoffset: 0
}

.reticle .ticks {
  stroke-dasharray: .5 4.5;
  opacity: .35
}

.reticle .cross,
.reticle .lock {
  transform-box: view-box;
  transform-origin: 200px 200px
}

.reticle .lock path {
  fill: none;
  stroke: var(--star);
  stroke-width: 1.2;
  opacity: .9
}

.reticle text {
  fill: var(--text-3);
  font-family: var(--font-mono);
  font-size: var(--site-fs-label);
  letter-spacing: .08em;
  text-anchor: middle;
}

.reticle .sweep {
  transform-box: view-box;
  transform-origin: 200px 200px;
  opacity: 0
}

.reticle .sweep line {
  stroke: var(--star);
  stroke-width: 1
}

.reticle.is-live .cross {
  animation: rt-cross 1.1s var(--ease) both
}

.reticle.is-live .ring-outer {
  animation: rt-draw 1.2s var(--ease) both
}

.reticle.is-live .ring-inner {
  animation: rt-draw 1s var(--ease) .25s both
}

.reticle.is-live .ticks {
  animation: rt-fade-ticks .8s linear .6s both
}

.reticle.is-live .lock {
  animation: rt-lock .7s var(--ease) 1s both
}

.reticle.is-live .mark {
  animation: rt-fade .3s linear 1.5s both
}

@media (prefers-reduced-motion: no-preference) {
  .js [data-motion="enter"]:not(.is-live) .enter-item {
    opacity: 0;
    transform: translateY(4px)
  }

  .js [data-motion="enter"].is-live .enter-item {
    animation: text-in 1.1s var(--ease) both
  }

  .js [data-motion="enter"].is-live .enter-item:nth-child(2) {
    animation-delay: .08s
  }

  .js [data-motion="enter"].is-live .enter-item:nth-child(3) {
    animation-delay: .16s
  }

  .js [data-motion="enter"].is-live .enter-item:nth-child(4) {
    animation-delay: .24s
  }

  .js [data-motion="enter"].is-live .enter-item:nth-child(5) {
    animation-delay: .32s
  }
}

.reticle-telemetry {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: var(--site-fs-small);
  letter-spacing: .04em;
  color: var(--text-3);
  text-align: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.onto-stage {
  position: relative
}

.onto-stage::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid var(--star);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}

.onto-flow.is-live .onto-stage::after {
  animation: flow-stage 6s linear infinite
}

.onto-flow.is-live .onto-stage:nth-child(3)::after {
  animation-delay: 2s
}

.onto-flow.is-live .onto-stage:nth-child(5)::after {
  animation-delay: 4s
}

.onto-arrow {
  position: relative
}

.onto-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 6px;
  width: 6px;
  height: 1px;
  background: var(--star);
  opacity: 0;
}

.onto-flow.is-live .onto-arrow::after {
  animation: flow-arrow 6s linear 1.5s infinite
}

.onto-flow.is-live .onto-arrow:nth-child(4)::after {
  animation-delay: 3.5s
}

.ce-arrow .track {
  position: relative;
  flex: none;
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, var(--line), var(--star))
}

.ce-arrow.down .track {
  background: linear-gradient(270deg, var(--line), var(--star))
}

.ce-arrow .track::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 5px;
  height: 5px;
  background: currentColor;
  opacity: 0;
}

.ce-panel.is-live .ce-arrow.up .track::after {
  animation: dispatch-out 4s linear infinite
}

.ce-panel.is-live .ce-arrow.down .track::after {
  animation: dispatch-back 4s linear infinite
}

@media (hover: none) {
  [data-motion="sequencer"] {
    cursor: pointer
  }
}

.loop-step::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--star);
  transform: scaleX(0);
  transform-origin: left center;
}

.loop-step::before {
  transition: transform .2s linear
}

.loop-steps.is-live .loop-step.is-active::after {
  transform: scaleX(1);
  transition: transform 1.6s linear
}

.loop-steps.is-live .loop-step.is-active::before {
  transform: scaleY(2.2)
}

.loop-step.is-active .card-title {
  color: var(--star)
}

.loop-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--site-space-8) var(--site-space-20);
  margin-top: 20px;
  min-height: 1.5em
}

.loop-meta .idx-mono {
  font-size: var(--site-fs-small)
}

.loop-meta .is-paused {
  color: var(--star)
}

.evo-track.is-live::before {
  transform-origin: left center;
  animation: evo-draw 1.4s var(--ease) both
}

.evo-track.is-live .evo-node {
  animation: rt-fade 1.15s var(--ease) both
}

.evo-track.is-live .evo-node:nth-child(2) {
  animation-delay: .25s
}

.evo-track.is-live .evo-node:nth-child(3) {
  animation-delay: .5s
}

.layer-stack.is-live .layer {
  animation: rt-fade 1.15s var(--ease) both
}

.layer-stack.is-live .layer:nth-child(2) {
  animation-delay: .2s
}

.layer-stack.is-live .layer:nth-child(1) {
  animation-delay: .4s
}

.journey.is-live .journey-line {
  animation: evo-draw 1.6s var(--ease) both
}

.journey.is-live .journey-list li {
  animation: rt-fade 1.15s var(--ease) both
}

.journey.is-live .journey-list li:nth-child(2) {
  animation-delay: .3s
}

.journey.is-live .journey-list li:nth-child(3) {
  animation-delay: .6s
}

.journey.is-live .journey-list li:nth-child(4) {
  animation-delay: .9s
}

.journey.is-live .journey-list li:nth-child(5) {
  animation-delay: 1.2s
}

@media (max-width: 960px) {
  .nav-progress {
    display: block
  }

  .reticle-telemetry {
    text-align: left
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .reticle-telemetry {
    text-align: center
  }
}

@media (max-width: 960px) {
  .ce-arrow .track {
    width: 1px;
    height: 28px;
    background: linear-gradient(180deg, var(--line), var(--star))
  }

  .ce-arrow.down .track {
    background: linear-gradient(0deg, var(--line), var(--star))
  }

  .ce-arrow .track::after {
    top: 0;
    left: -2px
  }

  .ce-panel.is-live .ce-arrow.up .track::after {
    animation-name: dispatch-out-v
  }

  .ce-panel.is-live .ce-arrow.down .track::after {
    animation-name: dispatch-back-v
  }

  .evo-track.is-live::before {
    transform-origin: top center;
    animation-name: draw-y
  }
}

@media (max-width: 560px) {

  .journey.is-live .journey-list::before {
    animation: draw-y 1.6s var(--ease) both
  }


  .onto-flow.is-live .onto-arrow::after {
    top: 0;
    left: 50%;
    width: 1px;
    height: 6px;
    animation-name: flow-arrow-down
  }
}

@media (prefers-reduced-motion: reduce) {

  [data-motion],
  [data-motion] *,
  [data-motion]::before,
  [data-motion] *::before,
  [data-motion] *::after {
    animation: none !important;
    transition: none !important;
  }
}