/* ========================================================================== Loading splash — โชว์ครั้งเดียวต่อ session ตอนเปิดแอป (ดู public/js/splash.js) Rebuild จากไฟล์ต้นฉบับ "Loading Splash (standalone).html" ให้เป็น HTML/CSS/JS ล้วน (เดิมเป็น bundle 870KB + เฟรมเวิร์ก x-dc/DCLogic ที่ใช้ในแอปจริงไม่ได้). โลโก้ใช้ /logo.png ตัวเดียวกับที่แอปใช้อยู่ (โลโก้ที่ฝังมาใน bundle คือไฟล์เดียวกัน). การซ่อน/แสดง: ค่าเริ่มต้นซ่อนไว้เสมอ. head.ejs มีสคริปต์เล็กๆ ที่รันก่อน paint ใส่ data-splash="show" บน เฉพาะครั้งแรกของ session — กันไม่ให้ splash กะพริบตอนเปลี่ยนหน้าอื่นๆ ในแอป. ========================================================================== */ #twc9-splash { display: none; } html[data-splash="show"] #twc9-splash { display: flex; } #twc9-splash { position: fixed; inset: 0; z-index: 2147483000; /* สูงสุดเท่าที่ควร — คลุมทุกอย่างในแอป */ align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(ellipse at 50% 46%, #241b0f 0%, #150f09 45%, #050403 78%, #000000 100%); font-family: sans-serif; opacity: 1; transition: opacity 0.6s ease; } /* คลาสที่ splash.js ใส่เพื่อ fade ออกตอนจบ แล้วค่อยลบทิ้งจาก DOM */ #twc9-splash.is-out { opacity: 0; } /* แสงพื้นหลังนิ่งๆ ให้ตรงกลางสว่างอมทอง */ .twc9-splash__wash { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 40%, rgba(205,170,110,0.14) 0%, transparent 60%); } /* วาบแสงตอนเปิดครั้งเดียว */ .twc9-splash__flash { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 46%, rgba(230,195,140,0.35) 0%, transparent 55%); animation: twc9SoftFlash 1.4s ease-out 0.05s forwards; } /* อนุภาคทองลอย (motes) — สร้างจาก splash.js */ .twc9-splash__mote { position: absolute; border-radius: 50%; opacity: 0; pointer-events: none; background: radial-gradient(circle, #fdf1d8, #cba86b 65%, transparent 100%); } /* วงแสงหายใจรอบโลโก้ */ .twc9-splash__halo { position: absolute; top: 50%; left: 50%; width: 45vmin; height: 45vmin; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(205,170,110,0.22) 0%, transparent 68%); opacity: 0; animation: twc9FadeIn 1.6s ease-out 0.5s forwards, twc9Breathe 4.5s ease-in-out 2.1s infinite; } .twc9-splash__center { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 2.2vh; } .twc9-splash__logo-wrap { position: relative; width: 37vmin; height: 37vmin; border-radius: 50%; overflow: hidden; opacity: 0; animation: twc9LogoReveal 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.55s forwards; } .twc9-splash__logo { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; } /* แสงกวาดผ่านโลโก้ */ .twc9-splash__shine { position: absolute; top: -50%; left: -20%; width: 40%; height: 200%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent); animation: twc9ShineSweep 2.4s ease-in-out 1.4s infinite; pointer-events: none; } /* เส้นทองที่ค่อยๆ ขยายใต้โลโก้ */ .twc9-splash__line { height: 1px; width: 0; background: linear-gradient(90deg, transparent, rgba(205,170,110,0.85), transparent); animation: twc9LineExpand 1s ease-out 1.5s forwards; } /* แถบโหลดด้านล่าง */ .twc9-splash__bar { position: absolute; bottom: 7vh; left: 50%; transform: translateX(-50%); width: 12vw; min-width: 140px; height: 1px; background: rgba(205,170,110,0.18); overflow: hidden; opacity: 0; animation: twc9FadeIn 0.8s ease-out 2s forwards; } .twc9-splash__bar-fill { height: 100%; background: rgba(205,170,110,0.8); animation: twc9BarFill 5s ease-in-out forwards; } /* จุดปลดล็อกเสียง — แสดงเฉพาะเมื่อเบราว์เซอร์บล็อก autoplay (splash.js สั่งโชว์) */ .twc9-splash__unlock { position: absolute; top: 3vh; left: 50%; transform: translateX(-50%); width: 1.4vh; height: 1.4vh; min-width: 10px; min-height: 10px; border-radius: 50%; background: rgba(205,170,110,0.8); cursor: pointer; z-index: 3; display: none; animation: twc9DotPulse 1.6s ease-in-out infinite; } .twc9-splash__unlock.is-visible { display: block; } @keyframes twc9LogoReveal { 0% { opacity: 0; transform: scale(0.88); filter: blur(6px); } 100% { opacity: 1; transform: scale(1); filter: blur(0); } } @keyframes twc9Breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } @keyframes twc9LineExpand { 0% { width: 0; opacity: 0; } 100% { width: 9vw; opacity: 1; } } @keyframes twc9FadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes twc9BarFill { 0% { width: 0%; } 100% { width: 100%; } } @keyframes twc9DotPulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.9; } } @keyframes twc9ShineSweep { 0% { transform: translateX(-140%) rotate(18deg); } 100% { transform: translateX(140%) rotate(18deg); } } @keyframes twc9MoteFloat { 0% { transform: translateY(0) scale(1); opacity: 0; } 15% { opacity: 0.55; } 60% { transform: translateY(-4vh) scale(1.15); opacity: 0.5; } 100% { transform: translateY(-9vh) scale(0.5); opacity: 0; } } @keyframes twc9SoftFlash { 0% { opacity: 0; } 12% { opacity: 0.7; } 100% { opacity: 0; } } /* เคารพผู้ใช้ที่ตั้งค่า "ลดการเคลื่อนไหว" — โชว์นิ่งๆ สั้นๆ ไม่มีอนิเมชัน */ @media (prefers-reduced-motion: reduce) { #twc9-splash *, #twc9-splash { animation: none !important; transition: opacity 0.3s ease !important; } .twc9-splash__logo-wrap, .twc9-splash__halo, .twc9-splash__bar { opacity: 1; } .twc9-splash__line { width: 9vw; opacity: 1; } }