/* Global Animations */
@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    33% { transform: translateY(-30px) rotate(5deg); }
    66% { transform: translateY(20px) rotate(-5deg); }
}

@keyframes twinkle {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* Base Styles */
body {
    background: linear-gradient(135deg, #1e293b 0%, #172554 100%);
    color: #f1f5f9;
}

/* Star Styles - CSS Only Stars */
.star {
    position: absolute;
    background: white;
    border-radius: 50%;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8));
    animation: twinkle infinite ease-in-out alternate;
}

.star.yellow {
    background: #fbbf24;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.8);
}

.star.blue {
    background: #60a5fa;
    box-shadow: 0 0 8px rgba(96, 165, 250, 0.8);
}

/* Background Blobs for Color */
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.4;
    animation: float 10s infinite ease-in-out;
    z-index: -1;
}

/* Animations for Views */
#home-view, #view-tmun, #view-moot {
    opacity: 0;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

/* Show Logic */
#state-home:checked ~ main #home-view,
#state-tmun:checked ~ main #view-tmun,
#state-moot:checked ~ main #view-moot {
    opacity: 1;
    display: block !important;
    animation: fadeIn 0.5s ease-out forwards;
}

/* Ensure inputs are not display:none but hidden from view */
input[type="radio"].hidden-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    height: 0;
    width: 0;
}

/* Glassmorphism Utilities */
.glass-panel {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease, background 0.3s ease;
}

.glass-card:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-5px);
}