#coupon-parachute-layer {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 9000;
	overflow: visible;
}

.cp-gutter {
	position: absolute;
	top: 0;
	bottom: 0;
	overflow-x: hidden;
	overflow-y: visible;
	pointer-events: none;
}

.cp-drop {
	position: absolute;
	top: -100px;
	left: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	pointer-events: auto;
	cursor: pointer;
	transform: translateX(-50%) scale(0.62);
	transform-origin: 50% 100%;
	will-change: top, transform;
	filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45));
	transition: filter 0.2s ease;
	animation:
		cp-fall var(--cp-fall-duration, 20s) linear forwards,
		cp-sway var(--cp-sway-duration, 4.2s) ease-in-out infinite alternate,
		cp-bob-y var(--cp-bob-duration, 3.6s) ease-in-out infinite alternate;
}

.cp-drop:hover {
	filter: drop-shadow(0 10px 18px rgba(245, 130, 32, 0.55));
}

.cp-drop.is-landed {
	animation:
		cp-sway var(--cp-sway-duration, 3.8s) ease-in-out infinite alternate,
		cp-bob-y var(--cp-bob-duration, 2.6s) ease-in-out infinite alternate;
}

.cp-dismiss {
	position: absolute;
	top: -12px;
	right: -16px;
	z-index: 2;
	width: 26px;
	height: 26px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(15, 10, 30, 0.85);
	color: #fff;
	font-size: 18px;
	line-height: 24px;
	cursor: pointer;
	opacity: 0.75;
	pointer-events: auto;
}

.cp-dismiss:hover {
	opacity: 1;
	background: rgba(40, 30, 60, 0.95);
}

.cp-parachute {
	position: relative;
	width: 88px;
	height: 52px;
	animation:
		cp-tilt var(--cp-tilt-duration, 4.6s) ease-in-out infinite alternate,
		cp-parachute-bob var(--cp-bob-duration, 2.6s) ease-in-out infinite alternate;
	transform-origin: 50% 100%;
}

.cp-canopy {
	position: absolute;
	left: 50%;
	top: 0;
	width: 88px;
	height: 44px;
	margin-left: -44px;
	border-radius: 50% 50% 42% 42%;
	background:
		radial-gradient(ellipse 80% 70% at 50% 18%, rgba(255, 255, 255, 0.35), transparent 58%),
		linear-gradient(180deg, #ff9f43 0%, #f58220 42%, #e86a10 100%);
	box-shadow:
		inset 0 -6px 12px rgba(0, 0, 0, 0.18),
		0 4px 10px rgba(0, 0, 0, 0.25);
}

.cp-canopy::before,
.cp-canopy::after {
	content: '';
	position: absolute;
	top: 18px;
	width: 1px;
	height: 26px;
	background: rgba(255, 255, 255, 0.55);
}

.cp-canopy::before { left: 22px; transform: rotate(-8deg); }
.cp-canopy::after { right: 22px; transform: rotate(8deg); }

.cp-strings {
	position: absolute;
	left: 50%;
	top: 38px;
	width: 64px;
	height: 34px;
	margin-left: -32px;
}

.cp-string {
	position: absolute;
	bottom: 0;
	width: 1px;
	height: 100%;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(200, 200, 200, 0.45));
	transform-origin: top center;
	animation: cp-string-sway var(--cp-string-duration, 2.9s) ease-in-out infinite alternate;
}

.cp-string:nth-child(1) { left: 8px; animation-delay: 0s; }
.cp-string:nth-child(2) { left: 24px; animation-delay: 0.15s; }
.cp-string:nth-child(3) { right: 24px; animation-delay: 0.3s; }
.cp-string:nth-child(4) { right: 8px; animation-delay: 0.45s; }

.cp-gift-box {
	position: relative;
	width: 54px;
	height: 54px;
	margin-top: 2px;
	border-radius: 10px;
	background:
		linear-gradient(145deg, #ffd166 0%, #f58220 55%, #d95d14 100%);
	box-shadow:
		inset 0 2px 4px rgba(255, 255, 255, 0.35),
		inset 0 -4px 8px rgba(0, 0, 0, 0.2),
		0 6px 14px rgba(0, 0, 0, 0.35);
	animation: cp-box-wiggle var(--cp-box-duration, 2.1s) ease-in-out infinite;
	transform-origin: 50% 0%;
}

.cp-gift-box::before,
.cp-gift-box::after {
	content: '';
	position: absolute;
	background: rgba(255, 255, 255, 0.82);
}

.cp-gift-box::before {
	left: 50%;
	top: 0;
	width: 10px;
	height: 100%;
	margin-left: -5px;
	border-radius: 3px;
}

.cp-gift-box::after {
	left: 0;
	top: 50%;
	width: 100%;
	height: 10px;
	margin-top: -5px;
	border-radius: 3px;
}

.cp-gift-ribbon {
	position: absolute;
	top: -8px;
	left: 50%;
	width: 18px;
	height: 18px;
	margin-left: -9px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #fff6d8, #f58220);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

.cp-drop.is-gift .cp-canopy {
	background:
		radial-gradient(ellipse 80% 70% at 50% 18%, rgba(255, 255, 255, 0.35), transparent 58%),
		linear-gradient(180deg, #c084fc 0%, #9333ea 42%, #7e22ce 100%);
}

.cp-drop.is-gift .cp-gift-box {
	background:
		linear-gradient(145deg, #e9d5ff 0%, #a855f7 55%, #7c3aed 100%);
}

@keyframes cp-fall {
	from { top: -100px; }
	to { top: var(--cp-land-top, 58vh); }
}

@keyframes cp-sway {
	from {
		transform: translateX(calc(-50% - var(--cp-sway-amp, 9px))) rotate(-4deg) scale(0.62);
	}
	to {
		transform: translateX(calc(-50% + var(--cp-sway-amp, 9px))) rotate(4deg) scale(0.62);
	}
}

@keyframes cp-bob-y {
	from { margin-top: -3px; }
	to { margin-top: 4px; }
}

@keyframes cp-tilt {
	from { transform: rotate(-8deg); }
	to { transform: rotate(8deg); }
}

@keyframes cp-string-sway {
	from { transform: rotate(-6deg); }
	to { transform: rotate(6deg); }
}

@keyframes cp-box-wiggle {
	0%, 100% { transform: rotate(-3deg) translateY(0); }
	50% { transform: rotate(3deg) translateY(2px); }
}

@keyframes cp-parachute-bob {
	from { margin-top: -3px; }
	to { margin-top: 4px; }
}

@media (max-width: 1023px) {
	#coupon-parachute-layer {
		display: none !important;
	}
}