/*
 * 婚礼网站 · 全站共享设计系统
 * 刘诗博 & 张璟 · 2026-09-12
 *
 * 各页面引入方式：<link rel="stylesheet" href="../assets/style.css">（子页面）
 *                 <link rel="stylesheet" href="assets/style.css">（首页）
 * 子页面内的 <style> 只保留该页独有的样式，公共变量/组件全部在这里。
 */

:root {
    /* 色彩 */
    --bg-color: #f5f5f7;
    --card-bg: #ffffff;
    --card-bg-glass: rgba(255, 255, 255, 0.62);
    --text-main: #1d1d1f;
    --text-muted: #86868b;
    --accent: #d94f6a;
    --accent-2: #007aff;
    --accent-3: #af52de;
    --green: #34c759;
    --orange: #ff9500;
    --border-radius: 20px;
    --border-radius-sm: 12px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC",
                 "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-color);
    background-image:
        radial-gradient(circle at 15% 0%, rgba(255, 214, 227, 0.55), transparent 42%),
        radial-gradient(circle at 100% 10%, rgba(199, 210, 255, 0.4), transparent 45%),
        radial-gradient(circle at 50% 100%, rgba(255, 236, 210, 0.3), transparent 50%);
    background-attachment: fixed;
    color: var(--text-main);
    margin: 0;
    padding: 16px;
    -webkit-font-smoothing: antialiased;
}

.container { max-width: 900px; margin: 0 auto; }

/* 返回链接 */
.back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 16px;
    color: var(--accent-2);
    text-decoration: none;
    font-size: 14px;
}
.back svg { width: 16px; height: 16px; }

/* 通用卡片 / 面板（不透明，用于信息密集页） */
.panel, .header, .stage-block {
    background: var(--card-bg);
    border-radius: var(--border-radius);
    padding: 20px 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin-bottom: 16px;
}

/* 玻璃拟态卡片（仅用于首页 Hero / 强调区块） */
.glass {
    background: var(--card-bg-glass);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

/* 图标统一尺寸 */
.icon-svg { width: 1em; height: 1em; stroke-width: 1.8; vertical-align: -0.15em; }

/* 进度条 */
.bar-bg { width: 100%; height: 8px; background: #e5e5ea; border-radius: 4px; overflow: hidden; }
.bar-fill {
    height: 100%;
    background: var(--green);
    border-radius: 4px;
    transition: width 0.6s var(--ease);
}

footer {
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    margin: 24px 0 8px;
}

/* 一键导航按钮（首页速览卡 / 来宾指引 / 入住指引共用） */
.nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--accent);
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    padding: 12px;
    border-radius: var(--border-radius-sm);
    margin-top: 12px;
    transition: transform 0.2s var(--ease);
}
.nav-btn:active { transform: scale(0.97); }
.nav-btn svg { width: 16px; height: 16px; }

/* 入场动效：依次淡入 + 上浮 */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-up {
    opacity: 0;
    animation: fadeUp 0.6s var(--ease) forwards;
}

/* 数字滚动容器（配合 JS 使用） */
.num-roll { display: inline-block; transition: transform 0.4s var(--ease); }

@media (prefers-reduced-motion: reduce) {
    .fade-up { animation: none; opacity: 1; }
    * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}