/* =====================================================================
   bg.css — พื้นหลังกลางของ 9art.site (CSS ล้วน ไม่ใช้ไฟล์ภาพ)
   ---------------------------------------------------------------------
   1. ตัวแปรสี (:root)  — เผื่ออนาคตดึงธีมจากฐานข้อมูลมา override
   2. gradient พื้น + แสงม่วงมุมขวาบน
   3. วงกลมซ้อน 3 ชั้น + "หายใจ" ช้า ๆ (ชัดขึ้นกว่าเดิม)
   4. ambient waves — คลื่นวิ่งออกช้า ๆ ตลอดเวลา ทุกหน้า (เอฟเฟกต์ผิวน้ำ)
   5. ripple burst — คลื่นแรงตอนเปิดเว็บ (ช่วง intro) เล่นครั้งเดียว
   6. prefers-reduced-motion — ปิดแอนิเมชันให้ผู้ใช้ที่ตั้งค่าไว้
   ===================================================================== */

/* box model มาตรฐาน — ทำให้ width:100% + padding ไม่ล้นออกนอกจอ
   (เดิมพึ่ง reset ของ Bootstrap; ตั้งเองไว้เผื่อ CDN โหลดไม่ทัน/ถูกบล็อก) */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }

/* ลิงก์ทุกตัว ไม่มีเส้นใต้เลย ทุกสถานะ (รวมตอนเอาเมาส์ชี้) */
a, a:link, a:visited, a:hover, a:active, a:focus { text-decoration: none; }

:root {
  --bg-dark-1: #1d2270;
  --bg-dark-2: #262c85;
  --bg-dark-3: #33339b;
  --bg-glow:   rgba(124, 76, 255, 0.75);

  --ring-outer-a:  #2a3090;  --ring-outer-b:  #3a41ad;
  --ring-middle-a: #323aa5;  --ring-middle-b: #4750cf;
  --ring-inner-a:  #3f4bc2;  --ring-inner-b:  #5a67f2;

  --ripple-color: rgba(255, 255, 255, 0.28);
  --wave-color:   rgba(255, 255, 255, 0.14);

  /* จุดกำเนิดคลื่น/ศูนย์กลางวง (อ้างอิงร่วมกันทุก element) */
  --pond-x: 76%;
  --pond-y: 92%;
}

/* ---------- 2) พื้นหลังหลัก ---------- */
body {
  background:
    radial-gradient(circle at 88% -5%, var(--bg-glow) 0%, rgba(124, 76, 255, 0) 42%),
    linear-gradient(118deg, var(--bg-dark-1) 0%, var(--bg-dark-2) 55%, var(--bg-dark-3) 100%);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

.bg-rings {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* ---------- 3) วงกลมซ้อน + หายใจ (ชัดขึ้น) ---------- */
.ring {
  position: absolute;
  left: var(--pond-x);
  top: var(--pond-y);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  will-change: transform;
  animation: ring-breathe 9s ease-in-out infinite alternate;
}

.ring--outer {
  width: 220vh; height: 220vh;
  background: linear-gradient(110deg, var(--ring-outer-a) 20%, var(--ring-outer-b) 80%);
  animation-duration: 12s;
}
.ring--middle {
  width: 152vh; height: 152vh;
  background: linear-gradient(110deg, var(--ring-middle-a) 15%, var(--ring-middle-b) 85%);
  animation-duration: 9s;
  animation-delay: -3s;
}
.ring--inner {
  width: 88vh; height: 88vh;
  background: linear-gradient(110deg, var(--ring-inner-a) 10%, var(--ring-inner-b) 90%);
  animation-duration: 7s;
  animation-delay: -4.5s;
}

@keyframes ring-breathe {
  from { transform: translate(-50%, -50%) scale(1); }
  to   { transform: translate(-50%, -50%) scale(1.075); }   /* เดิม 1.045 -> ชัดขึ้น */
}

/* ---------- 4) Ambient waves : คลื่นผิวน้ำวิ่งออกตลอดเวลา ----------
   อยู่ทุกหน้า ลูปไม่รู้จบ ให้พื้นหลัง "มีชีวิต" แบบโยนหินลงน้ำต่อเนื่อง
   จาง ๆ พอเห็นการเคลื่อนไหว แต่ไม่แย่งสายตาเนื้อหา */
.wave {
  position: absolute;
  left: var(--pond-x);
  top: var(--pond-y);
  width: 88vh; height: 88vh;
  border-radius: 50%;
  border: 1.5px solid var(--wave-color);
  transform: translate(-50%, -50%) scale(0.25);
  opacity: 0;
  will-change: transform, opacity;
  animation: wave-out 9s ease-out infinite;
}
.wave:nth-child(2) { animation-delay: 3s; }
.wave:nth-child(3) { animation-delay: 6s; }

@keyframes wave-out {
  0%   { transform: translate(-50%, -50%) scale(0.25); opacity: 0; }
  12%  { opacity: 0.55; }
  100% { transform: translate(-50%, -50%) scale(2.5);  opacity: 0; }
}

/* ---------- 5) Ripple burst (หินตกน้ำ ตอน intro) ---------- */
.ripple {
  position: absolute;
  left: var(--pond-x);
  top: var(--pond-y);
  width: 88vh; height: 88vh;
  border-radius: 50%;
  border: 2px solid var(--ripple-color);
  transform: translate(-50%, -50%) scale(0.05);
  opacity: 0;
  animation: ripple-out 2.6s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.ripple:nth-child(2) { animation-delay: 0.45s; }
.ripple:nth-child(3) { animation-delay: 0.9s; }

@keyframes ripple-out {
  0%   { transform: translate(-50%, -50%) scale(0.05); opacity: 0; }
  10%  { opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(2.6);  opacity: 0; }
}

/* ---------- 6) เคารพการตั้งค่า "ลดการเคลื่อนไหว" ---------- */
@media (prefers-reduced-motion: reduce) {
  .ring   { animation: none; }
  .wave,
  .ripple { display: none; }
}