/* ===== サイト共通モーション ===== */

/* 1. スクロールでふわっと表示（motion.js が .rv を付与） */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.3,1)}
.rv.rv-in{opacity:1;transform:none}

/* 2. スクロール後のヘッダー（半透明＋ぼかし＋細く） */
.navbar.sticky-navigation{transition:background-color .35s ease,box-shadow .35s ease,padding .35s ease}
.navbar.sticky-navigation.is-scrolled{
  background-color:rgba(255,255,255,.88)!important;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 2px 14px rgba(22,34,29,.08);
  padding-top:.3rem;padding-bottom:.3rem;
}
.navbar.sticky-navigation .navbar-brand img{transition:height .35s ease,max-height .35s ease}
.navbar.sticky-navigation.is-scrolled .navbar-brand img{max-height:40px}

/* 5・6. 写真カードのホバー（半透明→ほんの少し拡大＋影） */
.hover-img a img,
.item-list-area a img,
.item-list-area-d a img{
  transition:transform .45s cubic-bezier(.2,.8,.3,1),box-shadow .45s ease,opacity .3s ease;
}
.hover-img a:hover img,
.item-list-area a:hover img,
.item-list-area-d a:hover img{
  opacity:1;
  transform:scale(1.03);
  box-shadow:0 10px 28px rgba(22,34,29,.14);
}

/* 3. ページ切り替え: 入るときはふわっと、出るときは白くフェード */
/* フェードインはサイト内リンクで移動してきたときだけ(html.pf は layout 冒頭のスクリプトが付与)。
   初回アクセスや検索ロボットには最初から表示する */
html.pf body{animation:pageIn .45s ease both}
body.page-leave{opacity:0;transition:opacity .22s ease}
@keyframes pageIn{from{opacity:0}to{opacity:1}}

/* 4. トップのメイン画像: 表示中の写真をゆっくりズーム(切り替えは既存のクロスフェード) */
.slider .slick-slide{overflow:hidden}
.slider .slick-slide img{transform:scale(1);transform-origin:50% 50%}
.slider .slick-active img{animation:kenBurns 8s ease-out both}
@keyframes kenBurns{from{transform:scale(1)}to{transform:scale(1.08)}}

/* 動きを減らす設定の端末ではすべて止める */
@media (prefers-reduced-motion: reduce){
  .rv{opacity:1;transform:none;transition:none}
  html.pf body,.slider .slick-active img{animation:none}
  body.page-leave{opacity:1;transition:none}
  .navbar.sticky-navigation,
  .hover-img a img,.item-list-area a img,.item-list-area-d a img{transition:none}
  .hover-img a:hover img,.item-list-area a:hover img,.item-list-area-d a:hover img{transform:none}
}