/* Scroll Indicator */
.scroll-indicator {
   /* position: absolute;*/
    bottom: 48px;
    left: 48px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--m8crc-text-muted);
    opacity: 0;
    animation: fadeUp 0.8s 1s forwards;
}

    .scroll-indicator .line {
        width: 1px;
        height: 48px;
        background: var(--m8crc-border-medium);
        position: relative;
        overflow: hidden;
        
    }
        .scroll-indicator .line::before {
            content: '';
            position: absolute;
            bottom: -6px; /* pushes arrow just below line */
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 6px solid var(--m8crc-border-medium);
        }
        .scroll-indicator .line::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 50%;
            background: var(--m8crc-secondary);
            animation: scrollPulse 1.8s infinite;
        }
        
@keyframes scrollPulse {
    0% {
        transform: translateY(-100%);
    }

    50% {
        transform: translateY(200%);
    }

    100% {
        transform: translateY(200%);
    }
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}