/* ================================================ lazyload.css — Blur Reveal + Loading UI วางใน ก่อน CSS อื่นทั้งหมด ================================================ */ /* body.page-loading *:not(.modal):not(.modal *):not(.modal-backdrop):not(.modal.fade):not(.modal.show) { animation-play-state: paused !important; } */ body.page-loading .bannerBoatFloat, body.page-loading .wildmillMainLayout, body.page-loading .sparkle, body.page-loading .cloudFloat, body.page-loading .particle { animation-play-state: paused !important; } /* การันตีว่า modal และ element ข้างใน ไม่โดน block ใดๆ ระหว่าง loading */ .modal, .modal *, .modal-backdrop { animation-play-state: running !important; transition-property: opacity, transform !important; visibility: visible !important; pointer-events: auto !important; } /* ── overlay blur คลุมทั้งหน้า ── */ #blur-veil { position: fixed; inset: 0; z-index: 19999; pointer-events: none; /* ลด blur จาก 10px → 5px ประหยัด GPU paint ขณะโหลด */ backdrop-filter: blur(5px) brightness(0.8); -webkit-backdrop-filter: blur(5px) brightness(0.8); background: rgba(0, 5, 20, 0.5); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; opacity: 1; transition: opacity 0.5s ease; } #blur-veil.reveal { opacity: 0; backdrop-filter: blur(0px) brightness(1); -webkit-backdrop-filter: blur(0px) brightness(1); } #blur-veil.done { display: none; } /* ── content scale เข้ามาตอน reveal ── */ body.page-loading>*:not(#blur-veil) { transform: scale(1); filter: brightness(0.7); transition: none; } body.page-ready>*:not(#blur-veil) { transform: scale(1); filter: brightness(1); transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1), filter 1s cubic-bezier(0.4, 0, 0.2, 1); } /* ── Loading UI ── */ .veil-ui { display: flex; flex-direction: column; align-items: center; gap: 14px; transition: opacity 0.4s ease; } #blur-veil.reveal .veil-ui { opacity: 0; } .veil-label { font-family: "Classic_Robot_Condensed", "DB_Helvethaica_X", "Kanit", sans-serif; font-size: 13px; letter-spacing: 7px; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); } .veil-counter { font-family: "Classic_Robot_Condensed", "DB_Helvethaica_X", "Kanit", sans-serif; font-size: 48px; line-height: 1; color: #fff; letter-spacing: 2px; text-shadow: 0 0 24px rgba(100, 200, 255, 0.7); min-width: 3ch; text-align: center; } .veil-counter span { font-size: 22px; opacity: 0.45; margin-left: 2px; } /* progress bar */ .veil-bar-wrap { width: 200px; height: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); overflow: hidden; position: relative; } .veil-bar-fill { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, #40b3ff, #fff, #40b3ff); background-size: 200% 100%; transition: width 0.25s ease; animation: veilBarShimmer 1.8s linear infinite; } @keyframes veilBarShimmer { 0% { background-position: 0% 0%; } 100% { background-position: 200% 0%; } } /* glint วิ่ง */ .veil-bar-wrap::after { content: ''; position: absolute; top: 0; left: -30%; width: 30%; height: 100%; background: rgba(255, 255, 255, 0.5); border-radius: 999px; animation: veilGlint 1.8s linear infinite; } @keyframes veilGlint { 0% { left: -30%; opacity: 0; } 15% { opacity: 1; } 100% { left: 120%; opacity: 0; } }