/* 動き(アニメーション)— 2026-10-17 見本
   入口のアイキャッチ(トップのみ・1回の訪問で1度だけ)/スクロールで弾んで出る/ボタンの動き
   端末で「動きを減らす」にしている人には動かしません */

/* 入口のアイキャッチは css/eyecatch.css と js/ec/ */

/* ===== トップの写真とキャッチ(入口のあと) ===== */
.hero { overflow: hidden; }
.hero.go img { animation: heroZoom 7s cubic-bezier(.2,.6,.3,1) forwards; }
@keyframes heroZoom { from { transform: scale(1.14); } to { transform: scale(1); } }
.hero .catch .ln { display: inline-block; opacity: 0; transform: translateY(24px); }
.hero.go .catch .ln { animation: lnPop .7s cubic-bezier(.3,1.5,.5,1) forwards; }
.hero.go .catch .ln:nth-of-type(2) { animation-delay: .25s; }
@keyframes lnPop { to { opacity: 1; transform: none; } }

/* ===== スクロールで弾んで出る ===== */
.rv { opacity: 0; transform: translateY(34px) scale(.96); }
.rv.in { animation: rvIn .75s cubic-bezier(.3,1.45,.5,1) forwards; animation-delay: var(--rv-d, 0s); }
@keyframes rvIn { to { opacity: 1; transform: none; } }
h2.rv { transform: translateX(-24px); }
h2.rv.in { animation-name: rvH2; }
@keyframes rvH2 { 0% { opacity: 0; transform: translateX(-24px); border-left-color: transparent; } 100% { opacity: 1; transform: none; } }
.flow span.rv.in { box-shadow: 0 0 0 3px rgba(42,155,181,.25); transition: box-shadow 1s; }

/* ===== ボタン・カードの手ざわり ===== */
.btn, .call-bar a { position: relative; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(29,111,165,.28); }
.btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
              transform: skewX(-20deg); animation: btnShine 4.5s ease-in-out infinite; }
@keyframes btnShine { 0%, 70% { left: -60%; } 100% { left: 130%; } }
.card, .treat article, .gallery figure, .greeting { transition: transform .25s, box-shadow .25s; }
.card:hover, .treat article:hover, .gallery figure:hover { transform: translateY(-5px); box-shadow: 0 12px 26px rgba(26,79,134,.13); }
.gallery figure img { transition: transform .5s; }
.gallery figure:hover img { transform: scale(1.06); }

/* 動きを減らす設定の人には動かさない */
@media (prefers-reduced-motion: reduce) {
  .rv, .hero .catch .ln { opacity: 1 !important; transform: none !important; animation: none !important; }
  .hero.go img, .btn::after { animation: none !important; }
}