/* ==========================================================
   Cinematic Panels
   セクションが画面に入ると矩形パネルが横に wipe し、コンテンツが現れる。
   html.js かつ motion 有効時のみ適用（JS無効・reduced-motion では常に表示）。
   ========================================================== */
.cinematic {
	position: relative;
	overflow: hidden;
	background: var(--white);
	border-bottom: 1px solid var(--line);
}

.js:not(.motion-off) .cinematic::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 20;
	background: var(--ink);
	transform: translateX(0);
	pointer-events: none;
	transition: transform 1.05s var(--ease-wipe);
}
.js:not(.motion-off) .cinematic--blue::before { background: var(--blue); }
.js:not(.motion-off) .cinematic.is-open::before { transform: translateX(101%); }

.js:not(.motion-off) .cinematic .cinematic__inner {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .7s ease .22s, transform .7s ease .22s;
}
.js:not(.motion-off) .cinematic.is-open .cinematic__inner {
	opacity: 1;
	transform: none;
}

/* 子要素の時間差表示 */
.js:not(.motion-off) .cinematic .stagger { opacity: 0; }
.js:not(.motion-off) .cinematic.is-open .stagger {
	animation: cinematicItemIn .55s ease both;
	animation-delay: calc(.28s + var(--i, 0) * .09s);
}
@keyframes cinematicItemIn {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.js .cinematic::before { display: none; }
	.js .cinematic .cinematic__inner,
	.js .cinematic .stagger { opacity: 1 !important; transform: none !important; }
}