/* ======================================================================
   หน้าโหลด (Loading screen) — ส่วนหน้าตา/สไตล์
   ไฟล์ที่เกี่ยวข้อง:  loading/loading.js  (แก้ข้อความ + ใส่ลิงก์ .gif ที่นี่)
   ----------------------------------------------------------------------
   ถ้าจะใช้ .gif แทนหัวใจลอย:
     1) ไม่ต้องลบอะไรในไฟล์นี้เลย — แค่ใส่ลิงก์ .gif ที่ LOADING_GIF ใน loading/loading.js
        หัวใจจะหายไปเองและโชว์ .gif แทน
     2) (ไม่บังคับ) ถ้าอยากลบโค้ดหัวใจให้สะอาด ให้ลบ 3 อย่างนี้:
        - บล็อก  .sp-heart{ ... }  และ  @keyframes sp-float{ ... }  ด้านล่าง
        - ตัวแปร LOADING_HEART_SVG ใน loading/loading.js
        (ปรับขนาด .gif ได้ที่ .sp-gif ด้านล่าง)
====================================================================== */
body.splash-on{ overflow:hidden }
#splash{
  position:fixed; left:0; top:0; right:0; bottom:0; z-index:99999;
  display:flex; align-items:center; justify-content:center;
  background:#fff;
  transition:opacity .45s ease, visibility .45s, background-color .35s ease;
}
.sp-stage{ transition:opacity .35s ease }
/* theme colours not known yet (first visit): keep the loading screen plain, no default-grey flash */
html:not(.has-theme) .sp-stage{ opacity:0 }
html.has-theme #splash{ background:var(--page) }
#splash.hide{ opacity:0; visibility:hidden; pointer-events:none }
.sp-stage{ display:flex; flex-direction:column; align-items:center; gap:8px; transform:translateY(-4vh) }
/* placeholder for the loading gif: a soft heart in the theme colour that floats up and down (swap in an <img> here later if you want a gif again) */
.sp-heart{ display:block; width:min(64px, 20vw); height:min(64px, 20vw); fill:var(--rose); animation:sp-float 2.6s ease-in-out infinite }
@keyframes sp-float{ 0%,100%{ transform:translateY(6px) rotate(-3deg) } 50%{ transform:translateY(-8px) rotate(3deg) } }
.sp-text{ font-size:12px; font-weight:600; letter-spacing:.2px; color:var(--ink); display:flex; align-items:center }
.sp-dots{ display:inline-flex; gap:3px; margin-left:5px }
.sp-dots i{ width:4px; height:4px; border-radius:50%; background:var(--rose); display:block; animation:sp-dot 1.2s ease-in-out infinite }
.sp-dots i:nth-child(2){ animation-delay:.15s }
.sp-dots i:nth-child(3){ animation-delay:.3s }
@keyframes sp-dot{ 0%,60%,100%{ transform:translateY(0); opacity:.45 } 30%{ transform:translateY(-4px); opacity:1 } }
@media (prefers-reduced-motion: reduce){
  #splash *{ animation:none !important }
}
  /* ขนาดของ .gif หน้าโหลด (กว้างสูงสุด 96px หรือ 28% ของจอ) — แก้ตัวเลขได้ */
  .sp-gif{ display:block; width:min(96px, 28vw); height:auto; max-height:28vh; object-fit:contain }