/* Star Border Animation Effects */
@keyframes star-movement-bottom {
    0% {
        transform: translate(0%, 0%);
        opacity: 1;
    }
    100% {
        transform: translate(-100%, 0%);
        opacity: 0;
    }
}

@keyframes star-movement-top {
    0% {
        transform: translate(0%, 0%);
        opacity: 1;
    }
    100% {
        transform: translate(100%, 0%);
        opacity: 0;
    }
}

.star-card-container {
    position: relative;
    overflow: hidden;
    background: var(--border-subtle, #333); /* Static border color base */
    border: none !important;
    border-radius: 20px;
    padding: 1px; /* The border thickness */
    z-index: 0;
}

.star-effect-bottom {
    position: absolute;
    width: 300%;
    height: 100px; /* Fixed height to ensure alignment with border */
    opacity: 1; /* Increased opacity for visibility */
    bottom: -50px; /* Center aligns with bottom edge */
    right: -250%;
    border-radius: 50%;
    z-index: 1; /* Above background, below content */
    animation: star-movement-bottom 4s linear infinite alternate;
    background: radial-gradient(circle, var(--text-primary, #fff) 0%, transparent 20%); /* Sharper, larger glow */
}

.star-effect-top {
    position: absolute;
    width: 300%;
    height: 100px; /* Fixed height */
    opacity: 1;
    top: -50px; /* Center aligns with top edge */
    left: -250%;
    border-radius: 50%;
    z-index: 1;
    animation: star-movement-top 4s linear infinite alternate;
    background: radial-gradient(circle, var(--text-primary, #fff) 0%, transparent 20%);
}

.star-card-content {
    position: relative;
    z-index: 2; /* Sits on top */
    border: none; /* Removed internal border as container padding acts as border */
    background: var(--bg-surface, #0b0b0b);
    color: var(--text-primary, white);
    border-radius: 19px; /* Slightly smaller than container to look clean */
    padding: 2rem;
    height: 100%;
}