/* ============================================================
   Page Transition System  v2
   三段式：先隱藏 → 上遮罩 → 換內容 → 淡入
   ── 不再使用 MutationObserver 猜 DOM 穩定 ──
   ── 改用 Blazor OnAfterRenderAsync 明確信號 ──
   ============================================================ */

html {
    visibility: visible !important;
}

body {
    opacity: 1;
    transition: none;
}

/* ---------- 內容區域 ---------- */
#content, main, .content {
    opacity: 1;
    transform: translateY(0);
}

/* P1-1 轉場不隱藏主內容，只留進度條，避免白屏體感 */
body.page-out #content,
body.page-out main,
body.page-out .content {
    opacity: 1 !important;
    transition: none !important;
}

body.page-out footer#footer {
    opacity: 1;
    transition: none;
}

/* page-enter：新內容淡入動畫（導航後，由 Blazor 觸發） */
#content.page-enter,
main.page-enter,
.content.page-enter {
    animation: pageContentEnter 220ms ease-out both;
}

@keyframes pageContentEnter {
    from {
        opacity: 0;
        transform: translateY(3px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- Route loading overlay ---------- */
.route-loading-overlay {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--route-overlay-top, 0px);
    bottom: 0;
    background: rgba(255, 255, 255, 0.80);
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease-out;
    z-index: 2147483646;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.page-out .route-loading-overlay {
    opacity: 1;
    pointer-events: auto;
}

.route-loading-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 1.2rem 1.4rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 10px 26px rgba(0,0,0,0.08);
}

.initial-shell-spinner {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 3px solid rgba(var(--pthg-theme-rgb, 87, 91, 210), 0.25);
    border-top-color: rgba(var(--pthg-theme-rgb, 87, 91, 210), 1);
    animation: ccpbSpin 0.7s linear infinite;
}

@keyframes ccpbSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ---------- 頂部進度條 ---------- */
#page-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, #575bd2 0%, #7b7fd6 50%, #575bd2 100%);
    background-size: 200% 100%;
    z-index: 2147483647;
    opacity: 0;
    pointer-events: none;
    transition: none;
}

body.page-out #page-progress-bar {
    opacity: 1;
    width: 70%;
    transition: width 1.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 120ms ease;
    animation: progressBarShimmer 1.5s linear infinite;
}

#page-progress-bar.progress-done {
    opacity: 1;
    width: 100% !important;
    transition: width 180ms ease-out !important;
    animation: none;
}

#page-progress-bar.progress-hide {
    opacity: 0;
    transition: opacity 200ms ease-out !important;
}

@keyframes progressBarShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---------- 避免佈局偏移 ---------- */
.service-categories-wrapper,
.popular-grid,
.news-grid,
.stats-section {
    min-height: 100px;
    transition: none;
}

.auth-buttons {
    min-height: 40px;
}

.auth-buttons > * {
    transition: none;
}

.blazor-loading,
#blazor-loading {
    display: none !important;
}