/*
<link rel="stylesheet" href="common/slide.css">
<script src="common/slide.js"></script>
*/

@charset "UTF-8";

.image-slider {
	--slider-duration: 700ms;

	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.image-slider__viewport,
.image-slider__track,
.image-slider__item {
	position: relative;
	width: 100%;
	height: 100%;
}

.image-slider__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/* ==============================
   fade
============================== */

.js-image-slider:not([data-effect="slide"]):not([data-effect="wipe-pan"]) .image-slider__track {
	position: relative;
}

.js-image-slider:not([data-effect="slide"]):not([data-effect="wipe-pan"]) .image-slider__item {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	transition: none;
}

.js-image-slider:not([data-effect="slide"]):not([data-effect="wipe-pan"]) .image-slider__item:first-child {
	opacity: 1;
	pointer-events: auto;
}

.image-slider.is-fade .image-slider__track {
	position: relative;
}

.image-slider.is-fade .image-slider__item {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	transition: none;
}

.image-slider.is-fade:not(.is-ready) .image-slider__item {
	opacity: 0;
}

.image-slider.is-fade:not(.is-ready) .image-slider__item:first-child {
	opacity: 1;
	pointer-events: auto;
}

.image-slider.is-fade.is-ready .image-slider__item {
	transition: opacity var(--slider-duration) ease;
}

.image-slider.is-fade.is-ready .image-slider__item.is-active {
	opacity: 1;
	pointer-events: auto;
}

/* ==============================
   slide
============================== */

.image-slider.is-slide .image-slider__viewport {
	overflow: hidden;
}

.image-slider.is-slide .image-slider__track {
	display: flex;
	transition: transform var(--slider-duration) ease;
}

.image-slider.is-slide .image-slider__item {
	flex: 0 0 100%;
}

/* ==============================
   wipe-pan
   ・画像は右 → 左へパンしながらズームアウト
   ・次画像は斜めの境界で右 → 左へワイプ
============================== */

.image-slider.is-wipe-pan {
	--slider-pan-duration: 3700ms;
	--slider-wipe-slant: 12%;
}

.image-slider.is-wipe-pan .image-slider__viewport,
.image-slider.is-wipe-pan .image-slider__track {
	overflow: hidden;
}

.image-slider.is-wipe-pan .image-slider__track {
	position: relative;
}

.image-slider.is-wipe-pan .image-slider__item {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	clip-path: inset(0);
}

.image-slider.is-wipe-pan:not(.is-ready) .image-slider__item:first-child,
.image-slider.is-wipe-pan .image-slider__item.is-active,
.image-slider.is-wipe-pan .image-slider__item.is-previous {
	opacity: 1;
	visibility: visible;
}

.image-slider.is-wipe-pan .image-slider__item.is-previous {
	z-index: 1;
}

.image-slider.is-wipe-pan .image-slider__item.is-active {
	z-index: 2;
	pointer-events: auto;
}

.image-slider.is-wipe-pan .image-slider__item.is-entering {
	animation: image-slider-wipe-in var(--slider-duration) cubic-bezier(0.65, 0, 0.35, 1) both;
}

.image-slider.is-wipe-pan .image-slider__item.is-motion img {
	will-change: transform;
	animation: image-slider-pan-zoom var(--slider-pan-duration) linear both;
}

@keyframes image-slider-pan-zoom {
	from {
		transform: translate3d(3%, 0, 0) scale(1.14);
	}

	to {
		transform: translate3d(-3%, 0, 0) scale(1.06);
	}
}

@keyframes image-slider-wipe-in {
	from {
		clip-path: polygon(100% 0,
				100% 0,
				100% 100%,
				calc(100% + var(--slider-wipe-slant)) 100%);
	}

	to {
		clip-path: polygon(calc(0% - var(--slider-wipe-slant)) 0,
				100% 0,
				100% 100%,
				0 100%);
	}
}

/* ==============================
   buttons
============================== */

.image-slider__button {
	position: absolute;
	top: 50%;
	z-index: 5;
	translate: 0 -50%;

	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	cursor: pointer;
}

.image-slider__button.is-prev {
	left: 12px;
}

.image-slider__button.is-next {
	right: 12px;
}

.image-slider__button:disabled {
	opacity: 0.3;
	cursor: default;
}

/* ==============================
   dots
============================== */

.image-slider__dots {
	position: absolute;
	left: 50%;
	bottom: 16px;
	z-index: 5;
	translate: -50% 0;

	display: flex;
	gap: 8px;
}

.image-slider__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.5);
	cursor: pointer;
}

.image-slider__dot.is-active {
	background: #fff;
}