:root {
  color-scheme: dark;
  --red: #fff;
  /* Larger hover glow: softness, reach, and time for one flickering light cycle. */
  --hover-glow-blur: 40px;
  --hover-glow-size: 20px;
  --hover-glow-breath: 800ms;
}

* { box-sizing: border-box; }
body { margin: 0; background: #000; }
#stars { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
canvas { image-rendering: pixelated; }
main {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.planet {
  position: relative;
  width: min(160px, 65vw);
  margin: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.planet::before {
  content: "";
  position: absolute;
  inset: 2%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #ffffffb0 0%, #ffffff50 46%, #ffffff18 60%, transparent 74%);
  opacity: var(--glow-opacity, .22);
  pointer-events: none;
}
.hover-glow {
  position: absolute;
  inset: 14%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 100ms steps(2, end);
}
/* The wrapper fades; the inner halo keeps breathing independently. */
.hover-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: white;
  /* Original broad halo; blur the center too so no disc is exposed on press. */
  filter: blur(7px);
  box-shadow:
    0 0 calc(var(--hover-glow-blur) * .375) calc(var(--hover-glow-size) * .4) #ffffffa6,
    0 0 var(--hover-glow-blur) var(--hover-glow-size) #ffffff66,
    0 0 calc(var(--hover-glow-blur) * 1.77) calc(var(--hover-glow-size) * 1.6) #ffffff24;
  animation: hover-glow-breathe var(--hover-glow-breath) steps(1, end) infinite;
}
/* Small, irregular brightness changes, like the stars; no size jumps. */
@keyframes hover-glow-breathe {
  0%, 100% { opacity: .74; }
  12% { opacity: .8; }
  28% { opacity: .76; }
  43% { opacity: .84; }
  59% { opacity: .78; }
  72% { opacity: .82; }
  89% { opacity: .77; }
}

.planet:is(:hover, :focus-visible, .touch-preview) .hover-glow { opacity: 1; }
#planet { position: relative; display: block; width: 100%; }
#face {
  position: absolute;
  inset: 0;
  width: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms steps(4, end);
}
.planet::after {
  content: "";
  position: absolute;
  inset: 9%;
  border: 1px solid var(--red);
  pointer-events: none;
  visibility: hidden;
}
.planet:is(:hover, :focus-visible, .touch-preview) #face { opacity: 1; }
.planet:is(:hover, :focus-visible, .touch-preview)::after { visibility: visible; }
figcaption {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  color: var(--red);
  font-family: monospace;
  font-size: 14px;
  text-align: center;
  visibility: hidden;
  pointer-events: none;
}
.planet:is(:hover, :focus-visible, .touch-preview) figcaption { visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  #face, .hover-glow { transition: none; }
  .hover-glow::before { animation: none; }
}

body { overflow: hidden; }

.planet { cursor: pointer; touch-action: manipulation; }
body:not(.descending):not(.on-surface) .planet:active :is(#planet, #face) {
  scale: .9 .9;
  transform-origin: center;
}
[hidden] { display: none !important; }
body.descending .planet { transform-origin: 50% 50%; pointer-events: none; }
body.descending .planet :is(#face, .hover-glow, figcaption),
body.descending .planet::after { visibility: hidden; }
body.on-surface { background: white; }
body.on-surface main, body.on-surface #stars { visibility: hidden; }
#whiteout { position: fixed; inset: 0; background: white; pointer-events: none; opacity: 0; }
.soul-pulse { position: fixed; pointer-events: none; filter: blur(var(--pulse-blur)); animation: soul-release var(--pulse-ms) steps(var(--pulse-steps), end) both; }
@keyframes soul-release {
  from { transform: scale(var(--pulse-start)); opacity: var(--pulse-opacity); }
  to { transform: scale(var(--pulse-scale)); opacity: 0; }
}