/* =====================================================
   Cake Palace — Enhancements
   Loaded after style.css. Covers:
   - 3-column product grid on the category/listing page
   - Reveal-on-scroll animation for sections
   - Slider, product card and product-page motion
   - Name-on-Cake / Wishes field styling
   ===================================================== */

/* ---------- Category page: 3 columns instead of 4 ---------- */
.listing-layout .product-grid {
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1100px) {
    .listing-layout .product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .listing-layout .product-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Reveal-on-scroll ---------- */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
    will-change: opacity, transform;
}
.reveal.in-view {
    opacity: 1;
    transform: none;
}
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }

/* Stagger product/category cards inside a revealed grid */
.product-grid.reveal-stagger .product-card,
.category-grid.reveal-stagger .category-card {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .55s ease, transform .55s ease;
}
.product-grid.reveal-stagger.in-view .product-card,
.category-grid.reveal-stagger.in-view .category-card,
.reveal.in-view .product-grid.reveal-stagger .product-card,
.reveal.in-view .category-grid.reveal-stagger .category-card {
    opacity: 1;
    transform: none;
}
.product-grid.reveal-stagger.in-view .product-card:nth-child(1),
.reveal.in-view .product-grid.reveal-stagger .product-card:nth-child(1) { transition-delay: .02s; }
.product-grid.reveal-stagger.in-view .product-card:nth-child(2),
.reveal.in-view .product-grid.reveal-stagger .product-card:nth-child(2) { transition-delay: .08s; }
.product-grid.reveal-stagger.in-view .product-card:nth-child(3),
.reveal.in-view .product-grid.reveal-stagger .product-card:nth-child(3) { transition-delay: .14s; }
.product-grid.reveal-stagger.in-view .product-card:nth-child(4),
.reveal.in-view .product-grid.reveal-stagger .product-card:nth-child(4) { transition-delay: .2s; }
.product-grid.reveal-stagger.in-view .product-card:nth-child(5),
.reveal.in-view .product-grid.reveal-stagger .product-card:nth-child(5) { transition-delay: .26s; }
.product-grid.reveal-stagger.in-view .product-card:nth-child(6),
.reveal.in-view .product-grid.reveal-stagger .product-card:nth-child(6) { transition-delay: .32s; }
.category-grid.reveal-stagger.in-view .category-card:nth-child(1),
.reveal.in-view .category-grid.reveal-stagger .category-card:nth-child(1) { transition-delay: .02s; }
.category-grid.reveal-stagger.in-view .category-card:nth-child(2),
.reveal.in-view .category-grid.reveal-stagger .category-card:nth-child(2) { transition-delay: .06s; }
.category-grid.reveal-stagger.in-view .category-card:nth-child(3),
.reveal.in-view .category-grid.reveal-stagger .category-card:nth-child(3) { transition-delay: .1s; }
.category-grid.reveal-stagger.in-view .category-card:nth-child(4),
.reveal.in-view .category-grid.reveal-stagger .category-card:nth-child(4) { transition-delay: .14s; }
.category-grid.reveal-stagger.in-view .category-card:nth-child(5),
.reveal.in-view .category-grid.reveal-stagger .category-card:nth-child(5) { transition-delay: .18s; }
.category-grid.reveal-stagger.in-view .category-card:nth-child(6),
.reveal.in-view .category-grid.reveal-stagger .category-card:nth-child(6) { transition-delay: .22s; }

@media (prefers-reduced-motion: reduce) {
    .reveal, .product-grid.reveal-stagger .product-card, .category-grid.reveal-stagger .category-card {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ---------- Product card hover motion (subtle lift + shadow) ---------- */
.product-card {
    transition: transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease;
}
.product-card:hover {
    transform: translateY(-8px) scale(1.015);
}
.product-media .cake-swatch img,
.product-media img {
    transition: transform .45s ease;
}
.product-card:hover .product-media img {
    transform: scale(1.06);
}

/* ---------- Homepage banner slider: slide + fade instead of plain crossfade ---------- */
.banner-slide {
    transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1);
    transform: scale(1.03);
}
.banner-slide.active {
    transform: scale(1);
}
.banner-slide-overlay > .container > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s ease, transform .7s ease;
}
.banner-slide.active .banner-slide-overlay > .container > * {
    opacity: 1;
    transform: none;
}
.banner-slide.active .banner-slide-overlay > .container > *:nth-child(1) { transition-delay: .1s; }
.banner-slide.active .banner-slide-overlay > .container > *:nth-child(2) { transition-delay: .2s; }
.banner-slide.active .banner-slide-overlay > .container > *:nth-child(3) { transition-delay: .3s; }

/* ---------- Single product page: entrance animation ---------- */
.pd-gallery.reveal,
.pd-info.reveal {
    transform: translateY(18px);
}
.pd-gallery .cake-swatch,
.pd-gallery img {
    transition: transform .4s ease;
}
.pd-gallery:hover .cake-swatch,
.pd-gallery:hover img {
    transform: scale(1.02);
}

/* Add-to-cart button: gentle pulse when a variation/add-on selection changes the price */
@keyframes priceUpdatePulse {
    0% { transform: scale(1); }
    30% { transform: scale(1.06); }
    100% { transform: scale(1); }
}
.price-pulse { animation: priceUpdatePulse .35s ease; }

/* ---------- Name on Cake / Wishes fields ---------- */
.pd-info .field input[type="text"]::placeholder { color: var(--ink-600, #6B5A68); opacity: .6; }

/* ---------- FAQ / testimonial / instagram cards: gentle entrance already handled by .reveal ---------- */
.testimonial-card, .faq-item, .instagram-card {
    transition: transform .3s ease, box-shadow .3s ease;
}
.testimonial-card:hover { transform: translateY(-4px); }