/* =====================================================================
   Background FX — 軽量背景演出
   すべて body.bg-fx スコープ。bg-fx が付かなければ一切作用しない。
   （無効化は inc/background-fx.php のコメント参照）
   ===================================================================== */

/* ---- 固定背景レイヤー ---- */
.bgfx {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    background-color: #0A0908;
    pointer-events: none;
}

/* 背景画像: ゆっくりズーム(ken burns) + クロスフェード。3枚を時間差で巡回 */
.bgfx-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    will-change: opacity, transform;
    animation: bgfx-slide 27s ease-in-out infinite;
}
.bgfx-slide:nth-child(1) { animation-delay: 0s; }
.bgfx-slide:nth-child(2) { animation-delay: 9s; }
.bgfx-slide:nth-child(3) { animation-delay: 18s; }

@keyframes bgfx-slide {
    0%   { opacity: 0; transform: scale(1.04); filter: saturate(1.05) brightness(0.95); }
    6%   { opacity: 1; }
    15%  { filter: saturate(1.85) brightness(1.22) contrast(1.08); } /* ← ガーッと鮮やかな瞬間 */
    27%  { opacity: 1; }
    33%  { opacity: 0; transform: scale(1.12); filter: saturate(1.05) brightness(0.95); }
    100% { opacity: 0; transform: scale(1.12); }
}

/* 可読性のためのヴェール + キーカラーのかすかなグロー */
.bgfx-veil {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(130% 90% at 50% -10%, rgba(255, 213, 0, 0.10), transparent 55%),
        linear-gradient(180deg, rgba(10, 9, 8, 0.42) 0%, rgba(10, 9, 8, 0.60) 100%);
}

/* 漂う粒子 (JS が描画) */
.bgfx-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
}

/* ---- body / セクションを半透明にして背景を透かす ---- */
body.bg-fx {
    background-color: transparent !important;
}
body.bg-fx .bg-paper    { background-color: color-mix(in oklab, #0A0908 74%, transparent); }
body.bg-fx .bg-surface  { background-color: color-mix(in oklab, #13110F 82%, transparent); }
body.bg-fx .bg-surface2 { background-color: color-mix(in oklab, #1B1815 80%, transparent); }
body.bg-fx .bg-midnight { background-color: color-mix(in oklab, #000000 68%, transparent); }

/* 実績一覧カード: 写真はフルブリード(余白なし)、テキスト部分だけ暗フィルター + 多めの余白で可読性を確保 */
body.bg-fx .work-card-body {
    background-color: rgba(10, 9, 8, 0.62);
    padding: 1.3rem;
}

/* サービス(03 / 4 Domains)のカード: 背景FXの上でも読みやすいよう、実績カードと同じ暗フィルターを敷く */
body.bg-fx #service article {
    background-color: rgba(10, 9, 8, 0.62);
}

/* 価格表・仕様表などのテーブル: 背景が明るくなっても必ず読めるよう半透明ブラックを敷く（全ページ共通）。
   セル背景(bg-surface2)を持つラベル列は二重で僅かに濃くなり、見出し/値のコントラストも保たれる。 */
body.bg-fx table {
    background-color: rgba(10, 9, 8, 0.66);
}
/* 端の列は背景の縁にテキストが貼り付かないよう左右の内側余白を確保
   （price-table は端セルに左右 padding が無いため必須。全テーブル共通で適用） */
body.bg-fx table th:first-child,
body.bg-fx table td:first-child {
    padding-left: 1.25rem;
}
body.bg-fx table th:last-child,
body.bg-fx table td:last-child {
    padding-right: 1.25rem;
}

/* ブログ/実績の本文: 読み物なので背景が明るくなっても必ず読めるよう
   半透明ブラックのパネルを敷き、内側に余白を確保する（テーブル/カードと同じ要領）。 */
body.bg-fx .works-body {
    background-color: rgba(10, 9, 8, 0.62);
    padding: 1.6rem 1.35rem;
}
@media (min-width: 640px) {
    body.bg-fx .works-body {
        padding: 2.6rem 2.4rem;
    }
}

/* ブログ単一記事の主カラム(single.php): 主カラム全体(hero / 本文 / タグ / Prev-Next)を
   1 枚のパネルにまとめ、全要素を同じ左右インセットに収める。これで .works-body 単体に
   padding を敷いていた時の「本文だけ約38px 内側にずれる」段差が解消し、4要素の左端が一致する。
   グローバルの .works-body ルールは single-works.php でも使うため変更せず、内側の二重パネルだけ無効化する。 */
body.bg-fx .blog-article-col {
    background-color: rgba(10, 9, 8, 0.62);
    padding: 1.6rem 1.35rem;
}
@media (min-width: 640px) {
    body.bg-fx .blog-article-col {
        padding: 2.6rem 2.4rem;
    }
}
body.bg-fx .blog-article-col .works-body {
    background-color: transparent;
    padding: 0;
}

/* ---- スクロール fade-in ---- */
body.bg-fx [data-fx] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.85s ease, transform 0.85s ease;
}
body.bg-fx [data-fx].is-visible {
    opacity: 1;
    transform: none;
}

/* ---- モーション抑制ユーザーへの配慮 ---- */
@media (prefers-reduced-motion: reduce) {
    .bgfx-slide { animation: none; opacity: 0.16; }
    .bgfx-particles { display: none; }
    body.bg-fx [data-fx] { opacity: 1 !important; transform: none !important; transition: none; }
}