@charset "utf-8";
/* .mv ロード時FVイントロの初期状態（index_anime.js のGSAPタイムラインで表示へ遷移）
   ※.mv_catch は opacity:0 から GSAPでフェードイン。
     .mv_oval は PC/SP共通で下の @keyframes mvOvalReveal（clip-pathのクリーンワイプ）で登場。
     ＝半透明にしないので背景(緑)が写真に乗らない。GSAPは .mv_oval を担当しない（transform競合回避）。
   ・上→下へワイプ＋2rem上昇／ease:cubic-bezier(.86,0,.07,1)／1.4s／1回(fill both)
   ・delay 1.3s＝.mv_catch の終了(位置1.0s＋duration0.8s＝1.8s) に 0.5s 被せて登場開始（1.3〜1.8sが重なる） */
.mv_oval{
	opacity: 1;                              /* 半透明にしない＝登場中も背景の緑が写真に乗らない */
	transform: translateY(2rem);
	-webkit-clip-path: inset(0 0 100% 0);    /* 初期＝上端で全クリップ（非表示） */
	        clip-path: inset(0 0 100% 0);
	will-change: transform, clip-path;
	animation: mvOvalReveal 1.4s cubic-bezier(0.86, 0, 0.07, 1) 1.3s both;
}
.mv_catch{
	opacity: 0;
}
@keyframes mvOvalReveal{
	/* 上→下へクリーンなワイプで登場＋2rem上昇。写真は常に不透明＝本来の色のまま（緑の透けが乗らない） */
	0%   { transform: translateY(2rem); -webkit-clip-path: inset(0 0 100% 0); clip-path: inset(0 0 100% 0); }
	100% { transform: translateY(0);    -webkit-clip-path: inset(0 0 0 0);    clip-path: inset(0 0 0 0); }
}
/* 視差軽減（reduce）設定の利用者：登場アニメを止めて即表示（PC/SP共通） */
@media (prefers-reduced-motion: reduce){
	.mv_oval{
		animation: none;
		opacity: 1;
		transform: none;
		-webkit-clip-path: none; clip-path: none;
	}
}

/* ============================================================
   .mv_bg：横パノラマ背景を「左→右」へゆっくり流す無限ループ
   ・::before に画像を repeat-x で敷き、1タイル分だけ transform で移動＝継ぎ目なしループ
   ・タイル幅 --mv-tile ＝ コンテナ高さ × 画像アスペクト（縦フィットのまま横に流す）
       PC: 82.9rem ×(7720/1658)= 386rem ／ SP: 64.7rem ×(1500/1294)= 75rem
   ・transform 使用＝GPU合成でスムーズ（Lenis慣性と併走してもリペイントしない）
   ・width・background-size・移動量はすべて --mv-tile 由来＝1箇所で速度以外を管理
   ・速度は animation の秒数で調整（大きいほどゆっくり）
   ・親 .mv_bg は overflow:hidden 済み（css/index.css）＝はみ出しはクリップされる
   ============================================================ */
.mv_bg::before{
	--mv-tile: 386rem;                       /* PC：画像1枚の表示幅（＝高さ×アスペクト） */
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: calc(100% + var(--mv-tile));      /* 左送り時も右端が欠けないよう ＋1タイル分 */
	background-image: var(--mv-bg, url(../img/index/eye02.jpg));
	background-repeat: repeat-x;
	background-size: var(--mv-tile) 100%;    /* 1タイル＝--mv-tile幅・縦100%＝アスペクト維持 */
	background-position: 0 center;
	will-change: transform;
	animation: mvBgPan 120s linear infinite;
}
@keyframes mvBgPan{
	from { transform: translateX(0); }                          /* 通常位置から */
	to   { transform: translateX(calc(var(--mv-tile) * -1)); }  /* 1タイル左へ＝右→左に流れる（継ぎ目なし） */
}
/* 視差軽減（reduce）設定の利用者にはループを止める */
@media (prefers-reduced-motion: reduce){
	.mv_bg::before{ animation: none; }
}

@media only screen and (max-width: 767px){
	.mv_bg::before{
		--mv-tile: 75rem;                    /* SP：64.7rem ×(1500/1294)= 75rem */
		background-image: var(--mv-bg-sp, url(../img/index/eye02_sp.jpg));
		animation-duration: 80s;
	}
}