/* ================================================================================================
   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;
    }

    /* Disable flip for reduced-motion users */
    .marquee-product.has-inside-image .marquee-card-inner {
        transition: none;
    }

    .marquee-product.has-inside-image:hover .marquee-card-inner {
        transform: none;
    }

    .marquee-product.has-inside-image:hover {
        transform: translateY(-8px) scale(1.05);
    }
}

/* ===== FLIP CARD — GREETING CARDS WITH INSIDE IMAGE ===== */

/*
 * When a portrait card has an inside image, we swap the plain <img> for a
 * flip-card structure:
 *   .marquee-product.has-inside-image   — the outer anchor (perspective host)
 *     .marquee-card-inner               — rotates on hover
 *       .marquee-card-front             — front cover face
 *       .marquee-card-back              — inside page face
 *
 * The existing hover lift (translateY + scale) is removed for flip cards so
 * the two effects don't fight each other; a subtle lift is baked into the
 * flip transform instead.
 */

.marquee-product.has-inside-image {
    perspective: 800px;
    overflow: visible; /* Allow shadow to bleed out while flipping */
    /* Cancel the default hover rule defined earlier */
}

.marquee-product.has-inside-image:hover {
    /* Override the default lift — the flip itself provides the "wow" */
    transform: translateY(-6px);
    box-shadow: 0 24px 30px -6px rgba(0, 0, 0, 0.18),
                0 10px 12px -4px rgba(0, 0, 0, 0.08);
}

.marquee-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.55s cubic-bezier(0.4, 0.2, 0.2, 1);
    border-radius: 0.5rem;
}

.marquee-product.has-inside-image:hover .marquee-card-inner {
    transform: rotateY(180deg);
}

.marquee-card-front,
.marquee-card-back {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0.5rem;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background-color: white;
}

.marquee-card-back {
    transform: rotateY(180deg);
}

.marquee-card-front img,
.marquee-card-back img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}