* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #333;
    font-family: 'Comic Sans MS', cursive, sans-serif;
}

.page {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: opacity 1s ease;
}

#page1 {
    display: flex;
    z-index: 10;
    background-color: #ffdd70;
    background-image: radial-gradient(#ffffff 15%, transparent 16%),
                      radial-gradient(#ffffff 15%, transparent 16%);
    background-size: 80px 80px;
    background-position: 0 0, 40px 40px;
    align-items: center;
    justify-content: center;
}

#page2 {
    display: none;
    z-index: 5;
    opacity: 0;
    background: transparent;
}

#bg-video {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: -1;
}

model-viewer {
    width: 100vw;
    height: 100vh;
    display: block;
    background-color: transparent;
    --poster-color: transparent;
    position: relative;
    z-index: 1;
}

#snowCanvas {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 10;
}

.fade-out { opacity: 0; }
.fade-in { opacity: 1 !important; }

.title {
    font-size: 2.8rem;
    color: #663300;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s;
    z-index: 20;
}
.title:hover { transform: scale(1.05); }

/* --- 姜饼人基础样式与动画 --- */
.gingerbread { 
    position: absolute; 
    /* 重点：添加过渡效果，使放大缩小变平滑 */
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}

/* 鼠标移上去放大 1.2 倍 */
.gingerbread:hover {
    transform: scale(1.2) !important; /* !important 确保覆盖掉正在播放的 sway 动画中的 transform */
    z-index: 30; /* 放大时显示在最前面 */
}

.gingerbread img { width: 100%; height: auto; }

/* 摆动动画逻辑保持不变 */
@keyframes sway { 0% { transform: rotate(-3deg); } 100% { transform: rotate(3deg); } }
@keyframes sway-flip { 0% { transform: scaleX(-1) rotate(-3deg); } 100% { transform: scaleX(-1) rotate(3deg); } }

/* 如果没有鼠标悬停，则执行摆动 */
.gingerbread { animation: sway 3s ease-in-out infinite alternate; }
.gingerbread.flip { animation: sway-flip 3s ease-in-out infinite alternate; }

/* 姜饼人位置布局 */
.gb1  { width: 180px; top: 1%; left: 1%; }
.gb2  { width: 200px; top: 2%; left: 35%; }
.gb3  { width: 170px; top: 1%; right: 18%; }
.gb4  { width: 190px; top: 18%; left: 14%; }
.gb5  { width: 180px; top: 17%; right: 1%; }
.gb6  { width: 160px; top: 42%; left: 1%; }
.gb7  { width: 190px; top: 40%; right: 12%; }
.gb8  { width: 200px; bottom: 1%; left: 11%; }
.gb9  { width: 170px; bottom: 1%; left: 38%; }
.gb10 { width: 190px; bottom: 1%; right: 28%; }
.gb11 { width: 180px; bottom: 1%; right: 1%; }