@property --u-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.universe-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  min-height: 2.75rem;
  padding: .3rem 1.1rem .3rem .3rem;
  border-radius: 999px;
  color: var(--u-ink, currentColor);
  background: var(--u-surface, transparent);
  font: 500 .66rem/1 var(--u-font, ui-monospace, monospace);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

.universe-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(from var(--u-angle), var(--u-line) 0deg 245deg, var(--u-a) 300deg, var(--u-b) 332deg, var(--u-line) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: u-sweep 5s linear infinite;
}

.universe-link:hover::before,
.universe-link:focus-visible::before {
  animation-duration: 1.4s;
}

.universe-link:focus-visible {
  outline: 2px solid var(--u-a);
  outline-offset: 3px;
}

.universe-orb {
  position: relative;
  flex: none;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}

.universe-orb i {
  position: absolute;
  border-radius: 50%;
}

.universe-orb i:nth-child(1) {
  inset: 0;
  background: conic-gradient(from 0deg, var(--u-a), var(--u-b), transparent 58%, var(--u-a));
  -webkit-mask: radial-gradient(closest-side, transparent 66%, #000 70%);
  mask: radial-gradient(closest-side, transparent 66%, #000 70%);
  animation: u-spin 2.8s linear infinite;
}

.universe-orb i:nth-child(2) {
  inset: 25%;
  background: radial-gradient(circle at 34% 30%, var(--u-b) 0 9%, var(--u-a) 34%, var(--u-core) 76%);
  box-shadow: 0 0 .75rem color-mix(in srgb, var(--u-a) 55%, transparent);
  animation: u-breathe 2.4s ease-in-out infinite;
}

.universe-orb i:nth-child(3) {
  inset: -2px;
  animation: u-spin 1.7s linear infinite reverse;
}

.universe-orb i:nth-child(3)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--u-b);
  box-shadow: 0 0 6px var(--u-b);
}

.universe-link:hover .universe-orb,
.universe-link:focus-visible .universe-orb {
  transform: scale(1.14) rotate(-20deg);
}

.universe-text {
  position: relative;
  display: inline-block;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}

.universe-link:hover .universe-text,
.universe-link:focus-visible .universe-text {
  transform: translateX(2px);
}

.universe-glitch {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.universe-link:hover .universe-glitch,
.universe-link:focus-visible .universe-glitch {
  display: block;
}

.universe-link:hover .universe-glitch:nth-child(1),
.universe-link:focus-visible .universe-glitch:nth-child(1) {
  color: var(--u-a);
  animation: u-glitch-a .55s steps(1, end) both;
}

.universe-link:hover .universe-glitch:nth-child(2),
.universe-link:focus-visible .universe-glitch:nth-child(2) {
  color: var(--u-b);
  animation: u-glitch-b .55s steps(1, end) both;
}

@media (max-width: 1199.98px) {
  .universe-link[data-collapse="lg"] { padding: .3rem; }
  .universe-link[data-collapse="lg"] .universe-text {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  }
}

@media (max-width: 860.98px) {
  .universe-link[data-collapse="md"] { padding: .3rem; }
  .universe-link[data-collapse="md"] .universe-text {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  }
}

.universe-portal,
.universe-portal-core {
  position: fixed;
  inset: 0;
  clip-path: circle(0 at var(--x) var(--y));
  transition: clip-path .64s cubic-bezier(.76, 0, .24, 1);
}

.universe-portal {
  z-index: 2147483000;
  background: var(--u-a);
}

.universe-portal-core {
  display: grid;
  place-items: center;
  background: var(--u-dest);
  transition-delay: .08s;
}

.universe-portal.is-open,
.universe-portal.is-open .universe-portal-core {
  clip-path: circle(150vmax at var(--x) var(--y));
}

.universe-portal-label {
  color: var(--u-dest-ink);
  font: 500 .7rem/1 var(--u-font, ui-monospace, monospace);
  letter-spacing: .32em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .3s .38s;
}

.universe-portal.is-open .universe-portal-label {
  opacity: .72;
}

@keyframes u-sweep { to { --u-angle: 360deg; } }
@keyframes u-spin { to { transform: rotate(360deg); } }
@keyframes u-breathe { 50% { transform: scale(.82); } }

@keyframes u-glitch-a {
  0%   { opacity: .95; clip-path: inset(0 0 62% 0);  transform: translate(-3px, -1px); }
  20%  { clip-path: inset(38% 0 30% 0); transform: translate(2px, 0); }
  40%  { clip-path: inset(72% 0 0 0);   transform: translate(-2px, 1px); }
  60%  { clip-path: inset(12% 0 70% 0); transform: translate(1px, 0); }
  80%  { clip-path: inset(50% 0 42% 0); transform: translate(-1px, 0); }
  100% { opacity: 0; clip-path: inset(50% 0 50% 0); transform: none; }
}

@keyframes u-glitch-b {
  0%   { opacity: .95; clip-path: inset(58% 0 0 0);  transform: translate(3px, 1px); }
  20%  { clip-path: inset(8% 0 64% 0);  transform: translate(-2px, 0); }
  40%  { clip-path: inset(30% 0 44% 0); transform: translate(2px, -1px); }
  60%  { clip-path: inset(80% 0 4% 0);  transform: translate(-1px, 0); }
  80%  { clip-path: inset(20% 0 72% 0); transform: translate(1px, 0); }
  100% { opacity: 0; clip-path: inset(50% 0 50% 0); transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .universe-link::before,
  .universe-orb i,
  .universe-glitch { animation: none !important; }
  .universe-orb,
  .universe-text { transition: none; }
}