/* ═══════════════════════════════════════════════════════════
   KAGARI BASE — 季節スキン「秋」
   スクロール＝秋の一日: 鱗雲の青空と紅葉の那須連山 → 夕焼け
                        → 秋の星空 → 焚火
   ───────────────────────────────────────────────────────────
   画像は seasons/autumn/ に配置:
     sky-clouds.webp … 青空・鱗雲・紅葉の那須連山（ヒーロー背景）
     sunset.webp     … 夕暮れの那須連山と紅葉（フィロソフィー帯）
     stars.webp      … 秋の星空と那須連山（ブランドストーリー帯）
     bonfire.webp    … 紅葉の中の焚火（最下部CTA帯）
   季節切替: index.html の <link id="season-css"> の href を変更。
   ═══════════════════════════════════════════════════════════ */

/* ── ① 真昼: 鱗雲の青空と紅葉（ヒーロー） ─────────────── */
body .hero-bg {
    background:
        url('autumn/sky-clouds.webp') center bottom / cover no-repeat,
        /* 鱗雲プレースホルダー */
        radial-gradient(ellipse 40% 12% at 70% 30%, rgba(255,255,255,.55) 0%, transparent 70%),
        radial-gradient(ellipse 34% 10% at 84% 22%, rgba(255,255,255,.45) 0%, transparent 70%),
        radial-gradient(ellipse 28% 9%  at 58% 18%, rgba(255,255,255,.4) 0%, transparent 70%),
        /* 紅葉の稜線 */
        linear-gradient(180deg, transparent 62%, rgba(122,44,24,.85) 84%, #662617 100%),
        /* 秋の澄んだ青空 */
        linear-gradient(180deg,
            #14559f 0%,
            #296ab4 30%,
            #4f8fce 58%,
            #8fb9e2 82%,
            #c9dcee 100%);
}
/* 夜の要素は昼のヒーローでは隠す */
body .hero .moon,
body .hero .stars,
body .hero .stars-small,
body .hero .stars-tiny,
body .hero-bonfire,
body #embers { display: none; }
body .hero-glow { opacity: 0; }

/* 青空上の文字可読性 */
body .hero-title,
body .hero-title-jp,
body .hero-tagline,
body .hero-desc,
body .hero-eyebrow,
body .hero-scroll-hint {
    text-shadow: 0 2px 22px rgba(10,26,52,.78), 0 1px 4px rgba(10,26,52,.55);
}
body .hero-desc { color: rgba(244,240,232,.93); }
body .hero-title-jp { color: rgba(244,240,232,.96); }
body .hero-scroll-hint { color: rgba(244,240,232,.85); }
body .btn-ghost {
    border-color: rgba(255,255,255,.65);
    color: #fff;
    text-shadow: none;
}

/* ── ①.5 紅葉から宵へ（お知らせ帯でつなぐ） ───────────── */
body .news-section {
    background: linear-gradient(180deg,
        #3d1c13 0%,
        #2e1b1e 45%,
        #221a2c 78%,
        #1c1a30 100%);
}

/* ── ② 夕方: 夕焼け ──
   3Dショップ(vstore)はビューアで写真が隠れるため夕焼け色のグラデーションのみ。
   夕焼け写真はその下のフィロソフィー節（人気TOP3の直前）に配置。 */
body .vstore {
    /* 下端を sunset.webp の上端(#142945 濃紺)に合わせて滑らかに接続 */
    background: linear-gradient(180deg,
        #1c1a30 0%,
        #1b1c33 32%,
        #18213c 66%,
        #142945 100%);
}
body .vstore-title,
body .vstore-sub,
body .vstore-hint,
body .vstore .section-label {
    text-shadow: 0 2px 16px rgba(20,20,40,.75), 0 1px 4px rgba(20,20,40,.55);
}
body .philosophy {
    position: relative;
    background:
        linear-gradient(180deg, rgba(24,10,6,.12) 0%, rgba(24,10,6,.32) 48%, rgba(24,10,6,.55) 100%),
        url('autumn/sunset.webp') center / cover no-repeat,
        linear-gradient(180deg, #142945 0%, #31120b 100%);
}
body .philosophy > .container { position: relative; z-index: 1; }
body .philosophy p, body .philosophy h2, body .philosophy span {
    text-shadow: 0 2px 14px rgba(24,8,4,.85);
}

/* ── ③ 薄暮: 残照（ランキング〜ファッション） ─────────── */
body .ranking-section {
    background: linear-gradient(180deg, #31120b 0%, #2a1512 55%, #241521 100%);
}
body .products {
    background: linear-gradient(180deg, #241521 0%, #1c1526 60%, #171430 100%);
}
body .family-section {
    background: #171430;
}

/* ── ④ 夜: 秋の星空（レビュー〜ギア） ───────────────── */
body .reviews-section,
body .gear-section,
body .features {
    position: relative;
    background: linear-gradient(180deg, #141232 0%, #0e0e24 100%);
}
/* 星のまたたきレイヤー（既存の twinkle-a/b キーフレームを再利用） */
body .reviews-section::after,
body .gear-section::after {
    content: '';
    position: absolute; inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        radial-gradient(1.5px 1.5px at 7% 15%, #fff, transparent),
        radial-gradient(2px 2px at 18% 38%, rgba(255,255,255,.9), transparent),
        radial-gradient(1px 1px at 29% 12%, rgba(255,255,255,.8), transparent),
        radial-gradient(2px 2px at 41% 30%, #fff, transparent),
        radial-gradient(1px 1px at 52% 8%, rgba(255,255,255,.75), transparent),
        radial-gradient(1.5px 1.5px at 63% 26%, #fff, transparent),
        radial-gradient(1px 1px at 71% 45%, rgba(255,255,255,.8), transparent),
        radial-gradient(2px 2px at 82% 14%, #fff, transparent),
        radial-gradient(1px 1px at 91% 34%, rgba(255,255,255,.85), transparent),
        radial-gradient(1.5px 1.5px at 12% 62%, rgba(255,255,255,.7), transparent),
        radial-gradient(1px 1px at 47% 58%, rgba(255,255,255,.65), transparent),
        radial-gradient(1.5px 1.5px at 86% 66%, rgba(255,255,255,.7), transparent);
    animation: twinkle-a 4.5s ease-in-out infinite;
}
/* 秋の四辺形（ペガススの大四辺形） */
body .gear-section::before {
    content: '';
    position: absolute; inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        radial-gradient(3px 3px at 24% 16%, #fff, rgba(255,255,255,.35) 55%, transparent),
        radial-gradient(2.8px 2.8px at 40% 14%, #fff, rgba(255,255,255,.3) 55%, transparent),
        radial-gradient(2.8px 2.8px at 26% 38%, #fff, rgba(255,255,255,.3) 55%, transparent),
        radial-gradient(3px 3px at 42% 36%, #fff, rgba(255,255,255,.35) 55%, transparent);
    animation: twinkle-b 6s ease-in-out infinite;
}
body .reviews-section > .container,
body .gear-section > .container,
body .features > .container {
    position: relative; z-index: 1;
}

/* ── ④.5 秋の星空写真（ブランドストーリー） ───────────── */
body .story {
    position: relative;
    background:
        linear-gradient(180deg, rgba(6,8,18,.62) 0%, rgba(6,8,18,.5) 45%, rgba(10,7,4,.72) 100%),
        url('autumn/stars.webp') center / cover no-repeat,
        linear-gradient(180deg, #0b1120 0%, #291409 100%);
}
body .story::before, body .story::after { content: none; }
body .story > .container { position: relative; z-index: 1; }
body .story p, body .story h2, body .story span, body .story h3 {
    text-shadow: 0 2px 16px rgba(4,6,14,.85);
}

/* ── ⑤ 深夜（アクティビティ〜FAQ） ─────────────────── */
body .activities {
    background: linear-gradient(180deg, #291409 0%, #1e1008 100%);
}
body .faq {
    background: linear-gradient(180deg, #1e1008 0%, #260902 100%);
}

/* ── ⑥ 焚火（CTA〜フッター） ────────────────────────── */
body .cta-banner {
    /* 焚火(画像下部)が隠れないよう下端基準+下余白を拡張 */
    padding-bottom: 300px;
    background:
        linear-gradient(180deg, rgba(14,5,2,.6) 0%, rgba(14,5,2,.18) 55%, rgba(14,5,2,0) 100%),
        url('autumn/bonfire.webp') center bottom / cover no-repeat,
        radial-gradient(ellipse 58% 55% at 46% 108%, rgba(232,148,14,.8) 0%, rgba(212,98,26,.5) 38%, transparent 72%),
        #260902;
}
body footer {
    background:
        radial-gradient(ellipse 55% 42% at 50% 118%, rgba(212,98,26,.34) 0%, transparent 70%),
        #120a05;
}