.yjsj-coverflow {
	--yjsj-cf-card: min(var(--yjsj-cf-card-user, 430px), 26vw);
	--yjsj-cf-gap-user: 46px;
	--yjsj-cf-gap: clamp(18px, 3vw, var(--yjsj-cf-gap-user));
	--yjsj-cf-ratio: 1 / 1;
	--yjsj-cf-interval: 4000ms;
	--yjsj-cf-tilt: 48deg;
	--yjsj-cf-bg-start: #090d13;
	--yjsj-cf-bg-end: #080b10;
	--yjsj-cf-accent: #5fbbff;
	--yjsj-cf-caption-size: 13px;
	position: relative;
	width: 100%;
	max-width: 100%;
	margin-inline: auto;
	padding-block: clamp(28px, 5vw, 64px) clamp(46px, 7vw, 96px);
	overflow: hidden;
	isolation: isolate;
	background:
		linear-gradient(90deg, rgba(5, 8, 12, .76), transparent 12%, transparent 88%, rgba(5, 8, 12, .76)),
		linear-gradient(180deg, var(--yjsj-cf-bg-start), #111a24 58%, var(--yjsj-cf-bg-end));
	color: #fff;
}

.yjsj-coverflow--full {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.yjsj-coverflow-viewport {
	position: relative;
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-inline: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	cursor: grab;
	touch-action: pan-y pinch-zoom;
	perspective: 1100px;
}

.yjsj-coverflow-viewport::-webkit-scrollbar {
	display: none;
}

.yjsj-coverflow-viewport:focus-visible {
	outline: 2px solid var(--yjsj-cf-accent);
	outline-offset: -4px;
}

.yjsj-coverflow-viewport.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
}

.yjsj-coverflow-track {
	display: flex;
	align-items: center;
	gap: var(--yjsj-cf-gap);
	width: max-content;
	margin: 0;
	padding: clamp(70px, 8vw, 120px) max(12px, calc(50vw - var(--yjsj-cf-card) / 2));
	list-style: none;
	transform-style: preserve-3d;
}

.yjsj-coverflow-card {
	position: relative;
	flex: 0 0 var(--yjsj-cf-card);
	width: var(--yjsj-cf-card);
	margin: 0;
	padding: 0;
	scroll-snap-align: center;
	transform-style: preserve-3d;
	will-change: transform;
}

.yjsj-coverflow-card figure {
	position: relative;
	margin: 0;
}

.yjsj-coverflow-card img {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--yjsj-cf-ratio);
	object-fit: cover;
	user-select: none;
	-webkit-user-drag: none;
	border-radius: 5px;
	box-shadow: 0 20px 42px rgba(0, 0, 0, .5);
	transform: translateX(-100%) rotateY(calc(var(--yjsj-cf-tilt) * -1)) scale(.82);
	transform-origin: center;
	transform-style: preserve-3d;
	will-change: transform;
}

.yjsj-coverflow-card figcaption {
	margin-top: 18px;
	padding-inline: 6px;
	color: rgba(255, 255, 255, .72);
	font-size: var(--yjsj-cf-caption-size);
	line-height: 1.45;
	text-align: center;
}

.yjsj-coverflow-type {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 5px 9px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 999px;
	background: rgba(6, 11, 18, .7);
	color: var(--yjsj-cf-accent);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1;
	backdrop-filter: blur(8px);
	pointer-events: none;
}

.yjsj-coverflow-card--content {
	cursor: pointer;
}

.yjsj-coverflow-excerpt {
	max-width: 92%;
	margin: 7px auto 0;
	color: rgba(255, 255, 255, .5);
	font-size: 11px;
	line-height: 1.45;
	text-align: center;
}

.yjsj-coverflow-status {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.yjsj-coverflow--reflected .yjsj-coverflow-card img {
	-webkit-box-reflect: below 10px linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .25));
}

.yjsj-coverflow-arrow {
	position: absolute;
	top: 50%;
	z-index: 120;
	width: 48px;
	height: 64px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 10px;
	background: rgba(11, 16, 23, .62);
	color: #fff;
	font: 42px/54px Georgia, serif;
	text-align: center;
	cursor: pointer;
	backdrop-filter: blur(8px);
	transform: translateY(-50%);
	transition: background-color .2s ease, border-color .2s ease;
}

.yjsj-coverflow-arrow:hover,
.yjsj-coverflow-arrow:focus-visible {
	border-color: rgba(255, 255, 255, .42);
	background: rgba(19, 31, 45, .9);
}

.yjsj-coverflow-prev {
	left: 16px;
}

.yjsj-coverflow-next {
	right: 16px;
}

.yjsj-coverflow.card-size-small {
	--yjsj-cf-card-user: 330px;
}

.yjsj-coverflow.card-size-large {
	--yjsj-cf-card-user: 540px;
}

@supports (animation-timeline: view(inline)) {
	.yjsj-coverflow-card {
		animation: yjsj-cf-z linear both;
		animation-timeline: view(inline);
	}

	.yjsj-coverflow-card img {
		animation: yjsj-cf-rotate linear both;
		animation-timeline: view(inline);
	}
}

@keyframes yjsj-cf-z {
	0%, 100% { z-index: 1; opacity: .62; }
	42%, 58% { z-index: 100; opacity: 1; }
}

@keyframes yjsj-cf-rotate {
	0% { transform: translateX(-100%) rotateY(calc(var(--yjsj-cf-tilt) * -1)) scale(.82); filter: brightness(.58); }
	35% { transform: translateX(0) rotateY(calc(var(--yjsj-cf-tilt) * -1)) scale(.9); filter: brightness(.72); }
	50% { transform: rotateY(0) translateZ(18px) scale(1.22); filter: brightness(1); }
	65% { transform: translateX(0) rotateY(var(--yjsj-cf-tilt)) scale(.9); filter: brightness(.72); }
	100% { transform: translateX(100%) rotateY(var(--yjsj-cf-tilt)) scale(.82); filter: brightness(.58); }
}

/* Apple-inspired variant */
.yjsj-coverflow--apple-classic {
	--yjsj-cf-card: clamp(230px, 21vw, 520px);
	--yjsj-cf-gap: 18px;
	background:
		radial-gradient(ellipse at 50% 48%, rgba(132, 158, 187, .18), transparent 42%),
		linear-gradient(90deg, rgba(1, 3, 7, .92), transparent 18%, transparent 82%, rgba(1, 3, 7, .92)),
		linear-gradient(180deg, #11161e, #070a0f 58%, #030507);
}

.yjsj-coverflow--apple-classic .yjsj-coverflow-viewport {
	perspective: 1050px;
	width: 100%;
	height: 400px;
	margin-inline: auto;
	scroll-snap-type: none;
	overflow: hidden;
}

.yjsj-coverflow--apple-classic .yjsj-coverflow-card {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 0;
	aspect-ratio: var(--yjsj-cf-ratio);
	contain: layout style paint;
	backface-visibility: hidden;
	transform-origin: center;
	transition: transform .62s cubic-bezier(.2, .72, .22, 1), opacity .42s ease, filter .42s ease;
	scroll-snap-stop: always;
}

.yjsj-coverflow--apple-classic .yjsj-coverflow-layer {
	position: absolute;
	inset: 0;
	opacity: 1;
}

.yjsj-coverflow--apple-classic .yjsj-coverflow-layer figure {
	width: 100%;
	height: 100%;
	margin: 0;
}

.yjsj-coverflow--apple-classic .yjsj-coverflow-layer img {
	height: 100%;
}

.yjsj-coverflow--apple-classic .yjsj-coverflow-layer.is-incoming {
	opacity: 0;
	transition: opacity .18s linear;
}

.yjsj-coverflow--apple-classic .yjsj-coverflow-layer.is-incoming.is-loaded {
	opacity: 1;
}

.yjsj-coverflow--apple-classic .yjsj-coverflow-track {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
}

.yjsj-coverflow--apple-classic .yjsj-coverflow-card img {
	border-radius: 7px;
	box-shadow:
		0 30px 70px rgba(0, 0, 0, .72),
		0 0 0 1px rgba(255, 255, 255, .1);
	transform: none;
	animation: none;
	will-change: auto;
}

.yjsj-coverflow--apple-classic.yjsj-coverflow--reflected .yjsj-coverflow-card img {
	-webkit-box-reflect: below 12px linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .38));
}

@media (max-width: 767px) {
	.yjsj-coverflow {
		--yjsj-cf-card: min(var(--yjsj-cf-card-user, 310px), 66vw);
		--yjsj-cf-gap: 18px;
	}

	.yjsj-coverflow--full {
		width: 100%;
		max-width: 100%;
		margin-inline: 0;
	}

	.yjsj-coverflow-track {
		padding-block: 56px 76px;
		padding-inline: max(18px, calc(50vw - var(--yjsj-cf-card) / 2));
	}

	.yjsj-coverflow-arrow {
		display: none;
	}

	.yjsj-coverflow--apple-classic {
		--yjsj-cf-card: min(72vw, 320px);
		--yjsj-cf-gap: 18px;
	}

	.yjsj-coverflow--apple-classic.yjsj-coverflow--reflected .yjsj-coverflow-card img {
		-webkit-box-reflect: none;
	}
}

@media (min-width: 1600px) {
	.yjsj-coverflow {
		--yjsj-cf-card: min(var(--yjsj-cf-card-user, 540px), 24vw);
		--yjsj-cf-gap: clamp(36px, 2.4vw, 64px);
		padding-block: clamp(72px, 5vw, 92px) clamp(88px, 6vw, 120px);
	}

	.yjsj-coverflow.card-size-small {
		--yjsj-cf-card-user: 420px;
	}

	.yjsj-coverflow.card-size-large {
		--yjsj-cf-card-user: 680px;
	}

	.yjsj-coverflow-track {
		padding-block: clamp(92px, 6vw, 124px) clamp(112px, 7vw, 148px);
	}

	.yjsj-coverflow--apple-classic {
		--yjsj-cf-card: clamp(300px, 21vw, 520px);
		--yjsj-cf-gap: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.yjsj-coverflow-viewport {
		scroll-behavior: auto;
	}

	.yjsj-coverflow-card,
	.yjsj-coverflow-card img {
		animation: none !important;
	}
}

.yjsj-coverflow-builder-note {
	margin-top: 4px;
	color: #696e76;
	font-size: 11px;
	line-height: 1.3;
}