/*
 * コラージュスライダー。
 *
 * 写真を紙のように散らして重ね、押すたびに全員が1つ隣の位置へ移る。
 * 位置と傾きは「今どの枠にいるか（data-slot）」だけで決まるので、
 * 動かしているのは番号だけ。あとはCSSが滑らかにつないでくれる。
 */

.csk-collage {
	position: relative;
	overflow: hidden;
	isolation: isolate; /* 文字の重ね方（overlay）を、この枠の中だけで効かせる */
	cursor: pointer;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
	width: 100%;
	max-width: var(--csk-max, 100%);
	margin-inline: auto;
	min-height: var(--csk-height, 850px);
	background: var(--csk-bg, #bdb7ae);
}

.csk-collage:focus-visible {
	outline: 2px solid var(--csk-outline, #d8b46a);
	outline-offset: 8px;
}

.csk-collage__layer {
	position: absolute;
	overflow: hidden;
	transition:
		transform .7s cubic-bezier(.2, .7, .2, 1),
		inset .7s cubic-bezier(.2, .7, .2, 1),
		opacity .6s ease;
	will-change: transform;
}

.csk-collage__layer img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- 5つの置き場所 ---------- */

.csk-collage__layer[data-slot="0"] { inset: 10% 17% 29% 17%; z-index: 5; transform: rotate(-2deg); }
.csk-collage__layer[data-slot="1"] { inset: 24%  7% 16% 22%; z-index: 4; transform: rotate(4deg); }
.csk-collage__layer[data-slot="2"] { inset: 13% 10% 10%  7%; z-index: 3; transform: rotate(-5deg); }
.csk-collage__layer[data-slot="3"] { inset: 38% 30% 11%  9%; z-index: 2; transform: rotate(9deg); }
.csk-collage__layer[data-slot="4"] { inset:  9% 11% 41% 31%; z-index: 1; transform: rotate(-11deg); }

/* 指や矢印が乗ったとき、少しだけ散らす */
@media (hover: hover) {
	.csk-collage:hover .csk-collage__layer[data-slot="0"] { transform: translate3d(0, -22px, 0) rotate(-1deg) scale(1.08); }
	.csk-collage:hover .csk-collage__layer[data-slot="1"] { transform: translate3d(12px, -14px, 0) rotate(7deg) scale(1.06); }
	.csk-collage:hover .csk-collage__layer[data-slot="2"] { transform: translate3d(-16px, 12px, 0) rotate(-8deg) scale(1.03); }
	.csk-collage:hover .csk-collage__layer[data-slot="3"] { transform: translate3d(18px, 10px, 0) rotate(10deg) scale(1.02); }
	.csk-collage:hover .csk-collage__layer[data-slot="4"] { transform: translate3d(-20px, -10px, 0) rotate(-12deg) scale(1.02); }
}

/* ---------- 透ける文字 ---------- */

.csk-collage__word {
	position: absolute;
	z-index: 6;
	margin: 0;
	font-family: var(--csk-word-font, Arial, "Helvetica Neue", Helvetica, sans-serif);
	font-size: var(--csk-word-size, clamp(70px, 12vw, 160px));
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.12em;
	color: rgba(255, 255, 255, var(--csk-word-alpha, .72));
	mix-blend-mode: overlay;
	pointer-events: none;
	white-space: nowrap;
}

/* 重ね方を素直にしたいとき（背景が明るすぎて読めない場合など） */
.csk-collage[data-csk-blend="normal"] .csk-collage__word {
	mix-blend-mode: normal;
}

.csk-collage__word[data-place="bottom-left"]  { bottom: 40px; left: 35px; }
.csk-collage__word[data-place="bottom-right"] { bottom: 40px; right: 35px; }
.csk-collage__word[data-place="top-left"]     { top: 40px; left: 35px; }
.csk-collage__word[data-place="top-right"]    { top: 40px; right: 35px; }

/* 真ん中に置く。写真の重なりの上を、そのまま横切る形になる。 */
.csk-collage__word[data-place="center"] {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}

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

@media (max-width: 900px) {
	.csk-collage {
		min-height: var(--csk-height-sp, 620px);
	}

	.csk-collage__word[data-place$="-left"]  { left: 20px; }
	.csk-collage__word[data-place$="-right"] { right: 20px; }
	.csk-collage__word[data-place^="bottom"] { bottom: 24px; }
	.csk-collage__word[data-place^="top"]    { top: 24px; }

	.csk-collage__word[data-place="center"] { left: 50%; top: 50%; }
}

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