/* ==========================================================================
   Saffron Animations
   Purposeful, GPU-friendly motion for the Zafrya storefront.
   Principles (Emil Kowalski / animations.dev):
   - Only animate transform & opacity (skip layout/paint, run on GPU)
   - ease-out for entrances, ease for hovers, ease-in-out for on-screen moves
   - Start from scale(0.96), never scale(0)
   - Guard hover effects for fine pointers only
   - Always honour prefers-reduced-motion
   ========================================================================== */

:root {
    /* Easing blueprint */
    --saffron-ease-out: cubic-bezier(0.23, 1, 0.32, 1);        /* ease-out-quint */
    --saffron-ease-out-soft: cubic-bezier(0.215, 0.61, 0.355, 1); /* ease-out-cubic */
    --saffron-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
    /* Durations */
    --saffron-reveal-duration: 600ms;
    --saffron-ui-duration: 200ms;
}

/* --------------------------------------------------------------------------
   1. Scroll-reveal system
   Elements get a `data-animate` value + start hidden; JS adds `.is-visible`
   once they enter the viewport. Stagger is driven by --saffron-delay.
   -------------------------------------------------------------------------- */

[data-animate] {
    opacity: 0;
    will-change: transform, opacity;
    transition:
        opacity var(--saffron-reveal-duration) var(--saffron-ease-out),
        transform var(--saffron-reveal-duration) var(--saffron-ease-out);
    transition-delay: var(--saffron-delay, 0ms);
}

[data-animate="fade-up"]    { transform: translate3d(0, 28px, 0); }
[data-animate="fade-down"]  { transform: translate3d(0, -28px, 0); }
[data-animate="fade-left"]  { transform: translate3d(36px, 0, 0); }
[data-animate="fade-right"] { transform: translate3d(-36px, 0, 0); }
[data-animate="fade"]       { transform: none; }
[data-animate="zoom-in"]    { transform: scale(0.96); }

/* Revealed state — settle to natural position */
[data-animate].is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

/* Once settled, release the GPU hint to keep scrolling cheap */
[data-animate].is-settled {
    will-change: auto;
}

/* --------------------------------------------------------------------------
   2. Product card microinteractions
   Cards are browsed often, so the lift is subtle & fast (ease, not bounce).
   Hover only on fine pointers to avoid sticky :hover on touch.
   -------------------------------------------------------------------------- */

.saffron-product-card {
    transition:
        transform var(--saffron-ui-duration) ease,
        box-shadow var(--saffron-ui-duration) ease;
}

.saffron-product-card .saffron-thumb img {
    transition: transform 400ms var(--saffron-ease-out-soft);
    will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
    .saffron-product-card:hover {
        transform: translate3d(0, -6px, 0);
        box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.28);
    }

    .saffron-product-card:hover .saffron-thumb img {
        transform: scale(1.06);
    }
}

/* Keep the image zoom from spilling out of the card */
.saffron-product-card .saffron-thumb {
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   3. Buttons — tactile press feedback
   Instant scale on :active makes clicks feel responsive (microinteraction).
   -------------------------------------------------------------------------- */

.tp-btn,
.tp-btn-2,
.tp-blog-btn,
.btn-primary,
button.tp-cart-btn,
.tp-product-add-cart-btn {
    transition: transform 120ms var(--saffron-ease-out-soft),
                background-color 150ms ease,
                color 150ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .tp-btn:hover,
    .tp-btn-2:hover,
    .tp-blog-btn:hover {
        transform: translate3d(0, -2px, 0);
    }
}

.tp-btn:active,
.tp-btn-2:active,
.tp-blog-btn:active,
.btn-primary:active,
button.tp-cart-btn:active,
.tp-product-add-cart-btn:active {
    transform: scale(0.97);
}

/* --------------------------------------------------------------------------
   4. Category / feature / blog tiles — gentle hover lift
   -------------------------------------------------------------------------- */

.tp-category-item,
.tp-feature-item,
.tp-blog-grid-item,
.saffron-category-tile {
    transition: transform var(--saffron-ui-duration) ease,
                box-shadow var(--saffron-ui-duration) ease;
}

@media (hover: hover) and (pointer: fine) {
    .tp-category-item:hover,
    .tp-feature-item:hover,
    .tp-blog-grid-item:hover,
    .saffron-category-tile:hover {
        transform: translate3d(0, -5px, 0);
    }

    .tp-blog-grid-item:hover .tp-blog-grid-thumb img {
        transform: scale(1.05);
    }
}

.tp-blog-grid-thumb img {
    transition: transform 400ms var(--saffron-ease-out-soft);
}

.tp-blog-grid-thumb {
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   5b. Custom Zafrya homepage components
   (categorytiles, newsaffronproductcard, stepfeatures, blog-posts, collab-room)
   Product card class is dynamic: spcard-<uid>-card / -img-wrap, matched by
   chaining two substring selectors.
   -------------------------------------------------------------------------- */

.ct-item,
[class*="spcard-"][class*="-card"],
.stepfeatures__card,
.fob-card,
.cr-cell {
    transition: transform var(--saffron-ui-duration) ease,
                box-shadow var(--saffron-ui-duration) ease;
}

/* Image zoom containers — clip the overflow so the scale stays inside */
[class*="spcard-"][class*="-img-wrap"],
.fob-thumb,
.ct-tile {
    overflow: hidden;
}

[class*="spcard-"][class*="-img-wrap"] img,
.fob-img,
.fob-thumb img {
    transition: transform 450ms var(--saffron-ease-out-soft);
    will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
    .ct-item:hover,
    [class*="spcard-"][class*="-card"]:hover,
    .stepfeatures__card:hover,
    .fob-card:hover,
    .cr-cell:hover {
        transform: translate3d(0, -6px, 0);
    }

    [class*="spcard-"][class*="-card"]:hover {
        box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.28);
    }

    [class*="spcard-"][class*="-card"]:hover [class*="-img-wrap"] img,
    .fob-card:hover .fob-img,
    .fob-card:hover .fob-thumb img {
        transform: scale(1.06);
    }
}

/* --------------------------------------------------------------------------
   5. Accessibility — disable all of the above for reduced-motion users.
   No !important; just neutralise transitions and reveal everything.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    [data-animate],
    [data-animate].is-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .saffron-product-card,
    .saffron-product-card .saffron-thumb img,
    .tp-btn,
    .tp-btn-2,
    .tp-blog-btn,
    .btn-primary,
    .tp-category-item,
    .tp-feature-item,
    .tp-blog-grid-item,
    .saffron-category-tile,
    .tp-blog-grid-thumb img,
    .ct-item,
    [class*="spcard-"][class*="-card"],
    [class*="spcard-"][class*="-img-wrap"] img,
    .stepfeatures__card,
    .fob-card,
    .fob-img,
    .cr-cell {
        transition: none;
    }

    .saffron-product-card:hover,
    .tp-category-item:hover,
    .tp-feature-item:hover,
    .tp-blog-grid-item:hover,
    .saffron-category-tile:hover,
    .ct-item:hover,
    [class*="spcard-"][class*="-card"]:hover,
    .stepfeatures__card:hover,
    .fob-card:hover,
    .cr-cell:hover {
        transform: none;
    }
}