/*
 * Lueur — 光のマスクリビール
 *
 * このLPだけの動き。実例集として20サイトで動きを変えるため、
 * 共通の「ふわっと下から」（_shared/motion.css）は使わない。
 * body.html の <main> に data-lp-motion="custom" を付けてあり、
 * _shared/motion.js はそれを見て汎用の出現を走らせない。
 *
 * 動かすのは transform / opacity / clip-path / filter だけ。
 * width・height・top は動かさないので、レイアウトはずれない。
 *
 * 隠す指定はすべて html.lueur-motion が付いているときだけ効く。
 * このクラスは motion.js が対象を見つけ終えたあとに付けるので、
 * JavaScript が動かない環境と「動きを減らす」設定では、
 * 最初から全部見えている。
 *
 * クラス名は lueur- で始める。_shared の kj- ともLP本体とも
 * ぶつからないようにするため。
 */


/* ==========================================================================
   共通の下ごしらえ
   ========================================================================== */

/*
 * 幕を閉じたあとの「画面中央から拡大」（_shared/gate.css の kj-emerge）を
 * このLPでは使わない。オープニングからFVの clip-path リビールへ
 * つなぐので、ページ全体が別に拡大すると動きが二重になる。
 *
 * gate.css より **あとに** 読み込まれる前提で打ち消している
 * （inc/works-lp.php が kajitan-lp-gate に依存させている）。
 */
.kj-revealing .wp-site-blocks {
	animation: none;
	will-change: auto;
}


/* ==========================================================================
   ファーストビュー
   ========================================================================== */

/* 個室写真は中央から左右へ開く */
.lueur-motion .hero-picture {
	clip-path: inset(0 50% 0 50%);
}

.lueur-motion .hero-picture.is-in {
	clip-path: inset(0);
	transition: clip-path 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/*
 * キャッチは行ごとに「ピントが合う」ように出す。
 * 行間は motion.js が --lueur-delay に入れる（120ms刻み）。
 *
 * **transform は使わない。** .signature は styles.css で
 * rotate(-9deg) されており、ここで transform を当てると
 * 傾きが消えてしまう。ぼけと濃さだけで出す。
 */
.lueur-motion [data-lueur="focus"] {
	opacity: 0;
	filter: blur(8px);
}

.lueur-motion [data-lueur="focus"].is-in {
	opacity: 1;
	filter: blur(0);
	transition:
		opacity 0.7s ease var(--lueur-delay, 0s),
		filter 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--lueur-delay, 0s);
}


/* ==========================================================================
   セクション見出し
   ========================================================================== */

/*
 * 下線が左から右へ伸びる。金の1px。
 *
 * 付けるのは英字ラベル（Menu / Flow / Voice / Access / FAQ）と
 * 「こんなお悩み、ありませんか？」だけ。
 * 「Lueurの3つの約束」は styles.css で白い縦罫（border-left）を
 * 持っていて、下線を足すと装飾が二重になる。最終CTAの見出しは
 * 節のラベルではなく本文コピーなので、どちらもぼけ解除だけで出す。
 */
.lueur-motion [data-lueur="rule"] {
	position: relative;
	opacity: 0;
	filter: blur(8px);
}

.lueur-motion [data-lueur="rule"].is-in {
	opacity: 1;
	filter: blur(0);
	transition:
		opacity 0.7s ease,
		filter 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.lueur-motion [data-lueur="rule"]::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: var(--lueur-rule-offset, -6px);
	left: 0;
	height: 1px;
	background: var(--gold);
	transform: scaleX(0);
	transform-origin: left center;
}

.lueur-motion [data-lueur="rule"].is-in::after {
	transform: scaleX(1);
	transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}

/* 中央寄せの見出しは、下の余白が広いぶん下線を離す */
.lueur-motion .concerns h2[data-lueur="rule"] {
	--lueur-rule-offset: -20px;
}


/* ==========================================================================
   写真
   ========================================================================== */

/*
 * すべて下から上へ開く。フェードアップは使わない。
 *
 * .section-picture は position:absolute で節いっぱいに敷かれた背景写真、
 * .menu-card > img はカードの中の写真。どちらも切り取りだけで出す。
 */
.lueur-motion [data-lueur="curtain"] {
	clip-path: inset(100% 0 0 0);
}

.lueur-motion [data-lueur="curtain"].is-in {
	clip-path: inset(0);
	transition: clip-path 0.95s cubic-bezier(0.22, 1, 0.36, 1) var(--lueur-delay, 0s);
}


/* ==========================================================================
   カード・行
   ========================================================================== */

/*
 * 静かに現れる。上下には動かさない。
 * 左→右の順番は motion.js が --lueur-delay に入れる。
 */
.lueur-motion [data-lueur="settle"] {
	opacity: 0;
	transform: scale(0.98);
}

.lueur-motion [data-lueur="settle"].is-in {
	opacity: 1;
	transform: none;
	transition:
		opacity 0.7s ease var(--lueur-delay, 0s),
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--lueur-delay, 0s);
}

/*
 * 料金の数字だけ、カードが出そろってから 0.3 秒遅れて出す。
 * 遅れの起点はカード自身の --lueur-delay。
 */
.lueur-motion .menu-card .amount,
.lueur-motion .menu-card .price-label,
.lueur-motion .menu-card .unit {
	opacity: 0;
}

.lueur-motion .menu-card.is-in .amount,
.lueur-motion .menu-card.is-in .price-label,
.lueur-motion .menu-card.is-in .unit {
	opacity: 1;
	transition: opacity 0.5s ease calc(var(--lueur-delay, 0s) + 0.3s);
}


/* ==========================================================================
   背景の光
   ========================================================================== */

/*
 * 極薄の光が、スクロールに合わせてゆっくり動く（係数 0.1）。
 *
 * **本文の上には重ねない。** 白抜き文字のCTAは白文字の
 * コントラスト比が 4.6:1 とぎりぎりで、上に薄い色を重ねると
 * 4.5:1 を割る。main の内側の最背面に置き、色を持つ節
 * （.concerns / .promise / .faq / .reservation）では
 * その節の背景に隠れるようにしてある。
 */
/* 光の層を main の重なりの中に置くための土台。z-index: -1 が
   main の中身より下・body の地色より上に来るようにする。 */
.lueur-motion main {
	position: relative;
	z-index: 0;
}

/*
 * **position: fixed で置く。absolute にしてはいけない。**
 *
 * 絶対配置だと、画面の外へはみ出したぶんが main のスクロールできる
 * 範囲に足される。はみ出しを `overflow: hidden` で切ると、今度は
 * main 自身が「中身をスクロールできる箱」になり、**Gナビのリンクを
 * 踏んだ瞬間にブラウザが main の内側をスクロールして、ヘッダーが
 * 箱の外へ押し出されたまま戻らなくなる**（実際になった）。
 *
 * 固定配置なら画面が基準になるので、どのスクロール範囲にも足されない。
 * ずらす量は motion.js が --lueur-glow に入れる。
 */
.lueur-motion main::before {
	content: "";
	position: fixed;
	z-index: -1;
	inset: -45vh 0;
	background:
		radial-gradient(62vw 48vh at 18% 22%, #c8b08a40, #c8b08a00 70%),
		radial-gradient(52vw 42vh at 84% 64%, #e6d8bf4d, #e6d8bf00 72%);
	transform: translate3d(0, var(--lueur-glow, 0px), 0);
	pointer-events: none;
}


/* ==========================================================================
   マイクロインタラクション
   ========================================================================== */

/*
 * CTAボタン — ホバーで金のグラデーションが左から満ちる。
 *
 * **満ちる色は、いまの色より明るくしない。** 納品時に
 * 白文字のコントラスト比 4.55〜4.87:1 を確保するため
 * 原画の淡いゴールドより濃く調整されている（HANDOFF.md）。
 * 明るい金を差すと 4.5:1 を割るので、濃い側へ寄せて
 * 「深い金が差してくる」向きにしている。
 */
.button {
	background-image: linear-gradient(
		105deg,
		#6f5127 0%,
		#7d5c2e 26%,
		#8a683a 52%,
		#8e6b38 76%,
		#92703f 100%
	);
	background-size: 230% 100%;
	background-position: 100% 0;
	transition:
		background-position 0.62s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.16s ease,
		filter 0.2s ease,
		box-shadow 0.2s ease;
}

.button:hover {
	background-position: 0 0;
}

.button:active {
	transform: scale(0.98);
}

/* メニューカード — 写真だけがゆっくり寄る。影は変えない */
.menu-card {
	overflow: hidden;
}

.menu-card > img {
	transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.menu-card:hover > img,
.menu-card:focus-within > img {
	transform: scale(1.03);
}

/*
 * 予約フォームのフォーカス下線は、このLPには当てる先が無い。
 * 予約・LINEは未接続のダイアログで、入力欄が1つも無いため
 * （HANDOFF.md「予約受付・決済・メール送信・CMSはありません」）。
 * 代わりに、押せるもの共通の焦点表示は styles.css の
 * :focus-visible をそのまま使う。
 */


/* ==========================================================================
   オープニング
   ========================================================================== */

/*
 * 白地に金の線が引かれ、その中央からロゴが浮かび、
 * そのままFVのロゴ位置へ移動・縮小する。全体で最長1.8秒。
 *
 * 描くのは transform と opacity だけ。
 */
.lueur-opening {
	position: fixed;
	z-index: 2147482950;
	inset: 0;
	display: grid;
	place-items: center;
	background: #ffffff;
	opacity: 1;
	transition: opacity 0.5s ease;
}

/* **[hidden] を効かせるために書く。** 上で display:grid を指定しているので、
   ブラウザが既定で持っている [hidden]{display:none} が負けてしまう。 */
.lueur-opening[hidden] {
	display: none;
}

.lueur-opening.is-done {
	opacity: 0;
	pointer-events: none;
}

.lueur-opening__stage {
	position: relative;
	display: grid;
	place-items: center;
	transform: translate3d(0, 0, 0) scale(1);
	transform-origin: center center;
	will-change: transform;
}

/* 移動・縮小の行き先は motion.js が測って入れる */
.lueur-opening__stage.is-handing-off {
	transform:
		translate3d(var(--lueur-to-x, 0px), var(--lueur-to-y, 0px), 0)
		scale(var(--lueur-to-scale, 0.7));
	transition: transform 0.6s cubic-bezier(0.55, 0, 0.2, 1);
}

/* 細い金の横線。左から右へ引かれる */
.lueur-opening__line {
	width: min(260px, 62vw);
	height: 1px;
	background: var(--gold, #c8b08a);
	transform: scaleX(0);
	transform-origin: left center;
	animation: lueur-line 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.lueur-opening__stage.is-handing-off .lueur-opening__line {
	opacity: 0;
	transition: opacity 0.4s ease;
}

@keyframes lueur-line {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

/*
 * ロゴタイプ。FVのヘッダーと同じ組み方にして、
 * 移動したときに見た目が変わらないようにする
 * （styles.css の .site-header .brand > span に合わせる）。
 */
.lueur-opening__logo {
	position: absolute;
	font-family: Georgia, serif;
	font-size: clamp(38px, 9vw, 64px);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.27em;
	padding-left: 0.27em;
	color: var(--ink, #514638);
	opacity: 0;
	filter: blur(14px);
	animation: lueur-logo 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;
	will-change: opacity, filter, transform;
}

/*
 * 線の位置から上へ浮かび上がらせる。
 *
 * **線と同じ高さに置いたままにしない。** ロゴは升目の中央、線も中央に
 * 置いているので、動かさないと線がロゴを横切って取り消し線に見える。
 * 上がりきったところで、線がロゴの下の罫になる。
 *
 * 上げ幅は文字の大きさに対する比で持つ（PCでもスマホでも同じ見えかた）。
 */
@keyframes lueur-logo {
	from {
		opacity: 0;
		filter: blur(14px);
		transform: translateY(0);
	}

	to {
		opacity: 1;
		filter: blur(0);
		transform: translateY(-0.62em);
	}
}

.lueur-opening__skip {
	position: absolute;
	right: 16px;
	bottom: 16px;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	padding: 9px 18px;
	border: 1px solid var(--gold, #c8b08a);
	border-radius: 999px;
	background: #ffffff;
	color: #6b5a3a;
	font-family: var(--sans, sans-serif);
	font-size: 12.5px;
	line-height: 1.4;
	letter-spacing: 0.06em;
	cursor: pointer;
}

.lueur-opening__skip:hover {
	background: #fbf8f3;
}

.lueur-opening__skip:focus-visible {
	outline: 2px solid #69512d;
	outline-offset: 3px;
}

/* オープニング中は後ろを動かさない */
.lueur-opening-active body {
	overflow: hidden;
}


/* ==========================================================================
   動きを減らす設定
   ========================================================================== */

/*
 * この指定に入る環境では motion.js が html.lueur-motion を付けないので、
 * 上の「隠す」指定は最初から効いていない。ここでは、
 * クラスに関係なく動くもの（オープニング・ホバー）を止める。
 *
 * styles.css に
 * `@media(prefers-reduced-motion:reduce){*{transition:none!important}}`
 * があるため、transition はすでに全部止まっている。残るのは
 * animation なので、そちらを消す。
 */
@media (prefers-reduced-motion: reduce) {
	.lueur-opening {
		display: none !important;
	}

	.lueur-opening__line,
	.lueur-opening__logo {
		animation: none !important;
	}

	.lueur-motion main::before {
		transform: none !important;
	}
}


/* ==========================================================================
   印刷
   ========================================================================== */

@media print {
	.lueur-motion [data-lueur] {
		opacity: 1 !important;
		clip-path: none !important;
		filter: none !important;
		transform: none !important;
	}

	.lueur-motion [data-lueur="rule"]::after,
	.lueur-motion main::before,
	.lueur-opening {
		display: none !important;
	}
}