/* A rotating light travels around the outline, never over text or controls. */
@property --forge-border-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.input-wrap {
  border-radius: 9px;
  isolation: isolate;
  box-shadow: 0 0 13px #22bfff0d;
  transition: box-shadow .25s ease;
}
.input-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: conic-gradient(from var(--forge-border-angle),
    #17394b 0deg, #205479 48deg, #2489e8 96deg,
    #56efff 142deg, #a5faff 155deg, #31bfea 173deg,
    #6356d9 222deg, #bc65eb 265deg, #4e63b1 305deg, #17394b 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: forge-neon-orbit 7s linear infinite;
  opacity: .85;
  transition: opacity .25s ease;
}
.password-wrap::before { animation-delay: -3.5s; }
.input-wrap:focus-within {
  box-shadow: 0 0 0 3px #29c9ef13, 0 0 22px #2a91ff1a;
}
.input-wrap:focus-within::before { opacity: 1; }
.input-wrap input { border-color: transparent; }
.input-wrap input:focus { border-color: transparent; box-shadow: none; }
.input-wrap:has(input:disabled)::before { animation-play-state: paused; opacity: .45; }
@keyframes forge-neon-orbit {
  from { --forge-border-angle: 0deg; }
  to { --forge-border-angle: 360deg; }
}
@media(prefers-reduced-motion: reduce) {
  .input-wrap::before { animation: none; --forge-border-angle: 140deg; }
}
@media(forced-colors: active) {
  .input-wrap::before { display: none; }
  .input-wrap input { border-color: CanvasText; }
  .input-wrap input:focus { border-color: Highlight; outline: 2px solid Highlight; outline-offset: 2px; }
}