/* The actual homepage heart/bokeh effect, reused for the guide page. */
.wrap{position:relative;z-index:2}
.night-atmosphere{position:fixed;z-index:0;inset:0;overflow:hidden;pointer-events:none;user-select:none;background:radial-gradient(ellipse at 0% 45%,#e4b88b30,transparent 32%),radial-gradient(ellipse at 100% 65%,#dc9e8a26,transparent 30%)}
.night-garland{position:absolute;top:45px;width:min(31vw,400px);height:150px;overflow:visible}
.night-garland-left{left:-10px}.night-garland-right{right:-10px;transform:scaleX(-1)}
.night-wire{fill:none;stroke:#a36b45;stroke-width:1.25;opacity:.3}
.night-bulb{fill:#e8b077;filter:drop-shadow(0 0 4px #f0ac648c) drop-shadow(0 0 12px #da8e4b45);animation:night-twinkle 6s ease-in-out infinite alternate;animation-delay:var(--delay,0s)}
/* A separate viewport layer lets hearts rise from below the screen. */
.night-particles {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  contain: strict;
  pointer-events: none;
  user-select: none;
}

.night-particle {
  position: absolute;
  left: var(--x);
  bottom: -75px;
  width: var(--size);
  height: var(--size);
  opacity: 0;
  will-change: transform, opacity;
  animation-duration: var(--duration);
  animation-delay: var(--delay, 0s);
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

.night-heart {
  overflow: visible;
  filter: blur(var(--softness, 0px)) drop-shadow(0 0 4px rgba(227, 137, 93, .20));
  animation-name: night-rise;
}

.night-heart path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.night-heart.is-filled path {
  fill: currentColor;
  stroke-width: .65;
}

.night-bokeh {
  border-radius: 50%;
  background: currentColor;
  filter: blur(var(--softness, 10px));
  animation-name: night-light-float;
  animation-timing-function: ease-in-out;
}

.night-particles.is-paused .night-particle { animation-play-state: paused; }

@keyframes night-twinkle {
  from { opacity: .57; }
  to { opacity: 1; }
}

@keyframes night-rise {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(var(--turn-start)) scale(.85);
  }
  8% { opacity: var(--alpha); }
  45% {
    transform: translate3d(var(--sway), calc((100vh + 160px) * -.45), 0) rotate(var(--turn-end)) scale(1);
  }
  84% { opacity: var(--alpha); }
  100% {
    opacity: 0;
    transform: translate3d(var(--drift), calc(-100vh - 160px), 0) rotate(var(--turn-start)) scale(.95);
  }
}

@keyframes night-light-float {
  0% { opacity: 0; transform: translate3d(0, 35px, 0) scale(.85); }
  22% { opacity: var(--alpha); }
  68% { opacity: var(--alpha); }
  100% { opacity: 0; transform: translate3d(var(--drift), -160px, 0) scale(1.14); }
}


/* Paint particles over section backgrounds but beneath page content. */
.night-particles{z-index:1}
@media(max-width:640px){.night-garland{width:39vw;height:100px;top:68px}.footer-bottom{display:flex;justify-content:space-between}.footer-bottom>span{grid-column:auto}}
@media(prefers-reduced-motion:reduce){.night-bulb,.night-particle{animation:none!important}}
@media print{.night-atmosphere,.night-particles{display:none!important}}