/* ============================================
   HERO FLOATING CARDS - MOBILE INTERACTION
   Makes cards tappable and animated on mobile devices only
   ============================================ */

/* Mobile only styles (below 768px) */
@media (max-width: 768px) {

    /* Make floating cards interactive on mobile */
    .hero-floating-card {
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
        -webkit-tap-highlight-color: rgba(147, 51, 234, 0.2);
        transition: all 0.15s ease;
        position: absolute;
    }

    /* Random floating animations for each card */
    .hero-card-1 {
        animation: float-random-1 8s ease-in-out infinite;
    }

    .hero-card-2 {
        animation: float-random-2 10s ease-in-out infinite;
        animation-delay: 1s;
    }

    .hero-card-3 {
        animation: float-random-3 9s ease-in-out infinite;
        animation-delay: 2s;
    }

    /* Random floating animation keyframes */
    @keyframes float-random-1 {
        0%, 100% {
            transform: translate(0, 0) rotate(0deg);
        }
        25% {
            transform: translate(15px, -20px) rotate(2deg);
        }
        50% {
            transform: translate(-10px, 10px) rotate(-1deg);
        }
        75% {
            transform: translate(20px, 5px) rotate(1deg);
        }
    }

    @keyframes float-random-2 {
        0%, 100% {
            transform: translate(0, 0) rotate(0deg);
        }
        20% {
            transform: translate(-15px, 15px) rotate(-2deg);
        }
        40% {
            transform: translate(10px, -10px) rotate(1deg);
        }
        60% {
            transform: translate(-20px, -5px) rotate(-1deg);
        }
        80% {
            transform: translate(15px, 10px) rotate(2deg);
        }
    }

    @keyframes float-random-3 {
        0%, 100% {
            transform: translate(0, 0) rotate(0deg);
        }
        30% {
            transform: translate(-20px, -15px) rotate(1deg);
        }
        60% {
            transform: translate(10px, 20px) rotate(-2deg);
        }
        90% {
            transform: translate(-5px, -10px) rotate(1deg);
        }
    }

    /* Add subtle hint that cards are tappable */
    .hero-floating-card::after {
        content: '';
        position: absolute;
        bottom: 8px;
        right: 8px;
        width: 6px;
        height: 6px;
        background: rgba(147, 51, 234, 0.5);
        border-radius: 50%;
        animation: pulse-hint 2s ease-in-out infinite;
    }

    @keyframes pulse-hint {
        0%, 100% {
            opacity: 0.5;
            transform: scale(1);
        }
        50% {
            opacity: 1;
            transform: scale(1.3);
        }
    }

    /* Active state feedback - pause animation when tapped */
    .hero-floating-card:active {
        animation-play-state: paused;
        opacity: 0.8;
    }

    /* Enhance card shadow on mobile for better visibility */
    .hero-floating-card {
        box-shadow:
            0 10px 30px rgba(0, 0, 0, 0.15),
            0 4px 12px rgba(147, 51, 234, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }

    /* Add ripple effect on tap */
    .hero-floating-card {
        overflow: hidden;
    }

    /* Improve card info visibility on mobile */
    .hero-card-info {
        pointer-events: none; /* Let clicks pass through to parent */
    }

    /* Ensure images don't interfere with clicks */
    .hero-card-icon-img {
        pointer-events: none;
    }

    .hero-card-icon-img img {
        pointer-events: none;
    }
}

/* Desktop styles - ensure cards are NOT interactive */
@media (min-width: 769px) {

    .hero-floating-card {
        cursor: default;
        pointer-events: auto;
    }

    /* Remove mobile hint dot on desktop */
    .hero-floating-card::after {
        display: none;
    }

    /* Prevent any selection on desktop */
    .hero-floating-card {
        user-select: none;
        -webkit-user-select: none;
    }
}

/* ============================================
   LOADING STATE (when navigating)
   ============================================ */

.hero-floating-card.navigating {
    opacity: 0.6;
    transform: scale(0.95);
    pointer-events: none;
}

/* ============================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================ */

@media (max-width: 768px) {

    /* Add focus state for keyboard navigation */
    .hero-floating-card:focus {
        outline: 2px solid #9333ea;
        outline-offset: 4px;
    }

    /* Improve contrast for better readability */
    .hero-card-name,
    .hero-card-price {
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }
}

/* ============================================
   REDUCED MOTION SUPPORT
   ============================================ */

@media (prefers-reduced-motion: reduce) {

    .hero-floating-card {
        transition: none;
    }

    .hero-floating-card::after {
        animation: none;
    }

    .hero-floating-card:active {
        transform: none !important;
        opacity: 0.9;
    }
}