/* ============================================================
   Scroll-triggered + hover micro-animations
   ============================================================ */

/* Cards stagger on intersection (handled by JS adding .is-in) */
[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 600ms var(--iif-ease-2), transform 600ms var(--iif-ease-2); }
[data-reveal].is-in { opacity: 1; transform: translateY(0); }
[data-reveal][data-delay="1"] { transition-delay: 80ms; }
[data-reveal][data-delay="2"] { transition-delay: 160ms; }
[data-reveal][data-delay="3"] { transition-delay: 240ms; }
[data-reveal][data-delay="4"] { transition-delay: 320ms; }

/* Particle dots in hero */
.iif-hero__particles {
	position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
.iif-hero__particles::before, .iif-hero__particles::after {
	content: ''; position: absolute; inset: 0;
	background-image:
		radial-gradient(circle at 12% 18%, rgba(255,255,255,0.5) 0, transparent 1px),
		radial-gradient(circle at 78% 33%, rgba(255,255,255,0.4) 0, transparent 1.5px),
		radial-gradient(circle at 24% 80%, rgba(255,255,255,0.5) 0, transparent 1px),
		radial-gradient(circle at 90% 70%, rgba(255,255,255,0.35) 0, transparent 1.5px);
	background-size: 240px 240px;
	animation: iif-drift 60s linear infinite;
	opacity: 0.6;
}
.iif-hero__particles::after {
	animation-duration: 90s; animation-direction: reverse; opacity: 0.4;
}
@keyframes iif-drift {
	from { transform: translate(0, 0); }
	to   { transform: translate(-240px, 240px); }
}

/* Hover tilt for product cards */
@media (hover: hover) {
	.iif-prod-card { transform-style: preserve-3d; }
	.iif-prod-card:hover .iif-prod-card__media img { transform: scale(1.05); }
	.iif-prod-card__media img { transition: transform var(--iif-d-slow) var(--iif-ease); }
}

/* Card stagger entrance on initial load */
.iif-grid--cards > *,
.iif-grid--products > *,
.iif-grid--wide > * {
	animation: iif-card-in 600ms var(--iif-ease-2) both;
}
.iif-grid > *:nth-child(1)  { animation-delay: 40ms; }
.iif-grid > *:nth-child(2)  { animation-delay: 80ms; }
.iif-grid > *:nth-child(3)  { animation-delay: 120ms; }
.iif-grid > *:nth-child(4)  { animation-delay: 160ms; }
.iif-grid > *:nth-child(5)  { animation-delay: 200ms; }
.iif-grid > *:nth-child(6)  { animation-delay: 240ms; }
.iif-grid > *:nth-child(7)  { animation-delay: 280ms; }
.iif-grid > *:nth-child(8)  { animation-delay: 320ms; }
@keyframes iif-card-in {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 1ms !important;
		transition-duration: 1ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* Section reveal */
.iif-section { opacity: 0; transform: translateY(20px); transition: opacity 800ms var(--iif-ease-2), transform 800ms var(--iif-ease-2); }
.iif-section.is-in { opacity: 1; transform: translateY(0); }

/* Hover glow on buttons */
.iif-btn--primary, .iif-cta { position: relative; isolation: isolate; }
.iif-btn--primary::after, .iif-cta::after {
	content: ''; position: absolute; inset: -2px; border-radius: inherit; z-index: -1;
	background: linear-gradient(135deg, var(--iif-accent), var(--iif-accent-2), var(--iif-accent-3));
	filter: blur(14px); opacity: 0;
	transition: opacity var(--iif-d-base);
}
.iif-btn--primary:hover::after, .iif-cta:hover::after { opacity: 0.6; }

/* Pulse for "trending" elements */
.iif-card__badge--trending { animation: iif-pulse-glow 2s ease-in-out infinite; }
@keyframes iif-pulse-glow {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255,61,138,0.4); }
	50% { box-shadow: 0 0 0 8px rgba(255,61,138,0); }
}