/**
 * デモサイト共通アニメーション
 * prefers-reduced-motion: reduce では視差・無限ループをオフ
 */

/* --- キーフレーム --- */
@keyframes fdemo-mv-line-in {
	from {
		opacity: 0;
		transform: translateY(36px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fdemo-mv-scroll-pulse {
	0%,
	100% {
		opacity: 0.45;
		transform: translateX(-50%) translateY(0);
	}
	50% {
		opacity: 1;
		transform: translateX(-50%) translateY(6px);
	}
}

@keyframes fdemo-float {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-5px);
	}
}

/* --- メインビュー：初回表示（段階的） --- */
.fdemo-mv-animate > .fdemo-mv__label,
.fdemo-mv-animate > h1,
.fdemo-mv-animate > .fdemo-mv__lead,
.fdemo-mv-animate > .fdemo-mv__actions {
	opacity: 0;
	animation: fdemo-mv-line-in 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.fdemo-mv-animate > .fdemo-mv__label {
	animation-delay: 0.05s;
}

.fdemo-mv-animate > h1 {
	animation-delay: 0.14s;
}

.fdemo-mv-animate > .fdemo-mv__lead {
	animation-delay: 0.26s;
}

.fdemo-mv-animate > .fdemo-mv__actions {
	animation-delay: 0.4s;
}

.fdemo-mv__scroll {
	opacity: 0;
	animation: fdemo-mv-line-in 0.7s ease forwards;
	animation-delay: 0.85s;
}

.fdemo-mv__scroll-icon {
	animation: fdemo-float 2.2s ease-in-out infinite;
	animation-delay: 1.2s;
}

/* --- スクロールイン（IntersectionObserver で .is-inview） --- */
.fdemo-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}

.fdemo-reveal.is-inview {
	opacity: 1;
	transform: translateY(0);
}

/* 遅延ステップ（data-fdemo-delay="1" … "6"） */
.fdemo-reveal[data-fdemo-delay="1"] {
	transition-delay: 0.06s;
}
.fdemo-reveal[data-fdemo-delay="2"] {
	transition-delay: 0.12s;
}
.fdemo-reveal[data-fdemo-delay="3"] {
	transition-delay: 0.18s;
}
.fdemo-reveal[data-fdemo-delay="4"] {
	transition-delay: 0.24s;
}
.fdemo-reveal[data-fdemo-delay="5"] {
	transition-delay: 0.3s;
}
.fdemo-reveal[data-fdemo-delay="6"] {
	transition-delay: 0.36s;
}

/* 親内の子を順に（グリッド用） */
.fdemo-reveal-group.is-inview .fdemo-reveal-child:nth-child(1) {
	transition-delay: 0.04s;
}
.fdemo-reveal-group.is-inview .fdemo-reveal-child:nth-child(2) {
	transition-delay: 0.1s;
}
.fdemo-reveal-group.is-inview .fdemo-reveal-child:nth-child(3) {
	transition-delay: 0.16s;
}
.fdemo-reveal-group.is-inview .fdemo-reveal-child:nth-child(4) {
	transition-delay: 0.22s;
}
.fdemo-reveal-group.is-inview .fdemo-reveal-child:nth-child(5) {
	transition-delay: 0.28s;
}
.fdemo-reveal-group.is-inview .fdemo-reveal-child:nth-child(6) {
	transition-delay: 0.34s;
}

.fdemo-reveal-child {
	opacity: 0;
	transform: translateY(22px);
	transition:
		opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.fdemo-reveal-group.is-inview .fdemo-reveal-child {
	opacity: 1;
	transform: translateY(0);
}

/* --- ヘッダー --- */
.fdemo-header {
	animation: fdemo-mv-line-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.fdemo-nav a {
	position: relative;
	transition: color 0.2s ease;
}

.fdemo-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 0;
	height: 2px;
	background: var(--ink);
	transition: width 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.fdemo-nav a:hover::after,
.fdemo-nav a.is-active::after {
	width: 100%;
}

.fdemo-logo {
	transition: transform 0.25s ease, opacity 0.2s ease;
}

.fdemo-logo:hover {
	transform: translateY(-1px);
	opacity: 0.88;
}

/* --- ボタン・カード・商品 --- */
.fdemo-btn {
	transition:
		transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.22s ease,
		opacity 0.2s ease,
		background 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease;
}

.fdemo-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.fdemo-btn:active {
	transform: translateY(0);
}

.fdemo-card {
	transition:
		transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.3s ease;
}

.fdemo-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.fdemo-product {
	transition:
		transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.3s ease;
}

.fdemo-product:hover {
	transform: translateY(-5px);
	box-shadow: 0 14px 36px rgba(0, 0, 0, 0.09);
}

.fdemo-concept-teaser__visual {
	transition:
		transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.45s ease;
}

.fdemo-concept-teaser__visual:hover {
	transform: scale(1.02);
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.07);
}

/* --- Instagram カード --- */
.fdemo-ig-link {
	transition:
		transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.3s ease;
}

.fdemo-ig-link:hover {
	transform: translateY(-3px);
}

.fdemo-ig-imgwrap img {
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.fdemo-ig-link:hover .fdemo-ig-imgwrap img {
	transform: scale(1.06);
}

/* --- フッター --- */
.fdemo-footer__links a,
.fdemo-footer__social a {
	transition: color 0.2s ease, transform 0.2s ease;
}

.fdemo-footer__links a:hover {
	transform: translateX(3px);
}

/* --- フォーム --- */
.fdemo-form input,
.fdemo-form textarea {
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

.fdemo-form input:focus,
.fdemo-form textarea:focus {
	outline: none;
	border-color: rgba(51, 51, 51, 0.45);
	box-shadow: 0 0 0 3px rgba(51, 51, 51, 0.08);
}

/* --- アクセシビリティ：動きを減らす設定 --- */
@media (prefers-reduced-motion: reduce) {
	.fdemo-mv-animate > *,
	.fdemo-mv__scroll,
	.fdemo-mv__scroll-icon {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.fdemo-mv__video {
		visibility: hidden;
	}

	.fdemo-mv-animate > .fdemo-mv__label,
	.fdemo-mv-animate > h1,
	.fdemo-mv-animate > .fdemo-mv__lead,
	.fdemo-mv-animate > .fdemo-mv__actions {
		opacity: 1;
		transform: none;
	}

	.fdemo-reveal,
	.fdemo-reveal-child {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.fdemo-header {
		animation: none !important;
	}

	.fdemo-btn:hover,
	.fdemo-card:hover,
	.fdemo-product:hover,
	.fdemo-ig-link:hover,
	.fdemo-concept-teaser__visual:hover {
		transform: none;
		box-shadow: none;
	}

	.fdemo-nav a::after {
		transition: none;
	}
}