/* ===================================
   Mobile Swipe Hints
   Floating arrow indicators
   =================================== */

.swipe-hints {
    position: absolute;
    top: -10px; /* Just above the cards, below filter buttons */
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 50;
    opacity: 0;
    transition: opacity 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    /* No background, just text and arrows */
}

.swipe-hints.show {
    opacity: 0.9;
}

.swipe-hint {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(139, 126, 116, 0.8); /* Default neutral color */
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.5)); /* Subtle shadow for readability */
}

.swipe-hint svg {
    width: 18px;
    height: 18px;
}

.swipe-hint-text {
    font-size: 0.875rem;
    color: rgba(139, 126, 116, 0.8); /* Default neutral color */
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
    flex-shrink: 0;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5); /* Subtle shadow for readability */
}

.swipe-hint-left {
    animation: bounceLeft 2s ease-in-out infinite;
}

.swipe-hint-right {
    animation: bounceRight 2s ease-in-out infinite;
}

/* Bounce animation for the arrows */

@keyframes bounceLeft {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-4px);
    }
}

@keyframes bounceRight {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(4px);
    }
}

/* Light theme adjustment */
.architecture-theme .swipe-hint,
.architecture-theme .swipe-hint-text {
    color: rgba(139, 126, 116, 0.7);
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
    filter: drop-shadow(0 1px 3px rgba(255, 255, 255, 0.8));
}

/* Dark theme */
.coding-theme .swipe-hint,
.coding-theme .swipe-hint-text {
    color: rgba(232, 232, 232, 0.7);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

/* Hide on desktop */
@media (min-width: 769px) {
    .swipe-hints {
        display: none !important;
    }
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {
    .swipe-hints {
        gap: 10px;
    }
    
    .swipe-hint-text {
        font-size: 0.8125rem;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .swipe-hints {
        gap: 8px;
        top: -8px; /* Closer to cards on small screens */
    }
    
    .swipe-hint-text {
        font-size: 0.75rem;
    }
    
    .swipe-hint svg {
        width: 16px;
        height: 16px;
    }
}

/* Respect user's motion preferences - WCAG 2.2 Compliance */
@media (prefers-reduced-motion: reduce) {
    .swipe-hint-left,
    .swipe-hint-right {
        animation: none; /* Disable bouncing animations */
    }
    
    .swipe-hints {
        transition: none; /* Disable opacity transition */
    }
}