:root {
  --motion-accent: #f2d06b;
  --motion-accent-bright: #fff1bd;
  --motion-accent-soft: rgb(242 208 107 / .38);
  --motion-bg: #080d16;
  --motion-surface: linear-gradient(165deg, #101827, #080d16);
  --motion-shadow: rgb(242 208 107 / .34);
  --motion-track: rgb(242 208 107 / .28);
  --motion-ring-line: rgb(242 208 107 / .16);
  --motion-ring-inner-shadow: rgb(242 208 107 / .08);
  --motion-ring-outer-shadow: rgb(255 241 189 / .08);
}

/*
  Markup patterns:
  <a class="motion-edge-chase"><span>Text label</span></a>
  <section class="motion-scan-rail">...</section>
  <section class="motion-beam-field"><span class="motion-horizon"></span><span class="motion-beam one"></span><span class="motion-ring"></span>...</section>
*/

.motion-edge-chase {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--edge-radius, var(--motion-edge-radius, 16px));
  background: transparent;
}

.motion-edge-chase::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: var(--edge-projection-size, var(--motion-edge-projection-size, 210%));
  aspect-ratio: 1;
  translate: -50% -50%;
  opacity: var(--edge-projection-opacity, var(--motion-edge-projection-opacity, .95));
  pointer-events: none;
  background: conic-gradient(
    from var(--edge-angle-start, var(--motion-edge-angle-start, 0deg)),
    transparent 0deg 235deg,
    rgb(124 196 239 / 0) 250deg,
    var(--edge-tail-soft, var(--motion-edge-tail-soft, rgb(124 196 239 / .16))) 276deg,
    var(--edge-tail, var(--motion-edge-tail, rgb(124 196 239 / .34))) 306deg,
    var(--edge-glow, var(--motion-edge-glow, rgb(223 245 255 / .92))) 326deg,
    var(--edge-tail, var(--motion-edge-tail, rgb(124 196 239 / .34))) 344deg,
    rgb(124 196 239 / 0) 358deg,
    transparent 360deg
  );
  filter: blur(var(--edge-projection-blur, var(--motion-edge-projection-blur, 7px)));
  animation: motion-edge-chase var(--edge-duration, var(--motion-edge-duration, 7s)) linear var(--edge-delay, var(--motion-edge-delay, 0s)) infinite;
}

.motion-edge-chase::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: var(--edge-width, var(--motion-edge-width, 2px));
  border-radius: calc(var(--edge-radius, var(--motion-edge-radius, 16px)) - var(--edge-width, var(--motion-edge-width, 2px)));
  pointer-events: none;
  background: var(--edge-surface, var(--motion-edge-surface, var(--motion-surface)));
}

.motion-edge-chase > * {
  position: relative;
  z-index: 2;
}

.motion-edge-chase.is-paused::before,
.motion-edge-chase[data-motion-paused="true"]::before {
  animation: none;
  opacity: 0;
}

@keyframes motion-edge-chase {
  to {
    rotate: 360deg;
  }
}

.motion-scan-rail {
  position: relative;
  padding-left: var(--scan-offset, var(--motion-scan-offset, 28px));
}

.motion-scan-rail::before {
  content: "";
  position: absolute;
  left: var(--scan-left, var(--motion-scan-left, 0));
  top: var(--scan-top, var(--motion-scan-top, 3px));
  bottom: var(--scan-bottom, var(--motion-scan-bottom, 5px));
  width: var(--scan-width, var(--motion-scan-width, 2px));
  border-radius: 999px;
  background: var(--scan-track, var(--motion-scan-track, var(--motion-track)));
}

.motion-scan-rail::after {
  content: "";
  position: absolute;
  left: var(--scan-projection-left, var(--motion-scan-projection-left, -9px));
  top: var(--scan-top, var(--motion-scan-top, 3px));
  width: var(--scan-projection-width, var(--motion-scan-projection-width, 20px));
  height: var(--scan-projection-height, var(--motion-scan-projection-height, 42%));
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--scan-tail-soft, var(--motion-scan-tail-soft, rgb(124 196 239 / .1))) 18%,
    var(--scan-glow, var(--motion-scan-glow, rgb(223 245 255 / .78))) 48%,
    var(--scan-tail, var(--motion-scan-tail, rgb(124 196 239 / .18))) 72%,
    transparent 100%
  );
  filter: blur(var(--scan-blur, var(--motion-scan-blur, 5px)));
  box-shadow:
    0 0 16px var(--scan-shadow, var(--motion-scan-shadow, rgb(124 196 239 / .55))),
    0 0 34px var(--scan-bloom, var(--motion-scan-bloom, rgb(0 194 229 / .24)));
  animation: motion-vertical-projection var(--scan-duration, var(--motion-scan-duration, 4.2s)) ease-in-out var(--scan-delay, var(--motion-scan-delay, 0s)) infinite alternate;
}

@keyframes motion-vertical-projection {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(var(--scan-distance, var(--motion-scan-distance, 138%)));
  }
}

.motion-beam-field {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.motion-beam-field > * {
  position: relative;
  z-index: 1;
}

.motion-horizon,
.motion-beam,
.motion-ring {
  pointer-events: none;
}

.motion-horizon {
  position: absolute;
  z-index: 0;
  top: var(--horizon-top, var(--motion-horizon-top, 22px));
  left: var(--horizon-left, var(--motion-horizon-left, -18%));
  width: var(--horizon-width, var(--motion-horizon-width, 136%));
  height: var(--horizon-height, var(--motion-horizon-height, 1px));
  background: linear-gradient(
    90deg,
    transparent,
    var(--horizon-color, var(--motion-horizon-color, var(--motion-accent-soft))),
    var(--horizon-highlight, var(--motion-horizon-highlight, var(--motion-accent))),
    transparent
  );
  box-shadow: 0 0 var(--horizon-blur, var(--motion-horizon-blur, 28px)) var(--horizon-shadow, var(--motion-horizon-shadow, var(--motion-shadow)));
  animation: motion-horizon-sweep var(--horizon-duration, var(--motion-horizon-duration, 7s)) ease-in-out var(--horizon-delay, var(--motion-horizon-delay, 0s)) infinite;
}

.motion-beam {
  position: absolute;
  z-index: 0;
  top: var(--beam-top, auto);
  right: var(--beam-right, auto);
  bottom: var(--beam-bottom, auto);
  left: var(--beam-left, auto);
  width: var(--beam-width, min(640px, 72vw));
  height: var(--beam-height, var(--motion-beam-height, 34px));
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--beam-clear, var(--motion-beam-clear, rgb(124 196 239 / 0))) 10%,
    var(--beam-color, var(--motion-beam-color, rgb(124 196 239 / .18))) 34%,
    var(--beam-highlight, var(--motion-beam-highlight, rgb(223 245 255 / .55))) 52%,
    var(--beam-tail, var(--motion-beam-tail, rgb(182 166 232 / .16))) 70%,
    transparent 100%
  );
  filter: blur(var(--beam-blur, var(--motion-beam-blur, 10px))) drop-shadow(0 0 24px var(--beam-shadow, var(--motion-beam-shadow, rgb(0 194 229 / .24))));
  transform: rotate(var(--beam-angle, var(--motion-beam-angle, -13deg)));
  transform-origin: center;
  animation: motion-beam-sweep var(--beam-duration, var(--motion-beam-duration, 8.5s)) ease-in-out var(--beam-delay, var(--motion-beam-delay, 0s)) infinite;
}

.motion-beam.one {
  --beam-top: 28%;
  --beam-left: -16%;
}

.motion-beam.two {
  --beam-right: -18%;
  --beam-bottom: 20%;
  --beam-width: min(760px, 82vw);
  --beam-delay: -3.4s;
}

@keyframes motion-horizon-sweep {
  0%,
  100% {
    opacity: var(--horizon-opacity-low, var(--motion-horizon-opacity-low, .3));
    transform: translateX(-3%);
  }
  50% {
    opacity: var(--horizon-opacity-high, var(--motion-horizon-opacity-high, .82));
    transform: translateX(3%);
  }
}

@keyframes motion-beam-sweep {
  0%,
  100% {
    opacity: var(--beam-opacity-low, var(--motion-beam-opacity-low, .16));
    transform: translateX(-8%) rotate(var(--beam-angle, var(--motion-beam-angle, -13deg)));
  }
  50% {
    opacity: var(--beam-opacity-high, var(--motion-beam-opacity-high, .54));
    transform: translateX(8%) rotate(var(--beam-angle, var(--motion-beam-angle, -13deg)));
  }
}

.motion-ring {
  position: absolute;
  z-index: 0;
  right: var(--ring-right, var(--motion-ring-right, clamp(-130px, 8vw, 80px)));
  top: var(--ring-top, var(--motion-ring-top, 50%));
  width: var(--ring-size, var(--motion-ring-size, clamp(240px, 30vw, 430px)));
  aspect-ratio: 1;
  border: var(--ring-width, var(--motion-ring-width, 1px)) solid var(--ring-color, var(--motion-ring-color, var(--motion-ring-line)));
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow:
    inset 0 0 34px var(--ring-inner-shadow, var(--motion-ring-inner-shadow)),
    0 0 42px var(--ring-outer-shadow, var(--motion-ring-outer-shadow));
  animation: motion-ring-pulse var(--ring-duration, var(--motion-ring-duration, 5.8s)) ease-in-out var(--ring-delay, var(--motion-ring-delay, 0s)) infinite;
}

.motion-ring.two {
  --ring-size: var(--motion-ring-size-large, clamp(320px, 38vw, 560px));
  --ring-delay: -2.9s;
  opacity: .58;
}

@keyframes motion-ring-pulse {
  0%,
  100% {
    opacity: var(--ring-opacity-low, var(--motion-ring-opacity-low, .34));
    transform: translateY(-50%) scale(.96);
  }
  50% {
    opacity: var(--ring-opacity-high, var(--motion-ring-opacity-high, .72));
    transform: translateY(-50%) scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-edge-chase::before,
  .motion-scan-rail::after,
  .motion-horizon,
  .motion-beam,
  .motion-ring {
    animation: none;
    opacity: 0;
  }
}