/* ============================================================
 * 全局样式 (global.css)
 * 说明: 所有页面共享的全局样式，包括基础样式、字体、组件、动画、布局控制等
 * ============================================================ */

/* ========== 一、基础样式 ========== */
html { scroll-behavior: smooth; }

body {
    min-height: 100vh;
    font-family: "Cormorant Infant", "Noto Serif SC", "PingFang SC", "Microsoft YaHei", serif;
    color: #49363a;
    background: radial-gradient(circle at top, rgba(255,255,255,0.85), transparent 30%),
                linear-gradient(#fffaf7 0%, #fff4f1 40%, #fff8f5 100%);
    line-height: 1.5;
    overflow-x: hidden;
}

/* 手写字体（强制生效，使用Alex Brush优雅自然手写） */
.font-script {
    font-family: "Alex Brush", "Dancing Script", "Ma Shan Zheng", cursive !important;
}

/* 衬线字体（强制生效） */
.font-serif {
    font-family: "Cormorant Infant", "Noto Serif SC", serif !important;
}

/* 标题和正文使用衬线字体 */
h1, h2, h3, h4, h5, h6, p, span, a, li, div {
    font-family: inherit;
}

/* 纪念日计时器数字使用Parisienne浪漫优雅法式手写 */
#counter-years, #counter-months, #counter-days,
#counter-hours, #counter-minutes, #counter-seconds {
    font-family: "Parisienne", "Great Vibes", cursive !important;
    font-weight: 400;
}

/* 页面背景层（romantic-shell） */
.romantic-shell {
    isolation: isolate;
    position: relative;
}
.romantic-shell:before {
    content: "";
    z-index: -2;
    background: radial-gradient(circle at 10% 15%, rgba(240,184,197,0.35), transparent 28%),
                radial-gradient(circle at 90% 8%, rgba(214,178,110,0.2), transparent 22%),
                radial-gradient(circle at 80% 80%, rgba(143,122,165,0.12), transparent 26%);
    position: absolute;
    inset: 0;
}
.romantic-shell:after {
    content: "";
    z-index: -1;
    background: linear-gradient(rgba(255,255,255,0.84), rgba(255,248,245,0.94));
    position: absolute;
    inset: 0;
}

/* 标题样式 */
.section-title {
    font-size: clamp(1.9rem, 4vw, 3rem);
    line-height: 1.15;
}
.section-subtitle {
    color: rgba(129,106,112,0.95);
    font-size: clamp(0.98rem, 1.6vw, 1.1rem);
    line-height: 1.8;
}

/* ========== 二、组件样式 ========== */
/* 卡片通用样式（section-card） */
.section-card {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    background: linear-gradient(rgba(255,255,255,0.92), rgba(255,251,249,0.88));
    border: 1px solid rgba(241,215,214,0.9);
    box-shadow: 0 24px 70px rgba(188,95,111,0.08), inset 0 1px rgba(255,255,255,0.75);
}

/* 灯箱层级高于樱花花瓣 */
#lightbox { z-index: 200; }

/* 音乐播放器旋转动画 */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.playing #player-cover {
    animation: spin 8s linear infinite;
}

/* 导航栏当前页面高亮 */
header a.nav-link.router-link-active,
header a.nav-link.router-link-exact-active {
    background-color: #bc5f6f !important;
    color: #ffffff !important;
    box-shadow: 0 10px 30px rgba(188,95,111,0.28) !important;
}

/* ========== 三、动画样式 ========== */
/* 渐入动画 */
.animate-hidden {
    opacity: 0;
    transform: translateY(24px);
}
.animate-visible {
    opacity: 1;
    transition: opacity 0.7s, transform 0.7s;
    transform: translateY(0);
}

/* 页面切换过渡动画 */
.page-fade-enter-active,
.page-fade-leave-active {
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.page-fade-enter-from {
    opacity: 0;
    transform: translateY(20px);
}
.page-fade-leave-to {
    opacity: 0;
    transform: translateY(-20px);
}

/* 页面内容渐入动画 */
@keyframes fadeInUp {
    0% { opacity: 0; transform: translateY(12px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    0% { opacity: 0; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}

/* 渐入动画初始状态 */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
/* 渐入动画触发状态 */
.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========== 四、布局控制样式（通过路由meta控制） ========== */
/* 隐藏导航栏 */
body.hide-header header {
    display: none !important;
}
body.hide-header main {
    padding-top: 0 !important;
}

/* 隐藏底部 */
body.hide-footer footer {
    display: none !important;
}

/* 隐藏樱花（用visibility而不是display，避免动画重新开始） */
body.hide-sakura .sakura-petals {
    visibility: hidden !important;
    opacity: 0 !important;
}