/* ================================================================================================
   HERO PRODUCTS MARQUEE BAND
   
   Full-width scrolling marquee of featured products INSIDE the campaign hero section
   - Continuous slow scroll animation
   - Full screen width (breaks out of container)
   - Shows watermarked product thumbnails
   - Seamless infinite loop
   - Respects reduced motion preferences
   
   Author: Generated for WrittenExpressions
   Dependencies: aa-variables.css
================================================================================================ */

/* ===== MARQUEE CONTAINER ===== */
.hero-products-marquee {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: 0;
    margin-bottom: 0;
    overflow: hidden;
    padding: var(--aa-spacing-4) 0;
    /* Subtle gradient overlay on edges for fade effect */
    -webkit-mask-image: linear-gradient( to right, transparent 0%, black 5%, black 95%, transparent 100% );
    mask-image: linear-gradient( to right, transparent 0%, black 5%, black 95%, transparent 100% );
}

/* ===== MARQUEE TRACK (Scrolling Container) ===== */
.marquee-track {
    display: flex;
    align-items: center; /* Vertically center all products */
    gap: 2rem;
    animation: marquee-scroll 60s linear infinite;
    /* Pause on hover for user interaction */
    animation-play-state: running;
    min-height: 252px; /* Height of tallest item (portrait greeting cards) */
}

.marquee-track:hover {
    animation-play-state: paused;
}

/* ===== INFINITE SCROLL ANIMATION ===== */
@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Move by 50% (half the track, since we duplicate products) */
        transform: translateX(-50%);
    }
}

/* ===== PRODUCT CARD IN MARQUEE ===== */
.marquee-product {
    flex-shrink: 0;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 
                0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* Portrait: Greeting Cards (5x7 aspect ratio) */
.marquee-product.product-portrait {
    width: 180px;
    height: 252px; /* 180 * (7/5) = 252 */
}

/* Landscape: Postcards (6x4 aspect ratio) */
.marquee-product.product-landscape {
    width: 270px;
    height: 180px; /* 270 * (4/6) = 180 */
}

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

.marquee-product img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Show full image without cropping */
    display: block;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 768px) {
    .hero-products-marquee {
        margin-top: 0;
        margin-bottom: 0;
        padding: 1.5rem 0;
    }
    
    .marquee-track {
        gap: 1.5rem;
        animation-duration: 45s;
        min-height: 196px; /* Height of tallest item on tablet */
    }
    
    /* Portrait: Greeting Cards (5x7) */
    .marquee-product.product-portrait {
        width: 140px;
        height: 196px; /* 140 * (7/5) */
    }
    
    /* Landscape: Postcards (6x4) */
    .marquee-product.product-landscape {
        width: 210px;
        height: 140px; /* 210 * (4/6) */
    }
}

@media (max-width: 480px) {
    .hero-products-marquee {
        padding: 1rem 0;
    }
    
    .marquee-track {
        gap: 1rem;
        animation-duration: 30s;
        min-height: 154px; /* Height of tallest item on mobile */
    }
    
    /* Portrait: Greeting Cards (5x7) */
    .marquee-product.product-portrait {
        width: 110px;
        height: 154px; /* 110 * (7/5) */
    }
    
    /* Landscape: Postcards (6x4) */
    .marquee-product.product-landscape {
        width: 165px;
        height: 110px; /* 165 * (4/6) */
    }
}

/* ===== ACCESSIBILITY: REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    .marquee-track {
        animation: none;
    }
    
    /* Fallback: static horizontal scroll */
    .hero-products-marquee {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        -webkit-mask-image: none;
        mask-image: none;
    }
    
    .marquee-product {
        transition: none;
    }
    
    .marquee-product:hover {
        transform: none;
    }
}