/* ==========================================================================
   Front page motion system
   調整用変数はここを変更してください
   ========================================================================== */

:root {
	/* MVオープニング */
	--mv-duration: 0.9s;
	--mv-distance: 36px;
	--mv-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--mv-stagger: 0.14s;

	/* スクロール表示 */
	--reveal-duration: 0.75s;
	--reveal-distance: 30px;
	--reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--reveal-stagger: 0.1s;
	--reveal-threshold: 0.15;

	/* 背景浮遊 */
	--float-distance: 18px;
	--float-rotate: 6deg;
	--float-duration-min: 5.5s;
	--float-duration-max: 9s;

	/* パララックス強度 */
	--parallax-hero-bg: 0.22;
	--parallax-ambient: 0.35;
}

/* --------------------------------------------------------------------------
   1. MVオープニング（ローディング完了後）
   -------------------------------------------------------------------------- */

body.home.mv-intro-pending [data-mv-intro] {
	opacity: 0;
	transform: translate3d(0, var(--mv-distance), 0);
	will-change: opacity, transform;
}

body.home.mv-intro-pending .top-hero__character img[data-mv-intro] {
	display: block;
}

body.home.mv-intro-active [data-mv-intro].is-mv-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	transition:
		opacity var(--mv-duration) var(--mv-ease),
		transform var(--mv-duration) var(--mv-ease);
	transition-delay: var(--mv-delay, 0ms);
}

body.home.mv-intro-complete .top-hero__brand-logo {
	opacity: 1;
	transform: translate3d(-50%, -50%, 0);
	transition:
		opacity var(--mv-duration) var(--mv-ease),
		transform var(--mv-duration) var(--mv-ease);
}

/* --------------------------------------------------------------------------
   2. スクロール連動フェードイン
   -------------------------------------------------------------------------- */

[data-animate="reveal"] {
	opacity: 0;
	transform: translate3d(0, var(--reveal-distance), 0);
	transition:
		opacity var(--reveal-duration) var(--reveal-ease),
		transform var(--reveal-duration) var(--reveal-ease);
	transition-delay: var(--reveal-delay, 0ms);
	will-change: opacity, transform;
}

[data-animate="reveal"].is-revealed {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

[data-animate-stagger] > * {
	opacity: 0;
	transform: translate3d(0, var(--reveal-distance), 0);
	transition:
		opacity var(--reveal-duration) var(--reveal-ease),
		transform var(--reveal-duration) var(--reveal-ease);
	transition-delay: calc(var(--reveal-delay, 0ms) + var(--reveal-stagger-index, 0) * var(--reveal-stagger));
}

[data-animate-stagger].is-revealed > * {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

/* About内は行間を確保してアニメ中の重なりを防ぐ */
.top-about__copy[data-animate-stagger] > * {
	margin-block: 0;
}

/* 「詳しくはこちら」CTA */
@keyframes about-link-underline {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

@keyframes about-link-arrow-prompt {
	0%,
	70%,
	100% {
		transform: translateX(0);
		opacity: 1;
	}

	85% {
		transform: translateX(6px);
		opacity: 0.82;
	}
}

.top-about__copy.is-revealed > .top-about__link::after {
	animation: about-link-underline 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	animation-delay: calc(
		var(--reveal-delay, 0ms) + var(--reveal-stagger-index, 0) * var(--reveal-stagger, 0.16s) + 0.35s
	);
}

.top-about__copy.is-revealed > .top-about__link .top-about__link-arrow {
	animation: about-link-arrow-prompt 2.2s ease-in-out infinite;
	animation-delay: calc(
		var(--reveal-delay, 0ms) + var(--reveal-stagger-index, 0) * var(--reveal-stagger, 0.16s) + 0.85s
	);
}

/* --------------------------------------------------------------------------
   3. 背景装飾の常時浮遊
   -------------------------------------------------------------------------- */

.top-visual__ambient,
.top-hero__ambient {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
}

.ambient-piece {
	position: absolute;
	display: block;
	border: 1px solid rgba(122, 162, 202, 0.35);
	background: rgba(122, 162, 202, 0.08);
	box-shadow: 0 0 18px rgba(63, 152, 208, 0.12);
	will-change: transform;
}

.ambient-piece--circle {
	border-radius: 50%;
}

.ambient-piece--diamond {
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.ambient-piece--note::before {
	content: "♪";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
	color: rgba(217, 226, 239, 0.55);
	font-family: var(--font-mono);
}

.ambient-piece--01 { top: 12%; left: 8%; width: 14px; height: 14px; }
.ambient-piece--02 { top: 22%; right: 12%; width: 20px; height: 20px; }
.ambient-piece--03 { top: 48%; left: 4%; width: 18px; height: 18px; }
.ambient-piece--04 { top: 62%; right: 8%; width: 12px; height: 12px; }
.ambient-piece--05 { top: 78%; left: 18%; width: 16px; height: 16px; }
.ambient-piece--06 { top: 34%; right: 22%; width: 22px; height: 22px; }
.ambient-piece--07 { top: 70%; right: 28%; width: 10px; height: 10px; }
.ambient-piece--08 { top: 18%; left: 28%; width: 12px; height: 12px; }

@keyframes ambient-float-a {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
	50% { transform: translate3d(0, calc(var(--float-distance) * -1), 0) rotate(calc(var(--float-rotate) * -1)); }
}

@keyframes ambient-float-b {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
	50% { transform: translate3d(0, var(--float-distance), 0) rotate(var(--float-rotate)); }
}

.ambient-piece {
	animation: ambient-float-a var(--float-duration, 7s) ease-in-out infinite;
	animation-delay: var(--float-delay, 0s);
}

.ambient-piece:nth-child(even) {
	animation-name: ambient-float-b;
}

/* --------------------------------------------------------------------------
   4. パララックス
   -------------------------------------------------------------------------- */

[data-parallax] {
	will-change: transform;
}

.top-hero__layer[data-parallax],
.top-hero__media[data-parallax],
.top-hero__image[data-parallax] {
	transform: translate3d(0, var(--parallax-y, 0px), 0);
}

.top-visual__ambient[data-parallax],
.top-hero__ambient[data-parallax] {
	transform: translate3d(0, var(--parallax-y, 0px), 0);
}

/* --------------------------------------------------------------------------
   レスポンシブ
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
	:root {
		--mv-distance: 24px;
		--mv-stagger: 0.1s;
		--reveal-distance: 22px;
		--float-distance: 12px;
		--parallax-hero-bg: 0.12;
		--parallax-ambient: 0.18;
	}

	.ambient-piece--01,
	.ambient-piece--03,
	.ambient-piece--05,
	.ambient-piece--07 {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   アニメーション軽減
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	:root {
		--mv-duration: 0.01ms;
		--reveal-duration: 0.01ms;
	}

	body.home.mv-intro-pending [data-mv-intro],
	[data-animate="reveal"],
	[data-animate-stagger] > * {
		opacity: 1;
		transform: none;
		transition: none;
	}

	body.home.mv-intro-complete .top-hero__brand-logo,
	body.home .top-hero__brand-logo {
		opacity: 1;
		transform: translate3d(-50%, -50%, 0);
		transition: none;
	}

	.ambient-piece {
		animation: none;
	}

	.top-about__copy.is-revealed > .top-about__link::after,
	.top-about__copy.is-revealed > .top-about__link .top-about__link-arrow {
		animation: none;
	}

	.top-about__link::after {
		transform: scaleX(1);
	}

	[data-parallax] {
		transform: none !important;
	}
}