/* ==========================================================================
   Maple Aura — animations.css
   One easing language: --ma-ease (soft) and --ma-ease-out (expo-out, for entrances).
   Everything here is transform/opacity only to avoid layout shifts and scroll jank.
   ========================================================================== */

@keyframes ma-rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes ma-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ma-fade-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes ma-img-reveal { from { clip-path: inset(100% 0 0 0 round 999px 999px 18px 18px); } to { clip-path: inset(0 0 0 0 round 999px 999px 18px 18px); } }
@keyframes ma-img-settle { from { transform: scale(1.18); } to { transform: scale(1); } }
@keyframes ma-hero-wipe { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes ma-orb { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes ma-line-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ma-bump { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
@keyframes ma-pop { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 70% { transform: scale(.9); } 100% { transform: scale(1); } }
@keyframes ma-spin { to { transform: rotate(360deg); } }
@keyframes ma-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes ma-shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }
@keyframes ma-check-in { from { transform: scale(0) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Hero entrance (staggered) ---------- */
.ma-hero__slide.is-active .ma-hero__eyebrow { animation: ma-rise .9s var(--ma-ease-out) .15s both; }
.ma-hero__slide.is-active .ma-hero__title { animation: ma-rise 1.1s var(--ma-ease-out) .28s both; }
.ma-hero__slide.is-active .ma-hero__title::after { transform-origin: left; animation: ma-line-grow 1s var(--ma-ease-out) .9s both; }
.ma-hero__slide.is-active .ma-hero__text { animation: ma-rise 1s var(--ma-ease-out) .5s both; }
.ma-hero__slide.is-active .ma-hero__actions { animation: ma-rise 1s var(--ma-ease-out) .68s both; }
.ma-hero__slide.is-active .ma-hero__frame { animation: ma-hero-wipe 1.4s var(--ma-ease-out) .05s both; }
.ma-hero__slide.is-active .ma-hero__img,
.ma-hero__slide.is-active .ma-hero__frame .ma-ph { animation: ma-img-settle 2.2s var(--ma-ease-out) .1s both; }
.ma-hero__slide.is-active .ma-hero__orb { animation: ma-orb 1.8s var(--ma-ease-out) .5s both; }
.ma-hero__orb { will-change: transform; }


/* ---------- Scroll reveals (progressive: content is visible without JS) ---------- */
.js [data-reveal],
.js .ma-carousel .products > li,
.js .ma-bestsellers .products > li,
.js .woocommerce:not(.ma-wishlist) ul.products.ma-products > li {
	opacity: 0; transform: translateY(32px);
	transition: opacity .9s var(--ma-ease-out), transform 1.1s var(--ma-ease-out);
	transition-delay: calc(var(--i, 0) * 90ms);
}
.js [data-reveal].is-in,
.js .ma-carousel .products > li.is-in,
.js .ma-bestsellers .products > li.is-in,
.js .woocommerce ul.products.ma-products > li.is-in { opacity: 1; transform: none; }
.js .ma-section-head[data-reveal] { transform: translateY(20px); }

/* Shop grid cards: staggered rise (class added by animations.js) */
.js ul.products:not(.ma-products) > li { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ma-ease-out), transform .9s var(--ma-ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.js ul.products:not(.ma-products) > li.is-in { opacity: 1; transform: none; }

/* Category / collection hover: slow image scale is declared with each component. */
.ma-catcard__media, .ma-collcard__media, .ma-card__media { will-change: auto; }

/* ---------- Header / nav micro-interactions ---------- */
.ma-iconbtn svg { transition: transform .4s var(--ma-ease-out); }
.ma-iconbtn:hover svg { transform: translateY(-1px) scale(1.06); }

/* ---------- Product-card feedback ---------- */
.woocommerce a.button.loading::after,
.woocommerce button.button.loading::after {
	content: ''; display: inline-block; width: 14px; height: 14px; margin-left: 4px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ma-spin .7s linear infinite;
}
.woocommerce a.button.added::after,
.woocommerce button.button.added::after {
	content: '✓'; display: inline-block; margin-left: 4px; font-size: 1em; animation: ma-check-in .5s var(--ma-ease-out);
}
.woocommerce a.added_to_cart { display: none !important; }

/* Skeleton shimmer used while wishlist / load-more content is fetched */
.ma-skeleton { min-height: 220px; border-radius: var(--ma-radius-lg); background: linear-gradient(100deg, var(--ma-blush) 30%, #fff 50%, var(--ma-blush) 70%); background-size: 200% 100%; animation: ma-shimmer 1.4s linear infinite; }

/* Page fade-in for inner pages */
.ma-pagehero__inner > * { animation: ma-rise .9s var(--ma-ease-out) both; }
.ma-pagehero__inner > *:nth-child(2) { animation-delay: .08s; }
.ma-pagehero__inner > *:nth-child(3) { animation-delay: .16s; }

/* Notices slide in */
.woocommerce-message, .woocommerce-error, .woocommerce-info { animation: ma-fade-down .5s var(--ma-ease-out) both; }

/* ---------- Respect reduced-motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
	.js [data-reveal], .js ul.products > li { opacity: 1 !important; transform: none !important; }
}