/**
 * iStyleBlox — Effects
 *
 * Hover effects, entrance animations and device visibility set from the
 * iStyleBlox sidebar panel. Loaded only on pages that use them.
 *
 * @package iStyleBlox
 */

/* ==========================================================================
   Hover effects
   ========================================================================== */

.istyleblox-hover-lift,
.istyleblox-hover-grow,
.istyleblox-hover-shadow,
.istyleblox-hover-dim {
	transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}

.istyleblox-hover-lift:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
}

.istyleblox-hover-grow:hover {
	transform: scale(1.03);
}

.istyleblox-hover-shadow:hover {
	box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
}

.istyleblox-hover-dim:hover {
	opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
	.istyleblox-hover-lift:hover,
	.istyleblox-hover-grow:hover {
		transform: none;
	}
}

/* ==========================================================================
   Entrance animations (start state applies only once effects.js has run)
   ========================================================================== */

.istyleblox-anim-ready .istyleblox-anim {
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.istyleblox-anim-ready .istyleblox-anim:not(.is-visible) {
	opacity: 0;
}

.istyleblox-anim-ready .istyleblox-anim-fade-up:not(.is-visible) {
	transform: translateY(24px);
}

.istyleblox-anim-ready .istyleblox-anim-slide-left:not(.is-visible) {
	transform: translateX(-32px);
}

.istyleblox-anim-ready .istyleblox-anim-slide-right:not(.is-visible) {
	transform: translateX(32px);
}

.istyleblox-anim-ready .istyleblox-anim-zoom-in:not(.is-visible) {
	transform: scale(0.94);
}

/* ==========================================================================
   Device visibility (mobile < 600px, tablet 600–1023px, desktop ≥ 1024px)
   ========================================================================== */

@media (max-width: 599px) {
	.istyleblox-hide-mobile {
		display: none !important;
	}
}

@media (min-width: 600px) and (max-width: 1023px) {
	.istyleblox-hide-tablet {
		display: none !important;
	}
}

@media (min-width: 1024px) {
	.istyleblox-hide-desktop {
		display: none !important;
	}
}