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

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

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

.cb-haze {
  background:
    radial-gradient(ellipse 60% 30% at 30% 85%, rgba(92, 26, 27, 0.10), transparent 70%),
    radial-gradient(ellipse 50% 25% at 70% 90%, rgba(53, 30, 40, 0.08), transparent 70%),
    radial-gradient(ellipse 80% 20% at 50% 100%, rgba(92, 26, 27, 0.06), transparent 70%);
  mix-blend-mode: screen;
  animation: haze-drift 40s ease-in-out infinite alternate;
}

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

.cb-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;
}

/* Rose petals — CSS-only falling animation */
.rose-petals {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}
.petal {
  position: absolute;
  top: -30px;
  width: 12px;
  height: 14px;
  border-radius: 50% 0 50% 50%;
  opacity: 0;
  animation: petal-fall linear infinite;
  filter: drop-shadow(0 0 3px rgba(0,0,0,0.4));
}

/* Petal color variants */
.petal:nth-child(odd) {
  background: radial-gradient(ellipse at 30% 30%, #7A2528, #5C1A1B);
}
.petal:nth-child(even) {
  background: radial-gradient(ellipse at 30% 30%, #5A3A4A, #351E28);
}
.petal:nth-child(3n) {
  background: radial-gradient(ellipse at 30% 30%, #6B2022, #4A1518);
}

@keyframes petal-fall {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(0.8);
    opacity: 0;
  }
  8% {
    opacity: var(--petal-opacity, 0.7);
  }
  25% {
    transform: translate(calc(var(--sway) * 0.4), 28vh) rotate(calc(var(--rot) + 90deg)) scale(1);
  }
  50% {
    transform: translate(calc(var(--sway) * -0.3), 55vh) rotate(calc(var(--rot) + 200deg)) scale(0.9);
  }
  75% {
    transform: translate(calc(var(--sway) * 0.5), 82vh) rotate(calc(var(--rot) + 320deg)) scale(0.85);
  }
  92% {
    opacity: var(--petal-opacity, 0.7);
  }
  100% {
    transform: translate(calc(var(--sway) * -0.2), 115vh) rotate(calc(var(--rot) + 480deg)) scale(0.7);
    opacity: 0;
  }
}

.section {
  position: relative;
}
.section.has-invite-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/shared-assets/dr-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; }