/* Seasonal background effects. Still under reduced motion; rain hidden. */

.bgfx {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;          /* same as .page-bg: no resize as phone bars slide */
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  --fall: calc(100vh + 80px);
}
/* Portal picker: contained in its little card instead of the viewport. */
.bgfx--demo {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  z-index: 0;
  border-radius: inherit;
  --fall: 80px;
}
.bgfx-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.bgfx-p {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
}
.bgfx-p > i,
.bgfx-p > svg { display: block; }

/* Snow: soft white dots. */
.bgfx--snow .bgfx-p > i {
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: #fff;
  opacity: 0.75;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.55);
}

/* Rain: thin slanted streaks. */
.bgfx--rain .bgfx-p { width: 1.5px; }
.bgfx--rain .bgfx-p > i {
  width: 1.5px;
  height: var(--s);
  border-radius: 1px;
  background: linear-gradient(transparent, rgba(190, 215, 255, 0.5));
  transform: rotate(8deg);
}

/* Hearts / pumpkins / eggs: the <symbol> art, a touch see-through so links stay readable. */
.bgfx--hearts .bgfx-p > svg,
.bgfx--pumpkins .bgfx-p > svg,
.bgfx--eggs .bgfx-p > svg {
  width: var(--s);
  height: auto;
  opacity: 0.9;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
}
.bgfx--hearts .bgfx-p > svg   { aspect-ratio: 1; }
.bgfx--pumpkins .bgfx-p > svg { aspect-ratio: 100 / 90; }
.bgfx--eggs .bgfx-p > svg     { aspect-ratio: 40 / 52; }

@media (prefers-reduced-motion: reduce) {
  .bgfx--rain { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .bgfx-p {
    top: -40px;
    will-change: transform;
    animation: bgfx-fall var(--d) linear var(--t) infinite;
  }
  .bgfx--demo .bgfx-p { top: -14px; }
  .bgfx--rain .bgfx-p { animation-name: bgfx-fall-slant; }

  /* Side-to-side drift on the inner element, so it adds to the fall. */
  .bgfx--snow .bgfx-p > i { animation: bgfx-sway 6.5s ease-in-out var(--t) infinite alternate; }
  .bgfx--hearts .bgfx-p > svg,
  .bgfx--pumpkins .bgfx-p > svg,
  .bgfx--eggs .bgfx-p > svg { animation: bgfx-tumble 5s ease-in-out var(--t) infinite alternate; }
}

@keyframes bgfx-fall       { from { transform: translateY(0); } to { transform: translateY(var(--fall)); } }
@keyframes bgfx-fall-slant { from { transform: translate(0, 0); } to { transform: translate(calc(var(--fall) * -0.14), var(--fall)); } }
@keyframes bgfx-sway       { from { transform: translateX(-22px); } to { transform: translateX(22px); } }
@keyframes bgfx-tumble {
  from { transform: translateX(-16px) rotate(-28deg); }
  to   { transform: translateX(16px) rotate(28deg); }
}
.bgfx--demo .bgfx-p > i,
.bgfx--demo .bgfx-p > svg { animation-name: none; }   /* too small to need the drift */