/* =========================================================
   CIEL LP — motion.css（動きのレイヤー・案B 印象重視）
   ・既存の styles.css は変更していません。このファイルと motion.js を外せば静止版に戻ります。
   ・既存の transform（写真の傾き・あしらいの角度）と競合しないよう、
     個別プロパティ translate / rotate / scale と opacity だけを動かします。
   ・待機状態（非表示）は motion.js が html に .motion-ready を付けたときだけ有効。
     JS が動かない環境では、すべて最初から表示されます。
   ・料金（s07）と FAQ（s08）の文字は動かしません。
   ========================================================= */

:root{
  --mo-ease: cubic-bezier(.22,.61,.36,1);
  --mo-dur: .9s;          /* 見出し・本文の登場 */
  --mo-dur-photo: 1.1s;   /* 小写真の登場 */
  --mo-shift: 18px;       /* 下からの移動量 */
  --mo-float: 6px;        /* 花びら・葉の上下の揺れ幅 */
}
@media (max-width:1023.98px){
  :root{ --mo-shift: 12px; --mo-float: 4px; }
}

/* ---------- 1. 見出し・本文：下からふわっと ---------- */
.motion-ready [data-mo="text"]{
  opacity:0;
  translate: 0 var(--mo-shift);
  transition: opacity var(--mo-dur) var(--mo-ease), translate var(--mo-dur) var(--mo-ease);
  transition-delay: var(--mo-delay, 0s);
}
.motion-ready [data-mo="text"].is-in{ opacity:1; translate: 0 0; }

/* ---------- 2. 傾いた小写真：少し回りながら置かれる ---------- */
.motion-ready [data-mo="photo"]{
  opacity:0;
  translate: 0 26px;
  rotate: var(--mo-rot, -5deg);
  scale: .96;
  transition:
    opacity var(--mo-dur-photo) var(--mo-ease),
    translate var(--mo-dur-photo) var(--mo-ease),
    rotate var(--mo-dur-photo) var(--mo-ease),
    scale var(--mo-dur-photo) var(--mo-ease);
  transition-delay: var(--mo-delay, 0s);
}
.motion-ready [data-mo="photo"].is-in{ opacity:1; translate:0 0; rotate:0deg; scale:1; }

/* ---------- 3. トップの女性写真：ごくゆっくり拡大（1回だけ） ---------- */
.motion-ready .hero__portrait .photo--main img{
  animation: mo-hero-zoom 16s var(--mo-ease) both;
  transform-origin: 70% 30%;
}
@keyframes mo-hero-zoom{ from{ scale:1; } to{ scale:1.07; } }

/* ---------- 4. 花びら・葉：ゆっくり漂う＋スクロールで小さく上下 ---------- */
@property --mo-fy{ syntax:'<length>'; inherits:false; initial-value:0px; }
.motion-ready .deco{
  translate: 0 calc(var(--mo-py, 0px) + var(--mo-fy, 0px));
  will-change: translate, rotate;
}
.motion-ready .deco.is-live{
  animation: mo-drift var(--mo-drift-dur, 8s) ease-in-out infinite alternate;
  animation-delay: var(--mo-drift-delay, 0s);
}
@keyframes mo-drift{
  from{ --mo-fy: calc(var(--mo-float) * -1); rotate:-3deg; }
  to  { --mo-fy: var(--mo-float);            rotate: 4deg; }
}

/* ---------- 5. 予約ボタン：やわらかい反応（hover / focus / 押下） ---------- */
.cta{
  transition: background-color .2s ease, translate .25s var(--mo-ease), box-shadow .25s var(--mo-ease), scale .15s ease;
}
.cta__arrow{ transition: translate .25s var(--mo-ease); }
@media (hover:hover){
  .cta:hover{ translate: 0 -2px; box-shadow: 0 12px 26px rgba(181,87,60,.28); }
  .cta:hover .cta__arrow{ translate: 4px 0; }
}
.cta:focus-visible{ translate: 0 -2px; box-shadow: 0 12px 26px rgba(181,87,60,.28); }
.cta:focus-visible .cta__arrow{ translate: 4px 0; }
.cta:active{ translate: 0 0; scale:.98; box-shadow: 0 4px 10px rgba(181,87,60,.22); }

/* ---------- 動きを減らす設定：すべて静止・即時表示 ---------- */
@media (prefers-reduced-motion: reduce){
  .motion-ready [data-mo],
  .motion-ready [data-mo].is-in{
    opacity:1 !important; translate:none !important; rotate:none !important; scale:none !important;
    transition:none !important;
  }
  .motion-ready .hero__portrait .photo--main img,
  .motion-ready .deco,
  .motion-ready .deco.is-live{ animation:none !important; translate:none !important; rotate:none !important; }
  .cta, .cta__arrow{ transition: background-color .2s ease !important; translate:none !important; scale:none !important; }
}