/* ========================================
   Day Delight Splash
======================================== */

html.dd-splash-active,
html.dd-splash-active body {
	overflow: hidden;
}

.dd-splash {
	position: fixed;
	inset: 0;
	z-index: 99999;

	display: none;
	place-items: center;

	width: 100%;
	height: 100dvh;

	background: #ffffff;

	opacity: 1;
	visibility: visible;
	pointer-events: auto;

	transition:
		opacity 0.72s cubic-bezier(.22, 1, .36, 1),
		visibility 0.72s linear;
}

.dd-splash.is-leaving {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.dd-splash__stage {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.dd-splash__walker {
	position: relative;
	width: clamp(190px, 20vw, 290px);
	isolation: isolate;
}

.dd-splash__facing {
	position: relative;
	z-index: 2;
	width: 100%;
	transform-origin: center bottom;
}

.dd-splash__mascot {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.dd-splash__title {
	position: absolute;
	top: 90%;
	left: 50%;
	z-index: 1;

	width: max-content;

	font-family:
		"Helvetica Neue",
		Arial,
		"Noto Sans JP",
		sans-serif;
	font-size: clamp(34px, 5.8vw, 76px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.055em;

	color: #0b1f33;

	white-space: nowrap;
	text-align: center;

	opacity: 0;
	transform: translate(-50%, -50%);
	pointer-events: none;

}

/* 背景が消えた直後のHeroを少しだけ柔らかく見せる */
body.dd-splash-complete .dd-hero {
	animation: ddHeroReveal 0.8s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes ddHeroReveal {
	from {
		opacity: 0.88;
		transform: scale(1.008);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@media (max-width: 768px) {
	.dd-splash__walker {
		width: clamp(170px, 48vw, 240px);
	}

	.dd-splash__title {
		font-size: clamp(20px, 8vw, 52px);
		letter-spacing: 0.045em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dd-splash {
		transition-duration: 0.25s;
	}

	body.dd-splash-complete .dd-hero {
		animation: none;
	}
}

html.dd-splash-active .dd-splash {
	display: grid;
}