/* ==========================================================================
   NOIR GOLD - 演出レイヤー
   すべて外部ライブラリなし。prefers-reduced-motion で全停止する。
   ========================================================================== */

/* --- キーフレーム -------------------------------------------------------- */
@keyframes noir-sheen {
	0%   { background-position: 0% 50%; }
	100% { background-position: 200% 50%; }
}

/* ヒーローの照明。光量と広がりだけを揺らす（位置は動かさない） */
@keyframes noir-glow {
	0%   { opacity: 0.55; transform: translateX(-50%) scale(0.94); }
	100% { opacity: 1;    transform: translateX(-50%) scale(1.07); }
}

@keyframes noir-beam {
	0%   { opacity: 0.35; transform: translateX(-50%) rotate(calc(var(--rot, 0deg) - 3.5deg)) scaleX(0.9); }
	100% { opacity: 0.85; transform: translateX(-50%) rotate(calc(var(--rot, 0deg) + 3.5deg)) scaleX(1.1); }
}

/* 床の反射は幅いっぱいに敷くので translateX を持たせない */
@keyframes noir-floor {
	0%   { opacity: 0.5; transform: scaleY(0.88); }
	100% { opacity: 1;   transform: scaleY(1.08); }
}

@keyframes noir-rise {
	from { opacity: 0; transform: translateY(110%) rotate(2deg); }
	to   { opacity: 1; transform: translateY(0) rotate(0); }
}

@keyframes noir-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes noir-scroll-hint {
	0%   { transform: scaleY(0); transform-origin: top; }
	45%  { transform: scaleY(1); transform-origin: top; }
	55%  { transform: scaleY(1); transform-origin: bottom; }
	100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ==========================================================================
   フィルムグレイン
   単色ベタ塗りの「安さ」を一撃で消す。pointer-events は必ず切る。
   ========================================================================== */
.c-grain {
	position: fixed;
	inset: 0;
	z-index: var(--z-grain);
	pointer-events: none;
	opacity: 0.05;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 180px 180px;
	will-change: opacity;
}

/* 画面全体の周辺減光。中央に視線を集める */
.c-vignette {
	position: fixed;
	inset: 0;
	z-index: calc(var(--z-grain) - 1);
	pointer-events: none;
	background: radial-gradient(120% 80% at 50% 40%, transparent 40%, rgba(0, 0, 0, 0.55) 100%);
}

/* ==========================================================================
   スクロールリビール
   JS が動かなくても内容が見えるよう、初期状態は html.js のときだけ適用する。
   ========================================================================== */
.js .js-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition:
		opacity 1.1s var(--ease) calc(var(--i, 0) * var(--stagger)),
		transform 1.1s var(--ease) calc(var(--i, 0) * var(--stagger));
	will-change: opacity, transform;
}

.js .js-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* 完了後は will-change を降ろす */
.js .js-reveal.is-in {
	will-change: auto;
}

/* ==========================================================================
   文字のスタガー出現
   ========================================================================== */
.c-split {
	display: inline;
}

/* 折り返しは単語の境界だけで起こす */
.c-split__word {
	display: inline-block;
	white-space: nowrap;
}

.c-split__space {
	display: inline;
}

.c-split__char {
	display: inline-block;
}

.js .c-split__char {
	opacity: 0;
	transform: translateY(0.75em);
}

.js .is-in .c-split__char,
.js .c-split.is-in .c-split__char {
	animation: noir-rise 1.1s var(--ease) forwards;
	animation-delay: calc(var(--i, 0) * 42ms + 0.15s);
}

/* ==========================================================================
   ヒーロー
   ========================================================================== */
.c-hero {
	position: relative;
	display: grid;
	align-items: end;
	min-height: 100svh;
	padding-block: calc(var(--header-h) + 28px) clamp(32px, 4vw, 64px);
	overflow: hidden;
	isolation: isolate;
}

/* 写真は置かない。舞台の照明だけで画面を作る。
   闇の中に金の光溜まりとスポットライトの光条が漂う構成 */
.c-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
	/* ブレンドをこのレイヤーの内側に閉じ込める */
	isolation: isolate;
	background:
		radial-gradient(120% 70% at 50% 118%, rgba(122, 95, 20, 0.18) 0%, transparent 62%),
		radial-gradient(140% 100% at 72% 8%, #1a1610 0%, #0e0c09 48%, #060606 100%);
}

/* 上方の光溜まり。ゆっくり呼吸させると照明が生きて見える */
.c-hero__glow {
	position: absolute;
	top: -34%;
	left: 50%;
	width: min(130vw, 1500px);
	aspect-ratio: 1.5 / 1;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(
		closest-side,
		rgba(245, 233, 190, 0.24) 0%,
		rgba(201, 162, 39, 0.15) 32%,
		rgba(122, 95, 20, 0.07) 60%,
		transparent 100%
	);
	filter: blur(34px);
	mix-blend-mode: screen;
	animation: noir-glow 13s var(--ease-in-out) infinite alternate;
	will-change: opacity, transform;
}

/* スポットライトの光条。角度・幅・位相を個別に振って束にする */
.c-hero__beam {
	position: absolute;
	top: -55%;
	left: var(--x, 50%);
	width: calc(clamp(150px, 24vw, 460px) * var(--w, 1));
	height: 200%;
	transform-origin: 50% 0;
	background: linear-gradient(
		180deg,
		rgba(240, 224, 168, 0.22) 0%,
		rgba(201, 162, 39, 0.11) 36%,
		rgba(122, 95, 20, 0.04) 62%,
		transparent 84%
	);
	filter: blur(28px);
	mix-blend-mode: screen;
	mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.4) 58%, transparent 100%);
	-webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.4) 58%, transparent 100%);
	animation: noir-beam 16s var(--ease-in-out) infinite alternate;
	animation-delay: var(--d, 0s);
	will-change: opacity, transform;
}

/* 光が床に落ちた反射。下端をわずかに持ち上げて奥行きを出す */
.c-hero__floor {
	position: absolute;
	inset: auto 0 -12% 0;
	height: 44%;
	background: radial-gradient(
		60% 100% at 50% 100%,
		rgba(201, 162, 39, 0.16) 0%,
		rgba(122, 95, 20, 0.06) 42%,
		transparent 78%
	);
	filter: blur(22px);
	mix-blend-mode: screen;
	transform-origin: 50% 100%;
	animation: noir-floor 17s var(--ease-in-out) infinite alternate-reverse;
}

/* 背景の上に黒のヴェールを重ね、文字のコントラストを確保する */
.c-hero__veil {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--g-veil);
}

/* ゴールドのヘアライン格子。画像がなくても画面が持つ */
.c-hero__grid {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0.5;
	background-image:
		linear-gradient(90deg, var(--c-line-soft) 1px, transparent 1px),
		linear-gradient(180deg, var(--c-line-soft) 1px, transparent 1px);
	background-size: clamp(80px, 12vw, 180px) clamp(80px, 12vw, 180px);
	mask-image: radial-gradient(120% 90% at 50% 30%, #000 20%, transparent 78%);
	-webkit-mask-image: radial-gradient(120% 90% at 50% 30%, #000 20%, transparent 78%);
}

.c-hero__inner {
	position: relative;
	width: min(100% - var(--gutter) * 2, var(--wrap));
	margin-inline: auto;
}

.c-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: clamp(20px, 3vw, 40px);
	color: var(--c-gold);
	font-family: var(--ff-display);
	font-size: 0.75rem;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
}

.c-hero__eyebrow::before {
	content: "";
	width: clamp(32px, 5vw, 72px);
	height: 1px;
	background: currentColor;
}

.c-hero__est {
	color: var(--c-ink-faint);
	letter-spacing: 0.24em;
	/* Cormorant の既定はオールドスタイル数字。年号は同じ高さで揃える */
	font-variant-numeric: lining-nums;
}

/* --- 大見出し ------------------------------------------------------------ */
.c-hero__title {
	margin: 0;
	font-family: var(--ff-display);
	font-weight: 300;
	line-height: 0.94;
	letter-spacing: 0.02em;
	color: var(--c-ink);
}

.c-hero__line {
	display: block;
}

.c-hero__line--pre {
	font-size: clamp(2rem, 5vw, 4.5rem);
	padding-left: 0.06em;
}

.c-hero__line--post {
	font-size: clamp(2rem, 5.4vw, 5rem);
	padding-left: 0.06em;
}

/* ==========================================================================
   磨いた金の光沢で切り抜いた見出し
   写真は使わない。同じ位置に語を重ね、opacity で巡回させながら
   文字の中を鏡面のハイライトが流れていく。
   ========================================================================== */
.c-mask {
	display: block;
	margin: 0.02em 0;
	font-family: var(--ff-display);
	/* 細い字だと光沢の階調が乗らないため、この行だけ太くする */
	font-weight: 600;
	font-size: clamp(2.75rem, 13vw, 11.5rem);
	line-height: 0.82;
	letter-spacing: -0.012em;
	text-transform: uppercase;
}

.c-mask__stack {
	display: block;
	position: relative;
}

.c-mask__layer {
	display: block;
	background-image: var(--mask-gold);
	background-repeat: no-repeat;
	/* 文字幅の 2 倍に伸ばした金板を流すことで、鏡面の帯が走って見える。
	   background-position は 0%〜100% の範囲から絶対に出さないこと。
	   100% を超えると背景が要素の外に出て、
	   background-clip: text の文字がまるごと消える。 */
	background-size: 200% 100%;
	background-position: 0% 50%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	/* 切り抜き文字の輪郭に沿って、ごく淡い金の発光を落とす */
	filter: drop-shadow(0 0 28px rgba(201, 162, 39, 0.18));
	animation:
		noir-mask-4 calc(var(--layers, 4) * 4.2s) linear infinite,
		noir-mask-sheen 5.5s var(--ease-in-out) infinite alternate;
	animation-delay: calc(var(--i, 0) * 4.2s), calc(var(--i, 0) * -1.4s);
	/* backwards が無いと、待機中の層が不透明のまま重なって全部見えてしまう */
	animation-fill-mode: both, none;
	will-change: opacity, background-position;
}

.c-mask {
	/* ハイライトを 2 本入れる。1 本だと塗りに見え、光沢にならない */
	--mask-gold: linear-gradient(
		104deg,
		#6e5511 0%,
		#a8842a 10%,
		#f7edc8 22%,
		#c9a227 33%,
		#8c6d1f 44%,
		#e7c96b 58%,
		#fdf7e2 68%,
		#c9a227 82%,
		#6e5511 100%
	);
}

/* 2 枚目以降は 1 枚目の上に重ねる */
.c-mask__layer:not(:first-child) {
	position: absolute;
	inset: 0;
}

/* 鏡面のハイライトを文字の上で往復させる。
   alternate で戻すため、0%〜100% を出ずに継ぎ目もジャンプも起きない。 */
@keyframes noir-mask-sheen {
	from { background-position: 0% 50%; }
	to   { background-position: 100% 50%; }
}

/* 各層の出番は 1/層数。キーフレームの % は変数化できないため、
   層数ぶんだけ定義を用意する（層数は PHP 側で 4 までに丸めている）。
   ここを層数と一致させないと、誰も表示されない空白時間が生まれる。
   次の層が立ち上がるまで消えないよう、境目はわずかに重ねる。 */
@keyframes noir-mask-2 {
	0%    { opacity: 0; }
	1.5%  { opacity: 1; }
	50%   { opacity: 1; }
	51.5% { opacity: 0; }
	100%  { opacity: 0; }
}

@keyframes noir-mask-3 {
	0%     { opacity: 0; }
	1.5%   { opacity: 1; }
	33.33% { opacity: 1; }
	34.83% { opacity: 0; }
	100%   { opacity: 0; }
}

@keyframes noir-mask-4 {
	0%    { opacity: 0; }
	1.5%  { opacity: 1; }
	25%   { opacity: 1; }
	26.5% { opacity: 0; }
	100%  { opacity: 0; }
}

.c-mask[style*="--layers:2"] .c-mask__layer {
	animation-name: noir-mask-2, noir-mask-sheen;
}

.c-mask[style*="--layers:3"] .c-mask__layer {
	animation-name: noir-mask-3, noir-mask-sheen;
}

/* 語が 1 つだけのときは巡回させない。光沢だけを往復させ続ける */
.c-mask[style*="--layers:1"] .c-mask__layer {
	animation: noir-mask-sheen 5.5s var(--ease-in-out) infinite alternate;
	animation-delay: 0s;
	opacity: 1;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
	.c-mask__layer {
		position: static !important;
		background: none;
		color: var(--c-gold);
		-webkit-text-fill-color: currentColor;
		filter: none;
		animation: none;
	}

	.c-mask__layer:not(:first-child) {
		display: none;
	}
}

.c-hero__ja {
	margin: clamp(18px, 2.4vw, 34px) 0 0;
	font-family: var(--ff-mincho);
	font-size: clamp(1.0625rem, 1.9vw, 1.75rem);
	font-weight: 400;
	letter-spacing: 0.28em;
	color: var(--c-gold-lt);
}

.c-hero__lead {
	max-width: 34em;
	margin-top: clamp(20px, 2.2vw, 30px);
	color: var(--c-ink-dim);
	font-size: 0.9375rem;
	line-height: 1.9;
}

.c-hero__foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-top: clamp(24px, 2.6vw, 40px);
	padding-top: 20px;
	border-top: 1px solid var(--c-line-soft);
}

/* スクロールインジケータ */
.c-scrollhint {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--c-ink-dim);
	font-family: var(--ff-display);
	font-size: 0.75rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

.c-scrollhint__line {
	display: block;
	width: 1px;
	height: 56px;
	background: var(--c-gold);
	animation: noir-scroll-hint 2.6s var(--ease-in-out) infinite;
}

@media (max-width: 768px) {
	.c-hero__foot {
		flex-direction: column;
		align-items: flex-start;
	}

	.c-scrollhint__line {
		height: 36px;
	}
}

/* ==========================================================================
   ローディング画面
   初回のみ・上限 1.2 秒。長いローダーは高級ではなく無礼。
   JS が落ちても CSS アニメの終端で必ず消える。
   ========================================================================== */
.c-loader {
	position: fixed;
	inset: 0;
	z-index: var(--z-loader);
	display: grid;
	place-items: center;
	pointer-events: none;
	overflow: hidden;
}

/* 緞帳。縦の折り目を repeating-gradient で入れてビロードに見せる */
.c-loader__curtain {
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient(
			90deg,
			rgba(0, 0, 0, 0.32) 0px,
			rgba(0, 0, 0, 0) 26px,
			rgba(255, 255, 255, 0.045) 52px,
			rgba(0, 0, 0, 0) 78px,
			rgba(0, 0, 0, 0.32) 104px
		),
		var(--g-crimson);
	/* 下端をわずかに波打たせ、布らしさを出す */
	clip-path: ellipse(140% 100% at 50% 0%);
	transform-origin: top;
	animation: noir-curtain var(--loader-dur) var(--ease-in-out) forwards;
	will-change: transform;
}

/* 幕が上がり始めるのは後半から。前半は溜めに使う */
@keyframes noir-curtain {
	0%, 58% { transform: translateY(0); }
	100%    { transform: translateY(-101%); }
}

.c-loader__inner {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: center;
	gap: 22px;
	animation: noir-loader-fade var(--loader-dur) var(--ease) forwards;
}

@keyframes noir-loader-fade {
	0%      { opacity: 0; transform: translateY(10px); }
	12%     { opacity: 1; transform: translateY(0); }
	52%     { opacity: 1; transform: translateY(0); }
	62%     { opacity: 0; transform: translateY(-10px); }
	100%    { opacity: 0; visibility: hidden; }
}

.c-loader__mark {
	color: var(--c-gold-lt);
	font-family: var(--ff-display);
	font-size: clamp(0.875rem, 1.8vw, 1.375rem);
	letter-spacing: 0.46em;
	text-indent: 0.46em;
	text-transform: uppercase;
	text-align: center;
}

/* 金の細線が中央から両側へ伸びる */
.c-loader__rule {
	width: min(300px, 54vw);
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--c-gold-lt), transparent);
	transform: scaleX(0);
	animation: noir-loader-rule var(--loader-dur) var(--ease) forwards;
}

@keyframes noir-loader-rule {
	0%   { transform: scaleX(0); }
	46%  { transform: scaleX(1); }
	100% { transform: scaleX(1); }
}

/* 右下のカウンター。JS が 00→100 まで進める */
.c-loader__count {
	position: absolute;
	right: var(--gutter);
	bottom: clamp(24px, 4vw, 48px);
	z-index: 1;
	color: var(--c-gold-lt);
	font-family: var(--ff-display);
	font-size: clamp(2.5rem, 6vw, 5rem);
	font-variant-numeric: tabular-nums lining-nums;
	letter-spacing: 0.02em;
	opacity: 0.85;
	animation: noir-loader-fade var(--loader-dur) var(--ease) forwards;
}

.c-loader.is-done {
	display: none;
}

/* ==========================================================================
   カスタムカーソル
   ネイティブカーソルは消さない（消すと操作性が落ちて逆に安っぽい）。
   金のリングを足すだけ。
   ========================================================================== */
.c-cursor {
	position: fixed;
	top: 0;
	left: 0;
	z-index: var(--z-cursor);
	display: none;
	width: 38px;
	height: 38px;
	margin: -19px 0 0 -19px;
	border: 1px solid var(--c-gold);
	border-radius: 50%;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.4s var(--ease), width 0.4s var(--ease), height 0.4s var(--ease),
		margin 0.4s var(--ease), background-color 0.4s var(--ease);
	will-change: transform;
}

.c-cursor__label {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--c-bg);
	font-family: var(--ff-display);
	font-size: 0.625rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	opacity: 0;
	transition: opacity 0.3s var(--ease);
}

.c-cursor.is-active {
	opacity: 1;
}

.c-cursor.is-view {
	width: 96px;
	height: 96px;
	margin: -48px 0 0 -48px;
	background: var(--c-gold);
	border-color: var(--c-gold);
}

.c-cursor.is-view .c-cursor__label {
	opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
	.c-cursor {
		display: block;
	}
}

/* ==========================================================================
   横スクロールギャラリー（PICK UP）
   position: sticky + translateX。JS は進捗の受け渡しのみ。
   ========================================================================== */
.c-marquee {
	position: relative;
}

.c-marquee__sticky {
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	height: 100svh;
	overflow: hidden;
}

.c-marquee__track {
	display: flex;
	gap: clamp(16px, 2vw, 36px);
	padding-inline: var(--gutter);
	will-change: transform;
}

.c-marquee__item {
	flex: none;
	width: clamp(220px, 24vw, 360px);
}

/* 横スクロールは十分な画面幅があるときだけ。狭い画面では素直に横スワイプ */
@media (max-width: 1023px) {
	.c-marquee {
		height: auto !important;
	}

	.c-marquee__sticky {
		position: static;
		height: auto;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.c-marquee__sticky::-webkit-scrollbar {
		display: none;
	}

	.c-marquee__track {
		transform: none !important;
	}

	.c-marquee__item {
		width: 62vw;
		scroll-snap-align: center;
	}
}

/* ==========================================================================
   パララックス
   ========================================================================== */
.js-parallax {
	will-change: transform;
}

/* ==========================================================================
   マグネティックボタン
   ========================================================================== */
.js-magnet {
	transition: transform 0.6s var(--ease);
}

/* ==========================================================================
   スクロール駆動アニメーション（対応ブラウザ）
   非対応環境は IntersectionObserver 側にフォールバックする。
   ========================================================================== */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.js-sda {
			animation: noir-fade linear both;
			animation-timeline: view();
			animation-range: entry 10% cover 32%;
		}
	}
}

/* ==========================================================================
   流れる帯（マーキー）
   スクロール方向で流れる向きが反転する。
   ========================================================================== */
.c-band {
	position: relative;
	overflow: hidden;
	padding-block: clamp(18px, 2.2vw, 30px);
	border-block: 1px solid var(--c-line-soft);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.c-band__track {
	display: flex;
	width: max-content;
	animation: noir-band 42s linear infinite;
	animation-direction: var(--band-dir, normal);
	will-change: transform;
}

.c-band__item {
	display: inline-flex;
	align-items: center;
	gap: clamp(20px, 3vw, 48px);
	padding-right: clamp(20px, 3vw, 48px);
	white-space: nowrap;
	color: var(--c-gold);
	font-family: var(--ff-display);
	font-size: clamp(0.8125rem, 1.1vw, 1rem);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	opacity: 0.72;
}

.c-band__sep {
	font-size: 0.5em;
	opacity: 0.6;
}

/* 前半と後半で同じ内容を並べているので、-50% で継ぎ目なくループする */
@keyframes noir-band {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* ==========================================================================
   スクロール連動の歪み
   JS が速度を --skew に書き込み、対象だけがわずかに傾く。
   ========================================================================== */
.js-skew {
	transform: skewY(var(--skew, 0deg));
	transition: transform 0.35s var(--ease);
}

/* ==========================================================================
   画像のクリップ展開
   カード登場時に、下から上へマスクが開いて写真が現れる。
   ========================================================================== */
.js .js-clip {
	clip-path: inset(100% 0 0 0);
	transition: clip-path 1.15s var(--ease) calc(var(--i, 0) * var(--stagger));
	will-change: clip-path;
}

.js .is-in .js-clip,
.js .js-clip.is-in {
	clip-path: inset(0 0 0 0);
}

/* ==========================================================================
   ページ遷移の黒幕
   View Transitions（MPA）。非対応ブラウザでは何も起きない。
   背景が漆黒なので、新しいページが右から差し込むと黒幕が走ったように見える。
   ========================================================================== */
@keyframes noir-vt-out {
	to {
		transform: scale(0.985);
		opacity: 0;
		filter: brightness(0.25);
	}
}

@keyframes noir-vt-in {
	from {
		clip-path: inset(0 0 0 100%);
	}
	to {
		clip-path: inset(0 0 0 0);
	}
}

::view-transition-old(root) {
	animation: noir-vt-out 0.5s var(--ease) forwards;
	mix-blend-mode: normal;
}

::view-transition-new(root) {
	animation: noir-vt-in 0.72s var(--ease) forwards;
	mix-blend-mode: normal;
}

/* ==========================================================================
   モーション削減
   「短くする」ではなく完全に殺す。
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	html {
		scroll-behavior: auto !important;
	}

	.js .js-reveal,
	.js .js-reveal.is-in {
		opacity: 1 !important;
		transform: none !important;
	}

	.js .c-split__char {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}

	/* 光は消さない。揺らぎだけ止めて、点灯した状態で固定する */
	.c-hero__glow,
	.c-hero__beam,
	.c-hero__floor {
		animation: none !important;
		opacity: 0.75;
	}

	.c-hero__glow {
		transform: translateX(-50%);
	}

	.c-hero__beam {
		transform: translateX(-50%) rotate(var(--rot, 0deg));
	}

	.c-hero__floor {
		transform: none;
	}

	.c-loader {
		display: none !important;
	}

	.c-cursor,
	.c-preview {
		display: none !important;
	}

	.c-marquee {
		height: auto !important;
	}

	.c-marquee__sticky {
		position: static;
		height: auto;
		overflow-x: auto;
	}

	.c-marquee__track {
		transform: none !important;
	}

	.c-grain {
		opacity: 0.03;
	}

	/* 文字マスクは最初の語で固定する。光沢も流さず、
	   いちばん光の乗る位置で止める */
	.c-mask__layer {
		animation: none !important;
		opacity: 0;
		background-position: 62% 50% !important;
	}

	.c-mask__layer:first-child {
		opacity: 1;
	}

	.c-band__track {
		animation: none !important;
		transform: none !important;
	}

	.js-skew {
		transform: none !important;
	}

	.js .js-clip,
	.js .is-in .js-clip {
		clip-path: none !important;
	}

	::view-transition-old(root),
	::view-transition-new(root) {
		animation: none !important;
	}
}