:root {
  --color-1: #030201;
  --color-2: #f1f2f3;
  --close: 15%;
  --close-to: 20%;
}

@property --close {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 15%;
}

html,
body {
  overflow: hidden; /* kein Scrollen */
}

html {
  background-color: var(--color-1, black);
}

body {
  display: grid;
  place-items: center;
  height: 100svh;
  margin: 0;
  background-color: var(--color-1, black);

  /* eigene Blend-Gruppe: das Rauschen mischt sich mit dem schwarzen
     Body-Hintergrund statt mit der leeren Canvas (sonst grau) */
  isolation: isolate;
}

div {
  aspect-ratio: 1 / 2;
  height: 80vmin;

  animation: spaceAnim 5s ease-in-out infinite;
}

@keyframes spaceAnim {
  50% { --close: var(--close-to, 18%); }
}

div:before,
div:after {
  content: '';

  display: block;
  height: 50%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  
  background: conic-gradient(var(--color-1, black), var(--color-2, white));
  mask-image: linear-gradient(transparent calc(var(--close, 12.5%) / 2), black var(--close, 12.5%));
}

div:before {
  transform: translateY(var(--close, 12.5%)) scaleY(-100%);
}

div:after {
  --r: calc(-1 * var(--close, 12.5%));
  transform: translateY(var(--r));
}

.mark {
  position: fixed;
  left: 50%;
  bottom: 1.75rem;
  transform: translateX(-50%);
  z-index: 1;

  margin: 0;
  font-family: ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(.55rem, 1.4vmin, .7rem);
  font-weight: 300;
  letter-spacing: .55em;
  text-indent: .55em; /* gleicht den Abstand hinter dem letzten Buchstaben aus */
  color: rgba(241, 242, 243, .28);
  user-select: none;
}

body:after {
  content: '';
  
  position: fixed;
  inset: 0;
  
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><filter id='svgfilter'><feTurbulence type='fractalNoise' baseFrequency='1' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23svgfilter)'/></svg>");

  mix-blend-mode: overlay;
  opacity: .8;
  
  pointer-events: none;
}