/* ============================================================================
   page-loader.css — Universal Page-Transition Loader (TopKey29)
   ----------------------------------------------------------------------------
   หน้าโหลด (overlay "LOADING" กลางจอ) ตอนกดไปหน้าอื่น/ส่งฟอร์ม — ใช้ได้ทุกธีม
   (คลาสสิก สว่าง/มืด และ gaming). เลือกสไตล์ได้ที่ "ธีม & สีของเว็บ" → หน้าโหลด.
   - element เดียว #tk-loader (assets/js/page-loader.js สร้างให้) เติม .is-on ตอน
     เริ่มนำทาง พอหน้าใหม่โหลดเสร็จก็หายเอง (เอกสารใหม่)
   - สไตล์เลือกผ่าน html[data-loader="<key>"] : minimal | dots | orbit | bars |
     pulse | gaming  — แต่ละสไตล์มี markup ของตัวเองที่ JS ฉีดเข้า .tkl-stack
   - ทุกสีอ้าง var(--token) → ปรับตามสีธีมที่แอดมินตั้งไว้อัตโนมัติ (ยกเว้น gaming
     ที่จงใจใช้นีออนหลากสี). ไม่ hardcode พื้นการ์ด/ตัวอักษรนอกค่า fallback.
   ============================================================================ */

/* ── โครงรวม (ทุกสไตล์) ───────────────────────────────────────────────────── */
#tk-loader {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw; height: 100vh;
  margin: 0; padding: 0; border: 0;
  z-index: 2147483000;                       /* เหนือ modal/offcanvas ทุกตัว */
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--color-bg, #0b0b0f) 90%, transparent);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
          backdrop-filter: blur(8px) saturate(120%);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;
}
#tk-loader.is-on { opacity: 1; visibility: visible; pointer-events: auto; }

.tkl-stack {
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  background: transparent; border: 0; box-shadow: none; padding: 0;
}

/* ป้ายข้อความใต้สปินเนอร์ (สไตล์เรียบ) */
.tkl-label {
  font-weight: 700; font-size: 13px; letter-spacing: 4px; padding-left: 4px;
  color: var(--color-text, #e9eaee); opacity: .9; text-transform: uppercase;
}
.tkl-label--soft {
  font-size: 12px; font-weight: 600; letter-spacing: 3px; opacity: .7;
  color: var(--color-text-soft, #a9adb7);
}

@keyframes tklSpin { to { transform: rotate(360deg); } }

/* ── 1) MINIMAL — วงแหวนบางหมุนเรียบ ─────────────────────────────────────── */
.tkl-min-ring {
  width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--color-text, #888) 16%, transparent);
  border-top-color: var(--color-primary, #4338ca);
  animation: tklSpin .7s linear infinite;
}

/* ── 2) DOTS — สามจุดเด้งสลับ (มินิมอล/น่ารัก) ──────────────────────────── */
.tkl-dots { display: flex; gap: 13px; }
.tkl-dots i {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--color-primary, #4338ca);
  box-shadow: 0 0 14px color-mix(in srgb, var(--color-primary, #4338ca) 55%, transparent);
  animation: tklDot 1.1s ease-in-out infinite;
}
.tkl-dots i:nth-child(2) {
  animation-delay: .16s;
  background: var(--color-pink, #ec4899);
  box-shadow: 0 0 14px color-mix(in srgb, var(--color-pink, #ec4899) 55%, transparent);
}
.tkl-dots i:nth-child(3) {
  animation-delay: .32s;
  background: var(--color-info, #00b2ff);
  box-shadow: 0 0 14px color-mix(in srgb, var(--color-info, #00b2ff) 55%, transparent);
}
@keyframes tklDot {
  0%, 80%, 100% { transform: scale(.45); opacity: .35; }
  40%           { transform: scale(1);   opacity: 1;   }
}

/* ── 3) ORBIT — สามวงแหวนซ้อนโคจรสวนทาง (เท่ ทันสมัย) ───────────────────── */
.tkl-orbit { position: relative; width: 66px; height: 66px; }
.tkl-orbit span {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid transparent;
}
.tkl-orbit span:nth-child(1) { border-top-color: var(--color-primary, #4338ca);    animation: tklSpin 1s   linear infinite; }
.tkl-orbit span:nth-child(2) { inset: 9px;  border-right-color: var(--color-pink, #ec4899); animation: tklSpin 1.4s linear infinite reverse; }
.tkl-orbit span:nth-child(3) { inset: 18px; border-bottom-color: var(--color-info, #00b2ff); animation: tklSpin 1.8s linear infinite; }

/* ── 4) BARS — แท่งอีควอไลเซอร์เต้น (มีพลัง สาย gaming เบา ๆ) ─────────────── */
.tkl-bars { display: flex; align-items: flex-end; gap: 6px; height: 46px; }
.tkl-bars i {
  width: 7px; height: 100%; border-radius: 4px; transform-origin: bottom;
  background: linear-gradient(var(--color-primary, #4338ca), var(--color-pink, #ec4899));
  box-shadow: 0 0 10px color-mix(in srgb, var(--color-primary, #4338ca) 40%, transparent);
  animation: tklBars 1s ease-in-out infinite;
}
.tkl-bars i:nth-child(2) { animation-delay: .12s; }
.tkl-bars i:nth-child(3) { animation-delay: .24s; }
.tkl-bars i:nth-child(4) { animation-delay: .36s; }
.tkl-bars i:nth-child(5) { animation-delay: .48s; }
@keyframes tklBars { 0%, 100% { transform: scaleY(.28); } 50% { transform: scaleY(1); } }

/* ── 5) PULSE — แกนเรืองแสง + วงระลอกแผ่ออก (พรีเมียม นุ่มนวล) ──────────── */
.tkl-pulse {
  position: relative; width: 56px; height: 56px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--color-primary, #4338ca), transparent 72%);
  animation: tklPulseCore 1.4s ease-in-out infinite;
}
.tkl-pulse::before, .tkl-pulse::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--color-primary, #4338ca);
  animation: tklPulseRing 1.6s ease-out infinite;
}
.tkl-pulse::after { animation-delay: .8s; }
@keyframes tklPulseCore { 0%, 100% { transform: scale(.82); opacity: .75; } 50% { transform: scale(1); opacity: 1; } }
@keyframes tklPulseRing { 0% { transform: scale(.55); opacity: .8; } 100% { transform: scale(1.85); opacity: 0; } }

/* ── 6) GAMING — วงแหวนนีออน + LOADING ไล่สี RGB + แถบแสงไหล (ดำแดงพรีเมียม)
   พื้นหลังจงใจมืดเข้มไม่ว่าจะธีมไหน เพื่อคงคาแรกเตอร์เกมมิ่ง ─────────────── */
html[data-loader="gaming"] #tk-loader {
  background: radial-gradient(ellipse at center, rgba(12,6,8,.92), rgba(4,3,4,.97));
  -webkit-backdrop-filter: blur(10px) saturate(135%);
          backdrop-filter: blur(10px) saturate(135%);
}
.tkl-gm-ring {
  width: 72px; height: 72px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, var(--color-primary, #ff2a2a) 120deg, #ff9a9a 210deg, transparent 320deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  filter: drop-shadow(0 0 12px rgba(255,42,42,.7));
  animation: tklSpin .85s linear infinite;
}
.tkl-gm-label {
  font-weight: 800; font-size: 20px; letter-spacing: 6px; padding-left: 6px;
  background: linear-gradient(90deg, #ff2d55, #ff8a00, #ffd60a, #34d399, #3aa7ff, #a855f7, #ff2d55);
  background-size: 300% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 10px rgba(255,72,128,.4));
  animation: tklRGB 3.2s linear infinite;
}
@keyframes tklRGB { to { background-position: -300% center; } }
.tkl-gm-track {
  width: 220px; height: 4px; border-radius: 999px;
  background: rgba(255,255,255,.08); overflow: hidden;
}
.tkl-gm-track span {
  display: block; height: 100%; width: 42%; border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--color-primary, #ff2a2a), #ffd0d0, var(--color-primary, #ff2a2a), transparent);
  box-shadow: 0 0 12px rgba(255,42,42,.7);
  animation: tklGmBar 1.05s ease-in-out infinite;
}
@keyframes tklGmBar { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }

/* ── เคารพ prefers-reduced-motion: ยังโชว์ loader (เป็นตัวบอกสถานะ) แต่หยุดขยับ ── */
@media (prefers-reduced-motion: reduce) {
  .tkl-min-ring, .tkl-dots i, .tkl-orbit span, .tkl-bars i,
  .tkl-pulse, .tkl-pulse::before, .tkl-pulse::after,
  .tkl-gm-ring, .tkl-gm-label, .tkl-gm-track span { animation: none !important; }
  #tk-loader { transition: opacity .12s linear; }
}