.moon[data-astro-cid-gmrid3ow] {
  ---rotationPhase-moon: 0;
  animation: rotationPhase-moon var(---moon-speed)
			calc(var(---moon-speed) * -.25) linear infinite;
}

.moon-body[data-astro-cid-gmrid3ow] {
  transform: scaleX(calc(1 - 2 * var(---rotationPhase-branch)));

  & circle {
    fill: var(--moon-fill);
    stroke: var(--moon-strokeColor);
    stroke-width: var(--strokeWidth);
  }
}

.moon-body[data-astro-cid-gmrid3ow].-back {
  opacity: calc(0 + var(---rotationPhase-moon));
}

.moon-body[data-astro-cid-gmrid3ow].-front {
  opacity: calc(1 - var(---rotationPhase-moon));
}

@keyframes rotationPhase-moon {
  0% {
    ---rotationPhase-moon: 0;
  }

  50% {
    ---rotationPhase-moon: 0;
  }

  50.001% {
    ---rotationPhase-moon: 1;
  }

  100% {
    ---rotationPhase-moon: 1;
  }
}

.moon-orbit[data-astro-cid-gmrid3ow] {
  stroke: var(--moon-orbit-strokeColor);
  stroke-width: var(--strokeWidth);
  fill: none;
  ry: var(---moon-distance);
  rx: calc(var(---moon-distance) * max(var(---cos), var(---cos) * -1));
  stroke-dasharray: .5 .5;
  stroke-dashoffset: var(---moon-dashOffset);
}

.moon-orbit-wrap[data-astro-cid-gmrid3ow] {
  transform: scaleX(calc(1 - 2 * var(---rotationPhase-branch)));
}

.moon-orbit-wrap[data-astro-cid-gmrid3ow].-back {
  ---moon-dashOffset: -.25;
  ---moon-animationStart: 0s;
}

.moon-orbit-wrap[data-astro-cid-gmrid3ow].-front {
  ---moon-dashOffset: .25;
  ---moon-animationStart: calc(var(--speed) / -4);
}
.planet-body[data-astro-cid-kaocr6nl] {
  fill: var(--planet-fill);
  stroke: var(--planet-strokeColor);
  stroke-width: var(--strokeWidth);
}
.branch {
		transform-origin: 0px 0px;
	}

	.branch-content {
		transform: translateX(calc(var(---distance) * var(---sin)));
	}

	.branch-connectorLine {
		stroke-width: var(--strokeWidth);
		stroke: var(--branch-connectorLine-strokeColor);
		---line-travel: calc(var(---distance) / 2 - 0px);
		transform: translateX(calc(var(---radius-bodyBefore) * var(---sin)))
			scaleX(var(---sin));
	}

	/* Root Branch:
	** Rotation State
	** Visibillity
	*****************************************************************************/

	.branch[data-is-root="true"] {
		---rotationPhase-branch: 0;
		---branch-opacity-foreground: 1;
		---branch-opacity-background: 0;
		---deg: calc(var(---angle) * 1deg);
		---sin: sin(var(---deg));
		---cos: cos(var(---deg));

		---angleStart: var(--angleStart, 0);
		---offset: calc(var(---angleStart) / 360 * var(--speed) * -1);
	}

	[data-run-animation="true"] .branch[data-is-root="true"] {
		animation:
			rotate-system var(--speed) var(---offset) linear infinite,
			branch-rotation-phase var(--speed)
				calc(var(---offset) - var(--speed) / 4) linear infinite;
	}

	.branch[data-is-root="true"][data-is-background="true"] .branch-inner {
		opacity: var(---branch-opacity-background);
	}

	.branch[data-is-root="true"][data-is-background="false"] .branch-inner {
		opacity: var(---branch-opacity-foreground);
	}

	@keyframes rotate-system {
		from {
			---angle: 0;
		}

		to {
			---angle: 360;
		}
	}

	@keyframes branch-rotation-phase {
		0% {
			---rotationPhase-branch: 0;
			---branch-opacity-foreground: 1;
			---branch-opacity-background: 0;
		}

		50% {
			---rotationPhase-branch: 0;
			---branch-opacity-foreground: 1;
			---branch-opacity-background: 0;
		}

		50.001% {
			---rotationPhase-branch: 1;
			---branch-opacity-foreground: 0;
			---branch-opacity-background: 1;
		}

		100% {
			---rotationPhase-branch: 1;
			---branch-opacity-foreground: 0;
			---branch-opacity-background: 1;
		}
	}.sun[data-astro-cid-tm32oktw] {
  fill: var(--sun-fill);
  stroke: var(--sun-strokeColor);
  stroke-width: var(--strokeWidth);
}

[data-run-animation="true"] .overlay-idle[data-astro-cid-tm32oktw] {
  display: none;
}

.branches[data-astro-cid-tm32oktw] {
  animation: 30s linear infinite rotate2;
}

@keyframes rotate-flat {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}
.bigBang-beams-beam[data-astro-cid-clmtthav] {
  stroke-dasharray: .5 .5;
  stroke-dasharray: 0 1 var(---strokeDashArray);
  stroke-dashoffset: 0;
  stroke-linecap: round;
  stroke-width: 50px;
  opacity: 0;
}

[data-run-animation="true"] .bigBang-beams-beam[data-astro-cid-clmtthav] {
  opacity: 1;
  stroke: #fff;
  animation: .5s cubic-bezier(0, 1, 1, 1) forwards radiate;
}

@keyframes radiate {
  to {
    stroke-dashoffset: -1px;
    stroke-width: 0;
  }
}
line[data-astro-cid-yuocccnb] {
  stroke-dasharray: 0 1 .2 1;
  stroke-dashoffset: .001px;
  stroke-linecap: round;
  stroke: var(---color);
  stroke-width: calc(4px * (var(---randomness) * 5));
}

[data-run-animation="true"] .bigBang-stars[data-astro-cid-yuocccnb] line[data-astro-cid-yuocccnb] {
  animation: 1s ease-out both dash, 300s ease-out 1s infinite both rotate;
}

@keyframes rotate {
  to {
    transform: rotate(calc(360deg * var(---randomness)));
  }
}

@keyframes dash {
  to {
    stroke-dasharray: 0 1 .0001 1;
    stroke-dashoffset: 1px;
  }
}
@property ---angle {
		syntax: "<number>";
		inherits: true;
		initial-value: 0;
	}

	@property ---rotationPhase-branch {
		syntax: "<number>";
		inherits: true;
		initial-value: 0;
	}

	@property ---branch-opacity-foreground {
		syntax: "<number>";
		inherits: true;
		initial-value: 1;
	}

	@property ---branch-opacity-background {
		syntax: "<number>";
		inherits: true;
		initial-value: 0;
	}

	:where(.o4) {
		width: 100vw;
		height: 100vh;
		height: 100svh;
		position: relative;
		--speed: 10s;
		background-color: white;

		--strokeWidth: 2px;

		--color-red-100: #eb7063;
		--color-blue-100: #788fff;

		--sun-fill: white;
		--sun-strokeColor: none;

		--planet-fill: white;
		--planet-strokeColor: black;

		--moon-fill: white;
		--moon-strokeColor: black;
		--moon-orbit-strokeColor: black;

		--branch-connectorLine-strokeColor: black;

		--logo-fill: black;

		svg.galaxy {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			margin: auto;
			overflow: visible;
		}
	}

	/*.solarsystem :global(.branches) {
		animation: rotate2 30s linear infinite;
	}*/

	.o4-toggle-animation {
		position: absolute;
		inset: 0;
		z-index: 100;
	}

	.logo {
		width: 15vmin;
		height: auto;
		position: absolute;
		inset: 0;
		margin: auto;
	}

	@keyframes rotate2 {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	@property ---expansion {
		syntax: "<number>";
		inherits: true;
		initial-value: 0;
	}

	.bigbang {
		---expansion: 0;
		--delay: 0ms;
		--color: var(--color-blue-100);

		/*mix-blend-mode: lighten;*/

		&.\#1 {
			--color: var(--color-red-100);
			--delay: 0ms;
		}

		&.\#2 {
			--color: var(--color-blue-100);
			--delay: 10ms;
		}

		&.\#3 {
			--color: var(--color-black-100);
			--delay: 200ms;
		}

		circle {
			fill: var(--color);
			stroke: none;
			transform: scale(var(---expansion));
		}
	}

	[data-run-animation="true"] {
		--sun-fill: black;
		--sun-strokeColor: white;
		--planet-fill: black;
		--planet-strokeColor: white;
		--moon-fill: black;
		--moon-strokeColor: white;
		--moon-orbit-strokeColor: white;
		--branch-connectorLine-strokeColor: white;
		--logo-fill: white;
	}

	[data-run-animation="true"] .bigbang circle {
		animation: bigbang 500ms var(--delay) ease-out forwards;
	}

	@keyframes bigbang {
		from {
			---expansion: 0;
			opacity: 1;
		}
		to {
			---expansion: 1;
			opacity: 1;
		}
	}