/**
 * Service page first-visit preloader (ENERGY / みらい工務店)
 */
.dspin-preloader {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	pointer-events: auto;
}

.dspin-preloader__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
}

.dspin-preloader__logo {
	display: block;
	width: min(320px, 72vw);
	height: auto;
	opacity: 0;
	will-change: opacity, transform;
}

.dspin-preloader--tall .dspin-preloader__logo {
	width: min(220px, 58vw);
}

/* Corporate TOP */
.dspin-preloader--corp {
	background: #1c305c;
}

.dspin-preloader--corp .dspin-preloader__logo {
	width: min(240px, 62vw);
	filter: brightness(0) invert(1);
}

.dspin-preloader--corp .dspin-preloader__dots span {
	background: #ffffff;
}

.dspin-preloader__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	opacity: 0;
	will-change: opacity;
}

.dspin-preloader__dots span {
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #0d1a4a;
	opacity: 0.25;
	transform: translateY(0) scale(0.85);
	animation: dspinPreloaderDot 1.05s ease-in-out infinite;
}

.dspin-preloader__dots span:nth-child(2) {
	animation-delay: 0.18s;
}

.dspin-preloader__dots span:nth-child(3) {
	animation-delay: 0.36s;
}

.dspin-preloader.is-ready .dspin-preloader__dots {
	opacity: 1;
	transition: opacity 0.45s ease;
}

@keyframes dspinPreloaderDot {
	0%,
	80%,
	100% {
		opacity: 0.25;
		transform: translateY(0) scale(0.85);
	}
	40% {
		opacity: 1;
		transform: translateY(-5px) scale(1);
	}
}

html.dspin-preload-pending,
html.dspin-preload-pending body {
	overflow: hidden;
}

html.dspin-preload-pending body > *:not(.dspin-preloader) {
	opacity: 0;
	visibility: hidden;
}

html.dspin-preload-reveal body > *:not(.dspin-preloader) {
	visibility: visible;
	opacity: 0;
	will-change: opacity;
}

@media (prefers-reduced-motion: reduce) {
	.dspin-preloader__logo {
		opacity: 1;
		transform: none !important;
	}

	.dspin-preloader__dots,
	.dspin-preloader.is-ready .dspin-preloader__dots {
		opacity: 1;
	}

	.dspin-preloader__dots span {
		animation: none;
		opacity: 0.7;
		transform: none;
	}
}