@charset "utf-8";

/*
 * 雪国風背景（凍った湖・雪アニメーション）
 * body 全体の背面に固定、.bg-ambient より奥（z-index: -2）
 * 本CSSを読み込むページでは body を透明にして背面レイヤーを表示
 */

body {
    background: transparent !important;
}

.bg-snow-country {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
}

/* 冬の空〜雪原のグラデーション */
.bg-snow-country_base {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(230, 242, 255, 0.85) 0%,
            rgba(245, 250, 255, 0.9) 35%,
            rgba(255, 255, 255, 0.95) 60%,
            rgba(248, 252, 255, 0.98) 100%);
}

/* 凍った湖（画面下部・きらめきアニメ） */
.bg-snow-country_lake {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42vh;
    background:
        linear-gradient(180deg,
            transparent 0%,
            rgba(200, 225, 255, 0.12) 25%,
            rgba(180, 215, 255, 0.2) 55%,
            rgba(190, 220, 255, 0.25) 100%);
    animation: lake-shimmer 8s ease-in-out infinite;
}

.bg-snow-country_lake::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255, 255, 255, 0.03) 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.05) 75%,
        transparent 100%);
    /* 左右に動くアニメはなし（目がちかちかするため） */
}

@keyframes lake-shimmer {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.92; }
}

/* 雪のコンテナ */
.bg-snow-country_snow {
    position: absolute;
    inset: 0;
}

/* 雪の粒（淡いオレンジ） */
.snowflake {
    position: absolute;
    top: -10%;
    width: 4px;
    height: 4px;
    background: rgba(255, 220, 190, 0.85);
    border-radius: 50%;
    animation: snowfall linear infinite;
    will-change: transform;
}

.snowflake.snowflake--m {
    width: 5px;
    height: 5px;
    background: rgba(255, 225, 200, 0.9);
}

.snowflake.snowflake--s {
    width: 2px;
    height: 2px;
    background: rgba(255, 210, 180, 0.7);
}

.snowflake.snowflake--xl {
    width: 8px;
    height: 8px;
    background: rgba(255, 230, 205, 0.95);
    box-shadow: 0 0 8px rgba(255, 200, 170, 0.5);
}

.snowflake.snowflake--xs {
    width: 1px;
    height: 1px;
    background: rgba(255, 215, 185, 0.6);
}

.snowflake.snowflake--opacity-high { opacity: 0.95; }
.snowflake.snowflake--opacity-medium { opacity: 0.8; }
.snowflake.snowflake--opacity-low { opacity: 0.6; }

@keyframes snowfall {
    0% {
        transform: translateY(-10vh) translateX(0);
    }
    100% {
        transform: translateY(110vh) translateX(0);
    }
}

/* 横に揺れる雪（オプション） */
.snowflake.snowflake--drift {
    animation: snowfall-drift linear infinite;
}

@keyframes snowfall-drift {
    0% {
        transform: translateY(-10vh) translateX(0);
    }
    25% {
        transform: translateY(30vh) translateX(15px);
    }
    50% {
        transform: translateY(60vh) translateX(-10px);
    }
    75% {
        transform: translateY(85vh) translateX(8px);
    }
    100% {
        transform: translateY(110vh) translateX(0);
    }
}

.snowflake.snowflake--drift-reverse {
    animation: snowfall-drift-reverse linear infinite;
}

@keyframes snowfall-drift-reverse {
    0%   { transform: translateY(-10vh) translateX(0); }
    25%  { transform: translateY(30vh) translateX(-15px); }
    50%  { transform: translateY(60vh) translateX(10px); }
    75%  { transform: translateY(85vh) translateX(-8px); }
    100% { transform: translateY(110vh) translateX(0); }
}