/* ==========================================================
   季節テーマ：クリスマス（body.theme-christmas）
   期間は data/seasons.php で設定。空は上が深い夜の青、下が雪あかりの
   やわらかい水色。右下にモミの木とプレゼント（templates/seasons/christmas.php）。
   ========================================================== */
.theme-christmas .hero {
  background: linear-gradient(180deg, #0a1538 0%, #15306b 38%, #3d6fb5 68%, #9fd0f0 90%, #e9f6ff 100%);
}
.theme-christmas .cloud { background: #2a4a85; opacity: .55; }
.theme-christmas .cloud::before, .theme-christmas .cloud::after { background: #2a4a85; }

.hero__moon--xmas {
  position: absolute; top: 8%; left: 10%;
  width: 70px; height: 70px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #ffffff 0%, #fff6cf 60%, #ffe8a0 100%);
  box-shadow: 0 0 36px 12px rgba(255, 240, 200, 0.25);
}
.hero__star {
  position: absolute; width: 6px; height: 6px; background: #fff; border-radius: 50%;
  box-shadow: 0 0 8px 2px rgba(255,255,255,0.7);
  animation: twinkle 2.6s ease-in-out infinite;
}
.hero__star--1 { top: 12%; left: 30%; }
.hero__star--2 { top: 6%; left: 58%; animation-delay: -.8s; width: 4px; height: 4px; }
.hero__star--3 { top: 22%; left: 80%; animation-delay: -1.6s; }
.hero__star--4 { top: 30%; left: 46%; animation-delay: -.4s; width: 4px; height: 4px; }
.hero__star--5 { top: 18%; left: 92%; animation-delay: -2s; width: 5px; height: 5px; }

/* 雪 */
.hero__snow { position: absolute; inset: 0; overflow: hidden; }
.hero__snow i {
  position: absolute; top: -12px; left: var(--x);
  width: var(--s); height: var(--s); border-radius: 50%;
  background: #fff; opacity: var(--o);
  box-shadow: 0 0 6px rgba(255,255,255,0.8);
  animation: snowfall var(--d) linear infinite; animation-delay: var(--delay);
}

/* モミの木 */
.hero__xmas-tree {
  position: absolute; right: -6px; bottom: -2px;
  width: min(58vw, 250px); height: auto;
  filter: drop-shadow(0 -4px 14px rgba(0, 20, 60, 0.25));
}
.hero__xmas-tree .xmas-ground { fill: #f4fbff; }
.hero__xmas-tree .xmas-trunk { fill: #6b4423; }
.hero__xmas-tree .xmas-leaf { fill: #1f7a3c; stroke: #145a2a; stroke-width: 4; stroke-linejoin: round; }
.hero__xmas-tree .xmas-snowcap { fill: #ffffff; }
.hero__xmas-tree .xmas-light { animation: flicker 3s ease-in-out infinite; }
.hero__xmas-tree .xmas-light--r { fill: #ff4d6d; }
.hero__xmas-tree .xmas-light--y { fill: #ffd93d; animation-delay: -1s; }
.hero__xmas-tree .xmas-light--b { fill: #4fc3ff; animation-delay: -2s; }
.hero__xmas-tree .xmas-star { fill: #ffd93d; stroke: #e0a800; stroke-width: 3; stroke-linejoin: round; }
.hero__xmas-tree .xmas-gift--pink { fill: #ff5fa8; }
.hero__xmas-tree .xmas-gift--blue { fill: #4fc3ff; }
.hero__xmas-tree .xmas-ribbon { fill: #fff3a3; }

.theme-christmas .hero__lead { color: #15306b; }
.theme-christmas .hero__sub { color: #fff; text-shadow: 0 2px 8px rgba(0, 20, 60, 0.5); }
.theme-christmas .hero__scroll { color: #15306b; text-shadow: none; }
.theme-christmas .hero__land-img { filter: drop-shadow(0 18px 24px rgba(0, 20, 60, 0.35)); }
.theme-christmas .hero__title img { filter: drop-shadow(0 6px 12px rgba(0, 20, 60, 0.3)); }

@keyframes twinkle { 0%, 100% { opacity: .4; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes snowfall {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(14px, 50vh); }
  100% { transform: translate(-6px, 100vh); }
}
@keyframes flicker { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

@media (min-width: 900px) {
  .hero__moon--xmas { width: 90px; height: 90px; top: 10%; left: 8%; }
  .hero__xmas-tree { width: 320px; right: 0; }
}