/* Approved Obsidian background and fireflies. Grid x2 / 24%, particles 84%. */
#hopneo-atmosphere { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; background:var(--p10-bg); --grid-scale:2; --grid-alpha:.0168; --particle-opacity:.84; }
html:root #root { position:relative; z-index:auto; }
html:root body>.container:has(>.doc-back) { position:relative; z-index:1; }
html:root .hn-shell.hn-shell { background:transparent; }
#hopneo-atmosphere :is(.p10-grid,.pp-fireflies) { position:absolute; inset:0; pointer-events:none; }
#hopneo-atmosphere .p10-grid { mask-image:linear-gradient(180deg,transparent 0,black 170px,black 88%,transparent); }
#hopneo-atmosphere .p10-grid-diagonal { background-image:repeating-linear-gradient(45deg,transparent 0 calc(72px * var(--grid-scale) - 1px),rgb(var(--p11-accent-rgb) / var(--grid-alpha)) calc(72px * var(--grid-scale) - 1px) calc(72px * var(--grid-scale))),repeating-linear-gradient(-45deg,transparent 0 calc(72px * var(--grid-scale) - 1px),rgb(var(--p11-accent-rgb) / var(--grid-alpha)) calc(72px * var(--grid-scale) - 1px) calc(72px * var(--grid-scale))); }
#hopneo-atmosphere > .pp-fireflies { overflow:hidden; opacity:var(--particle-opacity); }
#hopneo-atmosphere[data-paused='true'] * { animation-play-state:paused !important; }
/* Fireflies follow smooth, irregular curves, with no straight upward stream. */
#hopneo-atmosphere .pp-firefly {
  position: absolute;
  width: 0;
  height: 0;
}
#hopneo-atmosphere .pp-firefly-dot {
  display: block;
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  background: var(--dot-color);
  box-shadow: 0 0 10px 1.4px var(--dot-color);
  opacity: .22;
  offset-path: var(--flight-path);
  offset-distance: var(--flight-phase);
  offset-rotate: 0deg;
  animation: pp-flight var(--flight-time) linear infinite, pp-breathe var(--breath-time) ease-in-out infinite;
  animation-delay: var(--flight-delay), var(--breath-delay);
}
@keyframes pp-flight {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}
@keyframes pp-breathe {
  0%, 100% { opacity: .2; }
  44% { opacity: var(--dot-peak); }
  72% { opacity: .3; }
}

@media(max-width:767px) {
  #hopneo-atmosphere .pp-firefly:nth-child(n+11) { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  #hopneo-atmosphere * { animation:none !important; }
  #hopneo-atmosphere .pp-firefly-dot { opacity:.3; }
}
@media print { #hopneo-atmosphere { display:none !important; } }