:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { overflow: hidden; background: #000; color: #f5f7fa; }

.universe {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 350px;
  overflow: hidden;
  background: #000;
}

.constellation { position: absolute; inset: 0; }

.project {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 112px;
  height: 112px;
  transform: translate(-50%, -50%);
  color: inherit;
  text-decoration: none;
  outline: 0;
  -webkit-tap-highlight-color: transparent;
}

.star {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 180px;
  height: 180px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  isolation: isolate;
}

.star::before,
.star::after,
.star-corona,
.star-core,
.star-rays {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.star::before,
.star::after { content: ""; border-radius: 50%; }

.star::before {
  width: 160px;
  height: 160px;
  background: radial-gradient(circle,
    hsla(var(--h), 90%, 78%, calc(.13 * var(--power))) 0%,
    hsla(var(--h), 88%, 69%, calc(.055 * var(--power))) 20%,
    hsla(var(--h), 83%, 60%, calc(.016 * var(--power))) 45%,
    transparent 71%);
  filter: blur(6px);
  animation: halo-breathe 11.7s ease-in-out var(--phase) infinite alternate;
}

.star::after {
  width: 48px;
  height: 48px;
  background: radial-gradient(circle,
    hsla(var(--h), 100%, 91%, calc(.36 * var(--power))) 0%,
    hsla(var(--h), 100%, 82%, calc(.11 * var(--power))) 17%,
    hsla(var(--h), 95%, 72%, calc(.026 * var(--power))) 49%,
    transparent 70%);
  filter: blur(2px);
}

.star-corona {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(ellipse 56% 52% at 49% 48%,
    hsla(var(--h), 100%, 94%, calc(.46 * var(--power))) 0%,
    hsla(var(--h), 100%, 85%, calc(.14 * var(--power))) 38%,
    transparent 100%);
  filter: blur(3px);
  animation: corona-shimmer var(--cycle) ease-in-out var(--phase) infinite;
}

.star-core {
  z-index: 2;
  width: calc(3px + var(--power) * 2px);
  height: calc(3px + var(--power) * 2px);
  border-radius: 50%;
  background: radial-gradient(circle at 47% 44%,
    #fff 0%,
    #fff 22%,
    hsl(var(--h), 100%, 94%) 45%,
    hsla(var(--h), 100%, 83%, .8) 64%,
    transparent 83%);
  box-shadow:
    0 0 1px .4px rgba(255,255,255,.85),
    0 0 6px 1px hsla(var(--h), 100%, 90%, calc(.72 * var(--power))),
    0 0 18px 3px hsla(var(--h), 100%, 75%, calc(.22 * var(--power)));
  animation: scintillate var(--cycle) ease-in-out var(--phase) infinite;
}

.star-rays { z-index: 1; width: 100%; height: 100%; }

.ray {
  position: absolute;
  left: 50%;
  top: calc(50% - .5px);
  width: calc(62px + var(--power) * 76px);
  height: 1px;
  transform-origin: 0 50%;
  transform: rotate(var(--angle)) scaleX(.27);
  opacity: .65;
  background: linear-gradient(90deg,
    rgba(255,255,255,.95) 0%,
    hsla(var(--h), 100%, 91%, .56) 15%,
    hsla(var(--h), 100%, 82%, .2) 43%,
    transparent 100%);
  filter: drop-shadow(0 0 2px hsla(var(--h), 100%, 88%, .8));
  transition: transform .85s cubic-bezier(.16, 1, .3, 1), opacity .55s ease;
}

.ray::before {
  content: "";
  position: absolute;
  left: 0;
  top: -4px;
  width: 100%;
  height: 9px;
  background: linear-gradient(90deg,
    hsla(var(--h), 100%, 87%, calc(.28 * var(--power))),
    hsla(var(--h), 100%, 80%, calc(.08 * var(--power))) 38%,
    transparent 85%);
  filter: blur(4px);
}

.ray-left  { --angle: 180deg; --ray-delay: 0s; }
.ray-right { --angle: 0deg; --ray-delay: .08s; }
.ray-up    { --angle: -90deg; --ray-delay: .16s; width: calc(48px + var(--power) * 66px); }
.ray-down  { --angle: 90deg; --ray-delay: .24s; width: calc(48px + var(--power) * 66px); }

.project:hover .ray,
.project:focus-visible .ray {
  transform: rotate(var(--angle)) scaleX(1);
  opacity: 1;
  transition-delay: var(--ray-delay);
}

.project:hover .star-core,
.project:focus-visible .star-core { filter: brightness(1.2); }

.project-label {
  position: absolute;
  top: calc(50% + 52px);
  left: 50%;
  white-space: nowrap;
  transform: translate(-50%, 5px);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .11em;
  color: #e7e9ed;
  opacity: 0;
  transition: opacity .3s ease, transform .3s ease;
}

.project:hover .project-label,
.project:focus-visible .project-label { opacity: .92; transform: translate(-50%, 0); }
.project:focus-visible { outline: 0; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes scintillate {
  0%, 100% { opacity: .96; transform: translate(-50%, -50%) scale(1); }
  12% { opacity: .84; transform: translate(-50%, -50%) scale(.94); }
  24% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  47% { opacity: .91; transform: translate(-50%, -50%) scale(.98); }
  58% { opacity: .99; transform: translate(-50%, -50%) scale(1.03); }
  81% { opacity: .88; transform: translate(-50%, -50%) scale(.96); }
}

@keyframes corona-shimmer {
  0%, 100% { opacity: .82; transform: translate(-50%, -50%) scale(1); }
  24% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  47% { opacity: .73; transform: translate(-50%, -50%) scale(.95); }
  58% { opacity: .93; transform: translate(-50%, -50%) scale(1.04); }
  81% { opacity: .78; transform: translate(-50%, -50%) scale(.97); }
}

@keyframes halo-breathe {
  from { opacity: .8; transform: translate(calc(-50% - 2px), calc(-50% + 1px)) scale(.97); }
  to { opacity: 1; transform: translate(calc(-50% + 2px), calc(-50% - 1px)) scale(1.05); }
}

@media (hover: none), (max-width: 600px) {
  .project-label { opacity: .8; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .star::before, .star-corona, .star-core { animation: none; }
  .ray, .project-label { transition: none; }
}