/* ==========================================================================
   MU DIMINION S6 — ATMOSPHERIC EFFECTS แบบ mu-retro.com (2026-09-24)
   ไฟล์เดียวจบ · วิธีถอดออก: ลบ <link … effects-muretro.css> ออกจากหน้านั้น
   ประกอบด้วย:
     1) หมอก/ควันบรรยากาศ (fog layers แบบ .smog ของ mu-retro)
     2) ประกายไฟลอยขึ้น (sparks แบบ .sparks-1/2/3)
     3) Hover ยก + สว่าง + ขอบทอง (แบบ mu-retro: brightness(1.08) translateY(-1px))
     4) แสงเรืองรอบพาเนล (box-shadow 0 0 60px แบบ mu-retro)
     5) นับถอยหลังเปิดเซิร์ฟเวอร์
   ========================================================================== */

/* ---------- 1. หมอกบรรยากาศ (fog) ---------- */
.fog-field{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.fog-layer{
  position:absolute;left:50%;bottom:-14%;
  width:160%;height:130%;
  margin-left:-80%;
  transform-origin:50% 100%;
  opacity:0;will-change:transform,opacity;
  background:radial-gradient(ellipse at 50% 100%,
    rgba(255,241,214,.85) 0%,
    rgba(246,222,178,.52) 34%,
    rgba(233,203,150,.16) 58%,
    rgba(233,203,150,0) 76%);
  filter:blur(7px);
}
.fog-layer.n2{background:radial-gradient(ellipse at 32% 100%,
    rgba(214,168,92,.46) 0%,
    rgba(206,163,92,.24) 40%,
    rgba(190,150,86,.08) 62%,
    rgba(190,150,86,0) 78%);filter:blur(11px)}
.fog-layer.n3{background:radial-gradient(ellipse at 72% 100%,
    rgba(255,247,228,.62) 0%,
    rgba(250,236,206,.30) 42%,
    rgba(240,220,180,.10) 64%,
    rgba(240,220,180,0) 78%);filter:blur(15px)}
.fog-layer.n1{animation:fogDrift 9s linear infinite}
.fog-layer.n2{animation:fogDrift 17s linear infinite;animation-delay:-5s}
.fog-layer.n3{animation:fogDrift 28s linear infinite;animation-delay:-13s}
@keyframes fogDrift{
  0%{transform:scale(.55) translateX(-5%);opacity:0}
  30%{opacity:.85}
  65%{opacity:.55}
  100%{transform:scale(1.20) translateX(6%);opacity:0}
}

/* ---------- 2. ประกายไฟลอยขึ้น (sparks) ---------- */
.spark-field{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.spark{
  position:absolute;bottom:-16px;left:var(--x);
  width:var(--s);height:var(--s);border-radius:50%;
  background:radial-gradient(circle,
    #fff8e2 0%,
    #f5c96f 32%,
    #d99434 58%,
    rgba(190,120,40,0) 76%);
  box-shadow:0 0 12px 3px rgba(226,158,60,.62);
  opacity:0;will-change:transform,opacity;
  animation:sparkRise var(--d) linear var(--delay) infinite;
}
@keyframes sparkRise{
  0%{transform:translate3d(0,0,0) scale(.5);opacity:0}
  14%{opacity:var(--a)}
  72%{opacity:var(--a)}
  100%{transform:translate3d(var(--drift),-640px,0) scale(1.15);opacity:0}
}

/* ---------- 3. Hover แบบ mu-retro: ยก + สว่าง + ขอบทอง ---------- */
.featured,.class-card,.shop-card,.category,.topup-card,.topup-help,
.client-card,.login-box,.wc-package>span,.class-detail{
  transition:transform .22s ease,filter .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.featured:hover,.class-card:hover,.shop-card:hover,.category:hover,
.topup-card:hover,.topup-help:hover,.client-card:hover,.class-detail:hover{
  filter:brightness(1.05);
  transform:translateY(-3px);
  box-shadow:0 0 0 1px rgba(202,162,77,.55),0 14px 30px rgba(78,60,34,.22);
}
.news-row,.ranking li{transition:filter .2s ease,transform .2s ease,background .2s ease}
.news-row:hover,.ranking li:hover{filter:brightness(1.06);transform:translateY(-1px);background:rgba(202,162,77,.07)}
.gold,.outline,.shop-buy,.shop-detail,.client-download,.wc-package>span{
  transition:filter .2s ease,transform .2s ease,box-shadow .2s ease;
}
.gold:hover,.outline:hover,.client-download:hover{
  filter:brightness(1.08);
  transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(202,162,77,.55),0 14px 26px rgba(78,60,34,.30);
}
/* ลิงก์เนื้อหา: เปลี่ยนเป็นสีทอง + ขีดเส้นใต้ (แบบ mu-retro a:hover) */
main a:not(.gold):not(.outline):not(.register-cta):hover,
.text-link:hover,.signup-bottom a:hover,.login-box a:hover{
  color:#8a5c0d!important;text-decoration:underline;
}

/* ---------- 4. แสงเรืองรอบพาเนล (ambient glow) ---------- */
.stats,.featured,aside{
  box-shadow:0 0 60px rgba(202,162,77,.16),0 12px 34px rgba(78,60,34,.10);
}

/* ---------- 5. นับถอยหลังเปิดเซิร์ฟเวอร์ ---------- */
.countdown-strip{margin:0 8% 60px;display:flex;justify-content:center}
.countdown-mu{
  width:min(760px,100%);padding:26px 30px 24px;text-align:center;
  border:1px solid rgba(202,162,77,.45);border-radius:16px;
  background:linear-gradient(160deg,rgba(255,250,238,.92),rgba(244,236,219,.75));
  box-shadow:0 0 0 1px rgba(202,162,77,.18),0 16px 40px rgba(78,60,34,.14);
  transition:transform .22s ease,box-shadow .22s ease;
}
.countdown-mu:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(202,162,77,.45),0 20px 46px rgba(78,60,34,.20)}
.cd-title{
  font:600 13px Cinzel,serif;letter-spacing:2.4px;text-transform:uppercase;
  color:#6d4a0d;margin-bottom:16px;
}
.cd-row{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.cd-box{
  min-width:92px;padding:12px 10px 10px;border-radius:10px;
  border:1px solid rgba(202,162,77,.40);
  background:linear-gradient(180deg,rgba(255,252,244,.95),rgba(244,235,214,.85));
  box-shadow:inset 0 1px 0 #fff,0 6px 16px rgba(78,60,34,.10);
}
.cd-num{font:600 34px/1 Cinzel,serif;color:#3a2708;letter-spacing:-.5px}
.cd-label{display:block;margin-top:6px;font:600 10px Cinzel,serif;letter-spacing:2px;color:#8a7a5d}
.cd-sep{font:600 26px/1 Cinzel,serif;color:#b08d4f;animation:cdBlink 1s steps(1,end) infinite}
@keyframes cdBlink{50%{opacity:.35}}
.countdown-mu.is-open .cd-row{display:none}
.countdown-mu.is-open .cd-title::after{content:" — เปิดให้บริการแล้ว!";color:#1f5a36}
@media(max-width:700px){
  .countdown-strip{margin:0 6% 44px}
  .countdown-mu{padding:20px 16px 18px}
  .cd-box{min-width:66px;padding:9px 6px 8px}
  .cd-num{font-size:24px}
  .cd-sep{font-size:18px}
}

/* ---------- ลดเอฟเฟกต์เมื่อผู้ใช้ตั้งค่า reduced-motion ---------- */
@media(prefers-reduced-motion:reduce){
  .fog-layer,.spark,.cd-sep{animation:none!important}
  .fog-layer{opacity:.35}
  .spark{display:none}
  .featured:hover,.class-card:hover,.shop-card:hover,.category:hover,
  .topup-card:hover,.topup-help:hover,.client-card:hover,.class-detail:hover,
  .news-row:hover,.ranking li:hover,.gold:hover,.outline:hover,.client-download:hover,
  .countdown-mu:hover{transform:none;filter:none}
}

/* ---------- 6. Swiper showcase แบบ mu-retro (.media-swiper) ---------- */
.showcase{margin:0 0 84px;padding:0 6%}
.showcase-head{text-align:center;margin-bottom:28px}
.showcase-head .eyebrow{display:inline-flex;align-items:center;margin-bottom:12px}
.showcase-head h2{font:600 clamp(26px,3.4vw,40px)/1.2 Cinzel,serif;margin:0 0 10px;letter-spacing:-.5px}
.showcase-head p{margin:0;color:#4f4636;font-size:14px}

/* การ์ดอาชีพแบบ coverflow */
.class-swiper{position:relative;padding:26px 0 54px}
.class-swiper .swiper-slide{width:288px;height:388px}
.slide-card{position:relative;width:100%;height:100%;border-radius:16px;overflow:hidden;
  border:1px solid rgba(202,162,77,.45);background:#241f18;
  box-shadow:0 22px 50px rgba(78,60,34,.28);transition:box-shadow .35s ease,border-color .35s ease}
.swiper-slide-active .slide-card{border-color:rgba(202,162,77,.85);
  box-shadow:0 26px 60px rgba(78,60,34,.40),0 0 0 1px rgba(202,162,77,.6),0 0 44px rgba(202,162,77,.30)}
.slide-card img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.78) saturate(.9);
  transition:transform .6s ease,filter .45s ease}
.swiper-slide-active .slide-card img{filter:brightness(1) saturate(1)}
.slide-card:hover img{transform:scale(1.07)}
.slide-cap{position:absolute;left:0;right:0;bottom:0;padding:40px 18px 18px;pointer-events:none;
  background:linear-gradient(180deg,rgba(18,12,6,0),rgba(18,12,6,.90));color:#f7eeda}
.slide-cap b{display:block;font:600 21px Cinzel,serif;letter-spacing:.4px}
.slide-cap span{display:block;margin-top:6px;font:600 10px Cinzel,serif;letter-spacing:2.4px;color:#e3b970}

.swiper-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:12;width:52px;height:52px;
  display:grid;place-items:center;border-radius:50%;cursor:pointer;user-select:none;
  border:1px solid rgba(202,162,77,.55);color:#6d4a0d;font-size:26px;line-height:1;
  background:linear-gradient(180deg,rgba(255,250,238,.96),rgba(240,230,208,.88));
  box-shadow:0 8px 22px rgba(78,60,34,.22);transition:filter .2s,box-shadow .2s,transform .2s}
.swiper-btn:hover{filter:brightness(1.07);box-shadow:0 0 0 1px rgba(202,162,77,.6),0 12px 28px rgba(78,60,34,.32)}
.class-prev{left:6px}.class-next{right:6px}
.class-pagination{display:flex;justify-content:center;gap:9px;margin-top:14px}
.class-pagination .swiper-pagination-bullet{width:9px;height:9px;border-radius:50%;background:rgba(109,74,13,.28);opacity:1;cursor:pointer;transition:background .25s,transform .25s}
.class-pagination .swiper-pagination-bullet-active{background:#8a5c0d;transform:scale(1.4)}

/* ปีกแห่งตำนาน */
.media-swiper{position:relative;padding:18px 0 42px}
.media-swiper .swiper-slide{width:188px;height:228px;transition:transform .35s ease}
.wing-card{position:relative;height:100%;display:grid;place-items:center;padding:14px;border-radius:14px;overflow:hidden;
  border:1px solid rgba(202,162,77,.35);
  background:radial-gradient(ellipse at 50% 40%,rgba(255,247,228,.96),rgba(238,226,200,.78));
  box-shadow:inset 0 1px 0 #fff,0 10px 26px rgba(78,60,34,.16);
  transition:border-color .3s,box-shadow .3s}
.wing-card img{max-width:148px;max-height:148px;width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 10px 18px rgba(78,60,34,.35));transition:transform .45s ease}
.media-swiper .swiper-slide-active .wing-card{border-color:rgba(202,162,77,.8);
  box-shadow:0 0 0 1px rgba(202,162,77,.5),0 16px 34px rgba(78,60,34,.26),0 0 34px rgba(202,162,77,.24)}
.wing-card:hover img{transform:scale(1.10) rotate(-2deg)}
.wing-cap{position:absolute;left:0;right:0;bottom:0;padding:16px 10px 9px;text-align:center;
  font:600 11px Cinzel,serif;letter-spacing:.6px;color:#5e4314;
  background:linear-gradient(180deg,rgba(255,250,238,0),rgba(255,250,238,.92))}
.media-prev{left:0}.media-next{right:0}

/* ---------- 7. ปุ่มกลับด้านบน (#toTop แบบ mu-retro) ---------- */
#toTop{position:fixed;right:26px;bottom:26px;z-index:80;width:52px;height:52px;
  display:grid;place-items:center;border-radius:50%;text-decoration:none;
  border:1px solid rgba(202,162,77,.6);color:#6d4a0d;font-size:22px;
  background:linear-gradient(180deg,rgba(255,250,238,.96),rgba(240,230,208,.9));
  box-shadow:0 12px 30px rgba(78,60,34,.28);
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .3s,transform .3s,visibility .3s,filter .2s}
#toTop.show{opacity:1;visibility:visible;transform:none}
#toTop:hover{filter:brightness(1.07);box-shadow:0 0 0 1px rgba(202,162,77,.7),0 16px 36px rgba(78,60,34,.34)}

/* ---------- 8. เผยเนื้อหาตอนเลื่อน (scroll reveal) ---------- */
.fx-up{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.fx-up.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.fx-up{opacity:1;transform:none;transition:none}}