/* =============================================================
   SM Furniture — Animations
   Scroll-reveal classes are toggled to .in-view by main.js using
   IntersectionObserver. Respects prefers-reduced-motion.
   ============================================================= */

.fade-up, .fade-left, .fade-right, .scale-in {
	opacity: 0;
	transition: opacity 0.7s ease, transform 0.7s ease;
	will-change: opacity, transform;
}
.fade-up { transform: translateY(32px); }
.fade-left { transform: translateX(-32px); }
.fade-right { transform: translateX(32px); }
.scale-in { transform: scale(0.94); }

.fade-up.in-view,
.fade-left.in-view,
.fade-right.in-view,
.scale-in.in-view {
	opacity: 1;
	transform: none;
}

/* Hero content always animates in immediately (above the fold, no observer needed) */
.hero-inner.fade-up { animation: smf-hero-in 0.9s ease forwards; opacity: 0; }

@keyframes smf-hero-in {
	from { opacity: 0; transform: translateY(24px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes smf-scroll-bounce {
	0%, 100% { transform: translate(-50%, 0); opacity: 1; }
	50% { transform: translate(-50%, 10px); opacity: 0.4; }
}

/* Card hover lift is defined alongside each component in theme.css;
   this file centralizes shared micro-interactions only. */
.btn { will-change: transform; position: relative; overflow: hidden; }

/* Button ripple — a small expanding circle on click, driven by main.js
   setting --ripple-x/--ripple-y custom properties at click position. */
.btn .btn-ripple {
	position: absolute; border-radius: 50%; transform: scale(0);
	background: rgba(255,255,255,0.45); pointer-events: none;
	animation: smf-ripple 0.6s ease-out forwards;
}
@keyframes smf-ripple {
	to { transform: scale(2.6); opacity: 0; }
}

/* Subtle 3D tilt on category/product cards, driven by main.js listening
   to mousemove and setting --tilt-x/--tilt-y. Skipped on touch devices. */
.category-card, .product-card {
	transform-style: preserve-3d;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.category-card.tilt-active, .product-card.tilt-active {
	transform: perspective(800px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-6px);
}

/* Hero parallax — background position shifts slightly on scroll via main.js
   setting a CSS variable, kept subtle so it doesn't fight the overlay. */
.hero { background-position: center calc(50% + var(--parallax-offset, 0px)); }

/* Mobile menu slide handled via .is-open transform in theme.css;
   backdrop fade for when it's open. */
.mobile-menu-backdrop {
	position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1000;
	opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.mobile-menu-backdrop.is-visible { opacity: 1; pointer-events: auto; }

/* Generic stagger for grids of reveal items — covers product/gallery/review
   grids without needing per-loop inline delays in PHP. Category grid already
   sets its own inline delay (12 items don't tile cleanly on nth-child(4n)
   across responsive breakpoints), so it's excluded here. */
.product-grid .fade-up:nth-child(4n+1),
.gallery-grid .fade-up:nth-child(4n+1),
.reviews-grid .fade-up:nth-child(3n+1),
.content-grid .fade-up:nth-child(3n+1) { transition-delay: 0s; }

.product-grid .fade-up:nth-child(4n+2),
.gallery-grid .fade-up:nth-child(4n+2),
.reviews-grid .fade-up:nth-child(3n+2),
.content-grid .fade-up:nth-child(3n+2) { transition-delay: 0.08s; }

.product-grid .fade-up:nth-child(4n+3),
.gallery-grid .fade-up:nth-child(4n+3),
.reviews-grid .fade-up:nth-child(3n+3),
.content-grid .fade-up:nth-child(3n+3) { transition-delay: 0.16s; }

.product-grid .fade-up:nth-child(4n+4),
.gallery-grid .fade-up:nth-child(4n+4) { transition-delay: 0.24s; }

/* Respect reduced motion preference for accessibility */
@media (prefers-reduced-motion: reduce) {
	.fade-up, .fade-left, .fade-right, .scale-in, .hero-inner.fade-up {
		transition: none; animation: none; opacity: 1; transform: none;
	}
	html { scroll-behavior: auto; }
}