.welcome-splash { position: fixed; inset: 0; z-index: 9999; background: #000; transition: opacity 0.7s ease; } .welcome-splash.is-exiting { opacity: 0; pointer-events: none; } .welcome-splash__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .welcome-splash__ambient { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 80%, rgba(0, 255, 0, 0.08), transparent 70%); pointer-events: none; } .welcome-splash__hero { position: relative; z-index: 10; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 1rem; } .welcome-splash__title { font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", sans-serif; font-weight: 900; font-size: clamp(4.5rem, 18vw, 9rem); letter-spacing: 0.08em; background: linear-gradient(135deg, #0f0, #0fa, #2eff7a, #aaffaa); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0 0 0.3em; animation: welcome-splash-glow 3s infinite alternate; } @keyframes welcome-splash-glow { 0% { text-shadow: 0 0 15px #0f0, 0 0 30px #0f8a3a; } 100% { text-shadow: 0 0 30px #2eff7a, 0 0 60px #0f0, 0 0 10px #aaffaa; } } .welcome-splash__subtitle { font-family: "Microsoft YaHei", "PingFang SC", monospace; font-size: clamp(1.1rem, 5vw, 1.8rem); font-weight: 500; letter-spacing: 0.12em; color: #caffb0; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(6px); padding: 0.6rem 1.5rem; border-radius: 60px; border: 1px solid rgba(0, 255, 0, 0.5); box-shadow: 0 0 18px rgba(0, 255, 0, 0.25); margin: 0; } .welcome-splash__enter { font-family: "Microsoft YaHei", "PingFang SC", monospace; font-size: clamp(1.3rem, 6vw, 2.2rem); font-weight: 700; letter-spacing: 0.1em; color: #e0ffc0; background: linear-gradient(135deg, rgba(0, 30, 0, 0.7), rgba(0, 60, 0, 0.6)); backdrop-filter: blur(8px); padding: 0.7rem 1.8rem; border-radius: 50px; margin-top: 2rem; border: 1px solid #2eff7a; box-shadow: 0 0 25px rgba(50, 255, 50, 0.4); cursor: pointer; animation: welcome-splash-enter-in 0.8s cubic-bezier(0.2, 0.9, 0.4, 1.2) both; transition: transform 0.2s, box-shadow 0.2s; } .welcome-splash__enter:hover { transform: scale(1.05); box-shadow: 0 0 40px rgba(50, 255, 50, 0.6); } .welcome-splash__enter:active { transform: scale(0.97); } @keyframes welcome-splash-enter-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 640px) { .welcome-splash__subtitle { white-space: normal; width: 85%; line-height: 1.4; font-size: 1rem; padding: 0.4rem 1rem; } .welcome-splash__title { letter-spacing: 0.05em; } }