/* =========================================================
   PESCo PESCa
   Welcome Language Popup
   ========================================================= */


/* ---------------------------------------------------------
   Overlay
   --------------------------------------------------------- */

.pp-welcome {
	position: fixed;
	inset: 0;
	z-index: 99999;

	display: flex;
	align-items: center;
	justify-content: center;

	visibility: hidden;
	opacity: 0;

	pointer-events: none;

	transition:
		opacity 0.5s ease,
		visibility 0.5s ease;
}


/* Open */

.pp-welcome.is-visible {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}


/* ---------------------------------------------------------
   Background
   --------------------------------------------------------- */

.pp-welcome__overlay {
	position: absolute;
	inset: 0;

	background: rgba(255, 255, 255, 0.94);

	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}


/* ---------------------------------------------------------
   Modal
   --------------------------------------------------------- */

.pp-welcome__modal {
	position: relative;

	width: min(560px, calc(100% - 40px));

	background: #fff;

	border: 1px solid rgba(139, 115, 85, 0.45);

	box-shadow:
		0 20px 60px rgba(0, 0, 0, 0.08);

	transform: translateY(20px);

	transition:
		transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}


.pp-welcome.is-visible .pp-welcome__modal {
	transform: translateY(0);
}


/* ---------------------------------------------------------
   Inner
   --------------------------------------------------------- */

.pp-welcome__inner {
	padding: 70px 70px 62px;
	text-align: center;
}


/* ---------------------------------------------------------
   Close
   --------------------------------------------------------- */

.pp-welcome__close {
	position: absolute;

	top: 18px;
	right: 18px;

	display: flex;
	align-items: center;
	gap: 8px;

	padding: 4px;

	border: 0;
	background: transparent;

	color: #8b7355;

	cursor: pointer;

	font-family: inherit;
}


.pp-welcome__close span {
	position: absolute;

	top: 8px;
	left: 2px;

	width: 17px;
	height: 1px;

	background: #8b7355;
}


.pp-welcome__close span:first-child {
	transform: rotate(45deg);
}


.pp-welcome__close span:nth-child(2) {
	transform: rotate(-45deg);
}


.pp-welcome__close small {
	padding-left: 25px;

	font-family:
		"Cormorant Garamond",
		serif;

	font-size: 11px;
	font-weight: 400;

	letter-spacing: 0.16em;

	white-space: nowrap;
}


/* ---------------------------------------------------------
   Eyebrow
   --------------------------------------------------------- */

.pp-welcome__eyebrow {
	margin: 0 0 15px;

	font-family:
		"Cormorant Garamond",
		serif;

	font-size: 14px;
	font-weight: 400;

	letter-spacing: 0.28em;

	color: #8b7355;
}


/* ---------------------------------------------------------
   Title
   --------------------------------------------------------- */

.pp-welcome__title {
	margin: 0;

	font-family:
		"Cormorant Garamond",
		serif;

	font-size: clamp(38px, 5vw, 52px);

	font-weight: 400;

	line-height: 1;

	letter-spacing: 0.05em;

	color: #333;
}


/* ---------------------------------------------------------
   Lead
   --------------------------------------------------------- */

.pp-welcome__lead {
	margin: 25px 0 38px;

	font-size: 13px;
	font-weight: 300;

	line-height: 2;

	letter-spacing: 0.08em;

	color: #666;
}


/* ---------------------------------------------------------
   Languages
   --------------------------------------------------------- */

.pp-welcome__languages {
	display: grid;

	grid-template-columns: repeat(2, 1fr);

	border-top: 1px solid rgba(139, 115, 85, 0.4);
	border-bottom: 1px solid rgba(139, 115, 85, 0.4);
}


/* ---------------------------------------------------------
   Language Link
   --------------------------------------------------------- */

.pp-welcome__language {
	position: relative;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	min-height: 130px;

	padding: 25px 20px;

	text-decoration: none;

	color: #333;

	transition:
		background 0.4s ease,
		color 0.4s ease;
}


/* Vertical line */

.pp-welcome__language + .pp-welcome__language {
	border-left: 1px solid rgba(139, 115, 85, 0.3);
}


/* Current language */

.pp-welcome__language.is-current {
	background: rgba(139, 115, 85, 0.045);
}


/* Main */

.pp-welcome__language-main {
	font-family:
		"Cormorant Garamond",
		serif;

	font-size: 24px;
	font-weight: 400;

	letter-spacing: 0.04em;

	transition:
		transform 0.4s ease;
}


/* Japanese */

.pp-welcome__language:first-child
.pp-welcome__language-main {
	font-family:
		"BrilliantCutProMedium",
		"Cormorant Garamond",
		serif;

	font-size: 18px;

	letter-spacing: 0.08em;
}


/* Sub */

.pp-welcome__language-sub {
	margin-top: 6px;

	font-family:
		"Cormorant Garamond",
		serif;

	font-size: 11px;

	letter-spacing: 0.15em;

	color: #999;
}


/* Arrow */

.pp-welcome__arrow {
	position: absolute;

	right: 18px;
	top: 50%;

	font-family:
		"Cormorant Garamond",
		serif;

	font-size: 18px;

	color: #8b7355;

	opacity: 0;

	transform: translate(-8px, -50%);

	transition:
		opacity 0.4s ease,
		transform 0.4s ease;
}


/* Hover */

.pp-welcome__language:hover {
	background: rgba(139, 115, 85, 0.06);
}


.pp-welcome__language:hover
.pp-welcome__language-main {
	transform: translateX(-5px);
}


.pp-welcome__language:hover
.pp-welcome__arrow {
	opacity: 1;

	transform: translate(0, -50%);
}


/* ---------------------------------------------------------
   Note
   --------------------------------------------------------- */

.pp-welcome__note {
	margin: 25px 0 0;

	font-size: 10px;
	font-weight: 300;

	line-height: 1.8;

	letter-spacing: 0.08em;

	color: #aaa;
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media screen and (max-width: 767px) {

	.pp-welcome__modal {
		width: calc(100% - 30px);
	}


	.pp-welcome__inner {
		padding: 58px 25px 45px;
	}


	.pp-welcome__close {
		top: 14px;
		right: 14px;
	}


	.pp-welcome__title {
		font-size: 42px;
	}


	.pp-welcome__lead {
		margin-top: 20px;
		margin-bottom: 30px;

		font-size: 12px;
	}


	.pp-welcome__languages {
		grid-template-columns: 1fr;
	}


	.pp-welcome__language {
		min-height: 105px;
	}


	.pp-welcome__language
	+ .pp-welcome__language {
		border-left: 0;
		border-top: 1px solid rgba(139, 115, 85, 0.3);
	}


	.pp-welcome__language-main {
		font-size: 22px;
	}


	.pp-welcome__language:first-child
	.pp-welcome__language-main {
		font-size: 17px;
	}


	.pp-welcome__arrow {
		right: 20px;
		opacity: 1;

		transform: translate(0, -50%);
	}

}


/* ---------------------------------------------------------
   Small Mobile
   --------------------------------------------------------- */

@media screen and (max-width: 400px) {

	.pp-welcome__inner {
		padding-left: 20px;
		padding-right: 20px;
	}


	.pp-welcome__title {
		font-size: 38px;
	}

}

/* =========================================================
   Body Lock
   ========================================================= */

html.pp-welcome-open,
body.pp-welcome-open {
	overflow: hidden;
}