:root {
	--pack-image: url("/images/C4CardPack.png");

	/* Make it "loader sized" (easy to scale) */
	--pack-width: 180px;
	--pack-height: 270px;

	--tear-y: 20%;

	--card-width: 86px;
	--card-height: 140px;

	/* Loader cadence */
	--cycle: 1.8s;
	/* overall loop speed */
	--idle: 12%;
	/* idle time at start/end */

	/* Depth */
	--z-card: 110px;
	--z-pack: 20px;
}

/* Scene */
.pack-scene {
	width: var(--pack-width);
	height: var(--pack-height);
	position: relative;
	perspective: 1200px;
	margin: 0 auto;
	transform: translateZ(0);
}

/* Optional: make it feel "icon-like" rather than big scene */
.pack-scene * {
	backface-visibility: hidden;
	transform-style: preserve-3d;
}

/* --- PACK LAYERS --- */
.pack-layer {
	position: absolute;
	inset: 0;
	background-image: var(--pack-image);
	background-size: cover;
	background-position: center;
	will-change: transform, opacity, filter;
}

/* A subtle moving highlight overlay so it reads at small size */
.pack-shine {
	z-index: 30;
	background-image: none;
	pointer-events: none;
	opacity: 0.0;
	mix-blend-mode: screen;
	background:
		linear-gradient(120deg,
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, 0.22) 35%,
			rgba(255, 255, 255, 0) 70%);
	animation: shine-sweep var(--cycle) ease-in-out infinite;
}

.pack-bottom {
	z-index: 10;
	clip-path: polygon(0% 100%, 100% 100%,
			100% calc(var(--tear-y) + 0.5px),
			85% 24.1%, 70% calc(var(--tear-y) + 0.5px),
			55% 23.1%, 40% calc(var(--tear-y) + 0.5px),
			25% 24.1%, 10% calc(var(--tear-y) + 0.5px),
			0% calc(var(--tear-y) + 0.5px));
	transform: translateZ(var(--z-pack));
	animation: pack-body var(--cycle) ease-in-out infinite;
}

.pack-top {
	z-index: 20;
	transform-origin: center var(--tear-y);
	clip-path: polygon(0% 0%, 100% 0%,
			100% var(--tear-y),
			85% 24%, 70% var(--tear-y),
			55% 23%, 40% var(--tear-y),
			25% 24%, 10% var(--tear-y),
			0% var(--tear-y));
	transform: translateZ(var(--z-pack));
	animation: pack-lid var(--cycle) cubic-bezier(0.2, 0.9, 0.2, 1) infinite;
}

/* --- CARDS --- */
.cards-wrapper {
	position: absolute;
	left: 50%;
	bottom: 14px;
	width: var(--card-width);
	height: var(--card-height);
	transform: translateX(-50%) translateZ(0);
	z-index: 1;
	pointer-events: none;
}

.card {
	position: absolute;
	inset: 0;
	border-radius: 10px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	background: #050505;
	opacity: 0;
	transform: translate3d(0, 18px, 0) scale(0.98);
	transform-origin: bottom center;
	overflow: hidden;
	will-change: transform, opacity, filter;
}

/* Orb glow */
.card::after {
	content: "";
	position: absolute;
	top: 52%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 70%;
	height: 55%;
	border-radius: 999px;
	filter: blur(16px);
	opacity: 0.95;
}

/* Color + glow */
.card.green {
	box-shadow: 0 0 14px rgba(0, 255, 0, 0.75);
	border-color: rgba(90, 255, 90, 0.75);
	animation: card-left var(--cycle) cubic-bezier(0.19, 1, 0.22, 1) infinite;
}

.card.green::after {
	background: radial-gradient(circle, #fff, #00ff55);
}

.card.red {
	box-shadow: 0 0 14px rgba(255, 0, 0, 0.75);
	border-color: rgba(255, 90, 90, 0.75);
	animation: card-center var(--cycle) cubic-bezier(0.19, 1, 0.22, 1) infinite;
}

.card.red::after {
	background: radial-gradient(circle, #fff, #ff0033);
}

.card.purple {
	box-shadow: 0 0 14px rgba(170, 80, 255, 0.75);
	border-color: rgba(220, 170, 255, 0.75);
	animation: card-right var(--cycle) cubic-bezier(0.19, 1, 0.22, 1) infinite;
}

.card.purple::after {
	background: radial-gradient(circle, #fff, #b300ff);
}

/* Stagger: makes it feel “alive” like a loader */
.card.green {
	animation-delay: 0ms;
}

.card.red {
	animation-delay: 60ms;
}

.card.purple {
	animation-delay: 120ms;
}

/* ------------------------- */
/* KEYFRAMES: Loader cadence */
/* ------------------------- */

/* Pack body: idle -> shake -> dip -> recover */
@keyframes pack-body {

	0%,
	100% {
		transform: translateZ(var(--z-pack)) translate3d(0, 0, 0);
		opacity: 1;
		filter: saturate(1);
	}

	/* idle */
	0%,
	12% {
		transform: translateZ(var(--z-pack)) translate3d(0, 0, 0);
	}

	/* micro shake before opening */
	18% {
		transform: translateZ(var(--z-pack)) translate3d(-1px, 0, 0);
	}

	21% {
		transform: translateZ(var(--z-pack)) translate3d(1px, 0, 0);
	}

	24% {
		transform: translateZ(var(--z-pack)) translate3d(-2px, 0, 0);
	}

	27% {
		transform: translateZ(var(--z-pack)) translate3d(0, 0, 0);
	}

	/* slight dip for depth during reveal */
	40% {
		transform: translateZ(var(--z-pack)) translate3d(0, 10px, 0);
	}

	60% {
		transform: translateZ(var(--z-pack)) translate3d(0, 6px, 0);
	}

	/* recover to idle */
	86% {
		transform: translateZ(var(--z-pack)) translate3d(0, 0, 0);
	}
}

/* Lid: idle -> peel open -> hold -> close */
@keyframes pack-lid {

	0%,
	100% {
		opacity: 1;
		transform: translateZ(calc(var(--z-pack) + 1px)) rotateX(0deg) translate3d(0, 0, 0);
	}

	/* idle at start so it never feels "mid-action" on load */
	0%,
	12% {
		transform: translateZ(calc(var(--z-pack) + 1px)) rotateX(0deg) translate3d(0, 0, 0);
	}

	/* open */
	26% {
		transform: translateZ(calc(var(--z-pack) + 1px)) rotateX(-18deg) translate3d(0, -6px, 0);
	}

	42% {
		transform: translateZ(calc(var(--z-pack) + 1px)) rotateX(-105deg) translate3d(0, -128px, 0);
		opacity: 0.65;
	}

	/* hold open briefly so card moment reads */
	62% {
		transform: translateZ(calc(var(--z-pack) + 1px)) rotateX(-105deg) translate3d(0, -128px, 0);
		opacity: 0.0;
	}

	/* close back to idle */
	88% {
		transform: translateZ(calc(var(--z-pack) + 1px)) rotateX(0deg) translate3d(0, 0, 0);
		opacity: 1;
	}
}

/* Cards: invisible -> pop out -> float -> re-seat */
@keyframes card-left {

	0%,
	100% {
		opacity: 0;
		transform: translate3d(0, 18px, 0) scale(0.98);
		filter: blur(0px);
	}

	0%,
	22% {
		opacity: 0;
	}

	/* emerge */
	32% {
		opacity: 1;
		transform: translate3d(-48px, -120px, var(--z-card)) rotate(-14deg) scale(1.12);
	}

	/* float with tiny drift */
	52% {
		opacity: 1;
		transform: translate3d(-52px, -128px, var(--z-card)) rotate(-16deg) scale(1.12);
	}

	/* return */
	78% {
		opacity: 0;
		transform: translate3d(0, 18px, 0) scale(0.98);
	}
}

@keyframes card-center {

	0%,
	100% {
		opacity: 0;
		transform: translate3d(0, 18px, 0) scale(0.98);
	}

	0%,
	24% {
		opacity: 0;
	}

	34% {
		opacity: 1;
		transform: translate3d(0, -140px, calc(var(--z-card) + 10px)) scale(1.18);
	}

	54% {
		opacity: 1;
		transform: translate3d(0, -148px, calc(var(--z-card) + 10px)) scale(1.18);
	}

	80% {
		opacity: 0;
		transform: translate3d(0, 18px, 0) scale(0.98);
	}
}

@keyframes card-right {

	0%,
	100% {
		opacity: 0;
		transform: translate3d(0, 18px, 0) scale(0.98);
	}

	0%,
	26% {
		opacity: 0;
	}

	36% {
		opacity: 1;
		transform: translate3d(48px, -120px, var(--z-card)) rotate(14deg) scale(1.12);
	}

	56% {
		opacity: 1;
		transform: translate3d(52px, -128px, var(--z-card)) rotate(16deg) scale(1.12);
	}

	82% {
		opacity: 0;
		transform: translate3d(0, 18px, 0) scale(0.98);
	}
}

/* Shine: only during the open + reveal portion */
@keyframes shine-sweep {

	0%,
	18% {
		opacity: 0;
		transform: translate3d(-18px, 0, 0);
	}

	30% {
		opacity: 0.25;
		transform: translate3d(0, 0, 0);
	}

	48% {
		opacity: 0.35;
		transform: translate3d(18px, 0, 0);
	}

	64% {
		opacity: 0;
		transform: translate3d(30px, 0, 0);
	}

	100% {
		opacity: 0;
	}
}

/* Accessibility: reduced motion -> subtle pulse only */
@media (prefers-reduced-motion: reduce) {

	.pack-top,
	.pack-bottom,
	.card,
	.pack-shine {
		animation: none !important;
	}

	.pack-scene {
		filter: saturate(1.1);
	}

	.pack-shine {
		opacity: 0.12;
	}
}