/* ============================================================
   cards.css — カードコンポーネント（3D構造・フリップ・逆位置回転）
   結果グリッド: 上段3枚（大アルカナ: 過去/現在/未来）
                下段3枚（小アルカナ: 原因/対策/結果）
   ============================================================ */

.card {
  --card-w-local: var(--card-w);
  position: relative;
  width: var(--card-w-local);
  /* aspect-ratio は .card-inner（画像部分）に持たせる。figure 自体に付けると
     figcaption（カード名ラベル）が箱からあふれ、後続要素に重なる */
  perspective: 1200px;
}

/* 金色グローのオーバーレイ疑似要素（box-shadow ではなく opacity のみで出し入れ）。
   カード面領域（aspect-ratio 分）だけを覆い、ラベルには被らない。
   既定は不可視。演出クラス（.is-revealing / .is-listening）が opacity を上げる。 */
.card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 150%;
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  background: radial-gradient(
    circle at 50% 40%,
    rgba(233, 212, 161, 0.55) 0%,
    rgba(217, 178, 106, 0.32) 32%,
    transparent 68%
  );
  transition: opacity var(--duration-normal) var(--ease-out-expo);
}

.card-inner {
  position: relative;
  width: 100%;
  aspect-ratio: var(--card-aspect);
  transform-style: preserve-3d;
  transition: transform var(--duration-slow) var(--ease-out-expo);
}

.card.is-flipped .card-inner {
  transform: rotateY(180deg);
}

.card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--card-radius);
  overflow: hidden;
  border: 1px solid rgba(217, 178, 106, 0.4);
  box-shadow: var(--shadow-card);
  background: var(--surface);
}

.card-face--back {
  transform: rotateY(0deg);
}

.card-face--front {
  transform: rotateY(180deg);
}

.card-face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-image {
  transition: transform var(--duration-normal) var(--ease-out-expo);
}

/* 逆位置: フリップとは独立して画像自体を180度回転 */
.card[data-orientation='reversed'] .card-image {
  transform: rotate(180deg);
}

.card-label {
  margin-top: var(--space-2xs);
  text-align: center;
  font-family: var(--font-heading-ja);
  font-size: var(--text-sm);
  color: var(--text);
  letter-spacing: var(--letter-spacing-wide);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.card-orientation {
  font-size: var(--text-xs);
  color: var(--accent-gold-soft);
  letter-spacing: var(--letter-spacing-wide);
}

/* ホバー: 浮遊 + 金のグロー（transform/box-shadowのみ） */
.card:hover .card-face,
.card:focus-within .card-face {
  box-shadow: var(--shadow-card-hover), var(--glow-gold);
}

.card:hover,
.card:focus-within {
  transform: translateY(-4px);
  transition: transform var(--duration-normal) var(--ease-out-expo);
}

/* ---- 結果グリッド ---- */
.cards-grid {
  display: grid;
  /* minmax(0,1fr): カード画像の min-content がトラックを押し広げて
     容器からはみ出す（特に狭幅時）のを防ぐ。followup-cards と同じ対策。 */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md) var(--space-sm);
  justify-items: center;
}

.cards-grid figure.card {
  width: 100%;
  max-width: var(--card-w);
}

/* 行見出し（過去/現在/未来、原因/対策/結果） */
.cards-grid .row-heading {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-muted);
  font-family: var(--font-heading-ja);
  font-size: var(--text-sm);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  position: relative;
  padding-bottom: var(--space-2xs);
}

.cards-grid .row-heading::after {
  content: '';
  display: block;
  width: 3rem;
  height: 1px;
  margin: var(--space-3xs) auto 0;
  background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
}

.cards-grid .row-heading:not(:first-child) {
  margin-top: var(--space-sm);
}

/* ============================================================
   金粉パーティクル（gold-dust）の見た目
   gold-dust.js が span.gold-dust を生成し、CSS 変数を付与する。
   動き（keyframes）は animation.css が担当。ここでは 1 粒の色・形のみ。
   ============================================================ */

/* 1 粒: 中心が明るい金 → 外が金の球体。レイアウトに影響しない absolute 配置。 */
.gold-dust {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--gsize, 3px);
  height: var(--gsize, 3px);
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-overlay);
  opacity: 0;
  background: radial-gradient(
    circle at 35% 30%,
    #FFF6DC 0%,
    #E9D4A1 40%,
    #D9B26A 72%,
    rgba(217, 178, 106, 0) 100%
  );
  /* レイヤー乱造を避けるため will-change は付けない（粒が小さく不要）。 */
}

/* 微細粒バリアント（トレイル用）: 中心が白金（#FFF6DC）の小さな輝点。
   基礎 .gold-dust を流用しつつ、より締まった白金コアで「杖の軌跡の火花」らしく。
   サイズは 1.5〜3.5px 想定（gold-dust.js が --gsize を付与）。 */
.gold-dust--mote {
  background: radial-gradient(
    circle at 50% 45%,
    #FFF6DC 0%,
    #F3E4B8 38%,
    #D9B26A 74%,
    rgba(217, 178, 106, 0) 100%
  );
}

/* きらめきバリアント: 菱形にして「輝きの反射」を演出（clip-path は静的指定）。 */
.gold-dust--glint {
  border-radius: 0;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  background: radial-gradient(
    circle at 50% 50%,
    #F4EBFF 0%,
    #E9D4A1 45%,
    rgba(217, 178, 106, 0) 100%
  );
}

/* ---- レスポンシブ: モバイルでも3列を維持、カード幅を縮小 ---- */
@media (max-width: 480px) {
  :root {
    --card-w: clamp(72px, 24vw, 100px);
  }

  .cards-grid {
    gap: var(--space-sm) var(--space-2xs);
  }

  .card-label {
    font-size: var(--text-xs);
  }
}