/* ==========================================================================
   MÀN TẢI BAN ĐẦU (Blazor WASM) — markup ở index.html (#app > .boot-screen), theo app acctest.ssoftware.vn.
   - Chỉ animate transform/opacity để logo vẫn mượt khi main thread bận tải + biên dịch WASM.
   - --blazor-load-percentage / --blazor-load-percentage-text do blazor.webassembly.js tự đặt lên :root.
   - Màu theo màu chủ đạo của app: xanh #2563eb + xanh trời #38bdf8 (màn tải nằm ngoài chrome nên ghi thẳng mã màu).
   - Blazor tự thay toàn bộ nội dung #app khi render xong, không cần JS gỡ màn này.
   ========================================================================== */
.boot-screen {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    background: radial-gradient(ellipse at 50% 38%, #f2f6ff 0%, #ffffff 55%, #f7f8fa 100%);
    font-family: Inter, Arial, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    animation: boot-fade-in 0.4s ease-out both;
    z-index: 2000;
}

.boot-logo {
    width: 76px;
    height: 76px;
    overflow: visible;
    margin-bottom: 0.4rem;
}

.boot-piece {
    transform-box: fill-box;
    transform-origin: center;
    animation: boot-breathe 1.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.boot-piece--tl { fill: #2563eb; --boot-dx: -2.6px; --boot-dy: -2.6px; animation-delay: 0s; }
.boot-piece--tr { fill: #38bdf8; --boot-dx: 2.6px; --boot-dy: -2.6px; animation-delay: 0.15s; }
.boot-piece--br { fill: #2563eb; --boot-dx: 2.6px; --boot-dy: 2.6px; animation-delay: 0.3s; }
.boot-piece--bl { fill: #38bdf8; --boot-dx: -2.6px; --boot-dy: 2.6px; animation-delay: 0.45s; }

.boot-title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #1e2530;
}

.boot-bar {
    position: relative;
    width: 200px;
    height: 4px;
    border-radius: 999px;
    background: #eceef1;
    overflow: hidden;
}

.boot-bar-fill {
    position: relative;
    height: 100%;
    width: var(--blazor-load-percentage, 0%);
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb, #38bdf8);
    transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
}

/* Vệt sáng chạy qua phần đã tải — vẫn thấy đang chạy khi % đứng yên lâu */
.boot-bar-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: translateX(-100%);
    animation: boot-shimmer 1.4s ease-in-out infinite;
}

.boot-text {
    min-height: 1.2em;
    font-size: 12px;
    color: #8b95a1;
    font-variant-numeric: tabular-nums;
}

.boot-text::after {
    content: "Đang tải ứng dụng " var(--blazor-load-percentage-text, "");
}

@keyframes boot-breathe {
    0%, 100% { transform: translate(0, 0); opacity: 1; }
    50% { transform: translate(var(--boot-dx), var(--boot-dy)); opacity: 0.55; }
}

@keyframes boot-shimmer {
    to { transform: translateX(100%); }
}

@keyframes boot-fade-in {
    from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .boot-screen,
    .boot-piece,
    .boot-bar-fill::after {
        animation: none;
    }

    .boot-bar-fill {
        transition: none;
    }
}