/* Galaxy View Styles */
.galaxy-stack {
    position: relative;
    width: 100%;
    min-height: 80vh;
    height: auto;
    /* Occupy significant vertical space */
    min-height: 600px;
    margin: 0 auto;
    overflow: hidden;
    /* Hide overflow if stars go too far, or visible? Visible is better for "universe" feel but might cause scrollbars. Let's use hidden for the container but ensure content fits. */
    overflow: visible;
}

.galaxy-item {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 1;
    width: auto !important;
    /* Override default button width */
    max-width: 264px !important;
    padding: 0.55rem 1.1rem !important;
    font-size: 1rem !important;
    border-radius: 2rem !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    opacity: 0;
    /* Start hidden for entrance animation */
    animation: galaxyEntrance 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, float 6s ease-in-out infinite;
    animation-delay: 0s, 0.8s;
    /* Delay float until entrance is done */
}

.galaxy-item:hover {
    z-index: 100;
    transform: translate(-50%, -50%) scale(1.2);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.galaxy-item .icon {
    width: 1.32rem;
    height: 1.32rem;
    margin-right: 0.5rem;
}

/* Animation for floating effect */
@keyframes float {
    0% {
        transform: translate(-50%, -50%) translateY(0px);
    }

    50% {
        transform: translate(-50%, -50%) translateY(-10px);
    }

    100% {
        transform: translate(-50%, -50%) translateY(0px);
    }
}

/* Entrance animation */
@keyframes galaxyEntrance {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Responsive adjustments for Galaxy */
@media (max-width: 768px) {
    .galaxy-stack {
        height: 100vh;
        /* More height on mobile */
    }

    .galaxy-item {
        font-size: 0.8rem !important;
        padding: 0.4rem 0.8rem !important;
        max-width: 150px !important;
    }
}