/* ════════════════════════════════════════════════════════════════════════════
   fest/halloween.css — ธีมฮาโลวีนส่วนหัวหน้าแรก (15–31 ต.ค. ทุกปี · home.php ใส่เอง)
   prop ทุกชิ้นเป็นรูปจาก Google Flow ตัดพื้นแล้ว (fest/halloween/*.webp) · ไม่รับคลิก (ไม่บังปุ่ม/ช่องกรอก)
   ════════════════════════════════════════════════════════════════════════════ */
/* โทนสี: แสงออโรร่าเป็นส้มฟักทอง + ม่วง · คำเน้นในหัวข้อเป็นส้ม */
[data-fest=halloween] .aur i:nth-child(1){background:radial-gradient(circle,rgba(255,138,31,.30),transparent 65%)}
[data-fest=halloween] .aur i:nth-child(2){background:radial-gradient(circle,rgba(150,80,255,.34),transparent 65%)}
[data-fest=halloween] .aur i:nth-child(3){background:radial-gradient(circle,rgba(255,170,60,.24),transparent 65%)}
[data-fest=halloween] .hero h1 .gl{background-image:linear-gradient(95deg,#ffd68a,#ff9a2e 40%,#ffc061 70%,#ff8a1f)}
[data-fest=halloween] .hero.night{background:linear-gradient(160deg,#120a24 0%,#1c0f3f 48%,#2a1a5e 100%)}

/* ชั้น prop ในส่วนหัว */
.hw{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.hw-back{z-index:0}                                  /* อยู่หลังเนื้อหา (ผีโผล่จากหลังการ์ดแผนที่) */
.hw img{position:absolute;display:block;max-width:none;user-select:none;-webkit-user-drag:none}

/* ใยแมงมุมมุมบน */
.hw-web{top:0;width:clamp(150px,17vw,300px);opacity:.42}
.hw-web.l{left:0}
.hw-web.r{right:0;transform:scaleX(-1)}

/* แมงมุมห้อยด้าย ไต่ขึ้นลงช้าๆ */
.hw-spd{position:absolute;top:0;width:clamp(44px,4.2vw,74px);transform-origin:50% 0;animation:hwSwing 5.5s ease-in-out infinite}
.hw-spd i{display:block;width:1.5px;margin:0 auto;background:linear-gradient(rgba(255,255,255,.15),rgba(255,255,255,.55));height:var(--len,120px);animation:hwDrop 7s ease-in-out infinite}
.hw-spd img{position:relative;width:100%;margin-top:-6%;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
@keyframes hwDrop{0%,100%{height:var(--len,120px)}50%{height:calc(var(--len,120px) * .55)}}
@keyframes hwSwing{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}

/* ผีลอยโผล่ข้างการ์ดแผนที่ */
.hw-ghost{width:clamp(78px,7vw,124px);opacity:.93;filter:drop-shadow(0 12px 20px rgba(0,0,0,.35));animation:hwFloat 4.2s ease-in-out infinite}
@keyframes hwFloat{0%,100%{transform:translate(0,0) rotate(-4deg)}50%{transform:translate(-6px,-14px) rotate(3deg)}}

/* ฟักทอง: เรืองแสงวูบวาบเหมือนเทียนข้างใน */
.hw-pk{filter:drop-shadow(0 8px 14px rgba(0,0,0,.4)) drop-shadow(0 0 18px rgba(255,140,30,.35));animation:hwGlow 2.6s ease-in-out infinite}
.hw-pk1{width:clamp(50px,4.4vw,72px);animation:hwGlow 2.2s ease-in-out infinite,hwBob 3.4s ease-in-out infinite}
.hw-pks{width:var(--w,220px)}
@keyframes hwGlow{0%,100%{filter:drop-shadow(0 8px 14px rgba(0,0,0,.4)) drop-shadow(0 0 14px rgba(255,140,30,.28))}45%{filter:drop-shadow(0 8px 14px rgba(0,0,0,.4)) drop-shadow(0 0 26px rgba(255,160,40,.55))}60%{filter:drop-shadow(0 8px 14px rgba(0,0,0,.4)) drop-shadow(0 0 18px rgba(255,140,30,.38))}}
@keyframes hwBob{0%,100%{translate:0 0}50%{translate:0 -4px}}
.hw-candy{width:var(--w,190px);filter:drop-shadow(0 8px 14px rgba(0,0,0,.4))}

/* ค้างคาวบินผ่าน (JS สร้าง) — รูปเดียวแยก 3 ชั้น: ปีกซ้าย · ปีกขวา (หมุนจากหัวไหล่) · ตัว (ทับรอยต่อ)
   จังหวะเดียวกัน: ปีกยกขึ้น = ตัวต่ำ · ปีกตีลง = ตัวลอยขึ้น (เหมือนแรงยก) */
.hw-bat{position:absolute;left:0;top:0;width:var(--s,56px);will-change:transform;filter:drop-shadow(0 6px 8px rgba(0,0,0,.35))}
.hw-bi{position:relative;aspect-ratio:360/229;animation:hwLift var(--fl,.3s) ease-in-out infinite alternate}
.hw .hw-bi img{position:absolute;inset:0;width:100%;height:100%}
.hw .hw-bi .wl{clip-path:inset(0 64% 0 0);transform-origin:34% 42%;animation:hwWingL var(--fl,.3s) ease-in-out infinite alternate}
.hw .hw-bi .wr{clip-path:inset(0 0 0 64%);transform-origin:66% 42%;animation:hwWingR var(--fl,.3s) ease-in-out infinite alternate}
.hw .hw-bi .bd{clip-path:inset(0 33% 0 33%)}
@keyframes hwWingL{from{transform:rotate(26deg) scaleY(1.04)}to{transform:rotate(-34deg) scaleY(.86)}}
@keyframes hwWingR{from{transform:rotate(-26deg) scaleY(1.04)}to{transform:rotate(34deg) scaleY(.86)}}
@keyframes hwLift{from{transform:translateY(8%)}to{transform:translateY(-10%)}}

/* หมอกม่วงลอยต่ำที่ขอบล่าง */
.hw-fog{position:absolute;left:-10%;right:-10%;bottom:-40px;height:180px;background:radial-gradient(40% 60% at 25% 70%,rgba(160,110,255,.20),transparent 70%),radial-gradient(35% 55% at 70% 75%,rgba(120,255,170,.12),transparent 70%),radial-gradient(30% 50% at 50% 90%,rgba(255,150,60,.10),transparent 70%);filter:blur(6px);animation:hwFog 16s ease-in-out infinite alternate}
@keyframes hwFog{from{transform:translateX(-3%)}to{transform:translateX(3%)}}

/* หมวกแม่มดบนโลโก้ + ป้ายบนหัวข้อ */
[data-fest=halloween] .logo{position:relative;overflow:visible}
.hw-hat{position:absolute;left:-17px;top:-10px;width:42px;transform:rotate(-20deg);pointer-events:none;filter:drop-shadow(0 4px 6px rgba(0,0,0,.3));animation:hwTip 4s ease-in-out infinite;transform-origin:70% 90%}
@keyframes hwTip{0%,100%{transform:rotate(-20deg)}50%{transform:rotate(-12deg)}}
.hw-tag{display:inline-flex;align-items:center;gap:6px;margin-left:8px;padding:5px 12px;border-radius:99px;background:linear-gradient(120deg,rgba(255,138,31,.22),rgba(150,80,255,.22));box-shadow:inset 0 0 0 1px rgba(255,170,80,.4);font:600 12px var(--fm);letter-spacing:.08em;color:#ffd08a;vertical-align:middle}

/* จอเล็ก: เหลือเท่าที่ไม่รก */
@media (max-width:899px){
  .hw-pks,.hw-candy{display:none}
  .hw-web.l{display:none}
  .hw-web.r{width:130px}
  .hw-ghost{width:70px}
}
@media (max-width:560px){
  .hw-tag{margin:8px 0 0}
  .hw-hat{width:34px;left:-13px;top:-8px}
}
@media (prefers-reduced-motion:reduce){.hw *,.hw-hat{animation:none!important}}