* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    height: 100%;
    overflow: hidden;
    font-family: 'Arial', sans-serif;
}

.heaven-container {
    width: 100%;
    height: 100vh;
    background: radial-gradient(circle at center, 
                #87CEEB 0%, 
                #4682B4 30%, 
                #1E3A8A 70%, 
                #0F172A 100%);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Header Styles */
.header {
    position: absolute;
    top: 50px;
    z-index: 10;
}

.light-text {
    font-size: 6rem;
    font-weight: bold;
    color: #FFFFFF;
    text-shadow: 
        0 0 15px rgba(255, 255, 255, 1),
        0 0 30px rgba(255, 255, 255, 0.8),
        0 0 45px rgba(255, 255, 255, 0.6),
        0 0 60px rgba(255, 255, 255, 0.4);
    letter-spacing: 12px;
    animation: textGlow 3s ease-in-out infinite alternate;
}

@keyframes textGlow {
    0% {
        text-shadow: 
            0 0 15px rgba(255, 255, 255, 1),
            0 0 30px rgba(255, 255, 255, 0.8),
            0 0 45px rgba(255, 255, 255, 0.6),
            0 0 60px rgba(255, 255, 255, 0.4);
    }
    100% {
        text-shadow: 
            0 0 25px rgba(255, 255, 255, 1),
            0 0 50px rgba(255, 255, 255, 1),
            0 0 75px rgba(255, 255, 255, 0.8),
            0 0 100px rgba(255, 255, 255, 0.6),
            0 0 125px rgba(255, 255, 255, 0.4);
    }
}

/* Heaven Scene */
.heaven-scene {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Divine Light - Central Feature */
.divine-light {
    position: relative;
    width: 600px;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.light-core {
    width: 40px;
    height: 40px;
    background: radial-gradient(circle, 
                #FFFFFF 0%, 
                #FFFFFF 100%);
    border-radius: 50%;
    position: absolute;
    box-shadow: 
        0 0 30px #FFFFFF,
        0 0 60px #FFFFFF,
        0 0 90px #FFFFFF,
        0 0 120px #FFFFFF,
        0 0 150px rgba(255, 255, 255, 1),
        0 0 200px rgba(255, 255, 255, 0.8);
    animation: corePulse 2s ease-in-out infinite alternate;
    z-index: 6;
}

.light-glow {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, 
                rgba(255, 255, 255, 1) 0%, 
                rgba(255, 255, 255, 0.95) 10%, 
                rgba(255, 255, 255, 0.8) 25%, 
                rgba(255, 255, 255, 0.6) 50%, 
                rgba(255, 255, 255, 0.3) 75%, 
                transparent 100%);
    border-radius: 50%;
    position: absolute;
    box-shadow: 
        0 0 80px rgba(255, 255, 255, 1),
        0 0 160px rgba(255, 255, 255, 0.8),
        0 0 240px rgba(255, 255, 255, 0.6),
        0 0 320px rgba(255, 255, 255, 0.4);
    animation: glowPulse 3s ease-in-out infinite alternate;
    z-index: 5;
}

.light-inner-glow {
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, 
                rgba(255, 255, 255, 1) 0%, 
                rgba(255, 255, 255, 0.8) 40%, 
                transparent 100%);
    border-radius: 50%;
    position: absolute;
    box-shadow: 
        0 0 30px rgba(255, 255, 255, 1),
        0 0 60px rgba(255, 255, 255, 0.8);
    animation: innerGlowPulse 2.5s ease-in-out infinite alternate;
    z-index: 5;
}

.light-outer-glow {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, 
                rgba(255, 255, 255, 0.6) 0%, 
                rgba(255, 255, 255, 0.3) 30%, 
                rgba(255, 255, 255, 0.1) 60%, 
                transparent 100%);
    border-radius: 50%;
    position: absolute;
    box-shadow: 
        0 0 100px rgba(255, 255, 255, 0.4),
        0 0 200px rgba(255, 255, 255, 0.2);
    animation: outerGlowPulse 4s ease-in-out infinite alternate;
    z-index: 3;
}

.light-rays {
    width: 600px;
    height: 600px;
    background: conic-gradient(
        transparent 0deg,
        rgba(255, 255, 255, 0.8) 5deg,
        transparent 10deg,
        transparent 35deg,
        rgba(255, 255, 255, 0.6) 40deg,
        transparent 45deg,
        transparent 70deg,
        rgba(255, 255, 255, 0.8) 75deg,
        transparent 80deg,
        transparent 105deg,
        rgba(255, 255, 255, 0.6) 110deg,
        transparent 115deg,
        transparent 140deg,
        rgba(255, 255, 255, 0.8) 145deg,
        transparent 150deg,
        transparent 175deg,
        rgba(255, 255, 255, 0.6) 180deg,
        transparent 185deg,
        transparent 210deg,
        rgba(255, 255, 255, 0.8) 215deg,
        transparent 220deg,
        transparent 245deg,
        rgba(255, 255, 255, 0.6) 250deg,
        transparent 255deg,
        transparent 280deg,
        rgba(255, 255, 255, 0.8) 285deg,
        transparent 290deg,
        transparent 315deg,
        rgba(255, 255, 255, 0.6) 320deg,
        transparent 325deg,
        transparent 350deg,
        rgba(255, 255, 255, 0.8) 355deg,
        transparent 360deg
    );
    border-radius: 50%;
    position: absolute;
    animation: rayRotate 12s linear infinite;
    z-index: 4;
}

.lens-flare {
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, 
                transparent 0%, 
                rgba(255, 255, 255, 0.1) 30%, 
                rgba(255, 255, 255, 0.05) 60%, 
                transparent 100%);
    border-radius: 50%;
    position: absolute;
    animation: lensFlare 6s ease-in-out infinite;
    z-index: 2;
}

.light-burst {
    width: 1000px;
    height: 1000px;
    background: conic-gradient(
        transparent 0deg,
        rgba(255, 255, 255, 0.3) 1deg,
        transparent 2deg,
        transparent 43deg,
        rgba(255, 255, 255, 0.2) 44deg,
        transparent 45deg,
        transparent 88deg,
        rgba(255, 255, 255, 0.3) 89deg,
        transparent 90deg,
        transparent 133deg,
        rgba(255, 255, 255, 0.2) 134deg,
        transparent 135deg,
        transparent 178deg,
        rgba(255, 255, 255, 0.3) 179deg,
        transparent 180deg,
        transparent 223deg,
        rgba(255, 255, 255, 0.2) 224deg,
        transparent 225deg,
        transparent 268deg,
        rgba(255, 255, 255, 0.3) 269deg,
        transparent 270deg,
        transparent 313deg,
        rgba(255, 255, 255, 0.2) 314deg,
        transparent 315deg,
        transparent 358deg,
        rgba(255, 255, 255, 0.3) 359deg,
        transparent 360deg
    );
    position: absolute;
    animation: burstRotate 20s linear infinite;
    z-index: 1;
}

@keyframes corePulse {
    0% {
        transform: scale(1);
        box-shadow: 
            0 0 30px #FFFFFF,
            0 0 60px #FFFFFF,
            0 0 90px #FFFFFF,
            0 0 120px #FFFFFF,
            0 0 150px rgba(255, 255, 255, 1),
            0 0 200px rgba(255, 255, 255, 0.8);
    }
    100% {
        transform: scale(1.1);
        box-shadow: 
            0 0 50px #FFFFFF,
            0 0 100px #FFFFFF,
            0 0 150px #FFFFFF,
            0 0 200px #FFFFFF,
            0 0 250px rgba(255, 255, 255, 1),
            0 0 300px rgba(255, 255, 255, 0.8),
            0 0 350px rgba(255, 255, 255, 0.6);
    }
}

@keyframes glowPulse {
    0% {
        transform: scale(1);
        box-shadow: 
            0 0 80px rgba(255, 255, 255, 1),
            0 0 160px rgba(255, 255, 255, 0.8),
            0 0 240px rgba(255, 255, 255, 0.6),
            0 0 320px rgba(255, 255, 255, 0.4);
    }
    100% {
        transform: scale(1.2);
        box-shadow: 
            0 0 120px rgba(255, 255, 255, 1),
            0 0 240px rgba(255, 255, 255, 1),
            0 0 360px rgba(255, 255, 255, 0.8),
            0 0 480px rgba(255, 255, 255, 0.6),
            0 0 600px rgba(255, 255, 255, 0.4);
    }
}

@keyframes rayRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes innerGlowPulse {
    0% {
        transform: scale(1);
        box-shadow: 
            0 0 30px rgba(255, 255, 255, 1),
            0 0 60px rgba(255, 255, 255, 0.8);
    }
    100% {
        transform: scale(1.15);
        box-shadow: 
            0 0 50px rgba(255, 255, 255, 1),
            0 0 100px rgba(255, 255, 255, 1),
            0 0 150px rgba(255, 255, 255, 0.6);
    }
}

@keyframes outerGlowPulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
        box-shadow: 
            0 0 100px rgba(255, 255, 255, 0.4),
            0 0 200px rgba(255, 255, 255, 0.2);
    }
    100% {
        transform: scale(1.1);
        opacity: 0.9;
        box-shadow: 
            0 0 150px rgba(255, 255, 255, 0.6),
            0 0 300px rgba(255, 255, 255, 0.4),
            0 0 450px rgba(255, 255, 255, 0.2);
    }
}

@keyframes lensFlare {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }
}

@keyframes burstRotate {
    0% {
        transform: rotate(0deg);
        opacity: 0.4;
    }
    50% {
        opacity: 0.6;
    }
    100% {
        transform: rotate(360deg);
        opacity: 0.4;
    }
}



/* Responsive Design */
@media (max-width: 768px) {
    .light-text {
        font-size: 3.5rem;
        letter-spacing: 6px;
    }
    
    .divine-light {
        width: 400px;
        height: 400px;
    }
    
    .light-core {
        width: 30px;
        height: 30px;
    }
    
    .light-inner-glow {
        width: 80px;
        height: 80px;
    }
    
    .light-glow {
        width: 200px;
        height: 200px;
    }
    
    .light-outer-glow {
        width: 350px;
        height: 350px;
    }
    
    .light-rays {
        width: 400px;
        height: 400px;
    }
    
    .lens-flare {
        width: 500px;
        height: 500px;
    }
    
    .light-burst {
        width: 600px;
        height: 600px;
    }
}

@media (max-width: 480px) {
    .header {
        top: 30px;
    }
    
    .light-text {
        font-size: 2.5rem;
        letter-spacing: 4px;
    }
}