/* =========================================================
   雅創 モーション v2  —「灯る・掲げる」
   style.css の後に読み込む
   ========================================================= */

:root {
	--m-ease: cubic-bezier(.22, 1, .36, 1);      /* すっと止まる */
	--m-ease-io: cubic-bezier(.65, 0, .35, 1);   /* マスク用 */
	--m-accent: var(--color-primary);
	--m-step: 130ms;                             /* 連続表示の間隔 */
}

/* 旧フェードの打ち消し（JSが動かなくても中身が見えるように） */
.fadein,
.fadein.fadein--left,
.fadein.fadein--right,
.fadein.fadein--blur {
	opacity: 1;
	transform: none;
	filter: none;
	transition: none;
}

/* ---------------------------------------------------------
   ヘッダー：上から降りてくる
--------------------------------------------------------- */
/* ※ fill-mode を both にすると終了後も transform が残り、
   中の position:fixed（バーガーメニュー）がヘッダー基準になって消えるため backwards のみ */
html.m-ready .header {
	animation: m-header 1s var(--m-ease) .15s backwards;
}
@keyframes m-header {
	from { transform: translateY(-100%); }
}

/* ---------------------------------------------------------
   ヒーロー：暗闇から看板が灯る → コピーが1行ずつせり上がる
--------------------------------------------------------- */
.cover { overflow: hidden; }

.cover__catch-inner::before {
	content: "";
	display: block;
	width: 56px;
	height: 2px;
	margin-bottom: 1.4em;
	background: var(--m-accent);
	transform-origin: left center;
}

html.m-ready .cover__image {
	animation: none;
	transform: scale(1.12);
	transform-origin: 70% 50%;
	filter: brightness(.12);
	transition: transform 3.2s var(--m-ease), filter 1.8s ease;
	will-change: transform, filter;
}
html.m-ready .cover.is-in .cover__image {
	transform: none;
	filter: none;
}

html.m-ready .cover__catch-inner::before {
	transform: scaleX(0);
	transition: transform 1s var(--m-ease-io) .5s;
}
html.m-ready .cover.is-in .cover__catch-inner::before {
	transform: scaleX(1);
}

.cover .m-line {
	display: block;
	overflow: hidden;
	padding-bottom: .06em;
}
.cover .m-line > span { display: inline-block; }

html.m-ready .cover .m-line > span {
	transform: translate3d(0, 110%, 0);
	transition: transform 1.1s var(--m-ease);
	transition-delay: calc(800ms + var(--i, 0) * 160ms);
}
html.m-ready .cover.is-in .m-line > span {
	transform: none;
}

html.m-ready .cover__catch-inner .text {
	opacity: 0;
	transform: translate3d(0, 16px, 0);
	transition: opacity 1s ease 1.4s, transform 1.2s var(--m-ease) 1.4s;
}
html.m-ready .cover.is-in .cover__catch-inner .text {
	opacity: 1;
	transform: none;
}

/* 下層ページの見出し画像：短いズームをゆっくりに */
.page-head {
	animation-duration: 1.6s;
	animation-timing-function: var(--m-ease);
}

/* ---------------------------------------------------------
   見出し：左から筆で書くように現れる
--------------------------------------------------------- */
html.m-ready [data-m="title"] > * {
	clip-path: inset(0 100% 0 0);
	transition: clip-path 1.1s var(--m-ease-io);
}
html.m-ready [data-m="title"] > :nth-child(2) { transition-delay: .25s; }
html.m-ready [data-m="title"] > :nth-child(3) { transition-delay: .4s; }
html.m-ready [data-m="title"].is-in > * {
	clip-path: inset(0 0 0 0);
}

/* ---------------------------------------------------------
   本文ブロック：控えめに浮かび上がる
--------------------------------------------------------- */
html.m-ready [data-m="up"] {
	opacity: 0;
	transform: translate3d(0, 36px, 0);
	transition: opacity 1s var(--m-ease), transform 1.2s var(--m-ease);
}
html.m-ready [data-m="up"].is-in {
	opacity: 1;
	transform: none;
}

/* ---------------------------------------------------------
   写真：下から掲げられるようにマスクが開く
--------------------------------------------------------- */
html.m-ready [data-m="mask"] {
	clip-path: inset(100% 0 0 0);
	transition: clip-path 1.2s var(--m-ease-io);
}
html.m-ready [data-m="mask"] img {
	transform: scale(1.2);
	transition: transform 1.8s var(--m-ease);
}
html.m-ready [data-m="mask"].is-in { clip-path: inset(0 0 0 0); }
html.m-ready [data-m="mask"].is-in img { transform: none; }

/* 事業内容：写真マスク → 文章 */
html.m-ready [data-m="biz"] > :first-child {
	clip-path: inset(100% 0 0 0);
	transition: clip-path 1.2s var(--m-ease-io);
}
html.m-ready [data-m="biz"] > :first-child img {
	transform: scale(1.2);
	transition: transform 1.8s var(--m-ease);
}
html.m-ready [data-m="biz"] > :not(:first-child) {
	opacity: 0;
	transform: translate3d(0, 28px, 0);
	transition: opacity 1s var(--m-ease) .35s, transform 1.2s var(--m-ease) .35s;
}
html.m-ready [data-m="biz"].is-in > :first-child { clip-path: inset(0 0 0 0); }
html.m-ready [data-m="biz"].is-in > :first-child img { transform: none; }
html.m-ready [data-m="biz"].is-in > :not(:first-child) { opacity: 1; transform: none; }

/* ---------------------------------------------------------
   一覧（強み・流れ・施工事例）：1枚ずつ順番に
--------------------------------------------------------- */
html.m-ready [data-m="stagger"] > * {
	opacity: 0;
	transform: translate3d(0, 44px, 0);
	transition: opacity .9s var(--m-ease), transform 1.2s var(--m-ease);
	transition-delay: calc(var(--i, 0) * var(--m-step));
}
html.m-ready [data-m="stagger"].is-in > * {
	opacity: 1;
	transform: none;
}
html.m-ready [data-m="stagger"] .home-strength__image img {
	transform: scale(1.1);
	transition: transform 1.6s var(--m-ease);
	transition-delay: calc(var(--i, 0) * var(--m-step));
}
html.m-ready [data-m="stagger"].is-in .home-strength__image img { transform: none; }

/* 流れの番号：アクセント色の下線がのびる */
.home-flow__num .num { position: relative; }
html.m-ready [data-m="stagger"] .home-flow__num .num::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 100%;
	height: 2px;
	background: var(--m-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .8s var(--m-ease-io);
	transition-delay: calc(400ms + var(--i, 0) * var(--m-step));
}
html.m-ready [data-m="stagger"].is-in .home-flow__num .num::after { transform: scaleX(1); }

/* ---------------------------------------------------------
   動きを減らす設定の人には動かさない
--------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.cover__image,
	.page-head { animation: none !important; }
}