/* ============================================================
   Custom utilities — supplements Tailwind Play CDN
   ============================================================ */

/* 2-line text clamp (fallback; Tailwind's line-clamp-2 may need plugin) */
.clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Hide scrollbar but keep scrolling (horizontal pill row) */
.no-scrollbar::-webkit-scrollbar          { display: none; }
.no-scrollbar                             { -ms-overflow-style: none; scrollbar-width: none; }

/* Image-loading shimmer (used when lazy-load placeholder is visible) */
@keyframes shimmer {
    from { background-position: -200px 0; }
    to   { background-position: calc(200px + 100%) 0; }
}
.shimmer {
    background: linear-gradient(90deg, #e5e7eb 0%, #fff 40%, #e5e7eb 100%);
    background-size: 200px 100%;
    animation: shimmer 1.2s ease-in-out infinite;
}

/* ── Dynamic Effects ── */

/* Animated gradient for hero section */
@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.hero-gradient {
    background-size: 200% 200%;
    animation: gradient-shift 8s ease infinite;
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Enhanced focus states for accessibility */
*:focus-visible {
    outline: 2px solid #be123c;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Floating animation for badges */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-4px); }
}
.animate-float {
    animation: float 3s ease-in-out infinite;
}

/* Pulse animation for loading states */
@keyframes pulse-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
.pulse-soft {
    animation: pulse-soft 2s ease-in-out infinite;
}

/* Image zoom on parent hover (for product cards) */
.zoom-parent:hover .zoom-child {
    transform: scale(1.1);
}

/* Backdrop blur for modals/overlays (future use) */
.backdrop-blur-soft {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Custom scrollbar for desktop (optional enhancement) */
@media (min-width: 768px) {
    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }
    ::-webkit-scrollbar-track {
        background: #f1f1f1;
    }
    ::-webkit-scrollbar-thumb {
        background: #be123c;
        border-radius: 5px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: #9f102e;
    }
}