/* 首页样式 - 页面1 */

/* ========== 场景容器 ========== */
.scene {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.scene.hidden {
    opacity: 0;
    pointer-events: none;
}

#scene1.hidden {
    transform: scale(1.1);
}

#scene2 {
    opacity: 0;
    z-index: 2;
}

#scene2.active {
    opacity: 1;
    pointer-events: auto;
}

/* ========== 场景1样式 ========== */

/* 顶部文字 */
.top-text {
    position: absolute;
    top: 8vh;
    left: 50%;
    transform: translateX(-50%);
    width: 75vw;
    z-index: 10;
}

/* 底部文字 */
.bottom-text {
    position: absolute;
    bottom: 18vh;
    left: 50%;
    transform: translateX(-50%);
    width: 65vw;
    z-index: 10;
}

/* Logo容器 */
.logo-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90vw;
    height: 90vw;
    z-index: 5;
}

/* 粉色底 */
.pink-base {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75vw;
    z-index: 2;
}

/* Logo */
.logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 55vw;
    z-index: 3;
}

/* 底部按钮 */
.action-button {
    position: absolute;
    bottom: 5vh;
    left: 50%;
    transform: translateX(-50%);
    width: 55vw;
    z-index: 10;
    cursor: pointer;
}

.action-button img {
    pointer-events: auto;
}

.action-button:active {
    transform: translateX(-50%) scale(0.95);
}

/* ========== 飞入动画 ========== */

/* 顶部文字飞入 */
.fly-in-top {
    opacity: 0;
    animation: flyInFromTop 0.8s ease-out forwards;
}

@keyframes flyInFromTop {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-80px);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* 底部文字飞入 */
.fly-in-bottom {
    opacity: 0;
    animation: flyInFromBottom 0.8s ease-out 0.3s forwards;
}

@keyframes flyInFromBottom {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(80px);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ========== 呼吸效果 ========== */

.breathing {
    animation: breathing 3s ease-in-out infinite;
}

@keyframes breathing {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.05);
        opacity: 0.9;
    }
}

/* ========== 光晕扩散效果 ========== */

.glow-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
}

.glow-ring-1 {
    width: 55vw;
    height: 55vw;
    background: radial-gradient(circle, rgba(255, 105, 180, 0.4) 0%, rgba(255, 105, 180, 0.1) 50%, transparent 70%);
    animation: glowPulse 3s ease-in-out infinite;
}

.glow-ring-2 {
    width: 70vw;
    height: 70vw;
    background: radial-gradient(circle, rgba(255, 105, 180, 0.25) 0%, rgba(138, 43, 226, 0.1) 50%, transparent 70%);
    animation: glowPulse 3s ease-in-out 0.6s infinite;
}

.glow-ring-3 {
    width: 85vw;
    height: 85vw;
    background: radial-gradient(circle, rgba(138, 43, 226, 0.2) 0%, rgba(75, 0, 130, 0.05) 50%, transparent 70%);
    animation: glowPulse 3s ease-in-out 1.2s infinite;
}

@keyframes glowPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.15);
        opacity: 0;
    }
}

/* ========== 旋转光线效果 ========== */

.light-rays {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: rotateRays 12s linear infinite;
}

.ray {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 35vw;
    background: linear-gradient(to top, rgba(255, 105, 180, 0.6), rgba(255, 105, 180, 0.2), transparent);
    transform-origin: bottom center;
    opacity: 0.7;
}

.ray-1 { transform: translate(-50%, -100%) rotate(0deg); }
.ray-2 { transform: translate(-50%, -100%) rotate(45deg); }
.ray-3 { transform: translate(-50%, -100%) rotate(90deg); }
.ray-4 { transform: translate(-50%, -100%) rotate(135deg); }
.ray-5 { transform: translate(-50%, -100%) rotate(180deg); }
.ray-6 { transform: translate(-50%, -100%) rotate(225deg); }
.ray-7 { transform: translate(-50%, -100%) rotate(270deg); }
.ray-8 { transform: translate(-50%, -100%) rotate(315deg); }

@keyframes rotateRays {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* ========== 粒子画布 ========== */

.particle-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 4;
}

/* ========== 科技感扫描线 ========== */

.scan-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80vw;
    height: 80vw;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    overflow: hidden;
}

.scan-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255, 105, 180, 0.3) 30deg,
        transparent 60deg
    );
    animation: scanRotate 4s linear infinite;
}

@keyframes scanRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* ========== 场景2样式 (摇一摇) ========== */

/* 背景视频 */
.bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    background: #1a0a2e;
}

/* 深色背景遮罩 */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #1a0a2e 0%, #2d1b4e 50%, #1a0a2e 100%);
    z-index: 2;
    transition: opacity 0.5s ease;
}

.video-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

/* 摇一摇顶部文字 */
.shake-top-text {
    position: absolute;
    top: 15vh;
    left: 50%;
    transform: translateX(-50%);
    width: 55vw;
    z-index: 10;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* 摇晃按钮 */
.shake-button {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50vw;
    z-index: 10;
    animation: shakeHint 1.5s ease-in-out infinite;
    transition: opacity 0.5s ease, transform 0.5s ease;
    cursor: pointer;
}

@keyframes shakeHint {
    0%, 100% {
        transform: translate(-50%, -50%) rotate(-8deg);
    }
    50% {
        transform: translate(-50%, -50%) rotate(8deg);
    }
}

/* 摇一摇底部文字 */
.shake-bottom-text {
    position: absolute;
    bottom: 8vh;
    left: 50%;
    transform: translateX(-50%);
    width: 65vw;
    z-index: 10;
}

/* 隐藏动画 */
.shake-hide.hidden {
    opacity: 0;
    pointer-events: none;
}

.shake-top-text.hidden {
    transform: translateX(-50%) translateY(-30px);
}

.shake-button.hidden {
    animation: none;
    transform: translate(-50%, -50%) scale(0.8);
}

/* 苹果用户提示 */
.ios-tip {
    position: absolute;
    top: 68%;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    z-index: 10;
    text-align: center;
    transition: opacity 0.5s ease;
}

.ios-tip.hidden {
    opacity: 0;
    pointer-events: none;
}

/* 提示信息 */
.tip-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.75);
    color: white;
    padding: 15px 25px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    text-align: center;
    max-width: 80vw;
}

.tip-message.show {
    opacity: 1;
}