.forest-backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.fb-base,
.fb-layer,
.fb-mist,
.fb-vignette {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
}

.fb-layer { pointer-events: none; }

.fb-mist {
  background:
    radial-gradient(ellipse 60% 30% at 30% 85%, rgba(160, 190, 170, 0.14), transparent 70%),
    radial-gradient(ellipse 50% 25% at 70% 90%, rgba(140, 170, 150, 0.1), transparent 70%),
    radial-gradient(ellipse 80% 20% at 50% 100%, rgba(180, 200, 180, 0.12), transparent 70%);
  mix-blend-mode: screen;
  animation: mist-drift 40s ease-in-out infinite alternate;
}

@keyframes mist-drift {
  0%   { transform: translate3d(-2%, 0, 0); }
  100% { transform: translate3d(2%, -1%, 0); }
}

.fb-vignette {
  background:
    radial-gradient(ellipse 90% 100% at 50% 50%, transparent 55%, rgba(0,0,0,0.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 15%, transparent 75%, rgba(0,0,0,0.65) 100%);
  z-index: 2;
}

.fb-rays { mix-blend-mode: screen; }

.fireflies {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}
.firefly {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #f4e4c6 0%, #D1B28C 30%, rgba(209, 178, 140, 0) 70%);
  box-shadow:
    0 0 6px 2px rgba(233, 216, 190, 0.55),
    0 0 14px 6px rgba(209, 178, 140, 0.25);
  animation: firefly-float 10s ease-in-out infinite;
  opacity: 0;
}
@keyframes firefly-float {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) scale(0.6); }
  15%  { opacity: 1; transform: translate3d(calc(var(--drift) * 0.3), calc(var(--rise) * 0.3), 0) scale(1); }
  50%  { opacity: 0.8; transform: translate3d(calc(var(--drift) * 0.7), calc(var(--rise) * 0.7), 0) scale(1.1); }
  85%  { opacity: 0.9; transform: translate3d(var(--drift), var(--rise), 0) scale(0.9); }
  100% { opacity: 0; transform: translate3d(calc(var(--drift) * 1.2), calc(var(--rise) * 1.2), 0) scale(0.6); }
}

.section {
  position: relative;
}
.section.has-invite-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('assets/invite-back.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
.section.has-invite-bg > * { position: relative; z-index: 1; }

.falling-leaves {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.leaf {
  position: absolute;
  top: -40px;
  animation: leaf-fall linear infinite;
  filter: drop-shadow(0 0 4px rgba(0,0,0,0.4));
  opacity: 0.85;
}
@keyframes leaf-fall {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  8%   { opacity: 0.85; }
  50%  { transform: translate(60px, 55vh) rotate(calc(var(--rot) + 220deg)); }
  92%  { opacity: 0.85; }
  100% { transform: translate(-40px, 115vh) rotate(calc(var(--rot) + 480deg)); opacity: 0; }
}