/* ==========================================================================
   fff-foundation — 06-page-backgrounds.css
   全ページ共通のベース背景 + ページ別の追加レイヤー（タイル分割でポロポロ落下）

   構造:
   - body::before    : 全ページ共通の固定ベース背景（bg-base.webp）
   - .page-bg-layer  : ページ別の追加背景レイヤー（fixed、8x6=48 タイル分割）
   ========================================================================== */

/* ==========================================================================
   全ページ共通: ベース背景（コラージュ画像、固定）
   ========================================================================== */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url(../images/bg-base.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -2;  /* page-bg-layer (-1) よりさらに後ろ */
    pointer-events: none;
}

/* ==========================================================================
   ページ別の追加背景レイヤー
   ========================================================================== */
.page-bg-layer {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    /* 切替時の地色: グレー一色。ベース背景（コラージュ）を覆うので、
       このレイヤーがあるページではコラージュは見えない */
    background-color: var(--fff-color-gray-soft);
}

/* 各 zone の画像層: 8x6 grid でタイル分割 */
.page-bg-layer__img {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(6, 1fr);
    /* --bg-url は HTML の inline style で設定 */
}

/* タイル: 初期は非表示（上に -120% ずれた状態） */
.page-bg-layer__tile {
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-120%);
    will-change: transform, opacity;
}

/* タイルの中身: 画像全体を 800%x600% で配置して、位置オフセットで対応部分だけ見せる */
.page-bg-layer__tile::before {
    content: '';
    position: absolute;
    top: calc(var(--tile-row, 0) * -100%);
    left: calc(var(--tile-col, 0) * -100%);
    width: 800%;
    height: 600%;
    background-image: var(--bg-url);
    background-size: cover;
    background-position: center;
}

/* is-active のときに各タイルがアニメで落ちてくる
   animation-delay は theme.js でランダム値を inline 設定 */
.page-bg-layer__img.is-active .page-bg-layer__tile {
    animation: fff-bg-tile-drop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes fff-bg-tile-drop {
    from {
        opacity: 0;
        transform: translateY(-120%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* reduce-motion: アニメなしで即表示 */
@media (prefers-reduced-motion: reduce) {
    .page-bg-layer__tile {
        opacity: 1;
        transform: none;
        animation: none !important;
    }
}