/* =====================================================================
   ひよこナビ  interactions.css
   元デザイン(styles.css)はそのまま。色・レイアウトは変えず、
   "動き・触り心地"だけを足す追加レイヤー。styles.css の後に読み込む。
   index-fx.html / tokyo/index-fx.html からのみ使用（本番未適用）。
   ===================================================================== */

/* スクロールをなめらかに */
html{ scroll-behavior:smooth; }

/* ページ遷移をなめらかに（対応ブラウザで同一サイト内をクロスフェード） */
@view-transition{ navigation:auto; }

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

  /* ===== 1. 押下・ホバーの反応 ===========================================
     transform/box-shadow など"動き"だけ。色や形は元のまま。 */
  a, button,
  .prefecture-chip, .filter-chip, .ranking-area-chip,
  .login-button, .primary-action, .text-button, .filter-submit, .filter-clear-button,
  .shop-search-open, .area-qa-more, .shop-loadmore-button, .filter-mode,
  .shop-card, .shop-card-main, .qa-card, .industry-ranking-row,
  .prefecture-neighbor-nav a, .auth-tab, .shop-card-keep, .filter-sheet-close{
    transition:transform .14s cubic-bezier(.22,1,.36,1),
               box-shadow .2s ease, filter .2s ease,
               background-color .2s ease, border-color .2s ease, color .2s ease;
  }

  /* タップした瞬間の沈み込み */
  .prefecture-chip:active, .filter-chip:active, .ranking-area-chip:active,
  .login-button:active, .primary-action:active, .text-button:active,
  .filter-submit:active, .filter-clear-button:active, .shop-search-open:active,
  .shop-loadmore-button:active, .area-qa-more:active, .filter-mode:active,
  .auth-tab:active, .shop-card-keep:active, .filter-sheet-close:active{
    transform:scale(.95);
  }

  /* ホバーで軽く持ち上がる（影は付け足しすぎない程度に） */
  .shop-card:hover{ transform:translateY(-4px); }
  .qa-card:hover, .latest-review-card:hover{ transform:translateY(-3px); }
  .prefecture-chip:hover, .filter-chip:hover, .ranking-area-chip:hover{ transform:translateY(-1px); }
  .industry-ranking-row:hover{ transform:translateX(3px); }

  /* ===== 2. ふわっと出現（要素が描画された瞬間にアニメ） =================== */
  @keyframes fxFadeUp{
    from{ opacity:0; transform:translateY(10px); }
    to  { opacity:1; transform:translateY(0); }
  }
  .shop-card, .qa-card, .industry-ranking-card,
  .prefecture-region, .latest-review-card{
    animation:fxFadeUp .42s cubic-bezier(.22,1,.36,1) both;
  }
  /* 一覧は少しずつ遅らせて"流れる"ように */
  .shop-grid .shop-card:nth-child(2){ animation-delay:.04s; }
  .shop-grid .shop-card:nth-child(3){ animation-delay:.08s; }
  .shop-grid .shop-card:nth-child(4){ animation-delay:.12s; }
  .shop-grid .shop-card:nth-child(5){ animation-delay:.16s; }
  .shop-grid .shop-card:nth-child(6){ animation-delay:.20s; }
  .shop-grid .shop-card:nth-child(n+7){ animation-delay:.24s; }

  /* ===== 3. スクロールで現れる（JSが .fx-in を付与。対象はJS側で指定） ===== */
  .fx-reveal{ opacity:0; transform:translateY(16px); }
  .fx-reveal.fx-in{
    opacity:1; transform:none;
    transition:opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1);
  }

  /* ===== 4. 読み込み中プレースホルダの微光（スケルトン風） ================ */
  .ranking-empty, .qa-loading{
    background-image:linear-gradient(90deg, transparent, rgba(0,0,0,.045), transparent);
    background-size:200% 100%;
    animation:fxShimmer 1.2s ease-in-out infinite;
  }
  @keyframes fxShimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }

  /* ===== 5. ページ遷移の動き（対応ブラウザ） ============================= */
  ::view-transition-old(root){ animation:fxVtOut .2s ease both; }
  ::view-transition-new(root){ animation:fxVtIn .3s cubic-bezier(.22,1,.36,1) both; }
  @keyframes fxVtOut{ to{ opacity:0; transform:translateY(-6px); } }
  @keyframes fxVtIn { from{ opacity:0; transform:translateY(10px); } }
}