.opening-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    transition: all 0.3s ease;
}

.opening-text-1 {
    font-size: 68px;
    font-weight: 800;
    letter-spacing: 8px;
    opacity: 0;
    display: flex;
}
.opening-text-1 .text-red {
    background: linear-gradient(120deg, #d62326, #e63946, #f75a5f);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 10px rgba(214, 35, 38, 0.8),
    0 0 20px rgba(230, 57, 70, 0.6),
    0 2px 4px rgba(0,0,0,0.5);
    -webkit-text-stroke: 0.5px rgba(255,255,255,0.3);
}
.opening-text-1 span:not(.text-red) {
    background: linear-gradient(120deg, #ffffff, #f0f0f0, #e0e0e0);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 10px rgba(255,255,255,0.8),
    0 0 20px rgba(255,255,255,0.6),
    0 2px 4px rgba(0,0,0,0.5);
    -webkit-text-stroke: 0.5px rgba(255,255,255,0.3);
}

.opening-text-2 {
    font-size: 48px;
    letter-spacing: 4px;
    opacity: 0;
    background: linear-gradient(90deg, #93c5fd, #bfdbfe, #e0e7ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 8px rgba(147, 197, 253, 0.7),
    0 1px 3px rgba(0,0,0,0.4);
    -webkit-text-stroke: 0.3px rgba(255,255,255,0.2);
}

.opening-mask.loaded {
    animation: maskFadeOut 6s ease forwards 3s;
}
.opening-mask.loaded .opening-text-1 {
    animation: textFadeIn 1.2s ease forwards 0.5s,
    textShrink 8s ease forwards 3s;
}
.opening-mask.loaded .opening-text-2 {
    animation: textFadeIn 1.2s ease forwards 1.2s,
    textShrink 6s ease forwards 3s;
}

.glow-effect.loaded {
    animation: glowFadeIn 2s ease forwards 3s,
    waterRipple 8s ease-out forwards 3s;
    filter: blur(40px);
}

.logo-container, .constellation-container, .background {
    opacity: 0;
    transition: opacity 8s ease;
    z-index: 1;
}
body.loaded-content .logo-container,
body.loaded-content .constellation-container,
body.loaded-content .background {
    opacity: 1;
}

.star-node-box {
    position: absolute;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    transform: translateZ(0);
    opacity: 1;
}
svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
}

@keyframes maskFadeOut {
    0% { opacity: 1; visibility: visible; }
    50% { opacity: 0.5; }
    100% { opacity: 0; visibility: hidden; pointer-events: none; }
}
@keyframes textFadeIn {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes textShrink {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0); }
}
@keyframes glowFadeIn {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes waterRipple {
    0% {
        box-shadow: 0 0 0 0 rgba(59,130,246,0.8),
        0 0 0 50px rgba(59,130,246,0.6),
        0 0 0 100px rgba(59,130,246,0.4);
        transform: translate(-50%, -50%) scale(0);
    }
    100% {
        box-shadow: 0 0 0 200px rgba(59,130,246,0),
        0 0 0 400px rgba(59,130,246,0),
        0 0 0 600px rgba(59,130,246,0);
        transform: translate(-50%, -50%) scale(2.5);
    }
}

@media (max-width: 1200px) {
    .opening-text-1 { font-size: 58px; letter-spacing: 6px; }
    .opening-text-2 { font-size: 22px; letter-spacing: 3px; }
    .glow-effect { width: 500px; height: 500px; }
}
@media (max-width: 1024px) {
    .opening-text-1 { font-size: 48px; letter-spacing: 5px; }
    .opening-text-2 { font-size: 20px; letter-spacing: 2px; }
    .glow-effect { width: 450px; height: 450px; }
}
@media (max-width: 768px) {
    .opening-text-1 { font-size: 38px; letter-spacing: 4px; }
    .opening-text-2 { font-size: 18px; letter-spacing: 2px; }
    .glow-effect { width: 400px; height: 400px; filter: blur(30px); }
}
@media (max-width: 480px) {
    .opening-text-1 { font-size: 28px; letter-spacing: 3px; }
    .opening-text-2 { font-size: 14px; letter-spacing: 1px; }
    .glow-effect {
        width: 300px;
        height: 300px;
        filter: blur(20px);
        border-radius: 50%;
    }
    .glow-effect.loaded {
        animation: glowFadeIn 2s ease forwards 3s,
        waterRipple 8s ease-out forwards 3s;
    }
    @keyframes waterRipple {
        0% { box-shadow:0 0 0 0 rgba(59,130,246,0.8),0 0 0 30px rgba(59,130,246,0.6),0 0 0 60px rgba(59,130,246,0.4); transform: translate(-50%,-50%) scale(0); }
        50% { box-shadow:0 0 0 75px rgba(59,130,246,0.4),0 0 0 150px rgba(59,130,246,0.2),0 0 0 225px rgba(59,130,246,0.1); transform: translate(-50%,-50%) scale(1); }
        100% { box-shadow:0 0 0 150px rgba(59,130,246,0),0 0 0 300px rgba(59,130,246,0),0 0 0 450px rgba(59,130,246,0); transform: translate(-50%,-50%) scale(2); }
    }
}