/* ==========================================================================
   components.css — BeruRogue Collect 共通コンポーネントスタイル
   複数HTMLで実質同一のクラスを統一。微差は 01（トップページ）を正とする。
   ========================================================================== */

/* プレミアムトランジション（01,02,05,06,07 に存在。01 の 0.6s を正とする） */
.premium-transition {
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ヘッダーぼかしは疑似要素へ（本体の backdrop-filter は fixed 子孫の containing block になる） */
#site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: none;
}

/* スクロールフェードイン用の初期状態（01,04 に存在。セレクタ名の差異はページ側で吸収）
   01: .fade-in-section / .is-visible　（トップ固有の演出のため pages/top.css 側にも個別定義あり）
   ここでは共通の考え方だけを .fade-in-section として集約 */
.fade-in-section {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-in-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 画像プレースホルダー（01,02,07 に存在。01 を正としfont-size 1.2rem を採用） */
.image-placeholder {
  background: linear-gradient(135deg, #FAF8F4 0%, #E6DFD5 100%);
  position: relative;
}
.image-placeholder::after {
  content: 'BeruRogue Collect';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  letter-spacing: 0.15em;
  color: #C5A880;
}

/* FAQ アコーディオンのスムーズな展開（01 の #faq セクションで使用） */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
}
.faq-item.is-active .faq-answer {
  max-height: 500px;
  opacity: 1;
}
.faq-icon {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-item.is-active .faq-icon {
  transform: rotate(180deg);
}