/* ==== Halloween decorations – background-like, below hero only ==== */

/* 装飾はページ背景扱い。本文は常に前面 */
.event-landing { position: relative; }
.event-landing > *:not(.hw-decos){ position: relative; z-index: 1; }

/* 装飾レイヤー：レイアウトに影響しない（absolute） */
.hw-decos{
  position: absolute;
  /* ヒーローの“下から”だけ表示：おおむねヒーロー高に相当するオフセット */
  top: min(64vh, 520px);
  left: 0; right: 0; bottom: 0;
  z-index: 0;                 /* 背景側（本文の下層） */
  pointer-events: none;
}

/* 子は自由配置。レイアウトに影響しない */
.hw-deco{
  position: absolute;
  opacity: .95;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.25));
  transform-origin: 50% 50%;
  will-change: transform;
  /* ゆらゆら（大きめ）— 右側は鏡映しも合成できるようCSS変数で制御 */
  animation: swayBig var(--dur,5.4s) ease-in-out infinite;
}

/* 大きめの“ゆらゆら” */
@keyframes swayBig{
  0%   { transform: translate(0,0) rotate(0deg)               scaleX(var(--sx,1)) scale(var(--sc,1)); }
  20%  { transform: translate(10px,-22px) rotate(-3.2deg)     scaleX(var(--sx,1)) scale(var(--sc,1)); }
  50%  { transform: translate(0,0) rotate(.8deg)              scaleX(var(--sx,1)) scale(var(--sc,1)); }
  80%  { transform: translate(-10px,20px) rotate(2.6deg)      scaleX(var(--sx,1)) scale(var(--sc,1)); }
  100% { transform: translate(0,0) rotate(0deg)               scaleX(var(--sx,1)) scale(var(--sc,1)); }
}

/* ========== 位置指定（左右端寄り／中央は避ける、右は鏡映し） ========== */
/* clamp() で画面に応じて程よいサイズ。--sx:-1 で鏡映し */

 /* 左側（非反転） */
.bat-1  { top: 48vh;   left: 1.8%; width: clamp(64px, 8.5vw, 140px); --dur:4.9s;  --sc:1; }
.bat-3  { top: 198vh;  left: 2.2%; width: clamp(62px, 8.0vw, 132px); --dur:5.2s;  --sc:1; }
.bat-4  { top: 400vh;  left: 1.4%; width: clamp(66px, 8.5vw, 138px); --dur:5.7s;  --sc:1; }
.bat-6  { top: 260vh;  left: 2.0%; width: clamp(68px, 9.2vw, 150px); --dur:5.8s;  --sc:1; }
.bat-8  { top: 356vh; left: 1.6%; width: clamp(62px, 8.0vw, 132px); --dur:5.4s;  --sc:1; }
.bat-10 { top: 134vh; left: 2.0%; width: clamp(64px, 8.3vw, 136px); --dur:5.3s;  --sc:1; }

 /* 右側（鏡映し：--sx:-1） */
.bat-2  { top: 76vh;  right: 1.8%; width: clamp(70px, 9.0vw, 150px); --dur:5.6s; --sx:-1; --sc:1; }
.bat-5  { top: 268vh;  right: 2.4%; width: clamp(64px, 8.2vw, 136px); --dur:5.1s; --sx:-1; --sc:1; }
.bat-7  { top: 380vh;  right: 1.6%; width: clamp(64px, 8.5vw, 140px); --dur:5.0s; --sx:-1; --sc:1; }
.bat-9  { top: 438vh; right: 2.2%; width: clamp(66px, 8.6vw, 140px); --dur:5.9s; --sx:-1; --sc:1; }

 /* かぼちゃ／城／猫（低めに配置） */
.pump-1   { top: 452vh;  left:  1.2%; width: clamp(96px, 12vw, 190px); --dur:6.2s;  --sc:1; }
.pump-2   { top: 216vh; right: 1.4%; width: clamp(86px, 10vw, 170px); --dur:6.0s;  --sx:-1; --sc:1; }
.castle-1 { top: 282vh; left:  1.0%; width: clamp(96px, 12vw, 200px); --dur:6.6s;  --sc:1; }
.cat-1    { top: 298vh; right: 1.2%; width: clamp(84px, 10vw, 180px); --dur:5.7s;  --sx:-1; --sc:1; }

/* スマホ：さらに端へ寄せ、少し小さく */
@media (max-width: 768px){
  .bat-1{left:1.2%} .bat-3{left:1.4%} .bat-4{left:1.0%} .bat-6{left:1.2%} .bat-8{left:1.0%} .bat-10{left:1.2%}
  .bat-2{right:1.2%} .bat-5{right:1.4%} .bat-7{right:1.0%} .bat-9{right:1.2%}
  .pump-1{left:1.0%} .pump-2{right:1.0%} .castle-1{left:.8%} .cat-1{right:.8%}
}

/* 動きを減らす設定 */
@media (prefers-reduced-motion: reduce){
  .hw-deco{ animation: none !important; }
}