/* Shared by every page: the spinning wormhole background, the purple wash over it,
   and the TV-static flash on hover. Motion stops for reduced-motion users. */

/* wormhole background: a square image centred on the hole, spinning around it.
   150vmax square so its corners never show while it turns, on any screen shape. */
.bg-space {
  position: fixed; z-index: -2; left: 50%; top: 50%;
  width: 150vmax; height: 150vmax; margin: -75vmax 0 0 -75vmax;
  background: #180e22 url('../assets/wormhole.jpg') center / cover no-repeat;
  animation: spin 160s linear infinite;
  will-change: transform;
}
@keyframes spin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.12); }
  100% { transform: rotate(360deg) scale(1); }
}
/* purple wash on top so text stays readable over the stars */
.bg-tint {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(42, 29, 71, 0.15) 0%, rgba(42, 29, 71, 0.55) 70%),
    linear-gradient(rgba(42, 29, 71, 0.35), rgba(42, 29, 71, 0.35));
}

@keyframes static { to { background-position: 0 -1024px; } }

.static-hover { position: relative; }
.static-hover::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: url('../assets/static.png') 0 0 / 256px 1024px; opacity: 0; mix-blend-mode: screen;
}
.static-hover:hover::after, .static-hover:focus-within::after { animation: flash 0.35s steps(4) 1, static 0.32s steps(4) 1; }
@keyframes flash { 0% { opacity: 0.6; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .bg-space, .static-hover::after { animation: none; }
}