/* =========================================================
   Background scenes + particle effects
   Used on the bouquet stage, letter preview and share page.
   ========================================================= */

.scene-rose-garden{ background: radial-gradient(circle at 30% 20%, #F6D8DD, transparent 55%), radial-gradient(circle at 80% 70%, #C9E4C0, transparent 50%), linear-gradient(160deg, #FDEFEF, #E8F3E2); }
.scene-cherry-blossom{ background: radial-gradient(circle at 20% 15%, #FBE1E8, transparent 60%), linear-gradient(160deg, #FFF6F8, #F6DCE6); }
.scene-beach-sunset{ background: linear-gradient(180deg, #F7C9A0 0%, #F1997E 45%, #E8748B 75%, #C96A8C 100%); }
.scene-lavender-field{ background: linear-gradient(180deg, #E4D6F2 0%, #C9B6E4 55%, #A98FCB 100%); }
.scene-cozy-cafe{ background: radial-gradient(circle at 70% 30%, #F3DCB8, transparent 55%), linear-gradient(160deg, #EFDCC4, #D8B78D); }
.scene-dreamy-sky{ background: linear-gradient(180deg, #D9EBF6 0%, #EAD9F0 55%, #F6DCE6 100%); }
.scene-starry-night{ background: radial-gradient(circle at 20% 20%, #3B3560, transparent 40%), linear-gradient(180deg, #1D1A3A 0%, #362B55 100%); }
.scene-luxury-white{ background: linear-gradient(160deg, #FFFFFF, #F1EAE0); }
.scene-candle-dinner{ background: radial-gradient(circle at 50% 80%, #F3C787, transparent 55%), linear-gradient(180deg, #4A2E2A, #7A4433); }
.scene-romantic-gradient{ background: linear-gradient(135deg, #F1CDD3, #CBB9E3 50%, #F3C6A3); }

.scene-starry-night .stars{ position:absolute; inset:0; background-image: radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 60% 70%, #fff, transparent), radial-gradient(1px 1px at 80% 20%, #fff, transparent), radial-gradient(1px 1px at 40% 80%, #fff, transparent), radial-gradient(1.5px 1.5px at 90% 50%, #fff, transparent); opacity:.8; }

/* particles */
.fx-sparkle{
  position:absolute; width:5px; height:5px; border-radius:50%;
  background: radial-gradient(circle, #fff, transparent 70%);
  animation: sparkleBlink ease-in-out infinite;
}
.fx-snow{
  position:absolute; top:-5%; border-radius:50%; background:#fff; opacity:.85;
  animation: snowFall linear infinite;
}
.fx-rain{
  position:absolute; top:-5%; width:1.5px; height:16px; background: rgba(255,255,255,.55);
  animation: rainFall linear infinite;
}
.fx-heart{ position:absolute; top:-6%; animation: petalFall linear infinite; }
.fx-bokeh{
  position:absolute; border-radius:50%; background: radial-gradient(circle, rgba(255,255,255,.55), transparent 70%);
  animation: bokehDrift ease-in-out infinite alternate;
}

/* background customization page */
.bg-picker{ display:grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap:12px; }
.bg-tile{
  height: 74px; border-radius: var(--radius-m); position:relative; overflow:hidden;
  border: 2px solid transparent; transition: transform .2s var(--ease);
  display:flex; align-items:flex-end; padding:8px;
}
.bg-tile span{ background: rgba(255,255,255,.75); font-size:0.68rem; padding:2px 7px; border-radius:6px; color:var(--plum); }
.bg-tile.selected{ border-color: var(--gold); transform: translateY(-2px); }

.effect-chip-row{ display:flex; flex-wrap:wrap; gap:10px; }
.effect-chip{
  padding:9px 16px; border-radius:999px; font-size:0.82rem; border: 1.5px solid rgba(62,44,63,.1); color: var(--plum-quiet);
}
.effect-chip.selected{ background: var(--plum); color: var(--cream); border-color:var(--plum); }