/* ============================================================
   styles.css — Flower Arena (Tailwind Addons)
   Only custom CSS for things Tailwind doesn't handle natively.
   ============================================================ */

/* ── Custom Hero Background ────────────────────────────────── */
.hero-bg {
    background: linear-gradient(135deg, #1e1008 0%, #3d1f0e 50%, #6b2d10 100%);
}

/* ── Carousel Scrolling (Hide Scrollbars) ───────────────────── */
.carousel {
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.carousel::-webkit-scrollbar {
    display: none;
}

/* ── #2 Product Motion ───────────────────────────────────────── */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.section-animate {
    animation: fadeInUp 0.4s ease-out forwards;
}

.product-card {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.product-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.product-card:hover .card-image-wrapper img {
    transform: scale(1.1);
}

/* ── #3 Auto-Scrolling Animation ────────────────────────────── */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }

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

/* Only apply auto-scroll if JS is active and populates items */
.auto-scroll {
    display: flex !important;
    white-space: nowrap;
    animation: marquee 30s linear infinite;
    /* Slow, smooth scroll */
}

.auto-scroll:hover {
    animation-play-state: paused;
}

/* ── Modal Animations ───────────────────────────────────────── */
#product-modal.active {
    display: flex;
}

#product-modal.active #modal-content {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* ── Card & Image Specifics ─────────────────────────────────── */
.card-image-wrapper {
    background: linear-gradient(135deg, #fce4ec, #f8bbd0);
    overflow: hidden;
}

/* ── Back to Top Visibility ─────────────────────────────────── */
#back-to-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* ── Loading Spinner Animation ─────────────────────────────── */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin-slow {
    animation: spin 3s linear infinite;
}