/* ══════════════════════════════════════════════
   季節モード用のスタイル
   ══════════════════════════════════════════════
   切り替えは /assets/js/season.js の1行で行います。
   このファイルは「その季節のときにどう変わるか」を書いた場所です。

   仕組み
     <html class="season-halloween"> が付くと、下の指定が効きます。
     色は共通CSSの変数（--ink など）を上書きしているだけなので、
     ページの作りには一切触れていません。季節を外せば元に戻ります。
   ══════════════════════════════════════════════ */


/* ══════ ハロウィン ══════════════════════════ */
.season-halloween{
  --ink:     #171026;   /* 背景：夜の紫 */
  --forest:  #241A3A;   /* 面：ひとつ明るい紫 */
  --moss:    #8E7CB8;   /* 細字・ラベル */
  --sand:    #F0E9DC;   /* 本文 */
  --mud:     #FF7A18;   /* 差し色：かぼちゃのオレンジ */
  --mud-lt:  #FFA24D;
  --line:    rgba(240,233,220,.14);
  --panel-bg:rgba(23,16,38,.74);
  --hdr-bg:  #120C1D;
  --hdr-div: rgba(240,233,220,.16);
}

/* 背景の等高線を、かぼちゃ色にほんのり光らせる */
.season-halloween .contour{
  opacity:.5;
  filter:hue-rotate(-28deg) saturate(1.2);
}

/* 見出しの強調を紫寄りに */
.season-halloween .mv-copy h1 em,
.season-halloween .page-hero h1 em,
.season-halloween .cmp-pane h1 em{color:#C9A6FF}

/* パネルの上の帯に、うっすら紫を差す */
.season-halloween .panel__bar{
  background:linear-gradient(90deg, rgba(168,124,255,.16), transparent 60%);
}

/* 右下のボタン：トピックを紫、ご案内はかぼちゃ色のまま */
.season-halloween .topic-btn{
  background:#3B2A5E;
  box-shadow:0 6px 18px rgba(0,0,0,.42), inset 0 0 0 1px #A87CFF;
}
.season-halloween .topic-btn:hover{background:#4A3576}
.season-halloween .topic-btn .dot{background:#C9A6FF}

/* ヘッダーの下に、かぼちゃとコウモリを小さく並べる */
.season-halloween .nav-row::after{
  content:"";display:block;height:10px;
  background-repeat:repeat-x;background-size:44px 10px;background-position:left bottom;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='10' viewBox='0 0 44 10'%3E%3Cpath d='M4 8c-1.6 0-2.6-1-2.6-2.2 0-1.1.9-2 2-2 .5 0 .9.2 1.2.5.3-.3.7-.5 1.2-.5 1.1 0 2 .9 2 2C7.8 7 6.8 8 5.2 8z' fill='%23FF7A18' opacity='.55'/%3E%3Cpath d='M22 3.4c.9 0 1.3.7 1.3.7s.4-.7 1.3-.7c1 0 1.6.8 1.6 1.7 0 .5-.2.9-.5 1.2-.7-.4-1.4-.5-2.4-.5s-1.7.1-2.4.5c-.3-.3-.5-.7-.5-1.2 0-.9.6-1.7 1.6-1.7z' fill='%23A87CFF' opacity='.5'/%3E%3C/svg%3E");
}


/* ══════ クリスマス ════════════════════════
   まだ使いません。12月になったら season.js で切り替えます。 */
.season-christmas{
  --ink:     #0D1A14;
  --forest:  #14291D;
  --moss:    #7FA98C;
  --sand:    #F2EDE2;
  --mud:     #D8402F;   /* 差し色：赤 */
  --mud-lt:  #F1705F;
  --line:    rgba(242,237,226,.15);
  --panel-bg:rgba(13,26,20,.76);
  --hdr-bg:  #0A1510;
  --hdr-div: rgba(242,237,226,.16);
}
.season-christmas .contour{opacity:.45;filter:hue-rotate(10deg)}
.season-christmas .panel__bar{
  background:linear-gradient(90deg, rgba(216,64,47,.16), transparent 60%);
}
/* ヘッダーの下に雪の粒を並べる */
.season-christmas .nav-row::after{
  content:"";display:block;height:8px;
  background-repeat:repeat-x;background-size:36px 8px;background-position:left bottom;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='8' viewBox='0 0 36 8'%3E%3Ccircle cx='6' cy='4' r='1.5' fill='%23F2EDE2' opacity='.5'/%3E%3Ccircle cx='20' cy='5' r='1' fill='%23F2EDE2' opacity='.35'/%3E%3Ccircle cx='30' cy='3' r='1.2' fill='%23F2EDE2' opacity='.45'/%3E%3C/svg%3E");
}


/* ══════ 正月 ══════════════════════════════
   まだ使いません。 */
.season-newyear{
  --ink:     #14120F;
  --forest:  #211D17;
  --moss:    #A89772;
  --sand:    #F4F0E6;
  --mud:     #C8A24A;   /* 差し色：金 */
  --mud-lt:  #E0C378;
  --line:    rgba(244,240,230,.16);
  --panel-bg:rgba(20,18,15,.78);
  --hdr-bg:  #100E0B;
  --hdr-div: rgba(244,240,230,.18);
}
.season-newyear .contour{opacity:.4;filter:hue-rotate(20deg) saturate(.7)}
.season-newyear .panel__bar{
  background:linear-gradient(90deg, rgba(200,162,74,.18), transparent 60%);
}
/* ヘッダーの下に市松模様を敷く */
.season-newyear .nav-row::after{
  content:"";display:block;height:8px;
  background-repeat:repeat-x;background-size:24px 8px;background-position:left bottom;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'%3E%3Crect x='0' y='0' width='6' height='8' fill='%23C8A24A' opacity='.3'/%3E%3Crect x='12' y='0' width='6' height='8' fill='%23C8A24A' opacity='.3'/%3E%3C/svg%3E");
}


/* 動きを減らす設定の人には、光る演出を出さない */
@media (prefers-reduced-motion: reduce){
  .season-halloween .topic-btn{transition:none}
}

/* ══════ 舞い落ちる演出 ══════════════════════
   画面の上から、ゆっくり落ちてくる飾り。
   ・季節モードのときだけ出る
   ・クリックの邪魔にならないよう pointer-events:none
   ・「動きを減らす」設定の端末では出さない
   ・粒の数と種類は season.js 側で決めている            */
.fall{
  position:fixed;inset:0;
  z-index:55;            /* 本文より手前、ヘッダー(60)や右下のボタンより奥 */
  pointer-events:none;overflow:hidden;
}
.fall i{
  position:absolute;top:-8%;
  display:block;line-height:1;
  will-change:transform;
  animation-name:fallDown, fallSway;
  animation-timing-function:linear, ease-in-out;
  animation-iteration-count:infinite, infinite;
  animation-direction:normal, alternate;
}
@keyframes fallDown{
  from{ transform:translateY(0) rotate(0deg); }
  to  { transform:translateY(112vh) rotate(var(--spin,180deg)); }
}
@keyframes fallSway{
  from{ margin-left:calc(var(--sway,26px) * -1); }
  to  { margin-left:var(--sway,26px); }
}

/* 動きを減らす設定のときは、いっさい動かさない */
@media (prefers-reduced-motion: reduce){
  .fall{display:none}
}
/* 画面が狭いときは粒を控えめに（重くならないように） */
@media (max-width:560px){
  .fall i:nth-child(n+13){display:none}
}