/* ===========================================================
   motion.css — 動きの定義
   「動きを減らす」設定の人には base.css で自動的に止まります。
   =========================================================== */

/* --- 読み込み時：文字 → 写真 の順に出す -------------------- */

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in-zoom {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1); }
}

/* ゆっくり拡大し続ける（写真） */
@keyframes slow-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

/* ふわふわ浮かぶ（雲・装飾） */
@keyframes float-soft {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(-12px, -14px) rotate(-1.5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* 画面に入ったら下から現れる（スクロール連動） */
@keyframes reveal {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- ファーストビューの演出 ------------------------------- */
/* 0.2秒 1行目 → 0.9秒 2行目 → 1.7秒 写真 → そのあとゆっくり拡大 */

.fv__line {
  opacity: 0;
  animation: fade-in-up .9s ease-out forwards;
}
.fv__line:nth-child(1) { animation-delay: .2s; }
.fv__line:nth-child(2) { animation-delay: .9s; }

.fv__photo {
  opacity: 0;
  animation:
    fade-in-zoom 1.4s ease-out 1.7s forwards,
    slow-zoom 18s ease-in-out 3.1s infinite alternate;
}

.fv__btn {
  opacity: 0;
  animation: fade-in-up 1s ease-out 2.6s forwards;
}

/* 背景の水彩：2.6秒で現れ、その後ゆっくり漂い続ける */
.fv__wash {
  opacity: 0;
  animation:
    fade-in-wash 1.4s ease-out 2.6s forwards,
    float-soft 14s ease-in-out 4s infinite;
}
.fv__wash--right { animation-delay: 2.6s, 6s; }

@keyframes fade-in-wash {
  from { opacity: 0; }
  to   { opacity: .63; }
}

/* --- ふわふわ浮かぶ装飾 ----------------------------------- */
/* 画像に class="float" を付けると、ゆっくり漂います */

.float {
  animation: float-soft 9s ease-in-out infinite;
  will-change: transform;
}
.float--slow { animation-duration: 14s; }
.float--fast { animation-duration: 6s; }
.float--delay-1 { animation-delay: -3s; }
.float--delay-2 { animation-delay: -6s; }

/* --- カーソルを合わせると膨らむ --------------------------- */

.gnav__link { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.gnav__link:hover { transform: translateY(-4px); }

.gnav__icon { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.gnav__link:hover .gnav__icon { transform: scale(1.18); }

.sns__icon { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.sns a:hover .sns__icon { transform: scale(1.15); }

a:hover .logo__mark { transition: transform .4s ease; }

/* --- スクロールで現れる ----------------------------------- */
/* JavaScript が class="is-visible" を付けたら動きます */

.reveal { opacity: 0; }
.reveal.is-visible { animation: reveal .8s ease-out forwards; }
.reveal--delay-1.is-visible { animation-delay: .15s; }
.reveal--delay-2.is-visible { animation-delay: .3s; }

/* --- 主役のコピー（安心して預けられる） -------------------- */
/* 1行目は一文字ずつ（0.1秒おき）、2行目は1行まとめてふわっと。
   書体も大きさも同じにして、「動きの違い」だけで1行目を立たせる */

.split-char {
  display: inline-block;
  opacity: 0;
  filter: blur(5px);
  transform: translateY(.15em);
}
[data-animate].is-visible .split-char {
  animation: char-in .6s ease-out forwards;
  animation-delay: calc(var(--i) * 100ms);
}
@keyframes char-in {
  to { opacity: 1; filter: blur(0); transform: none; }
}

.miryoku__catch-sub { opacity: 0; }
[data-animate].is-visible .miryoku__catch-sub {
  animation: sub-in .9s ease-out 1.3s forwards;
}
@keyframes sub-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}