/* style.css */

body {
    /* 全局缩放：让浏览器 100% 显示为 50% 的视觉大小（Chromium/Edge 支持最好） */
    zoom: 0.55;
    background-color: transparent;
    /* 稍微灰一点的背景，让multiply效果更好 */
    font-family: 'Helvetica Neue', Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    margin: 0;
    overflow: hidden;
    /* 用滚轮做“下一步”触发器，避免页面本身滚动 */
}

h1 {
    /* margin-bottom: 30px;  Removed to avoid conflict with fixed positioning */
    color: #ffffff;
}

/* 标题动画相关 */
#main-title {
    position: fixed;
    top: 30px;
    /* 最终位置 */
    left: 50%;
    transform: translateX(-50%) scale(1);
    transition: all 1s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 2000;
    margin: 0;
    white-space: nowrap;
    font-size: clamp(2.4rem, 4.2vw, 4.6rem);
    line-height: 1.1;
    filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.35));
}

/* 标题渐变文字：与“归途”同款实现方式（background-clip:text），但配色更五彩缤纷 */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    #main-title {
        background: linear-gradient(135deg,
                #ff3b3b 0%,
                #ff6b35 18%,
                #f8961e 36%,
                #f9c74f 54%,
                #ffd166 72%,
                #ff4d6d 86%,
                #f15bb5 100%);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }
}

/* 最终展示后：标题回到正常文档流，随页面滚动 */
#main-title.in-flow {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    margin: 30px 0 0;
}

/* 标题不再 fixed 时，画布不需要给它预留大间距 */
#main-title.in-flow+.charts-container {
    margin-top: 20px;
}

#main-title.initial {
    top: 50%;
    transform: translate(-50%, -50%) scale(2.5);
}

.charts-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    max-width: 1600px;
    margin-top: 70px;
    /* 给 fixed 标题留出空间 */
}

.flower-item {
    text-align: center;
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
}

.flower-item:hover {
    transform: translateY(-5px);
}

.flower-label {
    margin-top: 20px;
    font-weight: bold;
    font-size: 20px;
    color: #2c3e50;
}

.flower-sub-label {
    font-size: 15px;
    color: #7f8c8d;
    margin-top: 5px;
    line-height: 1.5;
}