/* ==========================================================================
   IronForge Theme - Animations
   Component animations & micro-interactions.

   Scroll-triggered entrance animations are handled by GSAP (animations.js).
   GSAP sets initial states via gsap.set() — no opacity:0 in CSS.
   ========================================================================== */

/* ---------- Lenis Smooth Scroll ---------- */
html.lenis,
html.lenis body {
	height: auto;
}

.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
	overscroll-behavior: contain;
}

.lenis.lenis-stopped {
	overflow: hidden;
}

/* ---------- Keyframe Animations (still used by component CSS) ---------- */

@keyframes fadeSlideUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes shimmer {
	0% {
		background-position: -200% 0;
	}
	100% {
		background-position: 200% 0;
	}
}

@keyframes pulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.6;
	}
}

@keyframes float {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-8px);
	}
}

@keyframes shake {
	0%, 100% { transform: translateX(0); }
	10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
	20%, 40%, 60%, 80% { transform: translateX(4px); }
}

/* ---------- Component Animations ---------- */

/* Product card image hover */
.product-card-image {
	overflow: hidden;
}

.product-card-image img {
	transition: transform 0.6s var(--ease-out);
}

.product-card:hover .product-card-image img,
.product:hover .product-card-image img {
	transform: scale(1.06);
}

/* Button ripple */
.btn-ripple {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	transform: scale(0);
	animation: ripple 0.6s ease-out;
	pointer-events: none;
}

@keyframes ripple {
	to {
		transform: scale(4);
		opacity: 0;
	}
}

/* Loading skeleton */
.skeleton {
	background: linear-gradient(
		90deg,
		var(--ironforge-warm-gray) 25%,
		var(--ironforge-warm-gray-light) 37%,
		var(--ironforge-warm-gray) 63%
	);
	background-size: 200% 100%;
	animation: shimmer 1.5s ease-in-out infinite;
	border-radius: var(--radius-md);
}

.skeleton-text {
	height: 14px;
	margin-bottom: 8px;
	width: 80%;
}

.skeleton-text:last-child {
	width: 60%;
}

.skeleton-heading {
	height: 24px;
	margin-bottom: 12px;
	width: 50%;
}

.skeleton-image {
	aspect-ratio: 1;
	width: 100%;
}

/* Cart badge bounce */
.cart-count.bounce {
	animation: cartBounce 0.4s var(--ease-spring);
}

@keyframes cartBounce {
	0% { transform: scale(1); }
	50% { transform: scale(1.4); }
	100% { transform: scale(1); }
}

/* Add to cart success */
.added-to-cart {
	animation: addedPulse 0.5s var(--ease-out);
}

@keyframes addedPulse {
	0% {
		box-shadow: 0 0 0 0 rgba(14, 189, 110, 0.4);
	}
	100% {
		box-shadow: 0 0 0 20px rgba(14, 189, 110, 0);
	}
}

/* Image reveal */
.image-reveal {
	position: relative;
	overflow: hidden;
}

.image-reveal::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--ironforge-cream);
	transform-origin: right;
	transition: transform 0.8s var(--ease-out);
}

.image-reveal.revealed::after {
	transform: scaleX(0);
}

/* Parallax container */
.parallax-wrap {
	overflow: hidden;
}

.parallax-element {
	will-change: transform;
}

/* Hover lift */
.hover-lift {
	transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.hover-lift:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

/* Underline grow */
.underline-grow {
	position: relative;
	display: inline-block;
}

.underline-grow::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--ironforge-accent);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--transition-normal);
}

.underline-grow:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* Smooth counter */
.count-up {
	display: inline-block;
	transition: all 0.3s var(--ease-out);
}

/* Page transition */
.page-transition-enter {
	animation: fadeSlideUp 0.4s var(--ease-out);
}

/* Notification slide */
.notification-enter {
	animation: slideInRight 0.4s var(--ease-out);
}

@keyframes slideInRight {
	from {
		opacity: 0;
		transform: translateX(30px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.notification-exit {
	animation: fadeOut 0.3s var(--ease-out) forwards;
}

@keyframes fadeOut {
	to {
		opacity: 0;
		transform: translateX(20px);
	}
}

/* ---------- WooCommerce Specific Animations ---------- */

/* Product hover overlay */
.product-overlay {
	position: absolute;
	inset: 0;
	background: rgba(45, 52, 54, 0);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.3s var(--ease-out);
}

.product:hover .product-overlay {
	background: rgba(45, 52, 54, 0.15);
}

.product-overlay-actions {
	display: flex;
	gap: var(--space-sm);
	opacity: 0;
	transform: translateY(10px);
	transition: all 0.3s var(--ease-out);
}

.product:hover .product-overlay-actions {
	opacity: 1;
	transform: translateY(0);
}

/* Quick view button */
.quick-view-btn,
.wishlist-btn {
	width: 44px;
	height: 44px;
	border-radius: var(--radius-full);
	background: var(--ironforge-white);
	color: var(--ironforge-primary);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all var(--transition-fast);
	box-shadow: var(--shadow-md);
}

.quick-view-btn:hover,
.wishlist-btn:hover {
	background: var(--ironforge-primary);
	color: var(--ironforge-white);
	transform: scale(1.1);
}

/* Sale badge pulse */
.onsale {
	animation: salePulse 2s ease-in-out infinite;
}

@keyframes salePulse {
	0%, 100% {
		box-shadow: 0 2px 8px rgba(222, 75, 83, 0.3);
	}
	50% {
		box-shadow: 0 2px 16px rgba(222, 75, 83, 0.5);
	}
}

/* Gallery image transition */
.product-gallery-image {
	transition: opacity 0.3s ease;
}

/* Star rating fill */
.star-rating span::before {
	transition: width 0.3s var(--ease-out);
}

/* Quantity buttons */
.quantity-btn {
	transition: all var(--transition-fast);
}

.quantity-btn:active {
	transform: scale(0.9);
}

/* Tab content */
.wc-tab-content {
	animation: fadeSlideUp 0.4s var(--ease-out);
}

/* Variation select */
.variations select {
	transition: border-color var(--transition-fast);
}

.variations select:focus {
	border-color: var(--ironforge-accent);
	box-shadow: 0 0 0 3px rgba(140, 113, 69, 0.1);
}