/*
 * めくりスライダー。
 * 位置・傾き・大きさは「前から何番目か（--i）」だけから計算する。
 * こうしておくと、写真が3枚でも20枚でも同じ指定で扱える。
 */

.mks-stack {
	position: relative;
	width: 100%;
	max-width: var(--mks-max, 520px);
	margin-inline: auto;
	aspect-ratio: var(--mks-ratio, 3 / 4);
	cursor: pointer;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}

.mks-stack:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 10px;
}

.mks-stack__layer {
	/* 奥行きは4段で打ち止め。枚数が多いと奥が消えてしまうため */
	--mks-d: min(var(--i, 0), 4);

	position: absolute;
	inset: 0;
	z-index: calc(100 - var(--i, 0));
	opacity: calc(1 - var(--mks-d) * 0.12);
	transform:
		translate(
			calc(var(--mks-d) * 4% * var(--mks-spread, 1)),
			calc(var(--mks-d) * -2.4% * var(--mks-spread, 1))
		)
		rotate(calc(var(--mks-d) * -2deg * var(--mks-spread, 1)))
		scale(calc(1 - var(--mks-d) * 0.05));
	transform-origin: 50% 100%;
	transition: transform .6s cubic-bezier(.2, .7, .2, 1), opacity .6s ease;
	will-change: transform;
}

.mks-stack__layer img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
	border-radius: var(--mks-radius, 2px);
}

/*
 * 一番手前の1枚だけ、指定した角度に傾ける。
 * 奥の扇の広がりとは別に決められるようにしてある。
 */
.mks-stack__layer[data-i="0"] {
	transform: rotate(var(--mks-tilt, 0deg));
}

.mks-stack__hint {
	margin: 1.2em 0 0;
	text-align: center;
	font-size: .85em;
	opacity: .75;
}

/*
 * めくって送るときの、一番手前の1枚の抜け方。
 * 時計回りに少し回りながら、薄くなって消える。
 * 回す角度と速さは管理画面から変えられる。
 */
.mks-stack__layer.is-leaving {
	z-index: 900;
	transform-origin: 50% 50%;
	pointer-events: none;
	animation: mks-leave var(--mks-exit-time, .45s) cubic-bezier(.32, .06, .38, 1) forwards;
}

@keyframes mks-leave {
	0% {
		transform: rotate(var(--mks-tilt, 0deg)) scale(1);
		opacity: 1;
	}

	100% {
		transform:
			rotate(calc(var(--mks-tilt, 0deg) + var(--mks-exit-turn, 30deg)))
			translate(6%, -4%)
			scale(.94);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mks-stack__layer {
		transition: none;
	}

	.mks-stack__layer.is-leaving {
		animation: none;
	}
}