/* ==========================================================
   季節テーマ：ハロウィン（body.theme-halloween）
   期間は data/seasons.php で設定。空は上が夜の闇、下が濃いオレンジ。
   右下に洋館のシルエット（templates/seasons/halloween.php）。
   ========================================================== */
.theme-halloween .hero {
  background: linear-gradient(180deg, #120826 0%, #2b1247 32%, #7a2a3a 60%, #d94a00 82%, #ff7a1a 100%);
}
.theme-halloween .cloud { background: #3b2a5a; opacity: .75; }
.theme-halloween .cloud::before, .theme-halloween .cloud::after { background: #3b2a5a; }
.theme-halloween .cloud--3 { opacity: .5; }

.hero__moon {
  position: absolute; top: 7%; right: 8%;
  width: 92px; height: 92px; border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, #fff8d6 0%, #ffe48a 55%, #f5c842 100%);
  box-shadow: 0 0 40px 14px rgba(255, 220, 120, 0.28), 0 0 90px 30px rgba(255, 180, 60, 0.12);
}

.hero__mansion {
  position: absolute; right: -14px; bottom: -2px;
  width: min(64vw, 300px); height: auto;
  color: #0b0516;
  filter: drop-shadow(0 -6px 18px rgba(0, 0, 0, 0.35));
}
.hero__mansion .mansion-ink { fill: currentColor; }
.hero__mansion .mansion-light { fill: #ffb24a; animation: flicker 4s ease-in-out infinite; }
.hero__mansion .mansion-light .is-dark { fill: #24102f; }

.hero__bat { position: absolute; width: 44px; fill: #0b0516; animation: batfly 6s ease-in-out infinite; }
.hero__bat--1 { top: 16%; left: 14%; }
.hero__bat--2 { top: 30%; left: 48%; width: 32px; animation-delay: -2.5s; animation-duration: 7s; }

.theme-halloween .hero__lead { color: #d94a00; }
.theme-halloween .hero__sub { text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); }
.theme-halloween .hero__scroll { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }
.theme-halloween .hero__land-img { filter: drop-shadow(0 18px 24px rgba(20, 0, 40, 0.45)); }
.theme-halloween .hero__title img { filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35)); }

@keyframes flicker {
  0%, 100% { opacity: 1; }
  45% { opacity: .92; }
  50% { opacity: .7; }
  55% { opacity: .95; }
}
@keyframes batfly {
  0%, 100% { transform: translate(0, 0) rotate(-4deg); }
  25% { transform: translate(28px, -14px) rotate(6deg); }
  50% { transform: translate(52px, 4px) rotate(-3deg); }
  75% { transform: translate(22px, 16px) rotate(5deg); }
}

@media (min-width: 900px) {
  .hero__moon { width: 120px; height: 120px; top: 8%; right: 10%; }
  .hero__mansion { width: 380px; right: -10px; }
  .hero__bat--1 { top: 18%; left: 40%; }
  .hero__bat--2 { top: 12%; left: 62%; }
}