/* お花見久兵衛 — Bold motion layer（トップページ試作） 既存の jquery.inview（.inview-zoom 等）/ simpleParallax（.parallax-*）を壊さず、別レイヤーで重ねる。 ・特集画像 = 既存の zoom(scale settle) に「クリップパスのワイプ」を追加し、ズーム量を強める ・.img_wrap にスクロール連動パララックス（motion.js が --mo-shift を更新） ・見出しにスクロール追従ドリフト（--mo-drift） ・下部リンクに上質なホバーズーム ★クリップ隠しは （motion.js がJS実行時のみ付与）でゲート＝JS無効でも画像は表示される。 ★reveal は motion.js の IntersectionObserver が .inviewed-zoom を付与して駆動（jquery.inview 非依存で確実）。 prefers-reduced-motion 時は motion.js が .mo を付けない＝既存挙動のまま。 */ @media (prefers-reduced-motion: no-preference) { /* 1) 画像ブロック（.inview-zoom）: 左→右のワイプ＋強めズーム。全ページ共通。 */ .mo .inview-zoom > div { clip-path: inset(0 100% 0 0); -webkit-clip-path: inset(0 100% 0 0); transform: translate(-50%, 0) scale(1.28); transition: transform 1.5s cubic-bezier(.16, 1, .3, 1) .05s, clip-path 1.25s cubic-bezier(.76, 0, .24, 1), -webkit-clip-path 1.25s cubic-bezier(.76, 0, .24, 1); } .mo .inviewed-zoom > div { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); transform: translate(-50%, 0) scale(1.0); } /* 2) スクロール連動パララックス（未実行時は --mo-shift=0 で無変化＝安全） */ .layout_main .img_wrap { transform: translate3d(0, var(--mo-shift, 0px), 0); will-change: transform; } /* 3) 見出しスパンのスクロール追従ドリフト */ .layout_main .text_wrap h3 span { display: inline-block; transform: translate3d(var(--mo-drift, 0px), 0, 0); will-change: transform; } /* 4) 下部リンク画像の上質ホバーズーム */ .layout_link a { display: block; overflow: hidden; } .layout_link a img { transition: transform 1.1s cubic-bezier(.16, 1, .3, 1); will-change: transform; } .layout_link a:hover img { transform: scale(1.08); } /* 5) ファーストビュー＝“動画のような”シネマティック・モンタージュ。 既存は slide アニメが scale(1)→scale(1) の無効化＝ただのクロスフェード。 各スライドを常時ズーム＋パンさせ（休符を作らず）、長いディゾルブ(JS側 speed)と 合わせて写真の切替を感じさせない“映像”に。スライドショーUI(矢印/ドット)は非表示。 */ .mo .mv.home .carousel.slide .slick-slide > div { will-change: transform; } .mo .mv.home .carousel.slide .add-animation > div, .mo .mv.home .carousel.slide .slick-current > div { animation: mo-kenburns-a 11s cubic-bezier(.33, 0, .2, 1) both; } /* 偶数スライドは逆方向パン＝単調さ回避 */ .mo .mv.home .carousel.slide .slick-slide:nth-of-type(even).add-animation > div, .mo .mv.home .carousel.slide .slick-slide:nth-of-type(even).slick-current > div { animation-name: mo-kenburns-b; } @keyframes mo-kenburns-a { 0% { transform: scale(1.22) translate3d( 3%, 2%, 0); } 100% { transform: scale(1.04) translate3d(-1.5%, -1%, 0); } } @keyframes mo-kenburns-b { 0% { transform: scale(1.22) translate3d(-3%, -2%, 0); } 100% { transform: scale(1.04) translate3d( 1.5%, 1%, 0); } } /* 動画らしく＝スライドショーのUIを隠す */ .mo .mv.home .slick-prev, .mo .mv.home .slick-next, .mo .mv.home .slick-dots { display: none !important; } }