:root {
  color-scheme: dark;
  --ink: #07070c;
  --flare: #f0c27a;
  --mx: 50%;
  --my: 42%;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  touch-action: manipulation;
}

body {
  overflow: hidden;
  background: var(--ink);
  cursor: none;
  transition: background-color 0.7s ease;
}

body.flash .veil {
  animation: bloom 0.7s ease;
}

.veil {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      32rem circle at var(--mx) var(--my),
      color-mix(in srgb, var(--flare) 26%, transparent),
      transparent 46%
    ),
    radial-gradient(120% 80% at 50% 120%, color-mix(in srgb, var(--flare) 14%, var(--ink)), transparent 55%);
}

.orb {
  position: fixed;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle at 35% 30%,
    color-mix(in srgb, var(--flare) 75%, white),
    var(--flare) 52%,
    color-mix(in srgb, var(--flare) 50%, black)
  );
  box-shadow:
    0 0 16px 5px color-mix(in srgb, var(--flare) 55%, transparent),
    0 0 70px 22px color-mix(in srgb, var(--flare) 22%, transparent);
  z-index: 3;
}

#stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

@media (hover: none) {
  body {
    cursor: auto;
  }

  .orb {
    display: none;
  }
}

@keyframes bloom {
  from {
    filter: brightness(1.55);
  }
  to {
    filter: none;
  }
}