/* AFAN motion layer — add classes in Elementor > Advanced > CSS Classes. */
:root {
	--afan-crimson: #cd1442;
	--afan-magenta: #c659a2;
	--afan-blush: #eac2dd;
	--afan-pink: #fdadcc;
	--afan-ink: #3b373f;
	--afan-night: #27373c;
	--afan-paper: #fbf6f9;
	--afan-ease: cubic-bezier(.22, .61, .36, 1);
	--afan-dur: 800ms;
}

/* ---------- Reveal on scroll (only hidden when JS is running) ---------- */
.afan-js .afan-reveal,
.afan-js .afan-reveal-left,
.afan-js .afan-reveal-right,
.afan-js .afan-reveal-zoom,
.afan-js .afan-stagger-item {
	opacity: 0;
	transition: opacity var(--afan-dur) var(--afan-ease), transform var(--afan-dur) var(--afan-ease);
	transition-delay: var(--afan-delay, 0ms);
	will-change: opacity, transform;
}
.afan-js .afan-reveal { transform: translateY(24px); }
.afan-js .afan-reveal-left { transform: translateX(-40px); }
.afan-js .afan-reveal-right { transform: translateX(40px); }
.afan-js .afan-reveal-zoom { transform: scale(.94); }
.afan-js .afan-stagger-item { transform: translateY(24px); }

.afan-js .afan-reveal.is-visible,
.afan-js .afan-reveal-left.is-visible,
.afan-js .afan-reveal-right.is-visible,
.afan-js .afan-reveal-zoom.is-visible,
.afan-js .afan-stagger.is-visible .afan-stagger-item {
	opacity: 1;
	transform: none;
}

.afan-delay-1 { --afan-delay: 150ms; }
.afan-delay-2 { --afan-delay: 300ms; }
.afan-delay-3 { --afan-delay: 450ms; }
.afan-delay-4 { --afan-delay: 600ms; }

/* ---------- Word-by-word heading ---------- */
.afan-split .afan-word {
	display: inline-block;
	white-space: pre;
}
.afan-js .afan-split .afan-word {
	opacity: 0;
	transform: translateY(.4em);
	transition: opacity 600ms var(--afan-ease), transform 600ms var(--afan-ease);
	transition-delay: calc(var(--i, 0) * 90ms);
}
.afan-js .afan-split.is-visible .afan-word {
	opacity: 1;
	transform: none;
}

/* ---------- Counters ---------- */
.afan-counter .elementor-heading-title { font-variant-numeric: tabular-nums; }

/* ---------- Image treatments ---------- */
.afan-petal img,
.afan-petal-alt img {
	border-radius: 48% 12px 48% 12px / 40% 12px 40% 12px;
	object-fit: cover;
}
.afan-petal-alt img { border-radius: 12px 48% 12px 48% / 12px 40% 12px 40%; }

.afan-kenburns .elementor-widget-container,
.afan-kenburns { overflow: hidden; }
.afan-kenburns img { animation: afan-kenburns 20s ease-in-out infinite alternate; }
@keyframes afan-kenburns {
	from { transform: scale(1) translate(0, 0); }
	to { transform: scale(1.08) translate(-1.5%, -1%); }
}

.afan-parallax img { will-change: transform; transform: translateY(var(--afan-py, 0px)); }

/* ---------- Cards ---------- */
.afan-lift {
	transition: transform 350ms var(--afan-ease), box-shadow 350ms var(--afan-ease);
}
.afan-lift:hover,
.afan-lift:focus-within {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px -18px rgba(39, 55, 60, .35);
}
.afan-lift img { transition: transform 600ms var(--afan-ease); }
.afan-lift:hover img { transform: scale(1.04); }

/* ---------- Decorative float ---------- */
.afan-float { animation: afan-float 6s ease-in-out infinite; }
@keyframes afan-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

/* ---------- Map pulse (for the "Where we work" SVG: <circle class="afan-pulse">) ---------- */
.afan-pulse { transform-box: fill-box; transform-origin: center; animation: afan-pulse 2.4s ease-out infinite; }
@keyframes afan-pulse {
	0% { opacity: .8; transform: scale(1); }
	100% { opacity: 0; transform: scale(3); }
}

/* ---------- Reduced motion: everything visible and still ---------- */
@media (prefers-reduced-motion: reduce) {
	.afan-js .afan-reveal,
	.afan-js .afan-reveal-left,
	.afan-js .afan-reveal-right,
	.afan-js .afan-reveal-zoom,
	.afan-js .afan-stagger-item,
	.afan-js .afan-split .afan-word {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.afan-kenburns img,
	.afan-float,
	.afan-pulse { animation: none !important; }
	.afan-parallax img { transform: none !important; }
	.afan-lift, .afan-lift img { transition: none; }
}

/* Elementor editor: never hide content while editing. */
.elementor-editor-active .afan-reveal,
.elementor-editor-active .afan-reveal-left,
.elementor-editor-active .afan-reveal-right,
.elementor-editor-active .afan-reveal-zoom,
.elementor-editor-active .afan-stagger-item,
.elementor-editor-active .afan-split .afan-word {
	opacity: 1 !important;
	transform: none !important;
}