/* ===================================
   Mobile Auto-Scroll Animation for Social Section
   Only applies to mobile devices (max-width: 767px)
   =================================== */

/* Mobile Auto-Scroll Animation Styles */
@media (max-width: 767px) {
    .social-feed-grid.auto-scrolling {
        scroll-behavior: smooth;
    }

    /* Scroll hint indicator container */
    .social-section .container {
        position: relative;
    }

    /* Scroll indicator arrow */
    .scroll-indicator-arrow {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.25rem;
        color: var(--primary-color);
        animation: scrollArrowBounce 1.2s ease-in-out infinite;
        z-index: 15;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s ease;
        background: rgba(255, 255, 255, 0.95);
        padding: 0.5rem;
        border-radius: 50%;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    .scroll-indicator-arrow.visible {
        opacity: 0.95;
    }

    @keyframes scrollArrowBounce {

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

        50% {
            transform: translateY(-50%) translateX(6px);
        }
    }
}

/* Hide scroll indicator on desktop/tablet */
@media (min-width: 768px) {
    .scroll-indicator-arrow {
        display: none !important;
    }
}

/* Reduced motion - disable auto-scroll animations */
@media (prefers-reduced-motion: reduce) {
    .scroll-indicator-arrow {
        display: none !important;
    }

    .social-feed-grid.auto-scrolling {
        scroll-behavior: auto !important;
    }
}