/* Shape Waves — พื้นหลังรูปทรงเรขาคณิตแบบคลื่นตามเมาส์
   ใช้คู่กับ shape-waves.js  |  สีธีมหลัก #33FFF3 */

/* ---------- Canvas: อยู่หลังเนื้อหาทั้งหมด ไม่บังการคลิก ---------- */
.shape-waves {
  position: fixed;
  inset: 0;
  z-index: -1;               /* DOM วางก่อน .magic-bg จึงอยู่ใต้แสงเรืองเดิมของเว็บ */
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100vw;          /* กันแถบเลื่อนแนวนอน */
  pointer-events: none;
  user-select: none;
  background-color: rgba(5, 8, 13, 0.55); /* JS จะเขียนทับตามค่า backgroundColor */
}

/* ---------- พื้นหลังสำรอง: ใช้เมื่อ canvas เริ่มทำงานไม่ได้ (JS จะเติมคลาส is-fallback) ---------- */
.shape-waves.is-fallback {
  background-image:
    radial-gradient(circle at center, rgba(51, 255, 243, 0.34) 0 1.3px, transparent 1.9px),
    radial-gradient(circle at 50% 50%, rgba(51, 255, 243, 0.10), transparent 60%);
  background-size: 34px 34px, 100% 100%;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 25%, rgba(0, 0, 0, 0.35) 100%);
  mask-image: radial-gradient(ellipse at 50% 40%, #000 25%, rgba(0, 0, 0, 0.35) 100%);
  animation: swFallbackBreath 7s ease-in-out infinite alternate;
}

@keyframes swFallbackBreath {
  from { opacity: 0.55; }
  to   { opacity: 1; }
}

/* ---------- Hero: ให้คลื่นมองเห็นผ่านส่วน Hero ----------
   เดิมรูป hero (assets/wakumi-hero.jpg) ทึบ 100% อยู่บน .hero จึงบังพื้นหลังทั้งหมด
   ที่นี่ย้ายรูป + เลเยอร์เดิมไปไว้ที่ .hero-shade (ซึ่งว่างอยู่) แล้วทำให้โปร่งแสงบางส่วน
   ปรับความเข้มของรูปได้ที่ --sw-hero-photo (0 = มองเห็นแต่คลื่น, 1 = เหมือนเดิมทุกอย่าง)
   ถ้าอยากกลับไปเหมือนเดิม: ลบบล็อกนี้ทั้งหมด (จนถึงบรรทัด "จบ Hero") */
:root { --sw-hero-photo: 0.62; }

.hero {
  background-image: none;
  background-color: transparent;
}

.hero-shade {
  background-image:
    linear-gradient(0deg, var(--bg), transparent 20%, transparent 78%, hsl(calc(var(--hue) - 16) 45.5% 4.3% / .35)),
    linear-gradient(90deg, hsl(calc(var(--hue) - 11.6) 57.9% 3.7% / .94) 0%, hsl(calc(var(--hue) - 13) 54.5% 4.3% / .8) 36%, hsl(calc(var(--hue) - 13) 54.5% 4.3% / .15) 100%),
    url('assets/wakumi-hero.jpg');
  background-size: auto, auto, cover;
  background-position: 0 0, 0 0, center 44%;
  background-repeat: no-repeat;
  opacity: var(--sw-hero-photo);
}

@media (max-width: 980px) {
  .hero-shade { background-position: 0 0, 0 0, 58% center; }
}

@media (max-width: 640px) {
  .hero-shade { background-position: 0 0, 0 0, 62% center; }
}
/* จบ Hero */

/* ลดการเคลื่อนไหว: JS วาดภาพนิ่งแทน ส่วนพื้นหลังสำรองก็หยุดอนิเมชัน */
@media (prefers-reduced-motion: reduce) {
  .shape-waves.is-fallback { animation: none; }
}