:root {
  color-scheme: dark;
  background: #080908;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  width: 100%;
  min-height: 100%;
}
body {
  background: #080908;
  overflow: hidden;
}
main {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
}
.ambient-floor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 48% 29% at 28% 83%, rgba(176, 151, 48, 0.026), transparent 100%),
    radial-gradient(ellipse 48% 29% at 77% 83%, rgba(176, 151, 48, 0.026), transparent 100%),
    linear-gradient(180deg, #080908 0%, #080908 36%, #0b0c0b 75%, #10110f 100%);
}
/* Small card-coloured orbs rise from the focused card and fade independently. */
#card-fireflies {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
}
.firefly-orb {
  position: absolute;
  width: var(--orb-size);
  height: var(--orb-size);
  border-radius: 50%;
  background: color-mix(in srgb, var(--orb-color) 58%, #f6f6f4);
  box-shadow:
    0 0 7px 2px color-mix(in srgb, var(--orb-color) 55%, transparent),
    0 0 17px color-mix(in srgb, var(--orb-color) 24%, transparent);
  opacity: 0;
  will-change: transform, opacity;
  animation: orb-rise var(--orb-life) linear forwards;
}
@keyframes orb-rise {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.5);
  }
  12% {
    opacity: 0.85;
  }
  30% {
    transform: translate3d(var(--drift-a), calc(var(--rise) * -0.28), 0) scale(0.9);
  }
  58% {
    opacity: 0.95;
    transform: translate3d(var(--drift-b), calc(var(--rise) * -0.58), 0) scale(1);
  }
  82% {
    opacity: 0.55;
    transform: translate3d(var(--drift-c), calc(var(--rise) * -0.83), 0) scale(0.7);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--drift-d), calc(var(--rise) * -1), 0) scale(0.2);
  }
}
@media (prefers-reduced-motion: reduce) {
  #card-fireflies {
    display: none;
  }
}