/* =================================================================
   PEACH TCG — Animation Styles
   CSS animations that complement GSAP
================================================================= */

/* Hero gradient bg pulse */
@keyframes hero-bg-shift {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

/* Particle dots floating in hero */
.hero-particle {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	will-change: transform, opacity;
}

.hero-particle--sm {
	width: 4px; height: 4px;
	background: var(--peach-primary);
}
.hero-particle--md {
	width: 8px; height: 8px;
	background: var(--peach-light);
}
.hero-particle--lg {
	width: 14px; height: 14px;
	background: rgba(247, 168, 130, 0.4);
}
.hero-particle--holo {
	width: 6px; height: 6px;
	background: var(--holo-blue);
}

/* Floating animation for hero cards */
@keyframes float-1 {
	0%, 100% { transform: translateY(0) rotate(-4deg); }
	50%       { transform: translateY(-16px) rotate(-2deg); }
}
@keyframes float-2 {
	0%, 100% { transform: translateY(0) rotate(3deg); }
	50%       { transform: translateY(-22px) rotate(6deg); }
}
@keyframes float-3 {
	0%, 100% { transform: translateY(0) rotate(-1deg); }
	50%       { transform: translateY(-12px) rotate(-4deg); }
}

/* Card tilt on hover (3D effect) */
.product-card {
	transform-style: preserve-3d;
	perspective: 1000px;
}

/* Peach glow pulse on primary buttons */
@keyframes btn-pulse {
	0%, 100% { box-shadow: 0 4px 16px rgba(244, 132, 106, 0.35); }
	50%       { box-shadow: 0 4px 28px rgba(244, 132, 106, 0.55); }
}
.btn-primary.pulse { animation: btn-pulse 2.5s ease-in-out infinite; }

/* Category card shimmer on hover */
.category-card::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.25) 50%, transparent 60%);
	background-size: 200% 100%;
	opacity: 0;
	border-radius: var(--radius-lg);
	pointer-events: none;
	transition: opacity 0.3s;
}
.category-card:hover::after {
	opacity: 1;
	animation: cat-shimmer 0.8s ease-in-out;
}
@keyframes cat-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* Page transition overlay */
.page-transition {
	position: fixed;
	inset: 0;
	background: var(--peach-primary);
	z-index: 9999;
	transform: scaleY(0);
	transform-origin: bottom;
	pointer-events: none;
}

/* Trust bar scroll marquee (mobile) */
@media (max-width: 600px) {
	.trust-bar-inner {
		flex-wrap: nowrap;
		overflow: hidden;
		animation: trust-marquee 18s linear infinite;
	}
	@keyframes trust-marquee {
		0%   { transform: translateX(0); }
		100% { transform: translateX(-50%); }
	}
}

/* Logo glow in footer / about */
.about-peach-graphic img {
	filter: drop-shadow(0 16px 32px rgba(244, 132, 106, 0.3));
}

/* Checkout step indicator pulse */
@keyframes step-active {
	0%, 100% { box-shadow: 0 0 0 0 rgba(244, 132, 106, 0.4); }
	50%       { box-shadow: 0 0 0 8px rgba(244, 132, 106, 0); }
}

/* Nav link underline draw */
.nav-menu > li > a::after {
	content: '';
	display: block;
	height: 2px;
	background: var(--peach-primary);
	width: 0;
	border-radius: 2px;
	margin-top: 2px;
	transition: width var(--duration-base) var(--ease-out);
}
.nav-menu > li > a:hover::after { width: 100%; }