/**
 * Micro-interactions for the elements inside a block (cards, steps, tiles, icons).
 * Switched on from the Design panel; assets/js/fx.js marks the elements with
 * data-fx-item / data-fx-icon, so without the script nothing is hidden or moved.
 * Everything respects "reduce motion".
 */
.wlb-fx [data-fx-item] {
	transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s ease, border-color 0.4s ease, opacity 0.4s ease;
}
.wlb-fx [data-fx-icon] {
	transition: transform 0.45s cubic-bezier(0.3, 1.5, 0.5, 1), color 0.3s ease;
	transform-origin: center;
}
.wlb-fx--h-sheen [data-fx-item], .wlb-fx--h-zoom [data-fx-item] { position: relative; }
.wlb-fx--h-sheen [data-fx-item] { overflow: hidden; }
.wlb-fx--h-zoom [data-fx-item] :is(figure, picture, [class*="__media"], [class*="__pic"], [class*="__thumb"]) { overflow: hidden; }
.wlb-fx--h-zoom [data-fx-item] img { transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.wlb-fx-sheen {
	position: absolute; inset: 0; pointer-events: none; z-index: 2;
	background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%);
	transform: translateX(-120%);
}

@media (hover: hover) {
	.wlb-fx--h-lift [data-fx-item]:hover { transform: translateY(-6px); box-shadow: 0 20px 38px -20px rgba(15, 23, 42, 0.4); }
	.wlb-fx--h-glow [data-fx-item]:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--wlb-accent, #4338ca) 55%, transparent), 0 14px 38px -10px color-mix(in srgb, var(--wlb-accent, #4338ca) 60%, transparent); }
	.wlb-fx--h-border [data-fx-item]:hover { box-shadow: inset 0 0 0 2px var(--wlb-accent, #4338ca); }
	.wlb-fx--h-tilt [data-fx-item]:hover { transform: perspective(900px) rotateX(2.5deg) rotateY(-4deg) translateY(-4px); box-shadow: 0 22px 36px -22px rgba(15, 23, 42, 0.45); }
	/* Elements with no background of their own get a soft padded panel, so the effect still reads as a card. */
	.wlb-fx--h-lift [data-fx-bare]:hover { box-shadow: 0 0 0 12px var(--wlb-surface, #fff), 0 22px 40px -14px rgba(15, 23, 42, 0.32); border-radius: 12px; }
	.wlb-fx--h-tilt [data-fx-bare]:hover { box-shadow: 0 0 0 12px var(--wlb-surface, #fff), 0 22px 40px -14px rgba(15, 23, 42, 0.32); border-radius: 12px; }
	.wlb-fx--h-glow [data-fx-bare]:hover { box-shadow: 0 0 0 12px var(--wlb-surface, #fff), 0 0 0 13px color-mix(in srgb, var(--wlb-accent, #4338ca) 55%, transparent), 0 14px 38px -8px color-mix(in srgb, var(--wlb-accent, #4338ca) 55%, transparent); border-radius: 12px; }
	.wlb-fx--h-border [data-fx-bare]:hover { box-shadow: 0 0 0 12px var(--wlb-surface, #fff), 0 0 0 14px var(--wlb-accent, #4338ca); border-radius: 12px; }
	.wlb-fx--h-zoom [data-fx-item]:hover img { transform: scale(1.07); }
	.wlb-fx--h-sheen [data-fx-item]:hover .wlb-fx-sheen { transform: translateX(120%); transition: transform 0.9s ease; }

	.wlb-fx--i-pop [data-fx-item]:hover [data-fx-icon], .wlb-fx--i-pop [data-fx-icon]:hover { transform: scale(1.2) rotate(-6deg); }
	.wlb-fx--i-spin [data-fx-item]:hover [data-fx-icon], .wlb-fx--i-spin [data-fx-icon]:hover { transform: rotate(360deg); transition-duration: 0.8s; }
	.wlb-fx--i-wiggle [data-fx-item]:hover [data-fx-icon], .wlb-fx--i-wiggle [data-fx-icon]:hover { animation: wlb-fx-wiggle 0.6s ease; }
}
.wlb-fx--i-float [data-fx-icon] { animation: wlb-fx-float 3.2s ease-in-out infinite; }
.wlb-fx--i-pulse [data-fx-icon] { animation: wlb-fx-pulse 2.4s ease-in-out infinite; }
.wlb-fx--press [data-fx-item]:active { transform: scale(0.97); transition-duration: 0.12s; }

/* Reveal: items rise in one after another once the block scrolls into view. */
.wlb-fx:not(.fx-done) [data-fx-item] { transition-property: opacity, transform, filter, box-shadow; transition-duration: 0.75s; transition-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--fx-i, 0) * var(--fx-stagger, 90ms)); }
.wlb-fx--r-fade-up:not(.is-fx-in):not(.fx-done) [data-fx-item] { opacity: 0; transform: translateY(28px); }
.wlb-fx--r-fade:not(.is-fx-in):not(.fx-done) [data-fx-item] { opacity: 0; }
.wlb-fx--r-scale:not(.is-fx-in):not(.fx-done) [data-fx-item] { opacity: 0; transform: scale(0.88); }
.wlb-fx--r-slide:not(.is-fx-in):not(.fx-done) [data-fx-item] { opacity: 0; transform: translateX(-36px); }
.wlb-fx--r-blur:not(.is-fx-in):not(.fx-done) [data-fx-item] { opacity: 0; filter: blur(10px); transform: translateY(12px); }

@keyframes wlb-fx-wiggle { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 45% { transform: rotate(11deg); } 70% { transform: rotate(-7deg); } }
@keyframes wlb-fx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes wlb-fx-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }

@media (prefers-reduced-motion: reduce) {
	.wlb-fx [data-fx-item], .wlb-fx [data-fx-icon], .wlb-fx--h-zoom [data-fx-item] img { transition: none !important; animation: none !important; transform: none !important; opacity: 1 !important; filter: none !important; }
	.wlb-fx-sheen { display: none; }
}