/* ══════════════════════════════════════
   WARZ SERVER — loading.css
   Page preloader: Logo + Progress bar
══════════════════════════════════════ */

/* ── Overlay ── */
.wz-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #050507;
  transition: opacity .45s ease, visibility .45s ease;
}

.wz-loader.wz-loader--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ── BG grid ── */
.wz-loader__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 70% 50% at 50% 50%,
    rgba(232,0,26,.09) 0%,
    transparent 65%
  );
}

/* ── Background พร้อมรูปภาพและ Overlay ── */
/* .wz-loader__bg {
  position: absolute;
  inset: 0;
  background-image: url('../img/bg.jpg'); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.wz-loader__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at center,
    rgba(20, 20, 24, 0.4) 0%,
    rgba(15, 15, 18, 0.85) 70%,
    rgba(10, 10, 12, 1) 100%
  );
}

.wz-loader__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 70% 50% at 50% 50%,
    rgba(232, 0, 26, 0.12) 0%,
    transparent 75%
  );
  mix-blend-mode: screen;
}

.wz-loader__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(232,0,26,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,0,26,.028) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 100%);
} */

/* ── Scan line ── */
.wz-loader__scanline {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.wz-loader__scanline::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(232,0,26,.6) 40%,
    rgba(255,255,255,.15) 50%,
    rgba(232,0,26,.6) 60%,
    transparent 100%
  );
  animation: wzScan 2.2s linear infinite;
  top: -2px;
}
@keyframes wzScan {
  0%   { top: -2px; }
  100% { top: 100%; }
}

/* ── Corner brackets ── */
.wz-loader__corner {
  position: absolute;
  width: 22px;
  height: 22px;
  opacity: .5;
}
.wz-loader__corner--tl { top: 24px; left: 24px;
  border-top: 1px solid #e8001a; border-left: 1px solid #e8001a; }
.wz-loader__corner--tr { top: 24px; right: 24px;
  border-top: 1px solid #e8001a; border-right: 1px solid #e8001a; }
.wz-loader__corner--bl { bottom: 24px; left: 24px;
  border-bottom: 1px solid #e8001a; border-left: 1px solid #e8001a; }
.wz-loader__corner--br { bottom: 24px; right: 24px;
  border-bottom: 1px solid #e8001a; border-right: 1px solid #e8001a; }

/* ── Content ── */
.wz-loader__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  animation: wzContentIn .4s cubic-bezier(.4,0,.2,1) both;
}
@keyframes wzContentIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Logo ── */
.wz-loader__logo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.wz-loader__img {
  width: auto;       /* ปรับตามสัดส่วนจริง */
  height: 120px;     /* ปรับขนาดความสูงตามที่ต้องการ */
  object-fit: contain;
  
  /* เพิ่มแสง Glow รอบโลโก้ (ถ้าเป็นรูป PNG พื้นหลังโปร่งใสจะสวยมาก) */
  /*filter: drop-shadow(0 0 15px rgba(232, 0, 26, 0.4));*/
  
  /* ใส่ Animation ให้โลโก้มีการขยับเบาๆ */
  animation: wzLogoPulse 2s ease-in-out infinite;
}

@keyframes wzLogoPulse {
  0%, 100% { 
    transform: scale(1);
    /*filter: drop-shadow(0 0 15px rgba(232, 0, 26, 0.4));*/
  }
  50% { 
    transform: scale(1.05); /* ขยายใหญ่ขึ้นนิดหน่อย */
    /*filter: drop-shadow(0 0 25px rgba(232, 0, 26, 0.7));*/ /* แสงจ้าขึ้น */
  }
}

/* ── Progress bar ── */
.wz-loader__bar-wrap {
  position: relative;
  width: 280px;
  height: 3px;
  background: rgba(255,255,255,.06);
  border-radius: 2px;
  overflow: visible;
}

.wz-loader__bar {
  height: 100%;
  width: 0%;
  background: #e8001a;
  border-radius: 2px;
  transition: width .25s ease;
  position: relative;
  z-index: 1;
}
/* leading dot */
.wz-loader__bar::after {
  content: '';
  position: absolute;
  right: -3px;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 10px #e8001a, 0 0 4px #fff;
  opacity: 0;
  transition: opacity .2s;
}
.wz-loader__bar.wz-bar--running::after {
  opacity: 1;
}

/* glow layer */
.wz-loader__bar-glow {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 14px;
  width: 0%;
  background: linear-gradient(90deg, transparent, rgba(232,0,26,.35));
  border-radius: 2px;
  pointer-events: none;
  filter: blur(4px);
  transition: width .25s ease;
}

/* ── Status text ── */
.wz-loader__status {
  font-family: 'Kanit', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #55556a;
  min-width: 160px;
  text-align: center;
  transition: opacity .2s;
}

/* ── Fade-out done ── */
.wz-loader--done {
  animation: wzFadeOut .45s ease forwards;
}
@keyframes wzFadeOut {
  0%   { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}