*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#03020a}
body{
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
    color:#e8e4f0;
    -webkit-font-smoothing:antialiased;
}
canvas{position:fixed;inset:0;z-index:0}
.content{
    position:relative;z-index:10;
    width:100%;height:100%;
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    padding:40px 24px;text-align:center;
    pointer-events:none;
}
.text-group{max-width:640px}
.title{
    font-size:clamp(2.2rem,5.5vw,4rem);
    font-weight:200;
    letter-spacing:0.35em;
    margin-bottom:14px;
    opacity:0;transform:translateY(30px);
    animation:fadeUp 1.2s ease-out 0.4s forwards;
    background:linear-gradient(180deg,#ffffff 0%,#b0a0d0 60%,#7060a0 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}
.title-sub{
    font-size:clamp(0.7rem,1.4vw,0.85rem);
    font-weight:300;
    letter-spacing:0.6em;
    color:rgba(160,150,200,0.5);
    margin-bottom:72px;
    opacity:0;
    animation:fadeIn 1.5s ease-out 1s forwards;
}
.verse{
    font-size:clamp(0.95rem,1.9vw,1.15rem);
    font-weight:300;
    line-height:2.4;
    letter-spacing:0.1em;
    color:rgba(210,200,235,0.7);
    margin-bottom:40px;
    opacity:0;transform:translateY(20px);
}
.verse.v1{animation:fadeUp 1.6s ease-out 1.6s forwards}
.verse.v2{animation:fadeUp 1.6s ease-out 2.5s forwards}
.verse.v3{animation:fadeUp 1.6s ease-out 3.4s forwards}
.verse em{
    font-style:normal;
    color:rgba(255,255,255,0.95);
    text-shadow:0 0 24px rgba(140,120,255,0.35),0 0 48px rgba(140,120,255,0.15);
}
.divider{
    width:50px;height:1px;
    background:linear-gradient(90deg,transparent,rgba(180,160,255,0.4),transparent);
    margin:0 auto 40px;
    opacity:0;
    animation:fadeIn 1s ease-out 1.2s forwards;
}
.coming-soon{
    margin-top:56px;
    opacity:0;
    animation:fadeIn 2s ease-out 4.5s forwards;
}
.coming-soon .signal-ring{
    width:8px;height:8px;border-radius:50%;
    background:rgba(180,160,255,0.9);
    box-shadow:0 0 16px rgba(180,160,255,0.7),0 0 32px rgba(180,160,255,0.3);
    margin:0 auto 14px;
    animation:signalPulse 2.4s ease-in-out infinite;
}
.coming-soon p{
    font-size:0.75rem;
    letter-spacing:0.35em;
    color:rgba(160,150,200,0.45);
}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{to{opacity:1}}
@keyframes signalPulse{
    0%,100%{opacity:0.35;transform:scale(1);box-shadow:0 0 12px rgba(180,160,255,0.4),0 0 24px rgba(180,160,255,0.15)}
    50%{opacity:1;transform:scale(1.4);box-shadow:0 0 20px rgba(180,160,255,0.9),0 0 48px rgba(180,160,255,0.4)}
}