/* ===== ธีมเทศกาล (เปิดปิดจากหลังบ้าน) : html[data-season="..."] ===== */

/* ---------- ฮาโลวีน: ส้มฟักทอง + ม่วงกลางคืน ---------- */
html[data-season="halloween"]{
  --bgMain:#110c15; --bgDark:#0a070d; --bgDarkRGB:10,7,13;
  --card:#1a131f; --card2:#1e1624;
  --brand:#ff8a1f; --brandDark:#7b2cbf; --brandGlow:#ffb866;
  --brandRGB:255,138,31; --brandDarkRGB:123,44,191;
}
html[data-season="halloween"] body::before{
  background:
    radial-gradient(900px 520px at 85% -8%, rgba(255,138,31,.16), transparent 60%),
    radial-gradient(760px 520px at 0% 0%, rgba(123,44,191,.20), transparent 58%),
    radial-gradient(900px 600px at 50% 110%, rgba(123,44,191,.12), transparent 60%);
}

/* ---------- คริสต์มาส & ปีใหม่: แดง เขียว ทอง ---------- */
html[data-season="christmas"]{
  --bgMain:#0b1311; --bgDark:#070d0b; --bgDarkRGB:7,13,11;
  --card:#131c19; --card2:#17211d;
  --brand:#ff4d5e; --brandDark:#1f8a55; --brandGlow:#ffd27a;
  --brandRGB:255,77,94; --brandDarkRGB:31,138,85;
}
html[data-season="christmas"] body::before{
  background:
    radial-gradient(900px 520px at 85% -8%, rgba(255,77,94,.14), transparent 60%),
    radial-gradient(760px 520px at 0% 0%, rgba(31,138,85,.20), transparent 58%),
    radial-gradient(700px 400px at 50% -10%, rgba(255,210,122,.08), transparent 60%);
}

/* ---------- สงกรานต์: ฟ้าน้ำทะเล ---------- */
html[data-season="songkran"]{
  --bgMain:#07151c; --bgDark:#040e13; --bgDarkRGB:4,14,19;
  --card:#0e1f28; --card2:#11242e;
  --brand:#2ec5ff; --brandDark:#0077b6; --brandGlow:#9be8ff;
  --brandRGB:46,197,255; --brandDarkRGB:0,119,182;
}
html[data-season="songkran"] body::before{
  background:
    radial-gradient(900px 520px at 85% -8%, rgba(46,197,255,.16), transparent 60%),
    radial-gradient(760px 520px at 0% 0%, rgba(0,119,182,.22), transparent 58%),
    radial-gradient(900px 600px at 50% 115%, rgba(255,120,190,.07), transparent 60%);
}

/* ---------- ของตกแต่ง ---------- */
.season-fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.season-chip{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;
  font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.16em;
  padding:7px 15px;border-radius:100px;color:var(--brandGlow);
  background:linear-gradient(120deg,rgba(var(--brandRGB),.16),rgba(var(--brandDarkRGB),.22));
  border:1px solid rgba(var(--brandRGB),.35);
  box-shadow:0 0 24px -8px rgba(var(--brandRGB),.7);
  animation:seasonChip 3s ease-in-out infinite;
}
.season-chip .e{font-size:15px;letter-spacing:0}
@keyframes seasonChip{50%{box-shadow:0 0 34px -6px rgba(var(--brandRGB),.9)}}
@media (prefers-reduced-motion:reduce){.season-chip{animation:none}}

/* ---------- ฉากคริสต์มาส ---------- */
.hero-inner,.page-hero .container{position:relative;z-index:1}
.xm-scene{position:absolute;bottom:-2px;z-index:0;pointer-events:none;display:flex;align-items:flex-end}
.xm-scene svg{display:block;height:auto;filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))}
.hero .xm-scene.l{left:max(10px,calc(50% - 610px))}
.hero .xm-scene.r{right:max(10px,calc(50% - 610px))}
.page-hero .xm-scene.r{right:max(16px,calc(50% - 600px))}
.xm-snowman{width:118px}
.xm-tree{width:128px}
.xm-gifts{width:100px;margin-left:-30px}
.page-hero .xm-snowman{width:88px;margin-right:-6px}
.page-hero .xm-tree{width:104px}
.page-hero .xm-gifts{width:80px;margin-left:-26px}
.xm-arm{transform-box:fill-box;transform-origin:0 100%;animation:xmWave 1.9s ease-in-out infinite}
@keyframes xmWave{0%,100%{transform:rotate(0)}50%{transform:rotate(-20deg)}}
.xm-star{transform-box:fill-box;transform-origin:center;animation:xmStar 2.4s ease-in-out infinite}
@keyframes xmStar{50%{transform:scale(1.18) rotate(8deg)}}
.xm-orn{animation:xmBlink 1.6s ease-in-out infinite alternate}
.xm-orn:nth-of-type(2n){animation-delay:.55s}
.xm-orn:nth-of-type(3n){animation-delay:1.05s}
@keyframes xmBlink{to{opacity:.4}}

/* ไฟประดับใต้แถบเมนู */
.xm-lights{position:absolute;left:0;right:0;bottom:-12px;height:18px;overflow:hidden;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='18'%3E%3Cpath d='M0 2Q18 12 36 2' stroke='%23254a37' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") repeat-x}
.xm-lights i{position:absolute;top:7px;width:7px;height:10px;margin-left:-3.5px;border-radius:50% 50% 45% 45%;background:var(--c);
  box-shadow:0 0 8px 1px var(--c);animation:xmTwinkle 1.4s ease-in-out infinite alternate}
.xm-lights i::before{content:"";position:absolute;top:-3px;left:1.5px;width:4px;height:4px;border-radius:1px;background:#2d3b33}
@keyframes xmTwinkle{to{opacity:.35;box-shadow:none}}

/* ซานต้ากับกวางบินผ่าน */
/* บินในแถบล่างของส่วนหัว (ใต้ตัวเลขสรุป) ไม่ผ่านหัวข้อและข้อความ */
.xm-santa{position:absolute;left:0;bottom:10px;width:190px;z-index:0;pointer-events:none;
  transform:translate(-320px,0);animation:xmFly 34s linear 3s infinite}
.xm-santa svg{display:block;width:100%;height:auto;animation:xmBob 1.5s ease-in-out infinite;filter:drop-shadow(0 8px 14px rgba(0,0,0,.4))}
@keyframes xmFly{0%{transform:translate(-320px,6px)}40%{transform:translate(calc(100vw + 40px),-8px)}100%{transform:translate(calc(100vw + 40px),-8px)}}
@keyframes xmBob{50%{transform:translateY(-7px) rotate(-2deg)}}
.xm-nose{animation:xmBlink .8s ease-in-out infinite alternate}
.xm-spark{animation:xmBlink .7s ease-in-out infinite alternate}

@media (max-width:760px){
  .xm-snowman{width:66px}.xm-tree{width:72px}.xm-gifts{width:58px;margin-left:-18px}
  .hero .xm-scene{opacity:.85}
  .page-hero .xm-scene{display:none}
  .xm-santa{width:130px;animation-duration:26s;bottom:6px}
}
@media (prefers-reduced-motion:reduce){
  .xm-santa{display:none}
  .xm-scene *,.xm-lights i{animation:none!important}
}

/* ---------- ฉากฮาโลวีน ---------- */
.xm-scene.hw{align-items:flex-end}
.hw-house{width:150px}
.hw-cat{width:80px;margin-left:-26px;filter:drop-shadow(0 0 5px rgba(176,107,255,.7)) drop-shadow(0 10px 18px rgba(0,0,0,.35))}
.hw-pumpkins{width:128px;margin-left:-8px}
.hw-grave{width:52px;margin-right:-4px}
.hw-float{align-self:flex-start;margin-right:-22px;margin-bottom:62px}
.hw-float .hw-ghost{width:62px;display:block;animation:hwFloat 3.4s ease-in-out infinite;filter:drop-shadow(0 0 14px rgba(200,190,255,.45))}
.page-hero .hw-house{display:none}
.page-hero .hw-pumpkins{width:104px}
.page-hero .hw-grave{width:44px}
.page-hero .hw-float .hw-ghost{width:52px}
.page-hero .hw-float{margin-bottom:48px}
@keyframes hwFloat{50%{transform:translateY(-10px) rotate(-3deg)}}
.hw-win{animation:hwFlicker 3.2s steps(1) infinite}
.hw-win.d2{animation-delay:1.1s}
.hw-win.d3{animation-delay:2.3s}
@keyframes hwFlicker{0%,100%{opacity:1}42%{opacity:.35}44%{opacity:1}47%{opacity:.5}49%{opacity:1}}
.hw-glow{animation:hwGlow 2.4s ease-in-out infinite alternate}
@keyframes hwGlow{from{opacity:1}to{opacity:.72}}
.hw-tail{transform-box:fill-box;transform-origin:0 100%;animation:hwTail 2.6s ease-in-out infinite}
@keyframes hwTail{50%{transform:rotate(14deg)}}
.hw-eyes{transform-box:fill-box;transform-origin:center;animation:hwBlink 4.5s infinite}
@keyframes hwBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
/* พระจันทร์ */
.hw-moon{position:absolute;top:calc(var(--nav-h) + 24px);right:max(24px,calc(50% - 560px));width:120px;height:120px;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 36% 34%,#fff8d6 0%,#ffe9a3 45%,#f2c96b 100%);
  box-shadow:0 0 60px 18px rgba(255,214,120,.28),0 0 140px 50px rgba(255,138,31,.14);opacity:.9}
.hw-moon i{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 62% 38%,rgba(190,150,70,.45) 0 9px,transparent 10px),radial-gradient(circle at 40% 66%,rgba(190,150,70,.35) 0 12px,transparent 13px),radial-gradient(circle at 70% 70%,rgba(190,150,70,.3) 0 6px,transparent 7px)}
/* หยากไย่ตามมุม */
.hw-web{position:absolute;top:var(--nav-h);width:110px;height:110px;z-index:0;pointer-events:none;opacity:.8}
.hw-web svg{display:block;width:100%;height:100%}
.hw-web.l{left:0}
.hw-web.r{right:0;transform:scaleX(-1)}
.page-hero .hw-web{width:90px;height:90px}
.hw-spider{position:absolute;left:62px;top:40px;width:18px;height:54px;transform-origin:top center;animation:hwSpider 6s ease-in-out infinite}
@keyframes hwSpider{0%,100%{transform:translateY(-8px)}50%{transform:translateY(16px)}}
/* ไฟฟักทองใต้เมนู */
.hw-lights{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='18'%3E%3Cpath d='M0 2Q18 12 36 2' stroke='%23231433' stroke-width='1.6' fill='none'/%3E%3C/svg%3E")}
.hw-lights i{width:9px;height:9px;border-radius:50%;margin-left:-4.5px}
.hw-lights i::before{background:#2b4a22;left:2.5px}
/* ผีลอยผ่านจอ */
.hw-parade{position:absolute;left:0;bottom:14px;top:auto;display:flex;align-items:flex-start;gap:10px;z-index:0;pointer-events:none;
  transform:translateX(-260px);animation:hwParade 30s linear 4s infinite}
.hw-parade .hw-ghost{display:block;filter:drop-shadow(0 0 14px rgba(200,190,255,.4));animation:hwFloat 1.8s ease-in-out infinite}
.hw-parade .g1{width:46px;margin-top:18px}
.hw-parade .g2{width:60px;animation-delay:.4s}
.hw-parade .g3{width:38px;margin-top:34px;animation-delay:.8s}
@keyframes hwParade{0%{transform:translate(-260px,30px)}40%{transform:translate(calc(100vw + 40px),-20px)}100%{transform:translate(calc(100vw + 40px),-20px)}}
@media (max-width:760px){
  .hw-house{width:92px}.hw-cat{width:52px;margin-left:-16px}.hw-pumpkins{width:78px}.hw-grave{width:34px}
  .hw-float .hw-ghost{width:40px}.hw-float{margin-bottom:40px;margin-right:-14px}
  .hw-moon{width:70px;height:70px;top:calc(var(--nav-h) + 14px)}
  .hw-web{width:70px;height:70px}
  .hw-spider{left:40px;top:26px;width:14px;height:42px}
  .page-hero .hw-web{display:none}
  .hw-parade{animation-duration:24s}.hw-parade .g1{width:32px}.hw-parade .g2{width:42px}.hw-parade .g3{width:26px}
}
@media (prefers-reduced-motion:reduce){
  .hw-parade{display:none}
  .xm-scene.hw *,.hw-web *,.hw-lights i{animation:none!important}
}

/* ---------- โลโก้ประจำเทศกาล ---------- */
.season-logo{display:block;width:clamp(150px,19vw,220px);height:auto;margin:-6px auto 10px;
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.5));animation:seasonLogo 4.5s ease-in-out infinite;transform-origin:50% 80%}
@keyframes seasonLogo{50%{transform:translateY(-6px) rotate(-1.5deg)}}
html[data-season-logo] .hero-badge{display:none}
html[data-season-logo] .brand-logo{width:46px;height:46px}
@media (max-width:760px){.season-logo{width:150px;margin-bottom:6px}.season-chip{font-size:11px;letter-spacing:.06em;padding:6px 12px}}
@media (prefers-reduced-motion:reduce){.season-logo{animation:none}}

/* ของตกแต่งในส่วนหัวอยู่หลังข้อความเสมอ และไม่บังตัวเลขสรุปบนจอแคบ */
.hero .xm-scene,.hero .hw-moon,.hero .hw-web{z-index:0}
@media (max-width:760px){
  .hero .xm-scene{opacity:.55}
  .hero-home{padding-bottom:110px}
}