/* ========== カード固有（CSS変数でtransformを合成） ==========
   - JSは inline transform を書かず、--dx/--dy/--scale/--tyHover を操作します。
   - hover と FLIP の競合を回避できます。
=============================================================== */

/* カード本体（ベース） */
.card {
  /* 規定値（単位付き） */
  --dx: 0px; /* FLIP用：X差分 */
  --dy: 0px; /* FLIP用：Y差分 */
  --tyHover: 0px; /* ホバーによる微小移動（Yのみ） */
  --scale: 1; /* 表示/非表示のスケール */

  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  text-decoration: none;
  color: inherit;
  border: 1px solid transparent; /* ダーク時のみ見切れ対策 */

  /* ふわっと表示用の初期値 */
  visibility: visible;
  opacity: 1;

  /* 変数で合成（順序：translate → scale） */
  transform: translate(var(--dx), calc(var(--dy) + var(--tyHover)))
    scale(var(--scale));

  /* トランジションを統一 */
  transition: opacity 250ms ease, transform 250ms ease, box-shadow 250ms ease;
}

/* フォーカスリング（キーボード操作配慮） */
.card:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}

/* ホバーで軽く浮かせる（CSS変数で合成） */
.card:hover {
  --tyHover: -2px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

/* 表示アニメの非表示側（display:noneは使わない） */
.card.is-hidden {
  visibility: hidden;
  opacity: 0;
  --scale: 0.6; /* 少し縮めて消える */
  pointer-events: none;
}

/* 消え切った後だけ、レイアウトから外す（穴を即詰め） */
.card.is-gone {
  display: none;
}

/* ダークモード（カードの色味） */
@media (prefers-color-scheme: dark) {
  .card {
    background: #111318;
    box-shadow: none;
    border: 1px solid #222;
  }
}