@keyframes heroBlackHoleStarsTwinkle {
    0% {
        transform: translateZ(0) translate(0) scale(1);
        background: rgba(255, 255, 255, 0);
    }
    10% {
        background: rgba(255, 255, 255, 1);
    }
    90% {
        background: rgba(255, 255, 255, 1);
    }
    100% {
        transform: translateZ(0) translate(var(--transform)) scale(3);
        background: rgba(255, 255, 255, 0);
    }
}

/* Layout / balance */
.left-column {
    max-width: 360px;
    width: 100%;
}

/* Make right column a fixed-height scroll area on large screens */
@media (min-width: 1024px) {
    .scroll-container {
        height: calc(
            100vh - 6rem
        ); /* full viewport height minus outer padding */
        position: relative;
        overflow: hidden; /* scroll happens on .scroll-content */
    }

    .scroll-content {
        height: 100%;
        overflow-y: auto;
        padding: 2rem 1rem 6rem; /* add extra bottom padding so last items aren't hidden by the bottom fade */
        -webkit-overflow-scrolling: touch;
    }

    .left-column {
        /* ensure the column has vertical padding when centered */
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    }
}

/* Fade overlays (top + bottom) — use absolute positioning inside .scroll-container so they don't hide content */
.fade-overlay-top,
.fade-overlay-bottom {
    position: absolute;
    left: 0;
    right: 0;
    height: 5rem; /* increased for a stronger, more visible fade */
    pointer-events: none;
    z-index: 20;
}

/* stronger, slightly layered gradient so the fade is obvious on both ends */
.fade-overlay-top {
    top: 0;
    background: linear-gradient(
        to bottom,
        rgba(15, 23, 42, 0.98) 0%,
        rgba(15, 23, 42, 0.65) 40%,
        transparent 100%
    );
}

.fade-overlay-bottom {
    bottom: 0;
    background: linear-gradient(
        to top,
        rgba(15, 23, 42, 0.98) 0%,
        rgba(15, 23, 42, 0.65) 40%,
        transparent 100%
    );
}

/* Optional: nicer thin scrollbar for the scroll area */
.scroll-content::-webkit-scrollbar {
    width: 8px;
}
.scroll-content::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.12);
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.hero-black-hole-stars {
    height: 100vh;
    left: 50%;
    top: 50%;
    mask-image: radial-gradient(
        50% 50% at 50% 50%,
        rgba(217, 217, 217, 0) 27.08%,
        #d9d9d9 47.92%,
        rgba(217, 217, 217, 0.8) 75%,
        rgba(217, 217, 217, 0) 100%
    );
    -webkit-mask-image: radial-gradient(
        50% 50% at 50% 50%,
        rgba(217, 217, 217, 0) 27.08%,
        #d9d9d9 47.92%,
        rgba(217, 217, 217, 0.8) 75%,
        rgba(217, 217, 217, 0) 100%
    );
    mask-position: 0 0;
    mask-size: cover;
    pointer-events: none;
    position: fixed;
    transform: translateZ(0) translate(-50%, -50%);
    width: 100vw;
    z-index: 0;
}

.hero-black-hole-stars div {
    background: rgba(255, 255, 255, 0);
    border-radius: 5px;
    height: 2px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translateZ(0) translate(0) scale(1);
    width: 2px;
    animation: heroBlackHoleStarsTwinkle linear infinite;
}

@keyframes glow-pulse {
    0%,
    100% {
        opacity: 0.4;
        filter: blur(80px);
    }
    50% {
        opacity: 0.6;
        filter: blur(100px);
    }
}

.profile-glow {
    animation: glow-pulse 3s ease-in-out infinite;
}

.scroll-content {
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
    position: relative;
    padding: 2rem 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.scroll-content::-webkit-scrollbar {
    display: none;
}

/* Make the scroll indicator span the scrollable area (so thumb can be positioned between fades) */
.scroll-indicator {
    position: absolute;
    right: 0.5rem;
    top: 5rem; /* match fade height so indicator sits between fades */
    bottom: 5rem; /* match fade height */
    width: 6px;
    background: rgba(139, 92, 246, 0.12);
    border-radius: 3px;
    transition: opacity 0.3s;
    z-index: 5;
}

/* thumb defaults; your JS can update height/top to reflect scroll position */
.scroll-indicator-thumb {
    width: 100%;
    height: 40px;
    background: rgba(139, 92, 246, 0.8);
    border-radius: 3px;
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
    transition: all 0.3s;
}

.scroll-container:hover .scroll-indicator {
    opacity: 1;
}

/* Mobile / small screens — flow layout & hide native scrollbars */
@media (max-width: 1023px) {
    /* Let the page scroll naturally on mobile and avoid a clipped scroll area */
    .scroll-container {
        height: auto;
        position: relative;
        overflow: visible;
        padding: 0;
    }

    /* Ensure content flows and remove internal scrolling */
    .scroll-content {
        max-height: none;
        height: auto;
        overflow: visible;
        padding: 1.5rem 1rem 2.5rem; /* comfortable padding on mobile */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    /* Hide native/embedded scrollbars on mobile webkit browsers */
    .scroll-content::-webkit-scrollbar {
        display: none;
    }

    /* Hide the desktop-only UI that can block content on small screens */
    .fade-overlay-top,
    .fade-overlay-bottom,
    .scroll-indicator {
        display: none;
    }

    /* Slightly reduce left column padding on small screens */
    .left-column {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        max-width: 100%;
    }
}