/* ============================================================
   Work With Hero Widget — serenity-toolkit-pro
   ============================================================ */

.swh-wrap { width: 100%; }

/* ── Initial hidden state ─────────────────────────────────── */
.swh-box {
	background-color: #6B88BB;
	border-radius: 20px;
	padding: 80px;
	text-align: center;
	opacity: 0;
	transform: scale(0.94);
	filter: blur(4px);
	transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1),
	            transform 0.8s cubic-bezier(0.16,1,0.3,1),
	            filter 0.8s cubic-bezier(0.16,1,0.3,1);
}

.swh-animate .swh-heading,
.swh-animate .swh-subheading {
	opacity: 0;
	transform: translateY(12px);
	filter: blur(8px);
}

.swh-heading,
.swh-subheading {
	transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1),
	            transform 0.9s cubic-bezier(0.16,1,0.3,1),
	            filter 0.9s cubic-bezier(0.16,1,0.3,1);
}

/* ── Visible state ────────────────────────────────────────── */
.swh-box.swh-visible {
	opacity: 1;
	transform: scale(1);
	filter: blur(0px);
}

.swh-box.swh-visible .swh-heading {
	opacity: 1;
	transform: translateY(0);
	filter: blur(0px);
	transition-delay: 0.2s;
}

.swh-box.swh-visible .swh-subheading {
	opacity: 1;
	transform: translateY(0);
	filter: blur(0px);
	transition-delay: 0.4s;
}

/* ── Typography ───────────────────────────────────────────── */
.swh-heading {
	font-family: 'Inter', sans-serif;
	font-size: 56px;
	font-weight: 400;
	color: #ffffff;
	margin: 0 0 20px;
	line-height: 1.2;
}

.swh-subheading {
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.85);
	margin: 0 auto;
	max-width: 640px;
	line-height: 1.6;
}

/* ── Editor: disable animation in Elementor editor ───────── */
.elementor-editor-active .swh-box,
.elementor-editor-active .swh-heading,
.elementor-editor-active .swh-subheading {
	opacity: 1 !important;
	transform: none !important;
	filter: none !important;
	transition: none !important;
}

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 768px) {
	.swh-box { padding: 48px 32px; }
	.swh-heading { font-size: 36px; }
	.swh-subheading { font-size: 15px; }
}