/* 引入 OpenAI 字体 */
@font-face {
    font-family: 'OpenAISans';
    src: url('/font/openai/OpenAISans-Regular.woff2') format('woff2');
    font-weight: 400;
}
@font-face {
    font-family: 'OpenAISans';
    src: url('/font/openai/OpenAISans-Medium.woff2') format('woff2');
    font-weight: 500;
}
@font-face {
    font-family: 'OpenAISans';
    src: url('/font/openai/OpenAISans-Semibold.woff2') format('woff2');
    font-weight: 600;
}

/* 全局强制字体与渲染优化 */
html, body {
    font-family: 'OpenAISans';
}
html, body {
    font-family: 'OpenAISans';
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
}

/* 要求的背景渐变 */
.hero-gradient {
    background: linear-gradient(to bottom, #eaeaea 0%, #fafafa 100%);
}

/* 响应式图片位置微调 */
@media (min-width: 768px) {
    .hero-gradient {
        padding-top: 48px; /* 补偿固定导航栏高度 */
    }
}

/* 进场动画：提升质感 */
main {
    animation: appleFadeIn 1s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes appleFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* 名字切换时的模糊状态 */
.name-blur {
    filter: blur(12px); /* 深层模糊 */
    opacity: 0;         /* 配合透明度变化更顺滑 */
    transform: scale(0.95); /* 轻微缩小，增加动感 */
}

/* 确保文字在切换时不换行导致的抖动 */
#hero-name {
    display: inline-block;
    min-width: 1.2em;
    will-change: filter, opacity, transform;
}