html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #0d0d0d; font-family: 'Roboto', sans-serif; color: #fff; }

#background {opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; filter: blur(1px); z-index:2;}

.overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 95%; max-width: 700px; padding: 20px; z-index: 2; color: #fff;display:none; }

.yaoLogo { width: 300px; max-width: 50%; height: auto; margin-bottom: 20px; display:none;}

.yaoTitle { font-family: 'ZCOOL QingKe HuangYou', cursive; font-size: 2.4rem; margin: 10px 0 5px 0; color: #fff; }
.yaoSubtitle { font-family: 'ZCOOL QingKe HuangYou', cursive; font-size: 1.4rem; margin: 0 0 15px 0; color: #fff; }
.yaoDesc { font-size: 0.95rem; line-height: 1.4; max-width: 90%; margin: 0 auto 20px auto; letter-spacing: 0.5px; color: #8d8d8d; }
.yaoDesc span {font-weight: bold; color:#fff;}
.yaoSoon { font-family: 'ZCOOL QingKe HuangYou', cursive; font-size: 1.6rem; text-transform: uppercase; color: #fff; margin-top: 10px; /* animation: heartbeat 2.4s infinite; */ transform-origin: center; }

@keyframes heartbeat {
    0% { transform: scale(1); }
    14% { transform: scale(1.3); }
    28% { transform: scale(1); }
    42% { transform: scale(1.3); }
    70% { transform: scale(1); }
    100% { transform: scale(1); }
}

@media (max-width: 480px) {
    .overlay { width: 90%; max-width: 500px; }
    .yaoLogo { width: 160px; }
    .yaoTitle { font-size: 1.8rem; }
    .yaoSubtitle { font-size: 1rem; }
    .yaoDesc { font-size: 0.9rem; line-height: 1.3; }
    .yaoSoon { font-size: 1.2rem; }
}
.yaoLogo {
    animation: logoPulse 3s infinite alternate;
    transform-origin: center;
}

@keyframes logoPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}