/* ============================================================
   季節の背景アニメーション
   - 季節のおすすめ以降のセクションに、季節ごとの淡い色味と
     浮遊パーティクル（花びら・紫陽花・水紋・紅葉・雪）を表示
   - 判定とDOM生成は seasonal-bg.js（?season= で強制切替可能）
   - transform のみで動かす（GPU合成・リフローなし）
   ============================================================ */

.has-seasonal-bg {
  position: relative;
}

.has-seasonal-bg > .container {
  position: relative;
  z-index: 1;
}

.seasonal-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* 季節ごとの色のせ（セクション上部〜中央にかかる） */
.seasonal-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sbg-tint, none);
}

body.sbg-spring { --sbg-tint: linear-gradient(180deg, rgba(244, 184, 200, 0.38) 0%, rgba(244, 184, 200, 0.12) 55%, rgba(244, 184, 200, 0) 100%); }
body.sbg-tsuyu  { --sbg-tint: linear-gradient(180deg, rgba(155, 143, 208, 0.32) 0%, rgba(125, 159, 211, 0.10) 55%, rgba(125, 159, 211, 0) 100%); }
body.sbg-summer { --sbg-tint: linear-gradient(180deg, rgba(155, 212, 232, 0.34) 0%, rgba(155, 212, 232, 0.10) 55%, rgba(155, 212, 232, 0) 100%); }
body.sbg-autumn { --sbg-tint: linear-gradient(180deg, rgba(211, 121, 63, 0.30) 0%, rgba(211, 121, 63, 0.08) 55%, rgba(211, 121, 63, 0) 100%); }
body.sbg-winter { --sbg-tint: linear-gradient(180deg, rgba(176, 196, 214, 0.36) 0%, rgba(176, 196, 214, 0.10) 55%, rgba(176, 196, 214, 0) 100%); }

/* ---- パーティクル共通 ---- */
.sbg-p {
  position: absolute;
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  will-change: transform;
  opacity: 0.85;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* ---- 季節ごとの絵柄 ---- */
body.sbg-spring .sbg-p {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.5 6.5 6.5 14.5 12 22c5.5-7.5 5.5-15.5 0-20z' fill='%23f4b8c8'/%3E%3Cpath d='M12 5c-3 3.5-3 10 0 14.5 3-4.5 3-11 0-14.5z' fill='%23f9d4de'/%3E%3C/svg%3E");
  animation-name: sbgFall;
}

body.sbg-tsuyu .sbg-p {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%239b8fd0'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Ccircle cx='7' cy='12' r='4'/%3E%3Ccircle cx='17' cy='12' r='4'/%3E%3Ccircle cx='12' cy='17' r='4'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='2.2' fill='%23f5f0fa'/%3E%3C/svg%3E");
  animation-name: sbgFall;
}

body.sbg-summer .sbg-p {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%239bd4e8' stroke-width='1.6'/%3E%3Ccircle cx='12' cy='12' r='4.5' fill='none' stroke='%23c2e5f1' stroke-width='1.2'/%3E%3C/svg%3E");
  animation-name: sbgRipple;
  animation-timing-function: ease-out;
}

body.sbg-autumn .sbg-p {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d3793f' d='M12 2l1.8 4.6L18 4.5l-1.6 4.4 4.6 1.8-4.4 1.6 1.9 4.5-4.6-1.6L12 24l-1.9-4.8-4.6 1.6 1.9-4.5-4.4-1.6 4.6-1.8L6 4.5l4.2 2.1z'/%3E%3C/svg%3E");
  animation-name: sbgFall;
}

body.sbg-winter .sbg-p {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='%23ffffff' fill-opacity='0.92'/%3E%3C/svg%3E");
  animation-name: sbgSnow;
  filter: blur(0.4px);
}

/* ---- 梅雨の雨筋（tsuyu のみ JS が追加） ---- */
.sbg-rain {
  position: absolute;
  top: -70px;
  width: 1px;
  height: 64px;
  background: linear-gradient(rgba(125, 159, 211, 0), rgba(125, 159, 211, 0.38));
  will-change: transform;
  animation: sbgRainFall linear infinite;
}

/* ---- キーフレーム ---- */
@keyframes sbgFall {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  25%  { transform: translate3d(22px, 33vh, 0) rotate(85deg); }
  50%  { transform: translate3d(-16px, 66vh, 0) rotate(170deg); }
  75%  { transform: translate3d(18px, 99vh, 0) rotate(255deg); }
  100% { transform: translate3d(-10px, 132vh, 0) rotate(340deg); }
}

@keyframes sbgSnow {
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(14px, 33vh, 0); }
  50%  { transform: translate3d(-12px, 66vh, 0); }
  75%  { transform: translate3d(10px, 99vh, 0); }
  100% { transform: translate3d(-6px, 132vh, 0); }
}

@keyframes sbgRipple {
  0%   { transform: scale(0.35); opacity: 0; }
  25%  { opacity: 0.55; }
  100% { transform: scale(2.6); opacity: 0; }
}

@keyframes sbgRainFall {
  to { transform: translate3d(-14px, 135vh, 0); }
}

/* ---- スマホは数を減らして軽く・小さく ---- */
@media (max-width: 768px) {
  .sbg-p:nth-of-type(n + 8) { display: none; }
  .sbg-rain:nth-of-type(n + 7) { display: none; }
}

/* ---- 動きを減らす設定のユーザーには出さない（JS側でも生成停止） ---- */
@media (prefers-reduced-motion: reduce) {
  .sbg-p, .sbg-rain { display: none; }
}