/* ============================================================
   KGM WORLD - Seasonal themes
   ------------------------------------------------------------
   使い方 / How to switch:
   ページの <body> にクラスを付けるだけでテーマが切り替わります。
     <body class="season-newyear">  … 正月仕様（1月）
     <body class="season-sakura">   … 4月・新春（桜）仕様
   クラスを付けなければ通常仕様（黒＋シルバー）です。
   テーマは style.css の変数（--silver 系）を上書きするだけなので、
   商品・価格・カート・PWA等の機能には影響しません。
   ヒーロー文言・金鈴特集の文言は index.html 内の
   .sb-default / .sb-newyear / .sb-sakura ブロックが切り替わります。
   ============================================================ */

/* ---------- 共通：季節ブロックの表示切替 ---------- */
.sb-newyear,.sb-sakura{display:none}
body.season-newyear .sb-newyear{display:block}
body.season-sakura .sb-sakura{display:block}
body.season-newyear .sb-default,
body.season-sakura .sb-default{display:none}

/* ---------- 装飾レイヤー（ヒーロー内） ---------- */
.hero{position:relative}
.season-decor{display:none;position:absolute;inset:0;overflow:hidden;pointer-events:none}
body.season-newyear .season-decor--newyear{display:block}
body.season-sakura .season-decor--sakura{display:block}

/* ---------- プレビュー用バナー（preview-*.html でのみ使用） ---------- */
.preview-banner{background:var(--silver-grad);color:#14161a;text-align:center;
  padding:8px 12px;font-size:13px;font-weight:700;letter-spacing:.06em}
.preview-banner a{color:#14161a;text-decoration:underline}

/* ============================================================
   1. 正月仕様（1月）— 黒地に金と朱、松竹梅・門松の装飾
   ============================================================ */
body.season-newyear{
  --silver:#d8b45a;               /* 差し色：金 */
  --silver-dark:#8a6d2f;          /* 差し色（暗） */
  --silver-grad:linear-gradient(180deg,#f9e9b8 0%,#ecca6d 38%,#a87f1f 58%,#f3da8b 100%);
  --silver-grad-hover:linear-gradient(180deg,#f3da8b 0%,#dfba54 45%,#93701d 62%,#e8cd77 100%);
  --accent2:#d93a2b;              /* 朱（しゅ） */
}
body.season-newyear .hero{
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%,rgba(217,58,43,.13),transparent 65%),
    radial-gradient(ellipse 90% 70% at 50% 110%,rgba(216,180,90,.10),transparent 60%);
}
body.season-newyear .hero-eyebrow{color:var(--accent2);font-weight:700}
body.season-newyear .feature{
  border-color:var(--silver-dark);
  box-shadow:0 0 0 1px rgba(217,58,43,.25),0 0 24px rgba(216,180,90,.07);
}
body.season-newyear .feature h2{border-left-color:var(--accent2)}
body.season-newyear .site-header{border-bottom-color:rgba(216,180,90,.45)}
/* 松竹梅の飾り（左右上部） */
.season-decor--newyear .ornament{position:absolute;top:6px;width:190px;max-width:44vw;opacity:.92}
.season-decor--newyear .ornament--left{left:2px}
.season-decor--newyear .ornament--right{right:2px;transform:scaleX(-1)}
@media(max-width:560px){
  .season-decor--newyear .ornament{width:120px;opacity:.75}
}
/* 飾りとヒーロー文言が重ならないよう、正月ヒーローに余白を追加 */
body.season-newyear .sb-newyear{padding-top:56px}
@media(max-width:560px){
  body.season-newyear .sb-newyear{padding-top:96px}
}

/* ============================================================
   2. 4月・新春（桜）仕様 — 黒地に桜ピンク、花びらの装飾
   ============================================================ */
body.season-sakura{
  --silver:#f0aec2;               /* 差し色：桜ピンク */
  --silver-dark:#a86a80;
  --silver-grad:linear-gradient(180deg,#ffe9f1 0%,#f8c3d4 38%,#e58ca9 58%,#ffd9e6 100%);
  --silver-grad-hover:linear-gradient(180deg,#ffd9e6 0%,#f2aec4 45%,#d67d9c 62%,#ffc9da 100%);
}
body.season-sakura .hero{
  background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(240,174,194,.14),transparent 65%);
}
body.season-sakura .site-header{border-bottom-color:rgba(240,174,194,.4)}
/* 舞う桜の花びら */
.season-decor--sakura .petal{
  position:absolute;top:-24px;width:15px;height:12px;opacity:0;
  background:linear-gradient(135deg,#ffe0eb 0%,#f4aec6 70%,#e58ca9 100%);
  border-radius:90% 4px 90% 4px;
  animation-name:petal-fall;animation-timing-function:linear;animation-iteration-count:infinite;
}
.season-decor--sakura .petal:nth-child(1){left:6%; animation-duration:11s;animation-delay:-2s}
.season-decor--sakura .petal:nth-child(2){left:18%;animation-duration:9s; animation-delay:-6s;width:12px;height:10px}
.season-decor--sakura .petal:nth-child(3){left:33%;animation-duration:12s;animation-delay:-4s}
.season-decor--sakura .petal:nth-child(4){left:52%;animation-duration:10s;animation-delay:-8s;width:13px;height:11px}
.season-decor--sakura .petal:nth-child(5){left:68%;animation-duration:9.5s;animation-delay:-3s}
.season-decor--sakura .petal:nth-child(6){left:82%;animation-duration:11.5s;animation-delay:-7s;width:12px;height:10px}
.season-decor--sakura .petal:nth-child(7){left:93%;animation-duration:10.5s;animation-delay:-5s}
@keyframes petal-fall{
  0%{transform:translate3d(0,-24px,0) rotate(0deg);opacity:0}
  8%{opacity:.95}
  25%{transform:translate3d(16px,130px,0) rotate(96deg)}
  50%{transform:translate3d(-12px,280px,0) rotate(184deg)}
  75%{transform:translate3d(14px,430px,0) rotate(268deg)}
  92%{opacity:.85}
  100%{transform:translate3d(-8px,580px,0) rotate(352deg);opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .season-decor--sakura .petal{animation:none;opacity:.5}
}