/* ═══════════════════════════════════════════════════════════
   KAGARI BASE — 季節スキン「夏」
   スクロール＝夏の一日: 青空と入道雲 → 夕焼け → 夏の星空 → 焚火
   ───────────────────────────────────────────────────────────
   AI生成画像は seasons/summer/ に以下の名前で置くと自動適用:
     sky-clouds.webp … 青空と入道雲（ヒーロー背景・横1920px推奨）
     sunset.webp     … 夕焼け（バーチャルストア帯・横1920px推奨）
     bonfire.webp    … 焚火（最下部CTA帯・横1920px推奨）
   画像が無い間はCSSグラデーションで代替表示される。
   季節切替: index.html の <link id="season-css"> の href を
   seasons/spring.css 等に差し替えるだけ。
   ═══════════════════════════════════════════════════════════ */

/* ── ① 真昼: 青空と入道雲（ヒーロー） ─────────────── */
body .hero-bg {
    background:
        /* AI画像(あれば最前面に表示) */
        url('summer/sky-clouds.webp') center bottom / cover no-repeat,
        /* 入道雲プレースホルダー */
        radial-gradient(ellipse 46% 30% at 78% 86%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.55) 45%, transparent 72%),
        radial-gradient(ellipse 30% 22% at 68% 74%, rgba(255,255,255,.9) 0%, rgba(255,255,255,.4) 50%, transparent 75%),
        radial-gradient(ellipse 22% 14% at 88% 70%, rgba(255,255,255,.85) 0%, transparent 70%),
        radial-gradient(ellipse 34% 16% at 12% 90%, rgba(255,255,255,.8) 0%, transparent 70%),
        /* 夏の青空 */
        linear-gradient(180deg,
            #1c63c8 0%,
            #2f7ad8 34%,
            #5b9be4 62%,
            #a8cdf0 88%,
            #dcedfa 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(8,30,64,.75), 0 1px 4px rgba(8,30,64,.5);
}
body .hero-desc { color: rgba(240,246,255,.92); }
body .hero-title-jp { color: rgba(240,246,255,.95); }
body .hero-scroll-hint { color: rgba(240,246,255,.85); }
body .btn-ghost {
    border-color: rgba(255,255,255,.65);
    color: #fff;
    text-shadow: none;
}

/* ── ② 夕方: 夕焼け ──
   3Dショップ(vstore)はビューアで写真が隠れるため夕焼け色のグラデーションのみ。
   夕焼け写真はその下のフィロソフィー節（人気TOP3の直前）に配置。 */
body .vstore {
    /* 上に行くほど濃紺、下端は夕焼け写真の上端(#654a61 紫がかった空)に合わせて滑らかに接続 */
    background: linear-gradient(180deg,
        #1a2140 0%,
        #2c2a52 28%,
        #453d61 58%,
        #5c455e 84%,
        #654a61 100%);
}
body .vstore-title,
body .vstore-sub,
body .vstore-hint,
body .vstore .section-label {
    text-shadow: 0 2px 16px rgba(60,26,10,.7), 0 1px 4px rgba(60,26,10,.5);
}
body .philosophy {
    position: relative;
    background:
        linear-gradient(180deg, rgba(28,16,32,.10) 0%, rgba(28,16,32,.30) 45%, rgba(28,16,32,.5) 100%),
        url('summer/sunset.webp') center / cover no-repeat,
        linear-gradient(180deg, #654a61 0%, #352348 100%);
}
body .philosophy > .container { position: relative; z-index: 1; }
body .philosophy p, body .philosophy h2, body .philosophy span {
    text-shadow: 0 2px 14px rgba(20,8,16,.8);
}

/* ── ③ 薄暮: マジックアワー（ランキング〜ファッション） ── */
body .ranking-section {
    background: linear-gradient(180deg, #241c3c 0%, #1b1734 100%);
}
body .products {
    background: linear-gradient(180deg, #1b1734 0%, #141230 60%, #0f0e26 100%);
}
body .family-section {
    background: #0f0e26;
}

/* ── ④ 夜: 夏の星空（レビュー〜ストーリー） ─────────── */
body .reviews-section,
body .gear-section,
body .features,
body .story {
    position: relative;
    background: linear-gradient(180deg, #0d0d22 0%, #0a0a1c 100%);
}
/* 星のまたたきレイヤー（既存の twinkle-a/b キーフレームを再利用） */
body .reviews-section::after,
body .gear-section::after,
body .story::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 .story::before {
    content: '';
    position: absolute; inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        radial-gradient(3px 3px at 22% 18%, #fff, rgba(255,255,255,.35) 55%, transparent),
        radial-gradient(2.6px 2.6px at 36% 40%, #fff, rgba(255,255,255,.3) 55%, transparent),
        radial-gradient(2.8px 2.8px at 14% 46%, #fff, rgba(255,255,255,.3) 55%, transparent);
    animation: twinkle-b 6s ease-in-out infinite;
}
/* 星レイヤーより本文を前面に */
body .reviews-section > .container,
body .gear-section > .container,
body .features > .container,
body .story > .container {
    position: relative; z-index: 1;
}

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

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