/* ==========================================================================
   Character depth swap — SYS.MENU 左隣・手前1体のみ
   ========================================================================== */

.char-carousel {
	position: relative;
	width: 100%;
	margin: 0;
	user-select: none;
	pointer-events: none;
}

.char-carousel__frame {
	position: relative;
	width: 100%;
	height: 560px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.char-carousel__glow {
	position: absolute;
	left: 50%;
	bottom: 8%;
	z-index: 0;
	width: 320px;
	height: 320px;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(
		circle,
		rgba(255, 92, 92, 0.3) 0%,
		rgba(255, 92, 92, 0.08) 45%,
		transparent 70%
	);
	pointer-events: none;
	filter: blur(8px);
	opacity: 0;
}

.char-carousel__stage {
	position: relative;
	z-index: 1;
	width: 340px;
	height: 500px;
	overflow: visible;
}

.char-carousel__figure {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
	object-position: bottom center;
	filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.4));
	transform-origin: center bottom;
	will-change: transform, opacity;
	pointer-events: none;
}

.char-carousel__figure.is-front {
	z-index: 2;
}

.char-carousel__figure.is-back {
	z-index: 1;
	opacity: 0;
	visibility: hidden;
}

.char-carousel__figure:not([src]) {
	opacity: 0;
	visibility: hidden;
}

.char-carousel__figure.is-front {
	filter:
		drop-shadow(0 16px 28px rgba(0, 0, 0, 0.45))
		drop-shadow(0 0 20px rgba(255, 92, 92, 0.2));
}

/* MAIN MENU の左隣（SEC パネルとメニューの間） */
.cyber-menu__carousel-wrap {
	grid-area: character;
	position: relative;
	right: auto;
	bottom: auto;
	left: auto;
	top: auto;
	z-index: 12;
	width: 100%;
	max-width: 380px;
	justify-self: center;
	align-self: end;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0.5s ease;
}

.cyber-menu__carousel-wrap:not(.is-hidden) {
	opacity: 1;
	visibility: visible;
}

.cyber-menu__carousel-wrap.is-hidden,
.cyber-menu__carousel-wrap[hidden] {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

@media (max-width: 800px) {
	.cyber-menu__carousel-wrap {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cyber-menu__carousel-wrap {
		transition: none;
	}
}