/* background.css - 背景レイヤー + モンスター浮遊アニメーション */

/* ========================================
   背景: スライドアップレイヤー + モンスター浮遊
   ======================================== */
.parallax-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
}

/* --- 背景レイヤー共通 --- */
.bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left top;
    transform: translateY(100%);
    transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

/* レイヤー重なり順 + スライドアップ遅延 */
.bg-space  { z-index: 1; transform: translateY(0); opacity: 0; transition: opacity 1.2s ease-out; transition-delay: 0s; }
.bg-city   { z-index: 2; transition-delay: 0.5s; }
.bg-ocean  { z-index: 3; transition-delay: 1.0s; }
.bg-seabed { z-index: 5; transition-delay: 1.5s; }

/* アニメーション発火: JS が .animate を付与 */
.parallax-bg.animate .bg-layer {
    transform: translateY(0);
}
.parallax-bg.animate .bg-space {
    opacity: 1;
}

/* 再訪時: アニメなしで即表示 */
.parallax-bg.no-animate .bg-layer {
    transform: translateY(0);
    transition: none;
}
.parallax-bg.no-animate .bg-space {
    opacity: 1;
}

/* --- シーンコンテナ (背景画像と同じ座標系: 16:9) --- */
.bg-scene {
    position: absolute;
    top: 0;
    left: 0;
    /* cover と同じ計算: max(100vw, 100vh × 16/9) */
    width: max(100vw, calc(100vh * 16 / 9));
    height: max(100vh, calc(100vw * 9 / 16));
    z-index: 6;
    pointer-events: none;
}
/* seabed の背面に来るモンスター用コンテナ */
.bg-scene--under-seabed {
    z-index: 4;
}

/* --- モンスター共通 --- */
.bg-monster {
    position: absolute;
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    will-change: transform, opacity;
    pointer-events: none;
}
.bg-monster.pop-in {
    opacity: 1;
    transform: scale(1);
}
.bg-monster.floating {
    animation: monsterFloat var(--float-dur, 3s) ease-in-out var(--float-delay, 0s) infinite;
}
.bg-monster[data-monster="pink02"].floating {
    animation: monsterSwing var(--float-dur, 3.3s) ease-in-out var(--float-delay, 0.8s) infinite;
}

/* 再訪時: 即表示 + 即浮遊 */
.parallax-bg.no-animate .bg-monster {
    opacity: 1;
    transform: scale(1);
    transition: none;
    animation: monsterFloat var(--float-dur, 3s) ease-in-out var(--float-delay, 0s) infinite;
}
.parallax-bg.no-animate .bg-monster[data-monster="pink02"] {
    animation: monsterSwing var(--float-dur, 3.3s) ease-in-out var(--float-delay, 0.8s) infinite;
}

/* 浮遊キーフレーム (上下のみ・サイン波で滑らか) */
@keyframes monsterFloat {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-14px); }
    100% { transform: translateY(0); }
}

/* ブランコキーフレーム (振り子・左右) */
@keyframes monsterSwing {
    0%   { transform: rotate(-18deg); }
    50%  { transform: rotate(18deg); }
    100% { transform: rotate(-18deg); }
}

/* --- モンスター個別配置 (% は bg-scene 基準 = 背景画像座標 3840x2160) --- */
.bg-monster[data-monster="brown01"] {
    top: 3.70%; left: -2.34%; width: 12.76%;
    --float-dur: 3.5s; --float-delay: 0s;
}
.bg-monster[data-monster="pink01"] {
    top: 8.33%; left: 12.76%; width: 4.69%;
    --float-dur: 2.8s; --float-delay: 0.2s;
}
.bg-monster[data-monster="pink02"] {
    top: -0.19%; left: 29.17%; width: 10.16%;
    --float-dur: 3.3s; --float-delay: 0.8s;
    transform-origin: 93.33% 0%;
    animation-name: monsterSwing !important;
    animation-timing-function: ease-in-out !important;
}
.bg-monster[data-monster="pink03"] {
    top: 18.06%; left: 83.33%; width: 5.21%;
    --float-dur: 2.6s; --float-delay: 0.4s;
}
.bg-monster[data-monster="green01"] {
    top: 36.11%; left: 73.18%; width: 11.98%;
    --float-dur: 4s; --float-delay: 0.3s;
}
.bg-monster[data-monster="brown02"] {
    top: 76%; left: 73.70%; width: 9.64%;
    --float-dur: 3s; --float-delay: 0.5s;
}
.bg-monster[data-monster="green02"] {
    top: 63.43%; left: 19.53%; width: 10.94%;
    --float-dur: 3.2s; --float-delay: 0.7s;
}

/* スマホ時はモンスター非表示 */
@media (max-width: 767px) {
    .bg-monster {
        display: none;
    }
}