:where(.home-star-surface) { position: relative; }

.home-star-border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  overflow: visible;
  pointer-events: none;
  opacity: var(--star-alpha, 0.78);
}

.home-star-card { --star-inset: 1.25px; --star-radius: 5px; --star-duration: 6s; --star-alpha: 0.72; }
.home-star-action { --star-inset: 1px; --star-duration: 4s; --star-radius: 8px; --star-alpha: 0.74; }
.eye-explore.home-star-action { --star-radius: 32px; }
.home-star-action > .home-star-border {
  inset: -4px -8px;
  width: calc(100% + 16px);
  height: calc(100% + 8px);
}

.home-star-border rect {
  x: var(--star-inset, 1px);
  y: var(--star-inset, 1px);
  width: calc(100% - 2 * var(--star-inset, 1px));
  height: calc(100% - 2 * var(--star-inset, 1px));
  rx: var(--star-radius, 8px);
  fill: none;
  stroke-width: 1;
}

.home-star-base { stroke: #efb6c436; }
.home-star-trail {
  stroke-dasharray: calc(var(--star-length) * 1px) calc((100 - var(--star-length)) * 1px);
  animation: home-star-lap var(--star-duration) linear var(--star-delay, 0s) infinite paused;
}
.home-star-border.is-visible .home-star-trail { animation-play-state: running; }
.home-star-tail { --star-length: 29; stroke: #a938535c; }
.home-star-mid { --star-length: 16; stroke: #da54798a; }
.home-star-core { --star-length: 7; stroke: #ffb0c6ac; }
.home-star-head { --star-length: 1.8; stroke: #fff3f7; stroke-linecap: round; }
.home-star-border .home-star-halo {
  --star-length: 5.2;
  stroke: #f4618c42;
  stroke-width: 3.5px;
  stroke-linecap: round;
}
.home-star-pulse { stroke: #ffe0e9; stroke-dasharray: 9 91; stroke-linecap: round; opacity: 0; }

@keyframes home-star-lap {
  from { stroke-dashoffset: calc(var(--star-length) * 1px); }
  to { stroke-dashoffset: calc((var(--star-length) - 100) * 1px); }
}

@media (max-width: 780px) {
  .home-star-action > .home-star-border {
    inset: -2px -4px;
    width: calc(100% + 8px);
    height: calc(100% + 4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-star-trail, .home-star-pulse { display: none; animation: none; }
}