<html>
    <head>
        <title>彩蛋</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            body {
                font-family: 'Microsoft YaHei', 'SimHei', sans-serif;
                overflow-x: hidden;
                scroll-behavior: smooth;
                height: 200vh; /* 确保页面可以滚动到两倍高度 */
                margin: 0;
                padding: 0;
            }

            /* 第一个页面 - 初始页面 */
            .page-1 {
                margin: 0;
                padding: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                /* 背景图片设置 - 只保留主背景图片 */
                background-image: 
                    linear-gradient(
                        rgba(0, 0, 0, 0.1), 
                        rgba(0, 0, 0, 0.2)
                    ),
                    url('img/paqiadog2.png');   /* 主背景图片 */
                background-size: cover;         /* 主背景覆盖 */
                background-position: center center; /* 主背景居中 */
                background-repeat: no-repeat;
                background-attachment: fixed;
                /* 优化过渡效果 */
                transition: transform 0.1s linear;
                z-index: 10;
                will-change: transform;
            }

            /* 第二个页面 - 视频页面 */
            .page-2 {
                height: 100vh;
                background: #000;
                display: flex;
                justify-content: center;
                align-items: center;
                position: fixed;
                top: 0; /* 修改为0，通过transform控制位置 */
                left: 0;
                width: 100%;
                z-index: 5;
                transition: transform 0.1s linear;
                will-change: transform;
                transform: translateY(100vh); /* 初始位置在下方 */
            }

            /* 第三个页面 - 生日祝福页面 */
            .page-3 {
                height: 100vh;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                z-index: 5;
                transition: transform 0.1s linear;
                will-change: transform;
                transform: translateY(200vh); /* 初始位置在最下方 */
                background-image: 
                    linear-gradient(
                        135deg,
                        rgba(255, 182, 193, 0.3),
                        rgba(255, 218, 185, 0.3),
                        rgba(176, 224, 230, 0.3)
                    ),
                    url('img/paqiadog3.png');
                background-size: cover;
                background-position: center center;
                background-repeat: no-repeat;
                background-attachment: fixed;
                overflow: hidden;
            }

            /* 生日祝福容器 */
            .birthday-container {
                text-align: center;
                padding: 40px;
                border-radius: 30px;
                background: linear-gradient(
                    135deg,
                    rgba(255, 255, 255, 0.25),
                    rgba(255, 255, 255, 0.1)
                );
                backdrop-filter: blur(20px) saturate(180%);
                border: 2px solid rgba(255, 255, 255, 0.4);
                box-shadow: 
                    0 30px 80px rgba(0, 0, 0, 0.3),
                    inset 0 1px 0 rgba(255, 255, 255, 0.4),
                    0 0 60px rgba(255, 255, 255, 0.2);
                animation: birthdayFloat 4s ease-in-out infinite;
                max-width: 600px;
                margin: 0 20px;
            }

            /* 生日标题 */
            .birthday-title {
                font-size: 3.5rem;
                font-weight: bold;
                background: linear-gradient(
                    135deg,
                    #ff6b9d,
                    #ffd93d,
                    #6bcf7f,
                    #4d9de0,
                    #9b59b6
                );
                background-size: 300% 300%;
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
                text-shadow: 0 0 30px rgba(255, 255, 255, 0.8);
                animation: 
                    rainbowMove 3s ease-in-out infinite,
                    titleBounce 2s ease-in-out infinite;
                margin-bottom: 30px;
                letter-spacing: 3px;
            }

            /* 生日消息 */
            .birthday-message {
                font-size: 1.8rem;
                color: #fff;
                text-shadow: 
                    0 0 10px rgba(255, 255, 255, 0.8),
                    2px 2px 4px rgba(0, 0, 0, 0.5);
                margin-bottom: 40px;
                line-height: 1.6;
                animation: messageGlow 3s ease-in-out infinite alternate;
            }

            /* 装饰元素 */
            .decoration {
                position: absolute;
                animation: decorationFloat 6s ease-in-out infinite;
                font-size: 2rem;
                opacity: 0.8;
            }

            .decoration:nth-child(1) {
                top: 10%;
                left: 10%;
                animation-delay: 0s;
            }

            .decoration:nth-child(2) {
                top: 15%;
                right: 15%;
                animation-delay: 1s;
            }

            .decoration:nth-child(3) {
                bottom: 20%;
                left: 20%;
                animation-delay: 2s;
            }

            .decoration:nth-child(4) {
                bottom: 15%;
                right: 10%;
                animation-delay: 3s;
            }

            .decoration:nth-child(5) {
                top: 50%;
                left: 5%;
                animation-delay: 4s;
            }

            .decoration:nth-child(6) {
                top: 60%;
                right: 5%;
                animation-delay: 5s;
            }

            /* 视频结束提示 */
            .video-end-hint {
                position: absolute;
                bottom: 30px;
                left: 50%;
                transform: translateX(-50%);
                color: white;
                font-size: 1.4rem;
                text-align: center;
                animation: hintPulse 1.5s infinite;
                z-index: 15;
                background: linear-gradient(135deg, rgba(255, 107, 157, 0.9), rgba(77, 157, 224, 0.9));
                padding: 20px 30px;
                border-radius: 30px;
                backdrop-filter: blur(15px);
                border: 2px solid rgba(255, 255, 255, 0.4);
                box-shadow: 
                    0 10px 30px rgba(0, 0, 0, 0.3),
                    0 0 20px rgba(255, 255, 255, 0.2);
                display: none;
                font-weight: bold;
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
            }

            .video-end-hint::after {
                content: '⬇';
                display: block;
                font-size: 3rem;
                margin-top: 10px;
                animation: arrowBounce 1s infinite;
                filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
            }

            /* 视频容器 */
            .video-container {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;
            }

            .video-player {
                width: 90%;
                max-width: 800px;
                height: auto;
                border-radius: 20px;
                box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
                transition: all 0.5s ease-in-out;
            }

            .video-player.blurred {
                filter: blur(20px);
                opacity: 0;
            }

            /* 流星效果 */
            .shooting-star {
                position: absolute;
                width: 2px;
                height: 2px;
                background: white;
                border-radius: 50%;
                z-index: 2;
                pointer-events: none;
            }

            .shooting-star::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 2px;
                height: 2px;
                background: linear-gradient(45deg, white, transparent);
                border-radius: 50%;
                box-shadow: 
                    0 0 6px white,
                    0 0 12px white,
                    0 0 18px white;
            }

            .shooting-star::after {
                content: '';
                position: absolute;
                top: 1px;
                left: 1px;
                width: 0;
                height: 0;
                border-left: 50px solid white;
                border-top: 1px solid transparent;
                border-bottom: 1px solid transparent;
                transform: rotate(45deg);
                opacity: 0.7;
                filter: blur(1px);
            }

            /* 流星动画 */
            @keyframes shootingStar {
                0% {
                    transform: translateX(-100px) translateY(-100px);
                    opacity: 0;
                }
                10% {
                    opacity: 1;
                }
                90% {
                    opacity: 1;
                }
                100% {
                    transform: translateX(100vw) translateY(100vh);
                    opacity: 0;
                }
            }

            /* 弹窗样式 */
            .modal {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.8);
                display: none;
                justify-content: center;
                align-items: center;
                z-index: 1000;
            }

            .modal-content {
                background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
                padding: 40px;
                border-radius: 20px;
                text-align: center;
                backdrop-filter: blur(20px);
                border: 2px solid rgba(255, 255, 255, 0.3);
                box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
                color: white;
                max-width: 400px;
            }

            .modal h3 {
                margin-bottom: 20px;
                font-size: 1.5rem;
                text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
            }

            .modal-buttons {
                display: flex;
                gap: 20px;
                justify-content: center;
                margin-top: 20px;
            }

            .btn {
                padding: 12px 24px;
                border: none;
                border-radius: 10px;
                cursor: pointer;
                font-size: 1rem;
                font-weight: bold;
                transition: all 0.3s ease;
                background: linear-gradient(135deg, #ff6b6b, #4ecdc4);
                color: white;
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
            }

            .btn:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
            }

            .btn-secondary {
                background: linear-gradient(135deg, #666, #999);
            }

            /* 吹蜡烛页面 */
            .candle-page {
                height: 100vh;
                background: linear-gradient(135deg, #1a1a2e, #16213e);
                display: none;
                justify-content: center;
                align-items: center;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                overflow: hidden;
                z-index: 5;
            }

            .candle-container {
                position: relative;
                text-align: center;
            }

            .candle {
                width: 20px;
                height: 150px;
                background: linear-gradient(to bottom, #8B4513, #A0522D);
                margin: 0 auto 20px;
                border-radius: 10px;
                position: relative;
                box-shadow: 0 0 20px rgba(139, 69, 19, 0.5);
            }

            .flame {
                width: 30px;
                height: 40px;
                background: radial-gradient(circle, #ff6b35 10%, #f9ca24 50%, #f0932b 90%);
                border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
                position: absolute;
                top: -35px;
                left: 50%;
                transform: translateX(-50%);
                animation: flicker 1s infinite alternate;
                transition: all 0.5s ease;
                box-shadow: 0 0 30px rgba(255, 107, 53, 0.8);
            }

            .flame.blown-out {
                opacity: 0;
                transform: translateX(-50%) scale(0);
            }

            @keyframes flicker {
                0% { transform: translateX(-50%) scale(1) rotate(-1deg); }
                100% { transform: translateX(-50%) scale(1.1) rotate(1deg); }
            }

            .blow-instruction {
                color: white;
                font-size: 1.5rem;
                margin-top: 50px;
                text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
                animation: pulse 2s infinite;
            }

            @keyframes pulse {
                0%, 100% { opacity: 0.8; }
                50% { opacity: 1; }
            }

            /* 生日页面动画 */
            @keyframes birthdayFloat {
                0%, 100% { 
                    transform: translateY(0px) rotateX(0deg);
                    box-shadow: 
                        0 30px 80px rgba(0, 0, 0, 0.3),
                        inset 0 1px 0 rgba(255, 255, 255, 0.4),
                        0 0 60px rgba(255, 255, 255, 0.2);
                }
                50% { 
                    transform: translateY(-15px) rotateX(2deg);
                    box-shadow: 
                        0 45px 100px rgba(0, 0, 0, 0.2),
                        inset 0 1px 0 rgba(255, 255, 255, 0.5),
                        0 0 80px rgba(255, 255, 255, 0.3);
                }
            }

            @keyframes rainbowMove {
                0%, 100% { background-position: 0% 50%; }
                50% { background-position: 100% 50%; }
            }

            @keyframes titleBounce {
                0%, 100% { transform: scale(1) rotateZ(0deg); }
                25% { transform: scale(1.05) rotateZ(1deg); }
                75% { transform: scale(1.02) rotateZ(-1deg); }
            }

            @keyframes messageGlow {
                0% { 
                    text-shadow: 
                        0 0 10px rgba(255, 255, 255, 0.8),
                        2px 2px 4px rgba(0, 0, 0, 0.5);
                }
                100% { 
                    text-shadow: 
                        0 0 20px rgba(255, 182, 193, 1),
                        0 0 30px rgba(255, 218, 185, 0.8),
                        2px 2px 4px rgba(0, 0, 0, 0.5);
                }
            }

            @keyframes decorationFloat {
                0%, 100% { 
                    transform: translateY(0px) rotateZ(0deg) scale(1);
                    opacity: 0.8;
                }
                33% { 
                    transform: translateY(-20px) rotateZ(10deg) scale(1.1);
                    opacity: 1;
                }
                66% { 
                    transform: translateY(-10px) rotateZ(-5deg) scale(0.9);
                    opacity: 0.9;
                }
            }

            @keyframes hintPulse {
                0%, 100% { 
                    opacity: 0.9; 
                    transform: translateX(-50%) scale(1);
                    box-shadow: 
                        0 10px 30px rgba(0, 0, 0, 0.3),
                        0 0 20px rgba(255, 255, 255, 0.2);
                }
                50% { 
                    opacity: 1; 
                    transform: translateX(-50%) scale(1.08);
                    box-shadow: 
                        0 15px 40px rgba(0, 0, 0, 0.4),
                        0 0 30px rgba(255, 255, 255, 0.3);
                }
            }

            @keyframes arrowBounce {
                0%, 100% { 
                    transform: translateY(0px) scale(1);
                    opacity: 0.8;
                }
                50% { 
                    transform: translateY(-12px) scale(1.1);
                    opacity: 1;
                }
            }
            
            /* 为文字添加更好的可读性和炫酷效果 */
            .main-title {
                color: #fff;
                text-shadow: 
                    0 0 5px rgba(255, 255, 255, 0.8),
                    0 0 10px rgba(255, 107, 107, 0.6),
                    0 0 15px rgba(72, 202, 228, 0.4),
                    0 0 20px rgba(254, 202, 87, 0.3),
                    2px 2px 4px rgba(0, 0, 0, 0.8);
                background: 
                    linear-gradient(135deg, 
                        rgba(255, 255, 255, 0.15), 
                        rgba(255, 255, 255, 0.05)
                    ),
                    rgba(0, 0, 0, 0.6);
                padding: 30px 50px;
                border-radius: 25px;
                backdrop-filter: blur(20px) saturate(180%);
                border: 2px solid rgba(255, 255, 255, 0.3);
                font-family: 'Microsoft YaHei', 'SimHei', sans-serif;
                font-size: 2.8rem;
                font-weight: bold;
                text-align: center;
                position: relative;
                overflow: hidden;
                animation: 
                    textPulse 4s ease-in-out infinite,
                    boxFloat 6s ease-in-out infinite;
                box-shadow: 
                    0 20px 50px rgba(0, 0, 0, 0.5),
                    inset 0 1px 0 rgba(255, 255, 255, 0.3),
                    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
                    0 0 50px rgba(255, 255, 255, 0.1);
                letter-spacing: 2px;
                transform-style: preserve-3d;
                z-index: 10;
                transition: opacity 0.3s ease-out, filter 0.3s ease-out, transform 0.3s ease-out;
                will-change: opacity, filter, transform;
            }

            .main-title.fade-out {
                opacity: 0;
                filter: blur(20px);
                transform: scale(0.8);
            }

            /* 优雅的水晶质感边框 */
            .main-title::before {
                content: '';
                position: absolute;
                top: -2px;
                left: -2px;
                right: -2px;
                bottom: -2px;
                background: linear-gradient(
                    135deg,
                    rgba(255, 255, 255, 0.4) 0%,
                    rgba(255, 255, 255, 0.1) 50%,
                    rgba(255, 255, 255, 0.4) 100%
                );
                border-radius: 27px;
                z-index: -1;
                opacity: 0.8;
                animation: crystalShimmer 3s ease-in-out infinite;
            }

            /* 滚动提示 */
            .scroll-hint {
                position: absolute;
                bottom: 30px;
                left: 50%;
                transform: translateX(-50%);
                color: white;
                font-size: 1.2rem;
                text-align: center;
                animation: bounce 2s infinite;
                z-index: 10;
                opacity: 0.8;
            }

            .scroll-hint::after {
                content: '⬇';
                display: block;
                font-size: 2rem;
                margin-top: 10px;
            }

            @keyframes bounce {
                0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
                40% { transform: translateX(-50%) translateY(-10px); }
                60% { transform: translateX(-50%) translateY(-5px); }
            }

            /* @keyframes crystalShimmer {
                0%, 100% {
                    background: linear-gradient(
                        135deg,
                        rgba(255, 255, 255, 0.4) 0%,
                        rgba(255, 255, 255, 0.1) 50%,
                        rgba(255, 255, 255, 0.4) 100%
                    );
                }
                50% {
                    background: linear-gradient(
                        135deg,
                        rgba(255, 255, 255, 0.6) 0%,
                        rgba(255, 255, 255, 0.2) 50%,
                        rgba(255, 255, 255, 0.6) 100%
                    );
                }
            } */

            /* 内部光效 */
            /* h1::after {
                content: '';
                position: absolute;
                top: 10%;
                left: -100%;
                width: 100%;
                height: 80%;
                background: linear-gradient(
                    90deg,
                    transparent,
                    rgba(255, 255, 255, 0.4),
                    transparent
                );
                animation: shine 3s ease-in-out infinite;
                border-radius: 20px;
            }

            @keyframes shine {
                0% { left: -100%; }
                50% { left: 100%; }
                100% { left: 100%; }
            }
             */
            @keyframes textPulse {
                0%, 100% {
                    text-shadow: 
                        0 0 5px rgba(255, 255, 255, 0.8),
                        0 0 10px rgba(255, 107, 107, 0.6),
                        0 0 15px rgba(72, 202, 228, 0.4),
                        0 0 20px rgba(254, 202, 87, 0.3),
                        2px 2px 4px rgba(0, 0, 0, 0.8);
                    transform: scale(1);
                }
                25% {
                    text-shadow: 
                        0 0 8px rgba(255, 255, 255, 1),
                        0 0 15px rgba(254, 202, 87, 0.8),
                        0 0 25px rgba(255, 107, 107, 0.6),
                        0 0 35px rgba(72, 202, 228, 0.4),
                        2px 2px 4px rgba(0, 0, 0, 0.8);
                    transform: scale(1.02);
                }
                50% {
                    text-shadow: 
                        0 0 10px rgba(255, 255, 255, 1),
                        0 0 20px rgba(72, 202, 228, 0.8),
                        0 0 30px rgba(255, 159, 243, 0.6),
                        0 0 40px rgba(254, 202, 87, 0.4),
                        2px 2px 4px rgba(0, 0, 0, 0.8);
                    transform: scale(1.05);
                }
                75% {
                    text-shadow: 
                        0 0 8px rgba(255, 255, 255, 1),
                        0 0 15px rgba(255, 159, 243, 0.8),
                        0 0 25px rgba(72, 202, 228, 0.6),
                        0 0 35px rgba(255, 107, 107, 0.4),
                        2px 2px 4px rgba(0, 0, 0, 0.8);
                    transform: scale(1.02);
                }
            }

            @keyframes boxFloat {
                0%, 100% { 
                    transform: translateY(0px) rotateX(0deg) rotateY(0deg);
                    box-shadow: 
                        0 20px 50px rgba(0, 0, 0, 0.5),
                        inset 0 1px 0 rgba(255, 255, 255, 0.3),
                        inset 0 -1px 0 rgba(255, 255, 255, 0.1),
                        0 0 50px rgba(255, 255, 255, 0.1);
                }
                25% { 
                    transform: translateY(-8px) rotateX(2deg) rotateY(-1deg);
                    box-shadow: 
                        0 30px 70px rgba(0, 0, 0, 0.4),
                        inset 0 1px 0 rgba(255, 255, 255, 0.4),
                        inset 0 -1px 0 rgba(255, 255, 255, 0.15),
                        0 0 60px rgba(255, 255, 255, 0.15);
                }
                50% { 
                    transform: translateY(-5px) rotateX(0deg) rotateY(2deg);
                    box-shadow: 
                        0 25px 60px rgba(0, 0, 0, 0.45),
                        inset 0 1px 0 rgba(255, 255, 255, 0.35),
                        inset 0 -1px 0 rgba(255, 255, 255, 0.12),
                        0 0 55px rgba(255, 255, 255, 0.12);
                }
                75% { 
                    transform: translateY(-12px) rotateX(-2deg) rotateY(-1deg);
                    box-shadow: 
                        0 35px 80px rgba(0, 0, 0, 0.35),
                        inset 0 1px 0 rgba(255, 255, 255, 0.45),
                        inset 0 -1px 0 rgba(255, 255, 255, 0.18),
                        0 0 65px rgba(255, 255, 255, 0.18);
                }
            }

            /* 文字特殊效果 - 每个字符的动画 */
            .main-title span {
                display: inline-block;
                animation: charDance 2s ease-in-out infinite;
            }

            .main-title span:nth-child(1) { animation-delay: 0.1s; }
            .main-title span:nth-child(2) { animation-delay: 0.2s; }
            .main-title span:nth-child(3) { animation-delay: 0.3s; }
            .main-title span:nth-child(4) { animation-delay: 0.4s; }
            .main-title span:nth-child(5) { animation-delay: 0.5s; }
            .main-title span:nth-child(6) { animation-delay: 0.6s; }
            .main-title span:nth-child(7) { animation-delay: 0.7s; }
            .main-title span:nth-child(8) { animation-delay: 0.8s; }
            .main-title span:nth-child(9) { animation-delay: 0.9s; }
            .main-title span:nth-child(10) { animation-delay: 1.0s; }
            .main-title span:nth-child(11) { animation-delay: 1.1s; }
            .main-title span:nth-child(12) { animation-delay: 1.2s; }

            @keyframes charDance {
                0%, 100% { 
                    transform: translateY(0px) rotateZ(0deg);
                }
                25% { 
                    transform: translateY(-3px) rotateZ(2deg);
                }
                50% { 
                    transform: translateY(-1px) rotateZ(0deg);
                }
                75% { 
                    transform: translateY(-5px) rotateZ(-2deg);
                }
            }
            
            /* 响应式设计 */
            @media (max-width: 768px) {
                .main-title {
                    font-size: 1.8rem;
                    padding: 15px 25px;
                }

                .video-player {
                    width: 95%;
                }

                .modal-content {
                    max-width: 300px;
                    padding: 20px;
                }

                .birthday-title {
                    font-size: 2.5rem;
                }

                .birthday-message {
                    font-size: 1.4rem;
                }

                .birthday-container {
                    padding: 25px;
                    margin: 0 15px;
                }

                .decoration {
                    font-size: 1.5rem;
                }

                .video-end-hint {
                    font-size: 1.1rem;
                    padding: 12px 20px;
                }
            }
            
            @media (max-width: 480px) {
                .main-title {
                    font-size: 1.4rem;
                    padding: 10px 20px;
                }

                .birthday-title {
                    font-size: 2rem;
                    letter-spacing: 1px;
                }

                .birthday-message {
                    font-size: 1.2rem;
                    line-height: 1.5;
                }

                .birthday-container {
                    padding: 20px;
                    margin: 0 10px;
                }

                .decoration {
                    font-size: 1.2rem;
                }

                .video-end-hint {
                    font-size: 1rem;
                    padding: 10px 15px;
                }
            }
        </style>
    </head>
    <body>
        <!-- 第一个页面 - 初始页面 -->
        <div class="page-1" id="page1">
            <h1 class="main-title" id="mainTitle">
                <span>恭</span><span>喜</span><span>你</span><span>，</span>
                <span>成</span><span>功</span><span>找</span><span>到</span>
                <span>彩</span><span>蛋</span><span>！</span><span>！</span><span>！</span>
            </h1>
            <div class="scroll-hint">向下滑动</div>
        </div>

        <!-- 第二个页面 - 视频页面 -->
        <div class="page-2" id="page2">
            <div class="video-container">
                <video class="video-player" id="videoPlayer" playsinline>
                    <source src="video/dog1.mp4" type="video/mp4">
                    您的浏览器不支持视频播放。
                </video>
                <!-- 添加播放提示 -->
                <div id="playPrompt" style="position: absolute; color: white; font-size: 1.5rem; text-align: center; 
                     background: rgba(0,0,0,0.8); padding: 20px; border-radius: 10px; cursor: pointer; display: none;">
                    <p>🎬 点击打开彩蛋</p>
                </div>
                <!-- 添加加载提示 -->
                <div id="loadingText" style="position: absolute; color: white; font-size: 1.5rem; text-align: center;">
                    正在加载视频...
                </div>
            </div>
        </div>

        <!-- 弹窗模态框 -->
        <div class="modal" id="modal">
            <div class="modal-content">
                <h3 id="modalTitle">准备好了吗？</h3>
                <p id="modalText"></p>
                <div class="modal-buttons">
                    <button class="btn" id="readyBtn">准备好了！</button>
                    <button class="btn btn-secondary" id="notReadyBtn">再等等</button>
                </div>
            </div>
        </div>

        <!-- 吹蜡烛页面 -->
        <div class="candle-page" id="candlePage">
            <div class="candle-container">
                <div class="candle">
                    <div class="flame" id="flame"></div>
                </div>
                <div class="blow-instruction">用鼠标拖拽或触摸屏幕来吹灭蜡烛</div>
            </div>
        </div>

        <!-- 第三个页面 - 生日祝福页面 -->
        <div class="page-3" id="page3">
            <!-- 装饰元素 -->
            <div class="decoration">🎈</div>
            <div class="decoration">🎂</div>
            <div class="decoration">🌟</div>
            <div class="decoration">🎉</div>
            <div class="decoration">🎁</div>
            <div class="decoration">💖</div>
            
            <div class="birthday-container">
                <div class="birthday-title">生日快乐！</div>
                <div class="birthday-message">
                </div>
            </div>
        </div>

        <!-- 视频结束提示 -->
        <div class="video-end-hint" id="videoEndHint">
            继续向下滑动查看惊喜
        </div>

        <script>
            // 全局变量
            let currentVideo = 1;
            let isScrolling = false;
            let blowProgress = 0;
            let videoEnded = false;
            let isOnFinalPage = false;
            
            const page1 = document.getElementById('page1');
            const page2 = document.getElementById('page2');
            const page3 = document.getElementById('page3');
            const mainTitle = document.getElementById('mainTitle');
            const videoPlayer = document.getElementById('videoPlayer');
            const modal = document.getElementById('modal');
            const modalTitle = document.getElementById('modalTitle');
            const modalText = document.getElementById('modalText');
            const readyBtn = document.getElementById('readyBtn');
            const notReadyBtn = document.getElementById('notReadyBtn');
            const candlePage = document.getElementById('candlePage');
            const flame = document.getElementById('flame');
            const videoEndHint = document.getElementById('videoEndHint');

            // 滚动监听 - 支持三页版本，优化流畅性
            let scrollTimeout;
            let hasStartedTransition = false;
            let videoStarted = false;
            
            window.addEventListener('scroll', function(e) {
                const scrollY = window.scrollY;
                const windowHeight = window.innerHeight;
                
                // 只限制一个条件：视频未结束时不能滚动到第三页
                const secondPageEnd = windowHeight * 1.5; // 第二页结束位置
                
                // 如果视频还没结束且用户试图滚动到第三页，温和地阻止
                if (!videoEnded && scrollY > secondPageEnd) {
                    console.log('视频未结束，温和限制进入第三页');
                    window.scrollTo({ top: secondPageEnd, behavior: 'smooth' });
                    return;
                }
                
                // 计算滚动进度，现在支持三个页面
                const totalScrollHeight = windowHeight * 2; // 两倍窗口高度的滚动距离
                const progress = Math.min(Math.max(scrollY / totalScrollHeight, 0), 1);
                
                console.log('滚动进度:', Math.round(progress * 100) + '%', '滚动距离:', scrollY + 'px');
                
                // 实时更新效果
                updateScrollEffects(progress);
            }, { passive: false }); // 设置为非被动，允许preventDefault
            
            function updateScrollEffects(progress) {
                // === 第一页到第二页的过渡 (0% - 50%) ===
                if (progress <= 0.5) {
                    // 文字淡出效果
                    const textProgress = progress / 0.5;
                    mainTitle.style.opacity = Math.max(0, 1 - textProgress);
                    mainTitle.style.filter = `blur(${textProgress * 10}px)`;
                    mainTitle.style.transform = `scale(${1 - textProgress * 0.1})`;
                    
                    // 第一页向上移动
                    const page1TranslateY = -progress * 200; // 移动到 -100vh
                    page1.style.transform = `translateY(${page1TranslateY}vh)`;
                    
                    // 第二页从下方滑入
                    const page2TranslateY = (1 - progress * 2) * 100; // 从100vh移动到0vh
                    page2.style.transform = `translateY(${page2TranslateY}vh)`;
                    
                    // 第三页保持在下方
                    page3.style.transform = 'translateY(200vh)';
                    
                } else {
                    // 第一页完全消失
                    mainTitle.style.opacity = 0;
                    mainTitle.style.filter = 'blur(10px)';
                    page1.style.transform = 'translateY(-100vh)';
                    
                    // === 第二页到第三页的过渡 (50% - 100%) ===
                    // 只有在视频结束后才允许这个过渡
                    if (videoEnded) {
                        const secondProgress = (progress - 0.5) / 0.5;
                        
                        // 第二页向上移动
                        const page2TranslateY = -secondProgress * 100;
                        page2.style.transform = `translateY(${page2TranslateY}vh)`;
                        
                        // 第三页从下方滑入
                        const page3TranslateY = (1 - secondProgress) * 100;
                        page3.style.transform = `translateY(${page3TranslateY}vh)`;
                        
                        if (progress > 0.9) {
                            console.log(`第三页进度${Math.round(secondProgress * 100)}% - Page2Y: ${page2TranslateY}vh, Page3Y: ${page3TranslateY}vh`);
                        }
                    } else {
                        // 视频未结束时，保持第二页在屏幕上
                        page2.style.transform = 'translateY(0vh)';
                        page3.style.transform = 'translateY(100vh)';
                    }
                }
                
                // === 视频播放控制 (50%附近) ===
                if (progress >= 0.45 && progress <= 0.55 && !videoStarted) {
                    videoStarted = true;
                    console.log('滚动到视频页面，开始播放视频, 进度:', progress);
                    startVideoPlayback();
                }
                
                // 如果用户滚动回去，重置视频状态
                if (progress < 0.40 && videoStarted && !videoEnded) {
                    videoStarted = false;
                    console.log('用户滚动回去，停止视频');
                    stopVideoPlayback();
                }
                
                // 显示/隐藏滚动提示
                if (videoEnded && progress >= 0.5 && progress < 0.9) {
                    videoEndHint.style.display = 'block';
                } else {
                    videoEndHint.style.display = 'none';
                }
            }
            
            function startVideoPlayback() {
                console.log('开始视频播放流程');
                
                // 不再禁用滚动，让用户可以自由滚动
                isScrolling = true;
                
                // 确保页面完全显示视频
                page1.style.transform = 'translateY(-100vh)';
                page2.style.transform = 'translateY(0vh)';
                
                console.log('页面位置已调整，第二页应该可见');
                console.log('Page1 transform:', page1.style.transform);
                console.log('Page2 transform:', page2.style.transform);
                
                // 隐藏加载文字
                const loadingText = document.getElementById('loadingText');
                if (loadingText) {
                    loadingText.style.display = 'none';
                }
                
                // 显示播放提示，让用户点击来播放视频
                const playPrompt = document.getElementById('playPrompt');
                if (playPrompt) {
                    playPrompt.style.display = 'block';
                    playPrompt.onclick = function() {
                        playPrompt.style.display = 'none';
                        console.log('用户点击了播放提示，开始播放视频');
                        playVideo1();
                    };
                }
            }
            
            function stopVideoPlayback() {
                // 重新启用滚动
                isScrolling = false;
                document.body.style.overflow = 'auto';
                
                // 停止视频播放
                videoPlayer.pause();
                videoPlayer.currentTime = 0;
                
                // 隐藏播放提示
                const playPrompt = document.getElementById('playPrompt');
                if (playPrompt) {
                    playPrompt.style.display = 'none';
                }
                
                // 显示加载提示
                const loadingText = document.getElementById('loadingText');
                if (loadingText) {
                    loadingText.style.display = 'block';
                }
            }

            // 播放dog1视频
            function playVideo1() {
                console.log('准备播放Dog1视频');
                videoPlayer.src = 'video/dog1.mp4';
                videoPlayer.load();
                
                // 移除之前的事件监听器
                videoPlayer.onended = null;
                videoPlayer.onloadeddata = null;
                
                // 尝试播放视频
                const playPromise = videoPlayer.play();
                
                if (playPromise !== undefined) {
                    playPromise.then(() => {
                        console.log('Dog1 视频开始播放成功');
                        // 设置播放结束事件
                        videoPlayer.addEventListener('ended', function dog1EndHandler() {
                            console.log('Dog1 播放结束');
                            videoPlayer.removeEventListener('ended', dog1EndHandler);
                            showModal('准备好了吗？', '', playVideo2);
                        }, { once: true });
                    }).catch(error => {
                        console.log('自动播放失败，显示手动播放提示:', error);
                        // 显示手动播放提示
                        showPlayPrompt('点击播放第一个视频', () => {
                            const retryPlay = videoPlayer.play();
                            retryPlay.then(() => {
                                console.log('用户手动播放Dog1成功');
                                videoPlayer.addEventListener('ended', function dog1EndHandler() {
                                    console.log('Dog1 播放结束');
                                    videoPlayer.removeEventListener('ended', dog1EndHandler);
                                    showModal('准备好了吗？', '', playVideo2);
                                }, { once: true });
                            }).catch(retryError => {
                                console.error('手动播放也失败了:', retryError);
                            });
                        });
                    });
                }
            }
            
            // 显示播放提示的通用函数
            function showPlayPrompt(message, callback) {
                const playPrompt = document.getElementById('playPrompt');
                if (playPrompt) {
                    playPrompt.innerHTML = `
                        <p>🎬 ${message}</p>
                        <p style="font-size: 1rem; opacity: 0.8;">点击此处播放</p>
                    `;
                    playPrompt.style.display = 'block';
                    playPrompt.onclick = function() {
                        playPrompt.style.display = 'none';
                        callback();
                    };
                }
            }

            // 播放dog2视频
            function playVideo2() {
                videoPlayer.src = 'video/dog2.mp4';
                videoPlayer.load();
                
                // 移除之前的事件监听器
                videoPlayer.onended = null;
                videoPlayer.onloadeddata = null;
                
                const playPromise = videoPlayer.play();
                
                if (playPromise !== undefined) {
                    playPromise.then(() => {
                        console.log('Dog2 视频开始播放');
                        videoPlayer.addEventListener('ended', function dog2EndHandler() {
                            console.log('Dog2 播放结束');
                            videoPlayer.removeEventListener('ended', dog2EndHandler);
                            showDog3Poster();
                        }, { once: true });
                    }).catch(error => {
                        console.log('Dog2 播放失败:', error);
                    });
                }
            }

            // 显示dog3第一帧并弹窗
            function showDog3Poster() {
                videoPlayer.src = 'video/dog3.mp4';
                videoPlayer.load();
                
                // 移除之前的事件监听器
                videoPlayer.onended = null;
                videoPlayer.onloadeddata = null;
                
                videoPlayer.addEventListener('loadeddata', function dog3LoadHandler() {
                    console.log('Dog3 数据加载完成');
                    videoPlayer.removeEventListener('loadeddata', dog3LoadHandler);
                    videoPlayer.currentTime = 0;
                    showModal('音乐盒', '点击打开音乐盒', playVideo3, '打开音乐盒');
                }, { once: true });
            }

            // 播放dog3视频
            function playVideo3() {
                const playPromise = videoPlayer.play();
                
                if (playPromise !== undefined) {
                    playPromise.then(() => {
                        console.log('Dog3 视频开始播放');
                        videoPlayer.addEventListener('ended', function dog3EndHandler() {
                            console.log('Dog3 播放结束');
                            videoPlayer.removeEventListener('ended', dog3EndHandler);
                            startCandleScene();
                        }, { once: true });
                    }).catch(error => {
                        console.log('Dog3 播放失败:', error);
                    });
                }
            }

            // 开始吹蜡烛场景
            function startCandleScene() {
                // 视频模糊消失
                videoPlayer.classList.add('blurred');
                
                setTimeout(() => {
                    page2.style.display = 'none';
                    candlePage.style.display = 'flex';
                    setupCandleInteraction();
                }, 1000);
            }

            // 设置蜡烛交互
            function setupCandleInteraction() {
                let isBlowing = false;
                
                function startBlow(e) {
                    e.preventDefault();
                    isBlowing = true;
                    document.addEventListener('mousemove', blow);
                    document.addEventListener('touchmove', blow);
                }
                
                function endBlow() {
                    isBlowing = false;
                    document.removeEventListener('mousemove', blow);
                    document.removeEventListener('touchmove', blow);
                }
                
                function blow(e) {
                    if (!isBlowing) return;
                    
                    blowProgress += 2;
                    
                    if (blowProgress >= 100) {
                        flame.classList.add('blown-out');
                        endBlow();
                        
                        setTimeout(() => {
                            playVideo4();
                        }, 1000);
                    }
                }
                
                candlePage.addEventListener('mousedown', startBlow);
                candlePage.addEventListener('touchstart', startBlow);
                document.addEventListener('mouseup', endBlow);
                document.addEventListener('touchend', endBlow);
            }

            // 播放dog4视频
            function playVideo4() {
                candlePage.style.display = 'none';
                page2.style.display = 'flex';
                
                videoPlayer.classList.remove('blurred');
                videoPlayer.src = 'video/dog4.mp4';
                videoPlayer.load();
                
                const playPromise = videoPlayer.play();
                
                if (playPromise !== undefined) {
                    playPromise.then(() => {
                        console.log('Dog4 视频开始播放');
                        
                        // 当视频结束时，暂停在最后一帧并显示滚动提示
                        videoPlayer.addEventListener('ended', function dog4EndHandler() {
                            console.log('Dog4 播放结束，暂停在最后一帧');
                            videoPlayer.removeEventListener('ended', dog4EndHandler);
                            
                            // 设置视频结束标志
                            videoEnded = true;
                            
                            // 暂停在最后一帧
                            videoPlayer.pause();
                            
                            // 延迟显示滚动提示，让用户有时间欣赏最后一帧
                            setTimeout(() => {
                                videoEndHint.style.display = 'block';
                                console.log('显示向下滑动提示');
                            }, 2000); // 2秒后显示提示
                            
                            // 重新启用滚动到第三页
                            document.body.style.overflow = 'auto';
                            
                            console.log('现在可以滚动到生日祝福页面了');
                        }, { once: true });
                        
                    }).catch(error => {
                        console.log('Dog4 播放失败:', error);
                    });
                }
            }

            // 显示弹窗
            function showModal(title, text, callback, buttonText = '准备好了！') {
                modalTitle.textContent = title;
                modalText.textContent = text;
                readyBtn.textContent = buttonText;
                modal.style.display = 'flex';
                
                // 移除之前的事件监听器
                readyBtn.onclick = null;
                notReadyBtn.onclick = null;
                
                readyBtn.onclick = function() {
                    console.log('用户点击了确认按钮');
                    modal.style.display = 'none';
                    callback();
                };
                
                notReadyBtn.onclick = function() {
                    console.log('用户点击了等等按钮');
                    modal.style.display = 'none';
                    // 延迟重新显示弹窗
                    setTimeout(() => {
                        showModal(title, text, callback, buttonText);
                    }, 2000);
                };
            }

            // 初始化
            document.addEventListener('DOMContentLoaded', function() {
                // 重置所有状态变量
                currentVideo = 1;
                isScrolling = false;
                blowProgress = 0;
                hasStartedTransition = false;
                videoStarted = false;
                videoEnded = false;
                isOnFinalPage = false;
                
                // 确保页面正确显示
                candlePage.style.display = 'none';
                modal.style.display = 'none';
                page2.style.display = 'flex'; // 确保第二页存在但在下方
                page3.style.display = 'flex'; // 确保第三页存在但在最下方
                videoEndHint.style.display = 'none'; // 隐藏滚动提示
                
                // 重置视频状态
                videoPlayer.pause();
                videoPlayer.currentTime = 0;
                videoPlayer.classList.remove('blurred');
                
                // 重置文字状态
                mainTitle.style.opacity = '1';
                mainTitle.style.filter = 'none';
                mainTitle.style.transform = 'scale(1)';
                mainTitle.classList.remove('fade-out');
                
                // 显示加载提示，隐藏播放提示
                const loadingText = document.getElementById('loadingText');
                const playPrompt = document.getElementById('playPrompt');
                if (loadingText) loadingText.style.display = 'block';
                if (playPrompt) playPrompt.style.display = 'none';
                
                // 确保body可以滚动，设置正确的高度（现在需要三倍高度）
                document.body.style.height = '300vh'; // 三倍屏幕高度
                document.body.style.overflow = 'auto';
                
                // 强制重置滚动位置到顶部
                window.scrollTo(0, 0);
                document.documentElement.scrollTop = 0;
                document.body.scrollTop = 0;
                
                // 初始化页面位置
                page1.style.transform = 'translateY(0vh)';
                page2.style.transform = 'translateY(100vh)';
                page3.style.transform = 'translateY(200vh)';
                
                console.log('页面初始化完成，支持三个页面的滚动');
                console.log('当前滚动位置:', window.scrollY);
            });
            
            // 页面加载完成后再次确保滚动位置正确
            window.addEventListener('load', function() {
                // 再次强制重置滚动位置
                setTimeout(() => {
                    window.scrollTo(0, 0);
                    document.documentElement.scrollTop = 0;
                    document.body.scrollTop = 0;
                    console.log('页面加载完成，滚动位置已重置');
                }, 100);
            });
            
            // 页面卸载前清除滚动历史
            window.addEventListener('beforeunload', function() {
                // 清除滚动历史，确保下次加载从顶部开始
                if ('scrollRestoration' in history) {
                    history.scrollRestoration = 'manual';
                }
                window.scrollTo(0, 0);
            });
            
            // 设置滚动恢复为手动模式
            if ('scrollRestoration' in history) {
                history.scrollRestoration = 'manual';
            }
        </script>

    </body>
</html>