/* ============================================================
   いこい — やさしいモーション(癒し・安らぎ・上品)
   デザイン(style.css)は変更せず、動きだけを上乗せしています。
   不要になったら index.html から motion.css / motion.js の2行を消すだけで元に戻ります。
   ============================================================ */
:root{--ease:cubic-bezier(.22,.61,.36,1);--slow:1.4s}

/* ① 読み込み:ヒーローがゆっくり浮かび上がる */
.js .hero>img{animation:heroIn 2.2s var(--ease) both}
@keyframes heroIn{from{opacity:0;transform:translateY(14px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}

/* ② 予約ボタン:呼吸するようなやわらかい光 */
.hero-call{animation:breathe 4.2s ease-in-out 2.4s infinite}
@keyframes breathe{0%,100%{box-shadow:0 0 0 0 #95704f00}50%{box-shadow:0 0 0 12px #95704f26}}
.call-button,.mobile-booking-bar .booking-button{transition:transform .6s var(--ease),box-shadow .6s var(--ease),filter .6s}
.call-button{animation:glow 4.6s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 .4cqw 1cqw #71471e35}50%{box-shadow:0 .5cqw 2.2cqw #b18a6266}}
.call-button:hover{transform:translateY(-3px) scale(1.02);filter:brightness(1.06)}

/* ③ 葉・花の装飾:風に揺れるようにごくゆっくり */
.leaf{will-change:transform;animation:sway 9s ease-in-out infinite alternate}
.leaf-left{transform-origin:0 0}.leaf-top{transform-origin:100% 0;animation-duration:11s;animation-delay:-3s}
.leaf-bottom{transform-origin:0 100%;animation-duration:10s;animation-delay:-5s}
.leaf-right{transform-origin:100% 50%;animation-duration:12s;animation-delay:-2s}
@keyframes sway{from{transform:rotate(-1.1deg) translate3d(0,0,0)}to{transform:rotate(1.3deg) translate3d(0,6px,0)}}

/* ④ スクロールで、やさしく現れる */
.js [data-r]{opacity:0;transform:translate3d(0,26px,0);
  transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease);
  transition-delay:var(--d,0s)}
.js [data-r].in{opacity:1;transform:none}
.js [data-r="left"]{transform:translate3d(-28px,0,0)}.js [data-r="right"]{transform:translate3d(28px,0,0)}
.js [data-r="left"].in,.js [data-r="right"].in{transform:none}
.js [data-r="zoom"]{transform:scale(1.05)}.js [data-r="zoom"].in{transform:none}
/* バナーは左から右へ、カーテンが開くように */
.js [data-r="wipe"]{opacity:1;transform:none;filter:none;clip-path:inset(0 100% 0 0);transition:clip-path 2s var(--ease)}
.js [data-r="wipe"].in{clip-path:inset(0 0 0 0)}

/* ⑤ 触れたときのやわらかい反応 */
.menu-card>img,.extra-photo,.oil-photo,.room{transition:transform 1.4s var(--ease)}
.menu-card:hover>img,.extra:hover .extra-photo,.oil-detail:hover .oil-photo,.store-grid:hover .room{transform:scale(1.03)}
.prices,.oil-prices-panel{transition:transform .9s var(--ease),box-shadow .9s var(--ease)}
.menu-card:hover .prices,.extra:hover .prices,.oil-detail:hover .oil-prices-panel{transform:translateY(-4px);box-shadow:0 14px 30px #96785f1f}
.access>a img{transition:filter .8s,transform 1.2s var(--ease)}.access>a:hover img{filter:brightness(1.04) saturate(1.05);transform:scale(1.03)}
.image-link{transition:background .8s,box-shadow .8s}

/* ⑥ 空気感:光のつぶ(ヒーローに漂う)とスクロールで移ろう淡い光 */
.motes{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2}
.motes i{position:absolute;bottom:-8%;border-radius:50%;background:radial-gradient(circle,#fff8e8 0%,#fff3d6aa 40%,#fff3d600 70%);
  opacity:0;animation:rise var(--t,16s) linear var(--dl,0s) infinite}
@keyframes rise{0%{opacity:0;transform:translate3d(0,0,0) scale(.8)}12%{opacity:var(--o,.6)}80%{opacity:var(--o,.6)}100%{opacity:0;transform:translate3d(var(--dx,20px),-105cqw,0) scale(1.15)}}
.ambient{position:fixed;inset:-20vmax;pointer-events:none;z-index:3;opacity:.22;contain:strict;
  background:radial-gradient(40vmax 34vmax at var(--ax,70%) var(--ay,20%),#ffe9c8aa,#ffe9c800 70%),radial-gradient(30vmax 26vmax at calc(100% - var(--ax,70%)) calc(100% - var(--ay,20%)),#f4d7c466,#f4d7c400 70%)}
.cursor-light{position:fixed;left:0;top:0;width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;pointer-events:none;z-index:4;
  background:radial-gradient(circle,#ffe8c433,#ffe8c400 68%);opacity:0;transition:opacity 1s;will-change:transform}
.cursor-light.on{opacity:1}

/* 動きが苦手な方・省電力設定:すべて静止 */
@media (prefers-reduced-motion:reduce){
  .js .hero>img,.hero-call,.call-button,.leaf,.motes i{animation:none!important}
  .js [data-r]{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important;transition:none!important}
  .motes,.ambient,.cursor-light{display:none}
}
@media (hover:none){.cursor-light{display:none}}