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

:root {
    --primary-color: #00d4ff;
    --secondary-color: #0066cc;
    --accent-color: #ff0080;
    --dark-bg: #0a0a0a;
    --darker-bg: #050505;
    --text-light: #ffffff;
    --text-muted: #b0b0b0;
}

body {
    font-family: 'Space Grotesk', sans-serif;
    background: var(--dark-bg);
    color: var(--text-light);
    overflow-x: hidden;
    min-height: 100vh;
}

/* Animated Background */
.stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: transparent;
}

.stars::before,
.stars::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    box-shadow: 
        100px 100px white, 200px 150px white, 300px 50px white,
        400px 200px white, 500px 100px white, 600px 250px white,
        700px 80px white, 800px 180px white, 900px 120px white,
        1000px 220px white, 1100px 60px white, 1200px 160px white,
        150px 300px white, 250px 350px white, 350px 280px white,
        450px 380px white, 550px 320px white, 650px 400px white,
        750px 290px white, 850px 390px white, 950px 330px white,
        1050px 430px white, 1150px 270px white, 1250px 370px white;
    animation: twinkle 3s infinite;
}

.stars::after {
    animation-delay: 1.5s;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.grid-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
    animation: grid-move 20s linear infinite;
}

@keyframes grid-move {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 50px); }
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
.header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(10, 10, 10, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 212, 255, 0.2);
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.logo {
    font-family: 'Orbitron', monospace;
    font-size: 2rem;
    font-weight: 900;
    background: linear-gradient(45deg, var(--primary-color), var(--accent-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav {
    display: flex;
    gap: 30px;
}

.nav-link {
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
}

.nav-link:hover {
    color: var(--primary-color);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

/* Main Content */
.main {
    padding-top: 100px;
    min-height: 100vh;
}

.hero {
    text-align: center;
    padding: 60px 0;
}

.release-banner {
    margin-bottom: 30px;
}

.release-date {
    font-family: 'Orbitron', monospace;
    font-size: 1.2rem;
    color: var(--primary-color);
    letter-spacing: 3px;
    margin-bottom: 10px;
    animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
    from { text-shadow: 0 0 10px var(--primary-color); }
    to { text-shadow: 0 0 20px var(--primary-color), 0 0 30px var(--primary-color); }
}

.announcement {
    font-family: 'Orbitron', monospace;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-color);
    letter-spacing: 5px;
}

.instagram-link {
    color: var(--accent-color);
    text-decoration: none;
    transition: all 0.3s ease;
}

.instagram-link:hover {
    color: var(--primary-color);
    text-shadow: 0 0 20px rgba(0, 212, 255, 0.8);
}

.album-title {
    font-family: 'Orbitron', monospace;
    font-size: 6rem;
    font-weight: 900;
    margin: 20px 0;
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-transform: uppercase;
    letter-spacing: 8px;
    animation: ice-glow 3s ease-in-out infinite alternate;
}

@keyframes ice-glow {
    from { 
        text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
        transform: scale(1);
    }
    to { 
        text-shadow: 0 0 40px rgba(0, 212, 255, 0.8);
        transform: scale(1.02);
    }
}

.artist-name {
    font-size: 2.5rem;
    font-weight: 300;
    color: var(--text-muted);
    margin-bottom: 40px;
    letter-spacing: 10px;
}

/* Album Cover */
.album-cover {
    width: 400px;
    height: 400px;
    margin: 0 auto 40px;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 
        0 20px 60px rgba(0, 212, 255, 0.3),
        0 0 100px rgba(0, 212, 255, 0.1);
}

.cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.cover-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #001a33, #003366, #004080);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.frost-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(0, 212, 255, 0.2) 0%, transparent 50%);
    animation: frost-shimmer 4s ease-in-out infinite;
}

@keyframes frost-shimmer {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.8; }
}

.ice-text {
    font-family: 'Orbitron', monospace;
    font-size: 3rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 5px;
    z-index: 1;
    text-shadow: 
        0 0 20px rgba(0, 212, 255, 0.8),
        0 0 40px rgba(0, 212, 255, 0.4);
}

/* Play Button */
.play-section {
    margin-bottom: 40px;
}

.play-btn {
    position: relative;
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    border: none;
    border-radius: 50px;
    padding: 20px 40px;
    color: white;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
    box-shadow: 
        0 10px 30px rgba(0, 212, 255, 0.3),
        inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.play-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 
        0 15px 40px rgba(0, 212, 255, 0.5),
        inset 0 0 30px rgba(255, 255, 255, 0.2);
}

.play-btn:active {
    transform: translateY(-1px) scale(1.02);
}

.play-icon {
    width: 30px;
    height: 30px;
    position: relative;
    z-index: 2;
}

.play-icon svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}

.pulse-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border: 2px solid var(--primary-color);
    border-radius: 50px;
    opacity: 0;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 0;
    }
}

.description {
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

/* Tracklist */
.tracklist {
    max-width: 400px;
    margin: 0 auto;
    padding: 30px;
    background: rgba(0, 212, 255, 0.05);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 15px;
    backdrop-filter: blur(10px);
}

.track {
    padding: 15px 0;
    border-bottom: 1px solid rgba(0, 212, 255, 0.1);
    transition: all 0.3s ease;
}

.track:last-child {
    border-bottom: none;
}

.track:hover {
    color: var(--primary-color);
    padding-left: 10px;
}

/* Clown Reveal */
.clown-reveal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    flex-direction: column;
    animation: fadeIn 0.5s ease;
}

.clown-reveal.active {
    display: flex;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.clown-image {
    max-width: 80%;
    max-height: 60%;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(255, 0, 128, 0.3);
    animation: bounce-in 0.8s ease;
}

@keyframes bounce-in {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.clown-text {
    text-align: center;
    margin-top: 30px;
    padding: 20px;
}

.clown-text h2 {
    font-family: 'Orbitron', monospace;
    font-size: 3rem;
    color: var(--accent-color);
    margin-bottom: 15px;
    animation: rainbow 2s linear infinite;
}

@keyframes rainbow {
    0% { color: #ff0000; }
    16.67% { color: #ff8800; }
    33.33% { color: #ffff00; }
    50% { color: #00ff00; }
    66.67% { color: #0088ff; }
    83.33% { color: #8800ff; }
    100% { color: #ff0000; }
}

.clown-text p {
    font-size: 1.3rem;
    color: var(--text-light);
}

/* Footer */
.footer {
    text-align: center;
    padding: 30px 0;
    border-top: 1px solid rgba(0, 212, 255, 0.1);
    color: var(--text-muted);
}

/* Responsive */
@media (max-width: 768px) {
    .album-title {
        font-size: 4rem;
        letter-spacing: 4px;
    }
    
    .artist-name {
        font-size: 2rem;
        letter-spacing: 5px;
    }
    
    .album-cover {
        width: 300px;
        height: 300px;
    }
    
    .ice-text {
        font-size: 2rem;
    }
    
    .nav {
        display: none;
    }
    
    .clown-text h2 {
        font-size: 2rem;
    }
}