/**
 * Packaging scroll stage — PDP-only animation.
 * Bottle → nests into open box → box closes → ships off-screen right.
 * Direct port from dist/peptidepharm.html lines 585-596 + 2940-3032.
 */

.pkg-stage {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 480px;
	perspective: 1400px;
	overflow: hidden;
	border-radius: var(--radius-lg);
}
.pkg-stage::after {
	content: "";
	position: absolute;
	left: 8%;
	right: 8%;
	bottom: 8%;
	height: 24px;
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55), transparent 70%);
	filter: blur(14px);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
	z-index: 0;
}
.pkg-stage.is-shipping::after { opacity: 1; }

.pkg {
	position: absolute;
	left: 50%;
	top: 50%;
	will-change: transform, opacity;
	user-select: none;
	-webkit-user-drag: none;
	pointer-events: none;
}

.pkg--bottle {
	width: 34%;
	max-width: 200px;
	transform: translate(-50%, -50%);
	z-index: 3;
	filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.55)) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4));
}
.pkg--open {
	width: 78%;
	max-width: 520px;
	transform: translate(-50%, -50%) scale(0.85);
	z-index: 2;
	opacity: 0;
	filter: drop-shadow(0 28px 36px rgba(0, 0, 0, 0.6)) drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
}
.pkg--closed {
	width: 74%;
	max-width: 480px;
	transform: translate(-50%, -50%) scale(0.85);
	z-index: 1;
	opacity: 0;
	filter: drop-shadow(0 28px 36px rgba(0, 0, 0, 0.6)) drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
}

.pkg-stage__cue {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: 0.22em;
	color: var(--silver-3);
	text-transform: uppercase;
	opacity: 0.7;
	display: flex;
	align-items: center;
	gap: 8px;
	z-index: 5;
	pointer-events: none;
}
.pkg-stage__cue::after {
	content: "↓";
	font-size: 11px;
	animation: pkgCueDrop 1.6s ease-in-out infinite;
}
@keyframes pkgCueDrop {
	0%, 100% { transform: translateY(0); opacity: 0.7; }
	50% { transform: translateY(4px); opacity: 0.3; }
}
.pkg-stage.is-active .pkg-stage__cue { opacity: 0; }

@media (max-width: 760px) {
	.pkg-stage { min-height: 360px; }
	.pkg--open, .pkg--closed { display: none; }
	.pkg--bottle { width: 50%; max-width: 240px; }
	.pkg-stage__cue { display: none; }
}