.menu-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  contain: strict;
  transform: translateZ(0);
}
body.menu-page > .menu-fx {
  position: fixed;
  z-index: 1;
}
.fx-bit {
  position: absolute;
  top: 0;
  left: var(--x, 50%);
  width: var(--size, 6px);
  height: var(--size, 6px);
  opacity: var(--opacity, 0.7);
  animation: fx-fall var(--dur, 10s) linear var(--delay, 0s) infinite;
  will-change: transform;
  backface-visibility: hidden;
  contain: layout style;
}

.fx-snow,
.fx-christmas:not(.fx-ornament):not(.fx-spark) {
  border-radius: 50%;
  background: #eef6ff;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
}
.fx-far {
  animation-timing-function: linear;
  opacity: calc(var(--opacity, 0.7) * 0.85);
}
.fx-mid {
  animation-name: fx-fall-sway;
}
.fx-near {
  animation-name: fx-fall-sway;
  z-index: 1;
}
.fx-flake::before,
.fx-flake::after {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: inherit;
  opacity: 0.55;
}
.fx-flake::before {
  transform: scaleX(0.35);
}
.fx-flake::after {
  transform: scaleY(0.35);
}

.fx-christmas.fx-ornament {
  border-radius: 50%;
  animation-name: fx-fall-sway;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.fx-ornament::after {
  content: "";
  position: absolute;
  top: -22%;
  left: 50%;
  width: 28%;
  height: 28%;
  transform: translateX(-50%);
  border-radius: 2px;
  background: #d4a017;
}
.fx-orn-0 {
  background: #d94a3a;
}
.fx-orn-1 {
  background: #1f8a52;
}
.fx-orn-2 {
  background: #d4a017;
}
.fx-spark {
  border-radius: 50%;
  background: #fff8dc;
  box-shadow: 0 0 6px rgba(255, 230, 150, 0.45);
  animation-name: fx-twinkle;
}

.fx-leaves {
  border-radius: 70% 8% 55% 15% / 40% 20% 60% 25%;
  background: #9a4018;
  transform-origin: 60% 40%;
  animation-name: fx-leaf;
}
.fx-leaf-1 {
  background: #8a2a14;
  border-radius: 60% 15% 50% 20% / 45% 25% 55% 30%;
}
.fx-leaf-2 {
  background: #8a6a14;
  border-radius: 65% 12% 48% 22% / 42% 28% 58% 20%;
}
.fx-leaf-3 {
  background: #7a3510;
}

/* Transform-only falls — compositor friendly */
@keyframes fx-fall {
  0% { transform: translate3d(0, -12vh, 0); }
  100% { transform: translate3d(var(--drift, 12px), 112vh, 0); }
}
@keyframes fx-fall-sway {
  0% { transform: translate3d(0, -12vh, 0) rotate(0deg); }
  50% { transform: translate3d(calc(var(--drift, 12px) * 0.55), 50vh, 0) rotate(-5deg); }
  100% { transform: translate3d(var(--drift, 12px), 112vh, 0) rotate(4deg); }
}
@keyframes fx-leaf {
  0% { transform: translate3d(0, -14vh, 0) rotate(0deg); }
  50% { transform: translate3d(calc(var(--drift) * 0.5), 50vh, 0) rotate(160deg); }
  100% { transform: translate3d(var(--drift), 114vh, 0) rotate(var(--spin)); }
}
@keyframes fx-twinkle {
  0% { opacity: 0; transform: translate3d(0, -10vh, 0) scale(0.4); }
  20% { opacity: var(--opacity, 0.8); transform: translate3d(calc(var(--drift) * 0.2), 15vh, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(var(--drift), 110vh, 0) scale(0.35); }
}

.branding-preview {
  position: relative;
}
.branding-preview .menu-fx {
  border-radius: inherit;
  z-index: 1;
}
.branding-preview .bp-hero,
.branding-preview .bp-card {
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .menu-fx { display: none !important; }
}