/*
 * 画面を覆う板。
 * 位置と動きはJavaScriptが数値で当てるので、ここは器だけを用意する。
 */

.kpt-mask {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2147483000; /* 追従ヘッダーやチャット窓より前に出す */
	pointer-events: none;
	will-change: transform, opacity;
	/* 実際の大きさと位置はJavaScriptが測って当てる。傾けたときのすき間を埋めるため */
	background: var(--kpt-color, #f9f9f9);
}

/* 動きの最中だけ、指の操作を受け付けないようにする */
html.kpt-busy {
	cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
	.kpt-mask {
		display: none !important;
	}
}

/* 板の中央に置く画像。板とは別の層に置き、傾けない */
.kpt-logo {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2147483001;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	opacity: 0;
	transition: opacity .35s ease;
}

.kpt-logo img {
	display: block;
	max-width: 60vw;
	height: auto;
}

@media (prefers-reduced-motion: reduce) {
	.kpt-logo {
		display: none !important;
	}
}

/* ============================================================
   読み込み直後の板。
   HTMLに先に書き出してあり、CSSだけで滑って消える。
   JavaScriptが動かない環境でも、必ず消えるようにするため。
   ============================================================ */

.kpt-intro {
	/* 斜めに倒したときのすき間を、余裕をもって埋める大きさにする */
	left: -110vh;
	width: calc(100% + 220vh);
	/* ロゴを置いたときは、その時間だけ覆ったまま止めてから滑らせる */
	animation: kpt-out-x var(--kpt-dur, 600ms) cubic-bezier(.65, 0, .35, 1) var(--kpt-hold, 0ms) forwards;
}

.kpt-intro.kpt-dir-rtl {
	animation-name: kpt-out-x-rev;
}

.kpt-intro.kpt-dir-btt,
.kpt-intro.kpt-dir-ttb {
	left: 0;
	width: 100%;
	top: -110vw;
	height: calc(100% + 220vw);
}

.kpt-intro.kpt-dir-btt {
	animation-name: kpt-out-y;
}

.kpt-intro.kpt-dir-ttb {
	animation-name: kpt-out-y-rev;
}

.kpt-intro.kpt-dir-fade {
	left: 0;
	width: 100%;
	animation-name: kpt-fade-out;
}

@keyframes kpt-out-x {
	from { transform: translateX(0) skewX(var(--kpt-skew, 0deg)); }
	to   { transform: translateX(105%) skewX(var(--kpt-skew, 0deg)); visibility: hidden; }
}

@keyframes kpt-out-x-rev {
	from { transform: translateX(0) skewX(var(--kpt-skew, 0deg)); }
	to   { transform: translateX(-105%) skewX(var(--kpt-skew, 0deg)); visibility: hidden; }
}

@keyframes kpt-out-y {
	from { transform: translateY(0) skewY(var(--kpt-skew, 0deg)); }
	to   { transform: translateY(-105%) skewY(var(--kpt-skew, 0deg)); visibility: hidden; }
}

@keyframes kpt-out-y-rev {
	from { transform: translateY(0) skewY(var(--kpt-skew, 0deg)); }
	to   { transform: translateY(105%) skewY(var(--kpt-skew, 0deg)); visibility: hidden; }
}

@keyframes kpt-fade-out {
	from { opacity: 1; }
	to   { opacity: 0; visibility: hidden; }
}

/* 読み込み直後のロゴ。板より少し早く消す */
.kpt-logo--intro {
	opacity: 1;
	animation: kpt-logo-out 300ms ease var(--kpt-hold, 0ms) forwards;
}

@keyframes kpt-logo-out {
	from { opacity: 1; }
	to   { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
	.kpt-intro,
	.kpt-logo--intro {
		display: none !important;
	}
}