/* ===================================================================
   Smoothie FX — ลูกเล่นเพิ่มเติมของหน้า /all และหน้ารับไวท์ลิสต์ (/)
   โหลดต่อท้าย css ตัวอื่นทั้งหมด · ลบไฟล์นี้ + sm-fx.js ออก = กลับเป็นแบบเดิม
   =================================================================== */
@property --fx-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ---------- ผืนผ้าใบพลุ / ประกายตามเมาส์ ---------- */
.fx-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9999; }

/* ---------- แสงไฟส่องตามเมาส์ + เอียง 3D ---------- */
.fx-lit {
  background-image: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--accent-rgb), 0.17), transparent 70%) !important;
  border-color: rgba(var(--accent-rgb), 0.45) !important;
  will-change: transform;
}
.sm-chip, .sm-slot, .h-link, .tile, .h-rules > a { transform-style: preserve-3d; }

/* ---------- ค่อย ๆ โผล่ตอนเลื่อน ---------- */
.fx-rv { opacity: 0; translate: 0 22px; scale: 0.97; }
.fx-rv.fx-in {
  opacity: 1; translate: 0 0; scale: 1;
  transition:
    opacity 0.55s ease var(--fxd, 0ms),
    translate 0.75s cubic-bezier(0.2, 0.9, 0.25, 1.25) var(--fxd, 0ms),
    scale 0.75s cubic-bezier(0.2, 0.9, 0.25, 1.25) var(--fxd, 0ms),
    transform 0.18s ease-out, border-color 0.15s, box-shadow 0.2s;
}

/* ---------- ปุ่ม: แม่เหล็ก + ระลอกน้ำ + แสงวิ่ง ---------- */
.sm-btn, .btn, .rl-btn { position: relative; overflow: hidden; transition: translate 0.25s cubic-bezier(0.3, 1.6, 0.5, 1), transform 0.15s, filter 0.15s, opacity 0.15s; }
.fx-ripple { position: absolute; border-radius: 50%; pointer-events: none; background: rgba(255, 255, 255, 0.45); transform: translate(-50%, -50%) scale(0); animation: fxRipple 0.65s ease-out forwards; }
@keyframes fxRipple { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
.sm-btn:not(.sm-ghost)::after, .btn.primary::after, .btn.discord::after, .btn.steam::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.38), transparent);
  transform: skewX(-18deg); animation: fxSweep 3.6s ease-in-out infinite;
}
.btn[disabled]::after { display: none; }
@keyframes fxSweep { 0%, 62% { left: -60%; } 100% { left: 130%; } }

/* ---------- หลอดดูดบอกระยะเลื่อน (/all) ---------- */
.fx-straw { position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 60; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, #ffc2dc, var(--accent), #ffd27a); box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.7); }

/* ===================== หน้า /all ===================== */
.sm-tag b { background: linear-gradient(90deg, var(--accent), #ffd27a, #c9b8ff, var(--accent)); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: fxShine 5s linear infinite; }
@keyframes fxShine { to { background-position: 300% 0; } }
.sm-hello { animation: fxFloat 4s ease-in-out infinite; }
@keyframes fxFloat { 50% { translate: 0 -3px; } }

/* แก้วสมูทตี้ — ของเหลวในหัวเว็บ ยิ่งแตะยิ่งเต็ม */
.fx-liquid { position: absolute; left: 0; right: 0; bottom: 0; height: var(--lvl, 12%); pointer-events: none; z-index: 0;
  transition: height 0.9s cubic-bezier(0.3, 1.4, 0.5, 1);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.30), rgba(var(--accent-rgb), 0.12)); }
.fx-liquid svg { position: absolute; left: 0; bottom: 100%; width: 200%; height: 26px; fill: rgba(var(--accent-rgb), 0.30); animation: fxWave 6s linear infinite; }
.fx-liquid svg.w2 { fill: rgba(var(--accent-rgb), 0.16); height: 34px; animation-duration: 9s; animation-direction: reverse; }
@keyframes fxWave { to { transform: translateX(-50%); } }
.fx-liquid i { position: absolute; bottom: 0; width: var(--s, 10px); height: var(--s, 10px); border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.35);
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.5) 0 12%, transparent 30%); animation: fxBubble var(--t, 4s) ease-in infinite; animation-delay: var(--d, 0s); opacity: 0; }
@keyframes fxBubble { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 10px), -260px); } }

.fx-meter { position: absolute; top: 14px; right: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px;
  border-radius: 999px; background: rgba(var(--bg-rgb), 0.72); border: 1px solid var(--line); font: 500 13px var(--sm-head); color: var(--muted);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: pointer; user-select: none; }
.fx-meter:hover { border-color: rgba(var(--accent-rgb), 0.5); color: var(--text); }
.fx-meter .cup { font-size: 17px; line-height: 1; }
.fx-meter .bars { display: inline-flex; gap: 3px; }
.fx-meter .bars span { width: 7px; height: 14px; border-radius: 3px; background: rgba(var(--fg-rgb), 0.12); transition: background 0.25s, transform 0.25s; }
.fx-meter .bars span.on { background: var(--accent); box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.7); transform: scaleY(1.15); }
.fx-meter b { color: var(--accent); font-weight: 600; }
.fx-meter.full { animation: fxJiggle 0.45s ease-in-out infinite; }
@media (max-width: 600px) { .sm-hero { padding-top: 62px; } .fx-meter { top: 12px; right: 50%; translate: 50% 0; } }
@keyframes fxJiggle { 25% { rotate: -4deg; } 75% { rotate: 4deg; } }

.sm-hero.fx-blending { animation: fxShake 0.09s linear infinite; }
.sm-hero.fx-blending .fx-liquid { height: 88% !important; }
.sm-hero.fx-blending .fx-liquid svg { animation-duration: 0.8s; }
.sm-hero.fx-blending .sm-biglogo { animation: fxSpin 0.6s linear infinite; }
@keyframes fxShake { 0% { translate: 1px 0; } 25% { translate: -1px 1px; } 50% { translate: 1px -1px; } 75% { translate: -1px 0; } }
@keyframes fxSpin { to { rotate: 360deg; } }
.sm-hero.fx-flash::before { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(circle at 50% 42%, #fff, rgba(var(--accent-rgb), 0.6) 30%, transparent 70%); animation: fxFlash 0.7s ease-out forwards; }
@keyframes fxFlash { from { opacity: 1; } to { opacity: 0; } }

.fx-pop { position: absolute; left: 50%; top: 40%; z-index: 4; pointer-events: none; translate: -50% -50%; text-align: center; white-space: nowrap;
  font: 600 clamp(26px, 5vw, 46px)/1.1 var(--sm-head); color: #fff; text-shadow: 0 4px 0 rgba(var(--accent-rgb), 0.9), 0 10px 30px rgba(0, 0, 0, 0.5);
  animation: fxPopText 2.2s cubic-bezier(0.2, 1.6, 0.4, 1) forwards;
  background: rgba(var(--bg-rgb), 0.6); padding: 16px 28px; border-radius: 24px; border: 1px solid rgba(var(--accent-rgb), 0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.fx-pop small { display: block; font-size: 0.42em; font-weight: 500; margin-top: 6px; color: #ffe1ee; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); }
@keyframes fxPopText { 0% { scale: 0; rotate: -12deg; opacity: 0; } 18% { scale: 1.12; rotate: 3deg; opacity: 1; } 28% { scale: 1; rotate: 0deg; } 80% { opacity: 1; translate: -50% -50%; } 100% { opacity: 0; translate: -50% -90%; } }

.sm-chip.fx-flash, .g-card.fx-flash { animation: fxChip 0.9s ease-out; }
@keyframes fxChip { 0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.6); } 100% { box-shadow: 0 0 0 14px rgba(var(--accent-rgb), 0); } }

/* ===================== หน้ารับไวท์ลิสต์ ===================== */
.fx-verify main.wrap { position: relative; z-index: 1; }
.fx-floaties { position: fixed; inset: -40px; pointer-events: none; z-index: 0; transition: transform 0.6s ease-out; }
.fx-floaties .f { position: absolute; width: var(--s); height: var(--s); opacity: var(--o, 0.5); filter: blur(var(--b, 0px)) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.35)); animation: fxDrift var(--t, 18s) ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
.fx-floaties .f svg { width: 100%; height: 100%; display: block; animation: fxSpin var(--rt, 30s) linear infinite; }
@keyframes fxDrift { from { transform: translate(0, 0); } to { transform: translate(var(--dx, 40px), var(--dy, -60px)); } }

/* การ์ดหลัก: ขอบเรืองแสงวิ่งรอบ + ไฟส่องตามเมาส์ */
.fx-verify .card { position: relative; isolation: isolate; }
.fx-verify .card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 5;
  background: conic-gradient(from var(--fx-ang), transparent 0 55%, rgba(var(--accent-rgb), 0.95) 72%, #fff 78%, rgba(var(--accent-rgb), 0.95) 84%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: fxRing 5s linear infinite; opacity: 0.85;
}
@keyframes fxRing { to { --fx-ang: 360deg; } }
.fx-verify .card::before {
  content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity 0.3s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--accent-rgb), 0.10), transparent 65%);
}
.fx-verify .card.fx-hover::before { opacity: 1; }

/* ได้ยศแล้ว — ฉลองสุด ๆ */
.fx-verify .card.fx-yay::after { background: conic-gradient(from var(--fx-ang), #7ee2b8, var(--accent), #ffd27a, #c9b8ff, #7ee2b8); animation-duration: 2.4s; opacity: 1; }
.fx-yay .hero .badge { animation: fxPop 0.9s cubic-bezier(0.3, 1.9, 0.5, 1) both; cursor: pointer; }
.fx-yay .hero .badge::before { content: ''; position: absolute; inset: -10px; border-radius: inherit; border: 2px solid var(--ok); animation: fxPing 1.6s ease-out infinite; pointer-events: none; }
.fx-yay .hero .badge { position: relative; }
@keyframes fxPop { 0% { scale: 0; rotate: -40deg; } 100% { scale: 1; rotate: 0deg; } }
@keyframes fxPing { from { opacity: 0.9; scale: 0.8; } to { opacity: 0; scale: 1.5; } }
.fx-yay .hero h1 { background: linear-gradient(90deg, var(--text), var(--accent), #ffd27a, #7ee2b8, var(--text)); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: fxShine 4s linear infinite; }
.fx-yay .chip { position: relative; overflow: hidden; animation: fxPop 0.8s 0.25s cubic-bezier(0.3, 1.9, 0.5, 1) both; }
.fx-yay .chip::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.6), transparent 70%); transform: translateX(-100%); animation: fxChipShine 2.6s ease-in-out infinite 1s; pointer-events: none; }
@keyframes fxChipShine { 0%, 50% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* ไม่ผ่าน — สั่น ๆ */
.fx-nope { animation: fxNope 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes fxNope { 10%, 90% { translate: -2px 0; } 20%, 80% { translate: 4px 0; } 30%, 50%, 70% { translate: -8px 0; } 40%, 60% { translate: 8px 0; } }

/* ช่องกรอกข้อมูล — เรืองแสงตอนพิมพ์ */
.fx-verify .pf-in:focus { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.22), 0 0 22px -4px rgba(var(--accent-rgb), 0.6); border-color: var(--accent); transition: box-shadow 0.25s, border-color 0.25s; }
.fx-verify .pf-field.fx-ok .pf-in { border-color: var(--ok); }

/* ลดการเคลื่อนไหว */
@media (prefers-reduced-motion: reduce) {
  .fx-rv { opacity: 1; translate: none; scale: none; }
  .fx-floaties, .fx-liquid svg, .fx-liquid i, .fx-straw { display: none; }
  .sm-btn::after, .btn::after, .fx-verify .card::after, .sm-tag b, .sm-hello, .fx-yay .chip::after { animation: none !important; }
}
@media (hover: none) { .fx-floaties { inset: 0; } }