/*
 * Ketabbin 3.28 — winged-book cart flight.
 * The flight is transform-only; particles are bounded and self-remove.
 */

.kb-cart-flight {
	--kb-flight-gold: #ffb000;
	--kb-flight-bright: #ffe6a2;
	--kb-flight-cream: #fff8e8;
	--kb-flight-ink: #061a2f;
	position: fixed;
	z-index: 2147482000;
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	pointer-events: none;
	transform-origin: 50% 50%;
	will-change: transform, opacity;
	contain: layout style;
	filter:
		drop-shadow(0 10px 12px rgba(0, 0, 0, .26))
		drop-shadow(0 0 9px rgba(255, 176, 0, .42));
}

.kb-cart-flight__book {
	position: absolute;
	z-index: 4;
	top: 50%;
	left: 50%;
	width: var(--kb-flight-cover-width, 48px);
	height: var(--kb-flight-cover-height, 68px);
	transform: translate(-50%, -50%) perspective(420px) rotateY(-7deg);
	transform-style: preserve-3d;
}

.kb-cart-flight__cover {
	position: absolute;
	z-index: 4;
	inset: 0;
	overflow: hidden;
	border: 1px solid rgba(255, 226, 150, .96);
	border-right-width: 3px;
	border-radius: 3px 7px 7px 3px;
	background:
		radial-gradient(circle at 72% 24%, rgba(255,255,255,.72) 0 3%, transparent 4%),
		linear-gradient(145deg, #153b52 0 42%, #061a2f 43% 100%);
	box-shadow:
		inset 3px 0 0 rgba(255, 255, 255, .13),
		inset -4px 0 0 rgba(5, 21, 36, .28),
		0 0 12px rgba(255, 176, 0, .42);
	backface-visibility: hidden;
}

.kb-cart-flight__cover::before {
	position: absolute;
	z-index: 3;
	top: 8%;
	right: 13%;
	width: 16%;
	height: 84%;
	border-radius: 99px;
	background: linear-gradient(180deg, transparent, rgba(255, 222, 137, .78), transparent);
	content: "";
	opacity: .58;
}

.kb-cart-flight__cover::after {
	position: absolute;
	z-index: 4;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(112deg, transparent 24%, rgba(255,255,255,.48) 43%, transparent 60%);
	content: "";
	transform: translateX(-125%);
	animation: kb-cart-flight-cover-shine .68s ease-in-out infinite;
}

.kb-cart-flight__cover-image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	border: 0;
	border-radius: inherit;
	object-fit: cover;
}

.kb-cart-flight__fallback {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--kb-flight-gold);
	font: 800 clamp(17px, 2vw, 25px)/1 Vazirmatn, Tahoma, sans-serif;
	text-shadow: 0 0 7px rgba(255, 176, 0, .62);
}

.kb-cart-flight__pages {
	position: absolute;
	z-index: 2;
	top: 4%;
	right: -8%;
	bottom: 4%;
	left: 5%;
	border: 1px solid rgba(135, 100, 46, .62);
	border-radius: 2px 8px 8px 2px;
	background:
		repeating-linear-gradient(0deg, transparent 0 3px, rgba(92, 69, 31, .16) 3px 4px),
		linear-gradient(90deg, #c8ad71, #fff8dc 16%, #ead9aa 86%, #ad8644);
	box-shadow: 2px 1px 0 #f7e9c3, 4px 2px 0 #c9ae75;
	transform: translateZ(-2px);
}

.kb-cart-flight__shine {
	position: absolute;
	z-index: 6;
	top: -10%;
	right: -18%;
	width: 38%;
	height: 32%;
	border-radius: 50%;
	background: radial-gradient(circle, #fff 0 8%, #ffd56f 9% 28%, transparent 68%);
	filter: blur(.2px) drop-shadow(0 0 6px #ffb000);
	animation: kb-cart-flight-twinkle .72s ease-in-out infinite alternate;
}

.kb-cart-flight__wing {
	position: absolute;
	z-index: 2;
	top: 26%;
	width: 34%;
	height: 48%;
	transform-style: preserve-3d;
	will-change: transform;
}

.kb-cart-flight__wing--left {
	left: 4%;
	transform-origin: 100% 48%;
	animation: kb-cart-flight-wing-left .27s cubic-bezier(.42, 0, .35, 1) infinite alternate;
}

.kb-cart-flight__wing--right {
	right: 4%;
	transform-origin: 0 48%;
	animation: kb-cart-flight-wing-right .27s cubic-bezier(.42, 0, .35, 1) -.13s infinite alternate;
}

.kb-cart-flight__wing i {
	position: absolute;
	display: block;
	width: 84%;
	height: 38%;
	border: 1px solid rgba(204, 151, 48, .72);
	border-radius: 92% 12% 88% 18%;
	background:
		linear-gradient(165deg, rgba(255,255,255,.92), rgba(255,242,207,.96) 54%, rgba(224,183,97,.92));
	box-shadow:
		inset 0 -2px 0 rgba(135, 95, 30, .14),
		0 0 7px rgba(255, 196, 73, .34);
	transform-origin: 94% 50%;
}

.kb-cart-flight__wing i:nth-child(1) { top: 4%; }
.kb-cart-flight__wing i:nth-child(2) { top: 30%; width: 94%; opacity: .94; }
.kb-cart-flight__wing i:nth-child(3) { top: 58%; width: 74%; opacity: .86; }

.kb-cart-flight__wing--right i {
	right: 0;
	border-radius: 12% 92% 18% 88%;
	transform-origin: 6% 50%;
}

.kb-cart-flight__spark {
	position: fixed;
	z-index: 2147481999;
	display: block;
	border-radius: 50%;
	background: #ffd36a;
	box-shadow:
		0 0 4px #fff7d6,
		0 0 10px rgba(255, 176, 0, .88),
		0 0 18px rgba(255, 176, 0, .36);
	pointer-events: none;
	animation: kb-cart-flight-spark .86s cubic-bezier(.18,.67,.22,1) forwards;
	will-change: transform, opacity;
}

.kb-cart-flight__spark--2 {
	border-radius: 1px;
	background: #fff8e6;
	transform: rotate(45deg);
}

.kb-cart-flight__spark--3 {
	background: #ffb000;
	box-shadow: 0 0 5px #fff, 0 0 12px rgba(255,176,0,.9);
}

.kb-cart-flight__burst {
	position: fixed;
	z-index: 2147482001;
	display: block;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.kb-cart-flight__burst::before,
.kb-cart-flight__burst::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 22px;
	height: 22px;
	border: 2px solid rgba(255, 176, 0, .86);
	border-radius: 50%;
	content: "";
	transform: translate(-50%, -50%);
	animation: kb-cart-flight-ring .82s ease-out forwards;
}

.kb-cart-flight__burst::after {
	border-color: rgba(255, 244, 203, .8);
	animation-delay: .1s;
}

.kb-cart-flight__burst i {
	position: absolute;
	top: -3px;
	left: -3px;
	width: 6px;
	height: 6px;
	border-radius: 1px;
	background: #ffd66f;
	box-shadow: 0 0 7px #fff, 0 0 13px #ffb000;
	animation: kb-cart-flight-burst .7s cubic-bezier(.16,.72,.2,1) var(--kb-burst-delay, 0ms) forwards;
}

.is-kb-flight-catching {
	position: relative;
	animation: kb-cart-flight-catch .72s cubic-bezier(.2,.82,.2,1) both !important;
}

.is-kb-flight-catching :is(.kb-fantasy-icon--bag, svg, [data-kbc-cart-count]) {
	color: var(--kb-flight-gold, #ffb000) !important;
	filter: drop-shadow(0 0 8px rgba(255, 176, 0, .88));
}

@keyframes kb-cart-flight-wing-left {
	from { transform: perspective(150px) rotateY(-12deg) rotateZ(11deg) translateY(3px); }
	to { transform: perspective(150px) rotateY(48deg) rotateZ(-18deg) translateY(-5px); }
}

@keyframes kb-cart-flight-wing-right {
	from { transform: perspective(150px) rotateY(12deg) rotateZ(-11deg) translateY(3px); }
	to { transform: perspective(150px) rotateY(-48deg) rotateZ(18deg) translateY(-5px); }
}

@keyframes kb-cart-flight-cover-shine {
	0%, 28% { transform: translateX(-135%); opacity: 0; }
	48% { opacity: .8; }
	75%, 100% { transform: translateX(135%); opacity: 0; }
}

@keyframes kb-cart-flight-twinkle {
	from { opacity: .45; transform: rotate(0) scale(.72); }
	to { opacity: 1; transform: rotate(70deg) scale(1.12); }
}

@keyframes kb-cart-flight-spark {
	0% { opacity: 0; transform: translate3d(0,0,0) rotate(0) scale(.35); }
	15% { opacity: 1; }
	100% {
		opacity: 0;
		transform:
			translate3d(var(--kb-flight-spark-x, -20px), var(--kb-flight-spark-y, 16px), 0)
			rotate(var(--kb-flight-spark-spin, 160deg))
			scale(.06);
	}
}

@keyframes kb-cart-flight-ring {
	0% { opacity: 0; transform: translate(-50%, -50%) scale(.18); }
	24% { opacity: 1; }
	100% { opacity: 0; transform: translate(-50%, -50%) scale(3.1); }
}

@keyframes kb-cart-flight-burst {
	0% { opacity: 0; transform: translate3d(0,0,0) rotate(0) scale(.3); }
	20% { opacity: 1; }
	100% {
		opacity: 0;
		transform: translate3d(var(--kb-burst-x), var(--kb-burst-y), 0) rotate(150deg) scale(.05);
	}
}

@keyframes kb-cart-flight-catch {
	0%, 100% { transform: translate3d(0,0,0) scale(1); }
	24% { transform: translate3d(0,-4px,0) rotate(-7deg) scale(1.13); }
	48% { transform: translate3d(0,2px,0) rotate(5deg) scale(.94); }
	72% { transform: translate3d(0,-1px,0) rotate(-2deg) scale(1.04); }
}

@media (max-width: 640px) {
	.kb-cart-flight {
		filter:
			drop-shadow(0 8px 9px rgba(0, 0, 0, .24))
			drop-shadow(0 0 7px rgba(255, 176, 0, .4));
	}

	.kb-cart-flight__spark:nth-of-type(even) {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kb-cart-flight,
	.kb-cart-flight__spark,
	.kb-cart-flight__burst {
		display: none !important;
		animation: none !important;
	}

	.is-kb-flight-catching {
		animation-duration: .01ms !important;
	}
}