/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
	--tinylytics: rgb(79,70,229);
	--scribbles: rgb(255,193,7);
	--sublimefeed: #ea053b;
	--sublimeads: #f35815;
	--microblog: rgb(255, 136, 0);
	--blue: rgb(29,78,216);
	--shoutouts: #ADE374;
	--github: #d2a8ff;
	--vincent: oklch(63.7% .237 25.331);
	--bodybeats: #ff00aa;
	--momentaryspace: hsl(205deg 100% 76%);
  --color-canvas-darkest: #000000;
  --color-ink-primary: #f5f5f5;
  --color-ink-muted: #707070;
  --crt-shadow-tertiary: rgba(92, 255, 223, 0.2);
  --crt-shadow-quaternary: rgba(255, 193, 92, 0.18);
  --crt-glow-cyan: rgba(91, 246, 255, 0.58);
  --crt-glow-magenta: rgba(255, 86, 176, 0.44);
  --crt-glow-amber: rgba(255, 186, 84, 0.34);
  --crt-glow-lime: rgba(159, 255, 118, 0.24);
}

@keyframes tinylytics-glow {
  0%, 100% {
    box-shadow: 0 0 3px var(--tinylytics), 0 0 8px var(--tinylytics);
  }
  50% {
    box-shadow: 0 0 1px var(--tinylytics), 0 0 3px var(--tinylytics);
  }
}

@keyframes marker-glow {
  0%, 100% {
    text-shadow: 0 0 4px var(--project-color), 0 0 12px var(--project-color);
  }
  50% {
    text-shadow: 0 0 1px var(--project-color), 0 0 6px var(--project-color);
  }
}

.tinylytics-glow {
  animation: tinylytics-glow 2s ease-in-out infinite;
}

.tinylytics-text-glow {
  text-shadow: 0 0 12px color-mix(in srgb, var(--tinylytics) 60%, transparent);
}

@keyframes sublimefeed-glow {
  0%, 100% {
    box-shadow: 0 0 3px var(--sublimefeed), 0 0 8px var(--sublimefeed);
  }
  50% {
    box-shadow: 0 0 1px var(--sublimefeed), 0 0 3px var(--sublimefeed);
  }
}

.sublimefeed-glow {
  animation: sublimefeed-glow 2s ease-in-out infinite;
}

.sublimefeed-text-glow {
  text-shadow: 0 0 12px color-mix(in srgb, var(--sublimefeed) 60%, transparent);
}

@keyframes sublimeads-glow {
  0%, 100% {
    box-shadow: 0 0 3px var(--sublimeads), 0 0 8px var(--sublimeads);
  }
  50% {
    box-shadow: 0 0 1px var(--sublimeads), 0 0 3px var(--sublimeads);
  }
}

.sublimeads-glow {
  animation: sublimeads-glow 2s ease-in-out infinite;
}

.sublimeads-text-glow {
  text-shadow: 0 0 12px color-mix(in srgb, var(--sublimeads) 60%, transparent);
}

@keyframes scribbles-glow {
  0%, 100% {
    box-shadow: 0 0 3px var(--scribbles), 0 0 8px var(--scribbles);
  }
  50% {
    box-shadow: 0 0 1px var(--scribbles), 0 0 3px var(--scribbles);
  }
}

.scribbles-glow {
  animation: scribbles-glow 2s ease-in-out infinite;
}

.scribbles-text-glow {
  text-shadow: 0 0 12px color-mix(in srgb, var(--scribbles) 60%, transparent);
}

@keyframes bodybeats-glow {
  0%, 100% {
    box-shadow: 0 0 4px var(--bodybeats), 0 0 12px var(--bodybeats);
  }
  50% {
    box-shadow: 0 0 2px var(--bodybeats), 0 0 6px var(--bodybeats);
  }
}

.bodybeats-glow {
  animation: bodybeats-glow 2s ease-in-out infinite;
}

.bodybeats-text-glow {
  text-shadow: 0 0 12px color-mix(in srgb, var(--bodybeats) 70%, transparent);
}

@keyframes momentaryspace-glow {
  0%, 100% {
    box-shadow: 0 0 4px var(--momentaryspace), 0 0 12px var(--momentaryspace);
  }
  50% {
    box-shadow: 0 0 2px var(--momentaryspace), 0 0 6px var(--momentaryspace);
  }
}

.momentaryspace-glow {
  animation: momentaryspace-glow 2s ease-in-out infinite;
}

.momentaryspace-text-glow {
  text-shadow: 0 0 12px color-mix(in srgb, var(--momentaryspace) 70%, transparent);
}

.project-marker {
  position: relative;
  list-style: none;
}

.project-marker::before {
  content: '•';
  position: absolute;
  left: -1.25em;
  top: 0.45em;
  font-size: 0.7em;
  color: var(--project-color);
  animation: marker-glow 2s ease-in-out infinite;
}

.glow-underline {
  position: relative;
  text-decoration: none !important;
  font-weight: bold;
  color: inherit;
}

.glow-underline::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: var(--project-color);
  box-shadow: 0 0 8px var(--project-color), 0 0 12px var(--project-color);
  transform: scaleX(0);
  transform-origin: bottom left;
  transition: transform 0.3s ease-out;
}

.glow-underline:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

a { text-underline-offset: 4px; text-decoration-color: var(--blue); }

/* CRT Easter Egg */
:root {
  --crt-shadow-primary: rgba(0, 30, 255, 0.5);
  --crt-shadow-secondary: rgba(255, 0, 80, 0.3);
  --crt-scanline-bg: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.02) 50%, rgba(255,255,255,0));
}

@media (prefers-color-scheme: light) {
  :root {
    --crt-shadow-primary: rgba(0, 30, 255, 0.15);
    --crt-shadow-secondary: rgba(255, 0, 80, 0.1);
    --crt-scanline-bg: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.15) 50%, rgba(0,0,0,0));
  }
}

.crt-charging {
  /* Transition filter over 3s to act as a countdown/buildup */
  transition: filter 3s linear !important;
  filter: grayscale(100%) sepia(100%) hue-rotate(100deg) brightness(1.2) contrast(1.5) !important;
  /* Add a subtle shake that intensifies the feeling of building energy */
  animation: charging-shake 0.1s infinite;
}

@keyframes charging-shake {
  0% { transform: translate(0, 0) scale(1.1) rotate(-5deg); }
  25% { transform: translate(1px, 1px) scale(1.1) rotate(-5deg); }
  50% { transform: translate(-1px, -1px) scale(1.1) rotate(-5deg); }
  75% { transform: translate(-1px, 1px) scale(1.1) rotate(-5deg); }
  100% { transform: translate(1px, -1px) scale(1.1) rotate(-5deg); }
}

.crt-mode {
  position: relative;
  overflow-x: hidden;
}

.crt-mode main {
  contain: layout style paint;
}

.crt-scanline {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 150px;
  z-index: 9998;
  background: var(--crt-scanline-bg);
  opacity: 0.2;
  animation: scanline 15s linear infinite;
  pointer-events: none;
  will-change: transform;
}

@keyframes scanline {
  0% { transform: translateY(-100vh); }
  100% { transform: translateY(100vh); }
}

.crt-mode::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%, 
    rgba(0, 0, 0, 0.25) 50%
  ), linear-gradient(
    90deg, 
    rgba(255, 0, 0, 0.06), 
    rgba(0, 255, 0, 0.02), 
    rgba(0, 0, 255, 0.06)
  ), radial-gradient(
    circle at center,
    transparent 50%,
    rgba(0, 0, 0, 0.4) 100%
  );
  z-index: 9999;
  background-size: 100% 2px, 3px 100%, 100% 100%;
  pointer-events: none;
}

.crt-mode::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 9999;
  pointer-events: none;
  animation: flicker 0.6s infinite;
}

@keyframes flicker {
  0% { opacity: 0.02; }
  25% { opacity: 0.05; }
  50% { opacity: 0.02; }
  75% { opacity: 0.06; }
  100% { opacity: 0.03; }
}

.crt-mode main,
.crt-mode main * {
  animation: textShadow 2.5s ease-in-out infinite;
}

@keyframes textShadow {
  0%, 100% { text-shadow: 0.44px 0 1px var(--crt-shadow-primary), -0.44px 0 1px var(--crt-shadow-secondary), 0 0 3px; }
  25% { text-shadow: 1.6px 0 1px var(--crt-shadow-primary), -1.6px 0 1px var(--crt-shadow-secondary), 0 0 3px; }
  50% { text-shadow: 0.08px 0 1px var(--crt-shadow-primary), -0.08px 0 1px var(--crt-shadow-secondary), 0 0 3px; }
  75% { text-shadow: 2.2px 0 1px var(--crt-shadow-primary), -2.2px 0 1px var(--crt-shadow-secondary), 0 0 3px; }
}

@keyframes scan-icon {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(1px); opacity: 0.8; }
}

.scan-line {
  animation: scan-icon 3s infinite ease-in-out;
}

.group:hover .scan-line,
.crt-mode .crt-toggle-btn .scan-line {
  animation: scan-icon 1s infinite ease-in-out;
}

/* Set delays globally so they apply whenever animation runs */
.scan-line:nth-child(3) { animation-delay: 0s; }
.scan-line:nth-child(4) { animation-delay: 0.2s; }
.scan-line:nth-child(5) { animation-delay: 0.4s; }

.group:hover svg,
.crt-mode .crt-toggle-btn svg {
  filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.6));
}

.crt-mode .crt-toggle-btn {
  opacity: 1;
}

.crt-mode .crt-toggle-btn svg {
  color: rgb(59, 130, 246);
}

/* Lava Lamp */
@keyframes reactor-pulse {
  0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(0.8); box-shadow: 0 0 5px rgba(255, 69, 0, 0); }
  50% { opacity: 0.7; transform: translate(-50%, -50%) scale(1.2); box-shadow: 0 0 8px rgba(255, 69, 0, 0.4); }
}

.lava-lamp-off .lava-lamp-blob {
  animation: reactor-pulse 3s infinite ease-in-out;
  background-color: #ef4444; /* red-500 for "standby" */
}

.lava-lamp-on .lava-lamp-blob {
  animation: none;
  background-color: #f97316; /* orange-500 */
  box-shadow: 0 0 10px 3px #f97316;
  height: 35%;
  width: 35%;
  opacity: 0.8;
  top: 45%;
  left: 55%;
}

/* Star Scape Toggle */
@keyframes twinkle {
  0%, 100% { opacity: 0.4; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

.twinkle-star {
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.3s, transform 0.3s;
}

/* Only show twinkling stars when active */
.star-scape-on .twinkle-star {
  animation: twinkle 2s infinite ease-in-out;
  opacity: 1;
  transform: scale(1);
}

/* Add a glow to the main star when active */
.star-scape-on svg {
  filter: drop-shadow(0 0 8px rgba(250, 204, 21, 0.8));
}

.momentary-space-on svg {
  filter: drop-shadow(0 0 10px rgba(125, 211, 252, 0.8));
}

@keyframes star-pulse-inactive {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(250, 204, 21, 0)); }
  50% { filter: drop-shadow(0 0 3px rgba(250, 204, 21, 0.5)); }
}

button[data-star-scape-target="toggle"]:not(.star-scape-on) svg {
  animation: star-pulse-inactive 3s infinite ease-in-out;
}

@keyframes momentary-space-pulse-inactive {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(125, 211, 252, 0)); }
  50% { filter: drop-shadow(0 0 3px rgba(125, 211, 252, 0.5)); }
}

button[data-momentary-space-target="toggle"]:not(.momentary-space-on) svg {
  animation: momentary-space-pulse-inactive 3s infinite ease-in-out;
}

/* Force light text when Star Scape is active */
html.star-scape-active,
html.momentary-space-active {
  background: #000;
  color: #f5f5f5;
}

html.terminals-active {
  background: #0a0a0a;
  color: #e5fff3;
}

html.star-scape-active body,
body.star-scape-active {
  color: #f5f5f5;
}

html.momentary-space-active body,
body.momentary-space-active {
  color: #f5f5f5;
}

html.star-scape-active body .prose,
body.star-scape-active .prose {
  --tw-prose-body: #f5f5f5;
  --tw-prose-headings: #f5f5f5;
  --tw-prose-bold: #f5f5f5;
  --tw-prose-links: #fff;
  color: #f5f5f5;
}

html.momentary-space-active body .prose,
body.momentary-space-active .prose {
  --tw-prose-body: #f5f5f5;
  --tw-prose-headings: #f5f5f5;
  --tw-prose-bold: #f5f5f5;
  --tw-prose-links: #fff;
  color: #f5f5f5;
}

html.star-scape-active body a,
body.star-scape-active a {
  color: inherit;
  text-decoration-color: rgba(255, 255, 255, 0.5);
}

html.momentary-space-active body a,
body.momentary-space-active a {
  color: inherit;
  text-decoration-color: rgba(255, 255, 255, 0.5);
}

html.star-scape-active body a:hover,
body.star-scape-active a:hover {
  text-decoration-color: #fff;
}

html.momentary-space-active body a:hover,
body.momentary-space-active a:hover {
  text-decoration-color: #fff;
}

.effects-menu-item.star-scape-on::before,
.effects-menu-item.momentary-space-on::before,
.effects-menu-item.lava-lamp-on::before,
.effects-menu-item.terminals-on::before,
body.crt-mode .crt-menu-item::before {
  content: "● ";
  font-size: 0.65rem;
  vertical-align: 0.1em;
}

.effects-menu-item.star-scape-on::before { color: rgb(250, 204, 21); }
.effects-menu-item.momentary-space-on::before { color: rgb(125, 211, 252); }
.effects-menu-item.lava-lamp-on::before { color: #f97316; }
.effects-menu-item.terminals-on::before { color: #34d399; }
body.crt-mode .crt-menu-item::before { color: rgb(59, 130, 246); }

body.crt-mode .crt-menu-item .crt-mode-icon {
  color: rgb(59, 130, 246);
}

html.star-scape-active body [data-effects-menu-target="trigger"],
body.star-scape-active [data-effects-menu-target="trigger"] {
  color: #fff;
  border-color: #fff;
}

html.momentary-space-active body [data-effects-menu-target="trigger"],
body.momentary-space-active [data-effects-menu-target="trigger"] {
  color: #fff;
  border-color: #fff;
}

.homepage-scene-effect {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  z-index: 0;
}

.homepage__stage {
  --homepage-pointer-stage-x: 0;
  --homepage-pointer-stage-y: 0;
  --homepage-pointer-presence: 0;
  align-items: flex-end;
  background:
    radial-gradient(circle at top, rgba(27, 47, 96, 0.22), transparent 44%),
    radial-gradient(circle at 12% 20%, rgba(118, 66, 165, 0.16), transparent 28%),
    radial-gradient(circle at 84% 26%, rgba(24, 106, 98, 0.14), transparent 24%),
    linear-gradient(180deg, #030304 0%, #000000 100%);
  box-sizing: border-box;
  display: flex;
  inset: 0;
  justify-content: center;
  min-height: 100vh;
  overflow: hidden;
  position: absolute;
  width: 100%;
}

.homepage__planet-field {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.homepage__asteroid-field,
#homepage_asteroids {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.homepage__flight-field,
#homepage_flights {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: 3;
}

.homepage__star-field {
  --star-field-parallax-offset-x: 0px;
  --star-field-parallax-offset-y: 0px;
  animation: homepage-star-field-appear 2.4s ease-out forwards;
  inset: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  transform: translate(var(--star-field-parallax-offset-x), var(--star-field-parallax-offset-y));
  will-change: transform;
  z-index: 0;
}

.homepage__star {
  animation: homepage-star-twinkle var(--star-twinkle-duration) ease-in-out infinite;
  animation-delay: var(--star-twinkle-delay);
  background: var(--star-color);
  border-radius: 9999px;
  box-shadow: 0 0 0.12rem var(--star-glow-color);
  height: var(--star-size);
  left: var(--star-x);
  opacity: var(--star-opacity);
  position: absolute;
  top: var(--star-y);
  transform: translate(-50%, -50%);
  width: var(--star-size);
  z-index: 0;
}

.homepage__star--bright {
  box-shadow: 0 0 0.28rem var(--star-glow-color);
}

.homepage__star--accent {
  box-shadow: 0 0 0.18rem var(--star-glow-color);
}

.homepage__star--bright.homepage__star--accent {
  box-shadow: 0 0 0.32rem var(--star-glow-color);
}

.homepage__star--glisten {
  animation:
    homepage-star-twinkle var(--star-twinkle-duration) ease-in-out infinite,
    homepage-star-glisten var(--star-glisten-duration) ease-in-out infinite;
  animation-delay: var(--star-twinkle-delay), var(--star-glisten-delay);
}

.homepage__star--glisten::before {
  animation: homepage-star-glisten-flare var(--star-glisten-duration) ease-in-out infinite;
  animation-delay: var(--star-glisten-delay);
  background:
    linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--star-color) 72%, white 28%) 48%, color-mix(in srgb, var(--star-color) 72%, white 28%) 52%, transparent 100%),
    linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--star-color) 66%, white 34%) 48%, color-mix(in srgb, var(--star-color) 66%, white 34%) 52%, transparent 100%);
  content: "";
  filter: blur(0.03rem);
  inset: -130%;
  opacity: 0;
  position: absolute;
  transform: scale(0.72);
}

.homepage__planet-shell {
  animation: homepage-planet-appear 1.3s ease-out forwards;
  animation-delay: var(--planet-fade-delay);
  left: var(--planet-x);
  opacity: 0;
  position: absolute;
  top: var(--planet-y);
  transform: translate(-50%, -50%);
  width: var(--planet-size);
  z-index: 0;
}

.homepage__planet-visual {
  filter: saturate(1.08) brightness(1.03);
  isolation: isolate;
  position: relative;
  transform: translate(var(--planet-parallax-offset-x), var(--planet-parallax-offset-y));
  transition: filter 220ms ease-out, opacity 220ms ease-out;
  width: 100%;
  will-change: transform;
}

.homepage__planet-visual::before {
  animation: homepage-planet-aura calc(var(--planet-cycle-duration) * 1.1) ease-in-out infinite;
  animation-delay: calc(var(--planet-fade-delay) + 1.3s);
  background:
    radial-gradient(circle, color-mix(in srgb, var(--planet-glow-color) 72%, white 28%) 0%, color-mix(in srgb, var(--planet-glow-color) 72%, transparent) 30%, transparent 72%);
  content: "";
  filter: blur(0.42rem);
  inset: -42%;
  mix-blend-mode: screen;
  opacity: 0.82;
  pointer-events: none;
  position: absolute;
  transition: opacity 220ms ease-out, transform 220ms ease-out;
  z-index: 0;
}

.homepage__planet-visual::after {
  animation: homepage-planet-aura calc(var(--planet-cycle-duration) * 0.92) ease-in-out infinite reverse;
  animation-delay: calc(var(--planet-fade-delay) + 1.6s);
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.32) 0%, transparent 24%),
    radial-gradient(circle, color-mix(in srgb, var(--planet-glow-color) 82%, white 18%) 0%, color-mix(in srgb, var(--planet-glow-color) 66%, transparent) 42%, transparent 70%);
  content: "";
  filter: blur(0.12rem);
  inset: -24%;
  mix-blend-mode: screen;
  opacity: 0.6;
  pointer-events: none;
  position: absolute;
  transition: opacity 220ms ease-out, transform 220ms ease-out;
  z-index: 0;
}

.homepage__planet {
  animation: homepage-planet-twinkle var(--planet-cycle-duration) ease-in-out infinite;
  animation-delay: calc(var(--planet-fade-delay) + 1.3s);
  display: block;
  filter:
    drop-shadow(0 0 0.28rem rgba(255, 255, 255, 0.1))
    drop-shadow(0 0 0.72rem color-mix(in srgb, var(--planet-glow-color) 34%, transparent));
  height: auto;
  image-rendering: pixelated;
  opacity: 0.94;
  position: relative;
  shape-rendering: crispEdges;
  transition: filter 220ms ease-out, opacity 220ms ease-out;
  width: 100%;
  z-index: 2;
}

.homepage__planet-ring {
  filter: drop-shadow(0 0 0.24rem color-mix(in srgb, var(--planet-glow-color) 34%, transparent));
  opacity: 0.96;
}

.homepage__planet-orbit {
  animation: homepage-moon-orbit var(--moon-orbit-duration) linear infinite;
  animation-delay: var(--planet-fade-delay);
  height: var(--moon-orbit-size);
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) rotate(var(--moon-orbit-angle));
  width: var(--moon-orbit-size);
  z-index: 1;
}

.homepage__planet-moon {
  background: var(--moon-color);
  border-radius: 9999px;
  box-shadow:
    0 0 0.16rem rgba(255, 255, 255, 0.3),
    0 0 0.42rem var(--moon-glow-color);
  display: block;
  height: var(--moon-size);
  left: 50%;
  opacity: 0.92;
  position: absolute;
  top: 0;
  transform: translate(-50%, -50%);
  width: var(--moon-size);
}

.homepage__flight {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.homepage__flight-ship {
  background: rgba(245, 249, 255, 0.94);
  border-radius: 9999px;
  box-shadow: 0 0 0.12rem rgba(198, 220, 255, 0.32);
  height: 0.16rem;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transform: translate(-50%, -50%);
  width: 0.16rem;
}

.homepage__flight-trail {
  background: linear-gradient(90deg, rgba(160, 198, 255, 0) 0%, rgba(160, 198, 255, 0.05) 16%, rgba(176, 208, 255, 0.3) 58%, rgba(242, 248, 255, 0.98) 100%);
  box-shadow: 0 0 0.22rem rgba(176, 208, 255, 0.24);
  height: 1px;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transform-origin: 0 50%;
}

.homepage__asteroid {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.homepage__asteroid-node {
  height: auto;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transform: translate(-50%, -50%);
  width: var(--asteroid-size);
}

.homepage__asteroid-body {
  display: block;
  filter: drop-shadow(0 0 0.52rem var(--asteroid-glow-color));
  height: auto;
  image-rendering: pixelated;
  shape-rendering: crispEdges;
  width: 100%;
}

.homepage__asteroid-tail {
  background: linear-gradient(90deg, rgba(214, 194, 156, 0) 0%, color-mix(in srgb, var(--asteroid-tail-color) 24%, transparent) 22%, color-mix(in srgb, var(--asteroid-tail-color) 58%, white 4%) 72%, color-mix(in srgb, var(--asteroid-tail-color) 82%, white 10%) 100%);
  box-shadow: 0 0 0.32rem color-mix(in srgb, var(--asteroid-tail-color) 56%, transparent);
  height: 1px;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transform-origin: 0 50%;
}

.homepage__asteroid-facet {
  mix-blend-mode: screen;
}

.homepage__asteroid-crater {
  mix-blend-mode: multiply;
}

@keyframes homepage-planet-appear {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%);
  }

  100% {
    opacity: 0.72;
    transform: translate(-50%, -50%);
  }
}

@keyframes homepage-star-field-appear {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes homepage-star-twinkle {
  0%, 100% {
    opacity: calc(var(--star-opacity) * 0.72);
  }

  48% {
    opacity: var(--star-opacity);
  }

  62% {
    opacity: calc(var(--star-opacity) * 0.9);
  }
}

@keyframes homepage-star-glisten {
  0%, 76%, 100% {
    box-shadow: 0 0 0.18rem var(--star-glow-color);
    filter: brightness(1);
  }

  84% {
    box-shadow: 0 0 0.32rem color-mix(in srgb, var(--star-glow-color) 82%, white 18%);
    filter: brightness(1.08);
  }

  88% {
    box-shadow: 0 0 0.44rem color-mix(in srgb, var(--star-glow-color) 74%, white 26%);
    filter: brightness(1.16);
  }

  92% {
    box-shadow: 0 0 0.24rem color-mix(in srgb, var(--star-glow-color) 76%, white 24%);
    filter: brightness(1.04);
  }
}

@keyframes homepage-star-glisten-flare {
  0%, 76%, 100% {
    opacity: 0;
    transform: scale(0.72);
  }

  86% {
    opacity: 0.2;
    transform: scale(1);
  }

  90% {
    opacity: 0.34;
    transform: scale(1.18);
  }

  94% {
    opacity: 0;
    transform: scale(0.92);
  }
}

@keyframes homepage-planet-twinkle {
  0%, 100% {
    filter:
      drop-shadow(0 0 0.3rem rgba(255, 255, 255, 0.08))
      drop-shadow(0 0 0.64rem color-mix(in srgb, var(--planet-glow-color) 28%, transparent));
    opacity: 0.9;
  }

  45% {
    filter:
      drop-shadow(0 0 0.42rem rgba(255, 255, 255, 0.14))
      drop-shadow(0 0 0.88rem color-mix(in srgb, var(--planet-glow-color) 42%, transparent));
    opacity: 0.96;
  }

  62% {
    filter:
      drop-shadow(0 0 0.48rem rgba(255, 255, 255, 0.18))
      drop-shadow(0 0 1.02rem color-mix(in srgb, var(--planet-glow-color) 52%, transparent));
    opacity: 1;
  }
}

@keyframes homepage-planet-aura {
  0%, 100% {
    opacity: 0.62;
    transform: scale(0.94);
  }

  48% {
    opacity: 0.84;
    transform: scale(1.03);
  }

  68% {
    opacity: 0.74;
    transform: scale(0.98);
  }
}

@keyframes homepage-moon-orbit {
  0% {
    transform: translate(-50%, -50%) rotate(var(--moon-orbit-angle));
  }

  100% {
    transform: translate(-50%, -50%) rotate(calc(var(--moon-orbit-angle) + 360deg));
  }
}

html.terminals-active body,
body.terminals-active {
  background: #0a0a0a;
  color: #e5fff3;
}

html.terminals-active body .prose,
body.terminals-active .prose {
  --tw-prose-body: #e5fff3;
  --tw-prose-headings: #ffffff;
  --tw-prose-bold: #ffffff;
  --tw-prose-links: #ffffff;
  --tw-prose-bullets: #34d399;
  color: #e5fff3;
}

html.terminals-active body a,
body.terminals-active a {
  color: inherit;
  text-decoration-color: rgba(52, 211, 153, 0.6);
}

html.terminals-active body a:hover,
body.terminals-active a:hover {
  color: #ffffff;
  text-decoration-color: #a7f3d0;
}

html.terminals-active body [data-effects-menu-target="trigger"],
body.terminals-active [data-effects-menu-target="trigger"] {
  color: #b4ffd9;
  border-color: rgba(167, 243, 208, 0.7);
}

html.terminals-active body [data-effects-menu-target="panel"],
body.terminals-active [data-effects-menu-target="panel"] {
  background: rgba(6, 10, 10, 0.94);
  border-color: rgba(52, 211, 153, 0.35);
  backdrop-filter: blur(10px);
}

html.terminals-active body [data-effects-menu-target="panel"] .effects-menu-item,
body.terminals-active [data-effects-menu-target="panel"] .effects-menu-item {
  color: #e5fff3;
}

html.terminals-active body [data-effects-menu-target="panel"] .effects-menu-item svg,
body.terminals-active [data-effects-menu-target="panel"] .effects-menu-item svg {
  color: #86efac;
}

html.terminals-active body [data-effects-menu-target="panel"] .effects-menu-item.terminals-on svg,
body.terminals-active [data-effects-menu-target="panel"] .effects-menu-item.terminals-on svg {
  color: #34d399;
}

@media (prefers-color-scheme: light) {
  html.star-scape-active body [data-effects-menu-target="panel"],
  body.star-scape-active [data-effects-menu-target="panel"],
  html.star-scape-active body [data-effects-menu-target="panel"] .effects-menu-item,
  body.star-scape-active [data-effects-menu-target="panel"] .effects-menu-item {
    color: #171717;
  }
  html.momentary-space-active body [data-effects-menu-target="panel"],
  body.momentary-space-active [data-effects-menu-target="panel"],
  html.momentary-space-active body [data-effects-menu-target="panel"] .effects-menu-item,
  body.momentary-space-active [data-effects-menu-target="panel"] .effects-menu-item {
    color: #171717;
  }
  html.star-scape-active body [data-effects-menu-target="panel"] .effects-menu-item svg,
  body.star-scape-active [data-effects-menu-target="panel"] .effects-menu-item svg {
    color: #404040;
  }
  html.momentary-space-active body [data-effects-menu-target="panel"] .effects-menu-item svg,
  body.momentary-space-active [data-effects-menu-target="panel"] .effects-menu-item svg {
    color: #404040;
  }
  html.star-scape-active body [data-effects-menu-target="panel"] .effects-menu-item.star-scape-on svg,
  body.star-scape-active [data-effects-menu-target="panel"] .effects-menu-item.star-scape-on svg {
    color: rgb(250, 204, 21);
  }
  html.momentary-space-active body [data-effects-menu-target="panel"] .effects-menu-item.momentary-space-on svg,
  body.momentary-space-active [data-effects-menu-target="panel"] .effects-menu-item.momentary-space-on svg {
    color: rgb(125, 211, 252);
  }
  html.star-scape-active body main .text-gray-900,
  html.star-scape-active body main .text-gray-800,
  html.star-scape-active body main .text-gray-700,
  html.star-scape-active body main .text-gray-600,
  html.star-scape-active body main .text-gray-500,
  html.star-scape-active body main .text-gray-400,
  body.star-scape-active main .text-gray-900,
  body.star-scape-active main .text-gray-800,
  body.star-scape-active main .text-gray-700,
  body.star-scape-active main .text-gray-600,
  body.star-scape-active main .text-gray-500,
  body.star-scape-active main .text-gray-400 {
    color: #f5f5f5 !important;
  }
  html.momentary-space-active body main .text-gray-900,
  html.momentary-space-active body main .text-gray-800,
  html.momentary-space-active body main .text-gray-700,
  html.momentary-space-active body main .text-gray-600,
  html.momentary-space-active body main .text-gray-500,
  html.momentary-space-active body main .text-gray-400,
  body.momentary-space-active main .text-gray-900,
  body.momentary-space-active main .text-gray-800,
  body.momentary-space-active main .text-gray-700,
  body.momentary-space-active main .text-gray-600,
  body.momentary-space-active main .text-gray-500,
  body.momentary-space-active main .text-gray-400 {
    color: #f5f5f5 !important;
  }
  html.star-scape-active body main a[href*="project=all"],
  body.star-scape-active main a[href*="project=all"] {
    color: #171717 !important;
  }
  html.momentary-space-active body main a[href*="project=all"],
  body.momentary-space-active main a[href*="project=all"] {
    color: #171717 !important;
  }

  html.terminals-active body [data-effects-menu-target="panel"],
  body.terminals-active [data-effects-menu-target="panel"],
  html.terminals-active body [data-effects-menu-target="panel"] .effects-menu-item,
  body.terminals-active [data-effects-menu-target="panel"] .effects-menu-item {
    color: #e5fff3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .homepage__star-field,
  .homepage__star,
  .homepage__star--glisten::before,
  .homepage__planet-shell,
  .homepage__planet-visual::before,
  .homepage__planet-visual::after,
  .homepage__planet-orbit,
  .homepage__asteroid,
  .homepage__asteroid-node,
  .homepage__asteroid-tail,
  .homepage__flight,
  .homepage__flight-ship,
  .homepage__flight-trail {
    animation: none;
  }

  .homepage__planet-shell {
    opacity: 0.72;
    transform: translate(-50%, -50%);
  }

  .homepage__planet-visual {
    filter: none;
    transform: none;
    transition: none;
  }

  .homepage__star {
    opacity: var(--star-opacity);
  }

  .homepage__star-field {
    opacity: 1;
    transform: none;
  }

  .homepage__planet {
    animation: none;
    opacity: 0.8;
  }

  .homepage__asteroid-node {
    opacity: 0.84;
    transform: translate(-50%, -50%);
  }
}

.terminals-effect-overlay,
.terminals-effect-vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  display: none;
  transition: opacity 1.4s ease;
}

.terminals-effect-overlay {
  background:
    linear-gradient(rgba(255,255,255,0.03) 50%, rgba(0,0,0,0.2) 50%),
    linear-gradient(90deg, rgba(0,255,159,0.02) 50%, rgba(0,0,0,0.1) 50%);
  background-size: 100% 4px, 3px 100%;
  animation: terminals-scanline 1.5s linear infinite;
}

.terminals-effect-vignette {
  box-shadow:
    inset 0 0 80px rgba(0, 0, 0, 0.95),
    inset 0 0 120px rgba(0, 255, 159, 0.1);
}

@keyframes terminals-scanline {
  0% { background-position: 0 0; }
  100% { background-position: 0 4px; }
}