/**
 * wish-ambient.css — receiver-card page ambience (design parity).
 *
 * 1. Page wash: the background behind the opened card is a soft light
 *    cream tinted by THREE radial washes derived from the selected card
 *    style's gradient (PHP sets --dg-wash-a/-b/-a2 inline on .receiver-main).
 * 2. Per-occasion ambient particles (balloons / petals / hearts / leaves /
 *    sparkles / snow / planes) — generic motion classes, spawned by
 *    wish-ambient.js. Pure CSS keyframes, no GSAP.
 */

/* ── 1. Style-tinted page wash ──────────────────────────────────────── */
.receiver-main {
	background:
		radial-gradient(circle at 14% 14%, var(--dg-wash-a, rgba(157, 141, 232, 0.34)) 0%, transparent 44%),
		radial-gradient(circle at 86% 86%, var(--dg-wash-b, rgba(96, 80, 176, 0.34)) 0%, transparent 48%),
		radial-gradient(circle at 80% 8%,  var(--dg-wash-a2, rgba(157, 141, 232, 0.18)) 0%, transparent 40%),
		#f7f2ec;
}

/* ── 2. Ambient particle layer ──────────────────────────────────────── */
.dg-ambient-layer {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 80;
	overflow: hidden;
}

.dg-amb {
	position: absolute;
	will-change: transform, opacity;
	pointer-events: none;
}
.dg-amb svg { width: 100%; height: 100%; display: block; }

/* rise (balloons, hearts, bubbles, sparkles) — bottom → up */
.dg-amb.rise-a, .dg-amb.rise-b { bottom: -56px; }
.dg-amb.rise-a { animation: dg-amb-rise-a var(--life, 9s) linear forwards; }
.dg-amb.rise-b { animation: dg-amb-rise-b var(--life, 11s) linear forwards; }
@keyframes dg-amb-rise-a {
	0%   { transform: translate3d(0, 0, 0) scale(.5) rotate(-2deg); opacity: 0; }
	12%  { opacity: 1; }
	50%  { transform: translate3d(18px, -55vh, 0) scale(1) rotate(3deg); }
	100% { transform: translate3d(-10px, -118vh, 0) scale(.7) rotate(-3deg); opacity: 0; }
}
@keyframes dg-amb-rise-b {
	0%   { transform: translate3d(0, 0, 0) scale(.4) rotate(2deg); opacity: 0; }
	14%  { opacity: 1; }
	55%  { transform: translate3d(-20px, -62vh, 0) scale(1) rotate(-4deg); }
	100% { transform: translate3d(12px, -118vh, 0) scale(.6) rotate(4deg); opacity: 0; }
}

/* fall (snow, petals, leaves) — top → down with spin */
.dg-amb.fall-a, .dg-amb.fall-b { top: -56px; }
.dg-amb.fall-a { animation: dg-amb-fall-a var(--life, 9s) cubic-bezier(.42, .05, .58, 1) forwards; }
.dg-amb.fall-b { animation: dg-amb-fall-b var(--life, 11s) cubic-bezier(.42, .05, .58, 1) forwards; }
@keyframes dg-amb-fall-a {
	0%   { transform: translate3d(0, 0, 0) rotate(0); opacity: 0; }
	10%  { opacity: 1; }
	50%  { transform: translate3d(36px, 55vh, 0) rotate(200deg); }
	100% { transform: translate3d(-16px, 120vh, 0) rotate(420deg); opacity: 0; }
}
@keyframes dg-amb-fall-b {
	0%   { transform: translate3d(0, 0, 0) rotate(0); opacity: 0; }
	12%  { opacity: 1; }
	50%  { transform: translate3d(-40px, 58vh, 0) rotate(-180deg); }
	100% { transform: translate3d(18px, 120vh, 0) rotate(-380deg); opacity: 0; }
}

/* fly (paper planes) — cross the screen horizontally */
.dg-amb.fly { left: 0; animation: dg-amb-fly var(--life, 7s) linear forwards; }
@keyframes dg-amb-fly {
	0%   { transform: translate3d(-16vw, 0, 0) rotate(8deg); opacity: 0; }
	12%  { opacity: 1; }
	88%  { opacity: 1; }
	100% { transform: translate3d(116vw, -18vh, 0) rotate(6deg); opacity: 0; }
}

/* twinkle halo for sparkles */
.dg-amb.spark { border-radius: 50%; }
.dg-amb.spark::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 0 8px 2px currentColor;
	animation: dg-amb-tw 2.2s ease-in-out infinite;
}
@keyframes dg-amb-tw {
	0%, 100% { opacity: .4; transform: scale(.85); }
	50%      { opacity: 1;  transform: scale(1.25); }
}

/* balloon string */
.dg-amb.balloon::after {
	content: "";
	position: absolute;
	bottom: -52px; left: 50%;
	transform: translateX(-50%);
	width: 1.5px; height: 48px;
	background: linear-gradient(180deg, currentColor, transparent);
	opacity: .5;
}

/* ── Animation on/off toggle (appears once the card is opened) ──────── */
.dg-ambient-toggle {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 90;
	display: none;
	align-items: center;
	gap: .4rem;
	padding: .5rem .85rem;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.85);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	color: #46415c;
	font-size: .8rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	box-shadow: 0 6px 18px -8px rgba(33, 28, 53, 0.25);
}
.dg-ambient-toggle.is-shown { display: inline-flex; }

@media (prefers-reduced-motion: reduce) {
	.dg-amb { animation: none !important; display: none !important; }
	.dg-ambient-toggle { display: none !important; }
}