<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <title> 小益多 |  精彩即将开启 </title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }

        body {
            width: 100%;
            height: 100vh;
            overflow: hidden;
            font-family: system-ui, -apple-system, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background: linear-gradient(135deg, #0a0f2c 0%, #12172f 50%, #0c1127 100%);
            position: relative;
        }

        /* 主容器 */
        .container {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        /* 动态背景网格 (科技感) */
        .grid-bg {
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: 
                linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
            background-size: 40px 40px;
            transform: rotateX(45deg) translateZ(0);
            animation: gridMove 20s linear infinite;
            opacity: 0.6;
        }

        @keyframes gridMove {
            0% {
                transform: rotateX(45deg) translateZ(0) translateY(0);
            }
            100% {
                transform: rotateX(45deg) translateZ(0) translateY(40px);
            }
        }

        /* 主文字区域 */
        .hero {
            position: relative;
            z-index: 10;
            text-align: center;
            animation: fadeInUp 1s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards;
        }

        .main-text {
            font-size: clamp(32px, 10vw, 72px);
            font-weight: 800;
            letter-spacing: 0.12em;
            background: linear-gradient(135deg, #ffffff, #ffd89b, #c7e9fb, #f5af19);
            background-size: 300% 300%;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: gradientShift 4s ease infinite, textGlow 2s ease-in-out infinite alternate;
            text-shadow: 0 0 30px rgba(255,200,100,0.3);
            white-space: nowrap;
            padding: 0 20px;
        }

        @keyframes gradientShift {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }

        @keyframes textGlow {
            0% {
                text-shadow: 0 0 10px rgba(255,200,100,0.3), 0 0 20px rgba(255,180,80,0.2);
            }
            100% {
                text-shadow: 0 0 30px rgba(255,220,120,0.6), 0 0 50px rgba(255,180,80,0.4);
            }
        }

        /* 辅助装饰线 */
        .glow-line {
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, #ffd966, #ffaa33, #ffd966, transparent);
            margin: 30px auto 0;
            animation: lineExpand 1.2s ease-out forwards 0.4s;
        }

        @keyframes lineExpand {
            0% {
                width: 0;
                opacity: 0;
            }
            100% {
                width: 180px;
                opacity: 0.9;
            }
        }

        /* 粒子光晕效果 (圆点浮动) */
        .particles {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
            z-index: 5;
        }

        .particle {
            position: absolute;
            background: radial-gradient(circle, rgba(255,200,100,0.8), rgba(255,120,50,0));
            border-radius: 50%;
            animation: floatParticle 8s infinite ease-in-out;
            opacity: 0;
        }

        @keyframes floatParticle {
            0% {
                transform: translateY(0) scale(0);
                opacity: 0;
            }
            20% {
                opacity: 0.5;
            }
            80% {
                opacity: 0.3;
            }
            100% {
                transform: translateY(-120px) scale(1.2);
                opacity: 0;
            }
        }

        /* 流动光晕 (旋转光环) */
        .orb-ring {
            position: absolute;
            width: 280px;
            height: 280px;
            border-radius: 50%;
            background: conic-gradient(from 0deg, rgba(255,200,100,0.2), rgba(255,100,50,0.4), rgba(255,200,100,0.2), rgba(100,150,255,0.2));
            filter: blur(40px);
            animation: rotateRing 12s linear infinite;
            z-index: 1;
        }

        @keyframes rotateRing {
            0% {
                transform: rotate(0deg) scale(1);
                opacity: 0.5;
            }
            50% {
                transform: rotate(180deg) scale(1.2);
                opacity: 0.7;
            }
            100% {
                transform: rotate(360deg) scale(1);
                opacity: 0.5;
            }
        }

        /* 闪烁星星背景 */
        .stars {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
            z-index: 2;
        }

        .star {
            position: absolute;
            background: white;
            border-radius: 50%;
            opacity: 0;
            animation: twinkle 3s infinite alternate;
        }

        @keyframes twinkle {
            0% {
                opacity: 0.2;
                transform: scale(1);
            }
            100% {
                opacity: 1;
                transform: scale(1.2);
            }
        }

        /* 底部装饰光晕 (柔和光晕) */
        .glow-spot {
            position: absolute;
            bottom: -20%;
            left: -20%;
            width: 80%;
            height: 80%;
            background: radial-gradient(circle, rgba(255,160,80,0.15), transparent 70%);
            border-radius: 50%;
            filter: blur(70px);
            animation: breathe 5s infinite alternate;
            z-index: 0;
        }

        .glow-spot-right {
            top: -20%;
            right: -20%;
            left: auto;
            bottom: auto;
            background: radial-gradient(circle, rgba(80,150,255,0.12), transparent 70%);
            animation: breathe 6s infinite alternate-reverse;
        }

        @keyframes breathe {
            0% {
                opacity: 0.3;
                transform: scale(1);
            }
            100% {
                opacity: 0.7;
                transform: scale(1.1);
            }
        }

        /* 轻微脉冲边框 */
        .pulse-border {
            position: absolute;
            width: 100%;
            height: 100%;
            border: 1px solid rgba(255,200,100,0.2);
            border-radius: 50%;
            animation: pulseRing 3s infinite;
        }

        @keyframes pulseRing {
            0% {
                transform: scale(0.8);
                opacity: 0.4;
            }
            100% {
                transform: scale(1.4);
                opacity: 0;
            }
        }

        /* 进入动画 */
        @keyframes fadeInUp {
            0% {
                opacity: 0;
                transform: translateY(40px) scale(0.96);
                filter: blur(8px);
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
                filter: blur(0);
            }
        }

        /* 响应式适配 */
        @media (max-width: 600px) {
            .main-text {
                letter-spacing: 0.08em;
                font-size: clamp(28px, 8vw, 48px);
                white-space: normal;
                word-break: keep-all;
            }
            .glow-line {
                margin-top: 20px;
            }
            .orb-ring {
                width: 200px;
                height: 200px;
            }
        }

        /* 增加一个轻盈的小提示 (可选) */
        .hint {
            position: absolute;
            bottom: 30px;
            left: 0;
            right: 0;
            text-align: center;
            font-size: 12px;
            color: rgba(255,255,255,0.4);
            letter-spacing: 1px;
            z-index: 20;
            animation: fadeInUp 1s ease 0.8s forwards;
            opacity: 0;
        }
    </style>
</head>
<body>
<div class="container">
    <!-- 动态网格背景 -->
    <div class="grid-bg"></div>
    
    <!-- 闪烁星星 (动态生成) -->
    <div class="stars" id="starsContainer"></div>
    
    <!-- 粒子效果 -->
    <div class="particles" id="particlesContainer"></div>
    
    <!-- 旋转光晕环 (中心装饰) -->
    <div class="orb-ring" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"></div>
    
    <!-- 底部光晕 -->
    <div class="glow-spot"></div>
    <div class="glow-spot glow-spot-right"></div>
    
    <!-- 主内容 -->
    <div class="hero">
        <div class="main-text">小益多</div>
        <div class="main-text">精彩即将开启</div>
        <div class="glow-line"></div>
    </div>
    
    <div class="hint">✨ 敬请期待 ✨</div>
</div>

<script>
    (function() {
        // 动态生成星星 (随机位置，闪烁动画不同延迟)
        const starsContainer = document.getElementById('starsContainer');
        const starCount = 120;
        
        for (let i = 0; i < starCount; i++) {
            const star = document.createElement('div');
            star.className = 'star';
            const size = Math.random() * 3 + 1; // 1px - 4px
            const left = Math.random() * 100;
            const top = Math.random() * 100;
            const duration = Math.random() * 3 + 2; // 2-5秒
            const delay = Math.random() * 5;
            
            star.style.width = size + 'px';
            star.style.height = size + 'px';
            star.style.left = left + '%';
            star.style.top = top + '%';
            star.style.animation = `twinkle ${duration}s infinite alternate`;
            star.style.animationDelay = delay + 's';
            star.style.opacity = Math.random() * 0.6 + 0.2;
            starsContainer.appendChild(star);
        }
        
        // 粒子效果 (漂浮光点)
        const particlesContainer = document.getElementById('particlesContainer');
        const particleCount = 35;
        
        for (let i = 0; i < particleCount; i++) {
            const particle = document.createElement('div');
            particle.className = 'particle';
            const size = Math.random() * 6 + 2; // 2-8px
            const left = Math.random() * 100;
            const startTop = Math.random() * 80 + 10; // 避免完全底部
            const duration = Math.random() * 6 + 4; // 4-10秒
            const delay = Math.random() * 8;
            
            particle.style.width = size + 'px';
            particle.style.height = size + 'px';
            particle.style.left = left + '%';
            particle.style.top = startTop + '%';
            particle.style.animation = `floatParticle ${duration}s infinite ease-in-out`;
            particle.style.animationDelay = delay + 's';
            particle.style.background = `radial-gradient(circle, rgba(255, ${150 + Math.random() * 100}, ${80 + Math.random() * 100}, 0.8), rgba(255,100,50,0))`;
            particlesContainer.appendChild(particle);
        }
        
        // 动态添加围绕中心旋转的额外光晕环 (可选，增强动效)
        const orbRing = document.querySelector('.orb-ring');
        if (orbRing) {
            // 增加一个反向旋转的光晕环增加层次感
            const secondRing = document.createElement('div');
            secondRing.className = 'orb-ring';
            secondRing.style.width = '400px';
            secondRing.style.height = '400px';
            secondRing.style.background = 'conic-gradient(from 90deg, rgba(100,180,255,0.1), rgba(255,140,70,0.2), rgba(255,200,100,0.1))';
            secondRing.style.filter = 'blur(60px)';
            secondRing.style.animation = 'rotateRing 18s linear infinite reverse';
            secondRing.style.position = 'absolute';
            secondRing.style.top = '50%';
            secondRing.style.left = '50%';
            secondRing.style.transform = 'translate(-50%, -50%)';
            document.querySelector('.container').appendChild(secondRing);
        }
        
        // 鼠标移动视差效果 (简洁而炫酷，轻微跟随)
        let mouseX = 0, mouseY = 0;
        let targetX = 0, targetY = 0;
        const hero = document.querySelector('.hero');
        const mainText = document.querySelector('.main-text');
        
        document.addEventListener('mousemove', (e) => {
            // 获取鼠标在屏幕中的比例位置 (0-1)
            const xPercent = e.clientX / window.innerWidth;
            const yPercent = e.clientY / window.innerHeight;
            // 让文字轻微偏移，范围 -10px 到 10px
            const moveX = (xPercent - 0.5) * 20;
            const moveY = (yPercent - 0.5) * 15;
            if (hero) {
                hero.style.transform = `translate(${moveX * 0.5}px, ${moveY * 0.5}px)`;
            }
            // 背景光晕跟随移动 (让光晕轻微偏移)
            const glowSpots = document.querySelectorAll('.glow-spot');
            if (glowSpots.length) {
                const bgMoveX = (xPercent - 0.5) * 30;
                const bgMoveY = (yPercent - 0.5) * 20;
                glowSpots[0].style.transform = `translate(${bgMoveX * 0.3}px, ${bgMoveY * 0.2}px)`;
                if (glowSpots[1]) {
                    glowSpots[1].style.transform = `translate(${-bgMoveX * 0.2}px, ${-bgMoveY * 0.15}px)`;
                }
            }
        });
        
        // 触摸屏适配 (轻量级)
        let touchX = 0, touchY = 0;
        document.addEventListener('touchmove', (e) => {
            if (e.touches.length) {
                const xPercent = e.touches[0].clientX / window.innerWidth;
                const yPercent = e.touches[0].clientY / window.innerHeight;
                const moveX = (xPercent - 0.5) * 12;
                const moveY = (yPercent - 0.5) * 10;
                if (hero) {
                    hero.style.transform = `translate(${moveX}px, ${moveY}px)`;
                }
            }
        });
        
        // 重置位置 (鼠标离开窗口)
        document.addEventListener('mouseleave', () => {
            if (hero) {
                hero.style.transform = `translate(0px, 0px)`;
            }
            const glowSpots = document.querySelectorAll('.glow-spot');
            if (glowSpots.length) {
                glowSpots[0].style.transform = `translate(0px, 0px)`;
                if (glowSpots[1]) glowSpots[1].style.transform = `translate(0px, 0px)`;
            }
        });
        
        // 动态改变光晕颜色 (随机柔和过渡) - 高级呼吸效果
        let hue = 30;
        setInterval(() => {
            // 渐变色调让页面富有生机
            hue = (hue + 0.5) % 360;
            const ring = document.querySelector('.orb-ring');
            if (ring) {
                const color1 = `hsla(${hue}, 80%, 65%, 0.25)`;
                const color2 = `hsla(${hue + 40}, 85%, 55%, 0.35)`;
                ring.style.background = `conic-gradient(from 0deg, ${color1}, ${color2}, ${color1}, hsla(${hue + 80}, 70%, 60%, 0.2))`;
            }
            const secondRingDiv = document.querySelectorAll('.orb-ring')[1];
            if (secondRingDiv) {
                secondRingDiv.style.background = `conic-gradient(from 90deg, hsla(${hue + 30}, 70%, 60%, 0.15), hsla(${hue + 100}, 75%, 55%, 0.25))`;
            }
            // 主文字渐变动画已经存在，仅增强背景氛围
        }, 3000);
        
        // 添加动态粒子拖尾效果 (跟随鼠标的小粒子) - 增加炫酷感
        let particleTrail = [];
        function createTrailParticle(x, y) {
            const trail = document.createElement('div');
            trail.style.position = 'fixed';
            trail.style.width = '4px';
            trail.style.height = '4px';
            trail.style.background = `radial-gradient(circle, #ffcc77, #ff884d)`;
            trail.style.borderRadius = '50%';
            trail.style.left = x + 'px';
            trail.style.top = y + 'px';
            trail.style.pointerEvents = 'none';
            trail.style.zIndex = '999';
            trail.style.opacity = '0.8';
            trail.style.filter = 'blur(1px)';
            document.body.appendChild(trail);
            // 动画消失
            let opacity = 0.8;
            let scale = 1;
            const interval = setInterval(() => {
                opacity -= 0.1;
                scale -= 0.05;
                trail.style.opacity = opacity;
                trail.style.transform = `scale(${scale})`;
                if (opacity <= 0) {
                    clearInterval(interval);
                    trail.remove();
                }
            }, 50);
            setTimeout(() => {
                clearInterval(interval);
                trail.remove();
            }, 500);
        }
        
        let lastX = 0, lastY = 0;
        document.addEventListener('mousemove', (e) => {
            const x = e.clientX;
            const y = e.clientY;
            // 控制生成频率，避免过多
            const distance = Math.hypot(x - lastX, y - lastY);
            if (distance > 15 && Math.random() > 0.7) {
                createTrailParticle(x, y);
                lastX = x;
                lastY = y;
            } else if (Math.random() > 0.85) {
                createTrailParticle(x, y);
            }
        });
        
        // 适配移动端触摸粒子
        document.addEventListener('touchmove', (e) => {
            if (e.touches.length) {
                const x = e.touches[0].clientX;
                const y = e.touches[0].clientY;
                createTrailParticle(x, y);
            }
        });
        
        // 简单的控制台输出
        console.log('✨ 炫酷展示页已加载 — 精彩即将开启 ✨');
        
        // 额外添加微光闪烁边框 (主文字外圈光晕呼吸)
        const style = document.createElement('style');
        style.textContent = `
            .main-text {
                animation: gradientShift 4s ease infinite, textGlow 2s ease-in-out infinite alternate;
                transition: text-shadow 0.3s;
            }
            .container:hover .main-text {
                text-shadow: 0 0 40px rgba(255,200,100,0.8);
            }
        `;
        document.head.appendChild(style);
        
        // 添加简单心跳脉冲效果到光晕线
        const glowLine = document.querySelector('.glow-line');
        if (glowLine) {
            setInterval(() => {
                glowLine.style.boxShadow = '0 0 8px #ffaa33';
                setTimeout(() => {
                    glowLine.style.boxShadow = 'none';
                }, 400);
            }, 2000);
        }
    })();
</script>
</body>
</html>