/* public/styles/layout-lock.css */

/* === 1. 锁死 Header (头部) === */
.head-container {
    /* 强制固定高度，防止被内容撑开或压缩 */
    height: 3.5rem !important; 
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 50;
    
    /* 基础外观，保证加载瞬间有背景色 */
    background-color: var(--color-card, #f3f3f1);
    backdrop-filter: blur(12px);
    border-radius: 0 0 0.75rem 0.75rem;
    box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.1);
    
    /* 强制布局不乱跑 */
    display: flex;
    align-items: center;
    padding: 0 1rem;
}

/* === 2. 锁死 Logo === */
.site-logo {
    /* 强制尺寸，无论 CSS 加载没加载，图片只能这么大 */
    height: 2.8rem !important;
    width: auto !important;
    object-fit: contain;
    display: block;
}

.logo-area {
    display: flex;
    align-items: center;
    height: 100%;
}

/* === 3. 锁死主容器 (Main) === */
main {
    display: block;
    width: 100%;
    margin: 0 auto;
    padding: 1rem;
    /* 预设最小高度，防止切页面瞬间高度塌陷导致 Footer 瞬移 */
    min-height: 80vh; 
}

/* 提前定义好宽度，防止 JS 计算延迟带来的跳动 */
main.sm { max-width: 50rem; }
main.md { max-width: 70rem; }
main.lg { max-width: 90rem; }
main.xl { max-width: 110rem; }


/* === 5. 终极丝滑：下沉上浮动画 (仿 Fuwari/Next.js) === */

/* 旧页面：淡出 + 稍微下沉 (感觉像是掉下去了) */
::view-transition-old(root) {
    animation: 
        90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
        300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-down;
}

/* 新页面：淡入 + 从下方浮起 (感觉像是升上来了) */
::view-transition-new(root) {
    animation: 
        210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
        300ms cubic-bezier(0, 0, 0.2, 1) both slide-up;
}

/* 动画关键帧 */
@keyframes fade-in {
    from { opacity: 0; }
}

@keyframes fade-out {
    to { opacity: 0; }
}

@keyframes slide-down {
    to { transform: translateY(15px); } /* 下沉距离不要太大，15px 刚好 */
}

@keyframes slide-up {
    from { transform: translateY(15px); } /* 从下方 15px 处浮起 */
}

/* === 6. 防闪烁补丁：防止滚动条出现导致页面抖动 === */
html {
    scrollbar-gutter: stable;
}