/*
 * Deep Space Galaxy Landing Page Styles
 * (c) suyalynx
 */

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

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

.galaxy-container {
    position: relative;
    width: 100%;
    height: 100vh;
    background: linear-gradient(to bottom, #0a0a1a, #1a1a2e, #16213e, #1a1a3a, #0e0e2e);
    overflow: hidden;
}

/* Stars layer */
.stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.stars::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(1px 1px at 20px 30px, #eef 80%, transparent),
                      radial-gradient(1px 1px at 40px 70px, #fff 80%, transparent),
                      radial-gradient(1px 1px at 90px 40px, #ddf 80%, transparent),
                      radial-gradient(1px 1px at 160px 120px, #eef 80%, transparent),
                      radial-gradient(1px 1px at 200px 190px, #fff 80%, transparent),
                      radial-gradient(1px 1px at 300px 220px, #ddf 80%, transparent);
    background-repeat: repeat;
    background-size: 600px 600px;
    animation: twinkle 10s ease-in-out infinite alternate;
    opacity: 0.6;
}

/* Nebula effect - simplified for performance */
.nebula {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background:
        radial-gradient(circle at 30% 50%, rgba(128, 0, 128, 0.1), transparent 40%),
        radial-gradient(circle at 70% 50%, rgba(75, 0, 130, 0.08), transparent 40%);
    filter: blur(15px);
    opacity: 0.5;
}

/* Star network container */
.star-network-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

/* Canvas for star network - fully transparent by default */
#starsCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* Completely transparent by default */
    pointer-events: none;
    transition: opacity 0.3s ease; /* Smooth transition for opacity */
    /* No transition for clip-path to keep it responsive to cursor */
}

/* Cursor reveal element - removed flashlight effect */
.cursor-reveal {
    position: fixed;
    width: 400px; /* Diameter of the reveal circle */
    height: 400px;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    /* Removed background gradient and blend mode for clean reveal */
    z-index: 4;
    display: none; /* Hidden by default */
}

/* Content styling */
.content {
    position: relative;
    z-index: 5;
    color: #fff;
    text-align: center;
    padding-top: 20vh;
    pointer-events: none;
}

.content h1 {
    font-family: 'Syncopate', sans-serif;
    font-size: 4.5rem;
    font-weight: 400;
    letter-spacing: 0.3rem;
    text-transform: lowercase;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    margin-bottom: 1.5rem;
    opacity: 0.9;
}

.content p {
    font-family: 'Strait', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.2rem;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    opacity: 0.8;
}

/* Animations */
@keyframes twinkle {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 0.3;
    }
}