/* ふうせんかずら 動きレイヤー (既存レイアウトに非干渉で追加)
   方針: あたたか＆洗練。初回フェードイン + スクロールで一枚ずつ立ち上がる。
   JS未実行時はクラスが付かず全要素そのまま表示される(フォールバック安全) */

/* スムーズスクロール */
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: no-preference) {

  /* --- ヒーロー(初回表示): 読み込み時にふわっとフェードイン --- */
  .fk-hero {
    opacity: 0;
    transition: opacity 1s ease;
  }
  .fk-hero.fk-in { opacity: 1; }

  /* --- セクション出現: フェード＋大きめスライドアップ --- */
  .fk-reveal {
    opacity: 0;
    transform: translateY(70px);
    transition: opacity .7s ease, transform .9s cubic-bezier(.22, 1, .36, 1);
  }
  .fk-reveal.fk-in {
    opacity: 1;
    transform: none;
  }

  /* --- ギャラリー等のタイル: 一枚ずつカスケードで"ポンッ"と立ち上がる + ホバー拡大(出現後) --- */
  .fk-tile {
    opacity: 0;
    transform: translateY(52px) scale(.82);
    transition: opacity .55s ease, transform .8s cubic-bezier(.34, 1.45, .5, 1), filter .5s ease, box-shadow .5s ease;
  }
  .fk-tile.fk-in {
    opacity: 1;
    transform: none;
  }
  .fk-tile.fk-in:hover {
    transform: scale(1.05);
    filter: brightness(1.05);
    z-index: 3;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .18);
  }

  /* --- テキスト・カスケード: 見出し/本文が一行ずつ"ポンッ"と立ち上がる(特定セクション用) --- */
  .fk-text {
    opacity: 0;
    transform: translateY(58px) scale(.96);
    transition: opacity .55s ease, transform .85s cubic-bezier(.34, 1.45, .5, 1);
  }
  .fk-text.fk-in {
    opacity: 1;
    transform: none;
  }

  /* --- 写真(img): ホバーでわずかにズーム --- */
  .fk-hover-img {
    transition: transform .55s cubic-bezier(.16, 1, .3, 1), filter .55s ease;
  }
  .fk-hover-img:hover {
    transform: scale(1.04);
    filter: brightness(1.03);
  }

  /* --- ボタン/CTA: 浮き上がりと影 --- */
  .fk-btn {
    transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s ease, filter .25s ease;
  }
  .fk-btn:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
    filter: saturate(1.06);
  }
  .fk-btn:active {
    transform: translateY(-1px) scale(.99);
  }

  /* --- 装飾イラスト: ゆっくり上下に揺れる --- */
  .fk-float {
    animation: fk-bob 6s ease-in-out infinite;
  }
  @keyframes fk-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }
}