/* CreativeKatta Image — v1.0.0
   Colours / sizes are driven by --smf-* custom properties set from the Elementor panel;
   the value after each comma is the default. */

.smf-outer {
	display: flex;
	justify-content: center;
	width: 100%;
}

.smf-wrap {
	--smf-dur: .9s;
	--smf-delay: 0s;
	--smf-ease: cubic-bezier(.2, .7, .2, 1);
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	padding: var(--smf-offset, 24px);
}

.smf-wrap *,
.smf-wrap *::before,
.smf-wrap *::after {
	box-sizing: border-box;
}

.smf-frame {
	position: relative;
}

/* ---------- Media ---------- */
.smf-media {
	position: relative;
	z-index: 2;
	overflow: hidden;
	aspect-ratio: var(--smf-ratio, 4 / 5);
	background: var(--smf-bg, #efeaff);
}

.smf-media > a {
	display: block;
	height: 100%;
}

.smf-media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
	transition: transform .9s var(--smf-ease), filter .6s ease;
}

/* ---------- Decorative layers ---------- */
.smf-deco {
	position: absolute;
	z-index: 1;
	pointer-events: none;
	transition:
		transform var(--smf-dur) var(--smf-ease) calc(var(--smf-delay) + .25s),
		opacity var(--smf-dur) ease calc(var(--smf-delay) + .25s);
}

.smf-no-shapes .smf-deco {
	display: none;
}

/* Wipe panel (only visible during the wipe animation) */
.smf-wipe {
	display: none;
	position: absolute;
	inset: 0;
	z-index: 5;
	background: linear-gradient(var(--smf-angle, 135deg), var(--smf-c1, #6c4cff), var(--smf-c2, #ff4f8b));
	transform: translateX(-101%);
}

/* ====================================================================
   FLOATING CHIPS
   ==================================================================== */
.smf-chip {
	position: absolute;
	z-index: 6;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px 10px 12px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 16px 36px -14px rgba(27, 22, 64, .35);
	white-space: nowrap;
	transition:
		opacity var(--smf-dur) ease calc(var(--smf-delay) + .5s),
		transform var(--smf-dur) var(--smf-ease) calc(var(--smf-delay) + .5s);
}

.smf-chip-icon {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: linear-gradient(var(--smf-angle, 135deg), var(--smf-c1, #6c4cff), var(--smf-c2, #ff4f8b));
	position: relative;
}

/* tiny "growth arrow" drawn with borders */
.smf-chip-icon::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 9px;
	height: 9px;
	border-top: 2.5px solid #fff;
	border-right: 2.5px solid #fff;
	transform: translate(-65%, -35%) rotate(-45deg);
}

.smf-chip-text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.smf-chip-value {
	color: #1b1640;
	font-size: 18px;
	font-weight: 800;
}

.smf-chip-label {
	margin-top: 3px;
	color: #6d6a85;
	font-size: 12px;
	font-weight: 500;
}

/* Chip positions */
.smf-pos-tl { top: 8%;  left: -6%; }
.smf-pos-tr { top: 8%;  right: -6%; }
.smf-pos-ml { top: 46%; left: -9%; }
.smf-pos-mr { top: 46%; right: -9%; }
.smf-pos-bl { bottom: 8%; left: -6%; }
.smf-pos-br { bottom: 8%; right: -6%; }

/* ====================================================================
   STYLE 1 — ORBIT CIRCLE
   ==================================================================== */
.smf-style-orbit .smf-media {
	aspect-ratio: var(--smf-ratio, 1 / 1);
	border-radius: 50%;
	border: var(--smf-bw, 5px) solid #fff;
	box-shadow: 0 24px 50px -24px rgba(27, 22, 64, .45);
}

/* soft gradient disc behind, offset */
.smf-style-orbit .smf-deco-1 {
	inset: 0;
	border-radius: 50%;
	background: linear-gradient(var(--smf-angle, 135deg), var(--smf-c1, #6c4cff), var(--smf-c2, #ff4f8b));
	transform: translate(var(--smf-offset, 24px), var(--smf-offset, 24px));
}

/* dashed orbit ring */
.smf-style-orbit .smf-deco-2 {
	inset: calc(var(--smf-offset, 24px) * -.7);
	border-radius: 50%;
	border: 2px dashed var(--smf-accent, #ffb703);
}

/* satellite dot on the orbit */
.smf-style-orbit .smf-deco-3 {
	top: calc(var(--smf-offset, 24px) * -.7 - 9px);
	left: 50%;
	width: 18px;
	height: 18px;
	margin-left: -9px;
	border-radius: 50%;
	background: var(--smf-accent, #ffb703);
}

/* small ring bottom-left */
.smf-style-orbit .smf-deco-4 {
	left: -4%;
	bottom: 6%;
	width: 12%;
	aspect-ratio: 1;
	border-radius: 50%;
	border: var(--smf-bw, 5px) solid var(--smf-c2, #ff4f8b);
}

/* ====================================================================
   STYLE 2 — HEXAGON GLOW
   ==================================================================== */
.smf-style-hex .smf-media {
	aspect-ratio: var(--smf-ratio, 1 / 1.1);
	clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
}

.smf-style-hex .smf-deco-1 {
	inset: 0;
	background: linear-gradient(var(--smf-angle, 135deg), var(--smf-c1, #6c4cff), var(--smf-c2, #ff4f8b));
	clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
	transform: translate(var(--smf-offset, 24px), var(--smf-offset, 24px));
}

/* glow behind everything */
.smf-style-hex .smf-deco-2 {
	inset: 8%;
	background: var(--smf-c1, #6c4cff);
	filter: blur(46px);
	opacity: .45;
	border-radius: 50%;
}

/* dot grid */
.smf-style-hex .smf-deco-3 {
	top: -2%;
	left: -6%;
	width: 28%;
	height: 22%;
	background-image: radial-gradient(var(--smf-accent, #ffb703) 2px, transparent 2.4px);
	background-size: 14px 14px;
}

/* plus sign */
.smf-style-hex .smf-deco-4 {
	right: -2%;
	bottom: 4%;
	width: 36px;
	height: 36px;
	background:
		linear-gradient(var(--smf-accent, #ffb703), var(--smf-accent, #ffb703)) center / 100% 6px no-repeat,
		linear-gradient(var(--smf-accent, #ffb703), var(--smf-accent, #ffb703)) center / 6px 100% no-repeat;
}

/* ====================================================================
   STYLE 3 — TILTED STACK
   ==================================================================== */
.smf-style-tilt .smf-media {
	aspect-ratio: var(--smf-ratio, 4 / 5);
	border-radius: var(--smf-radius, 28px);
	border: var(--smf-bw, 5px) solid #fff;
	box-shadow: 0 24px 50px -24px rgba(27, 22, 64, .45);
	transition: transform .6s var(--smf-ease);
}

.smf-style-tilt .smf-deco-1 {
	inset: 0;
	border-radius: var(--smf-radius, 28px);
	background: linear-gradient(var(--smf-angle, 135deg), var(--smf-c1, #6c4cff), var(--smf-c2, #ff4f8b));
	transform: rotate(-7deg) translate(calc(var(--smf-offset, 24px) * -.4), calc(var(--smf-offset, 24px) * .3));
}

.smf-style-tilt .smf-deco-2 {
	inset: 0;
	border-radius: var(--smf-radius, 28px);
	background: var(--smf-bg, #efeaff);
	transform: rotate(5deg) translate(calc(var(--smf-offset, 24px) * .45), calc(var(--smf-offset, 24px) * .45));
}

.smf-style-tilt .smf-deco-3 {
	top: -3%;
	right: -2%;
	width: 18%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--smf-accent, #ffb703);
}

.smf-style-tilt .smf-deco-4 {
	left: -3%;
	bottom: 18%;
	width: 11%;
	aspect-ratio: 1;
	border-radius: 50%;
	border: var(--smf-bw, 5px) solid var(--smf-c1, #6c4cff);
}

.smf-style-tilt:hover .smf-media {
	transform: rotate(-1.5deg) scale(1.01);
}

/* ====================================================================
   STYLE 4 — GRADIENT SQUIRCLE (gradient border + glow)
   ==================================================================== */
.smf-style-squircle .smf-media {
	aspect-ratio: var(--smf-ratio, 1 / 1);
	border-radius: var(--smf-radius, 28px);
}

/* gradient border ring sits behind the image and peeks out by --smf-bw */
.smf-style-squircle .smf-deco-1 {
	inset: calc(var(--smf-bw, 5px) * -1);
	border-radius: calc(var(--smf-radius, 28px) + var(--smf-bw, 5px));
	background: linear-gradient(var(--smf-angle, 135deg), var(--smf-c1, #6c4cff), var(--smf-c2, #ff4f8b));
	z-index: 1;
}

/* blurred gradient glow */
.smf-style-squircle .smf-deco-2 {
	inset: 6% 6% -6% 6%;
	border-radius: var(--smf-radius, 28px);
	background: linear-gradient(var(--smf-angle, 135deg), var(--smf-c1, #6c4cff), var(--smf-c2, #ff4f8b));
	filter: blur(32px);
	opacity: .5;
	z-index: 0;
}

/* outlined squircle offset behind */
.smf-style-squircle .smf-deco-3 {
	inset: 0;
	border-radius: var(--smf-radius, 28px);
	border: 2px solid var(--smf-accent, #ffb703);
	transform: translate(var(--smf-offset, 24px), var(--smf-offset, 24px));
	z-index: 0;
}

/* sparkle (four-point star) */
.smf-style-squircle .smf-deco-4 {
	top: -4%;
	right: 6%;
	width: 34px;
	height: 34px;
	background: var(--smf-accent, #ffb703);
	clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
	z-index: 3;
}

/* ====================================================================
   STYLE 5 — DIAGONAL SLICE + GEOMETRIC SHAPES
   ==================================================================== */
.smf-style-slice .smf-media {
	aspect-ratio: var(--smf-ratio, 4 / 3.4);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--smf-slice, 14%)));
}

.smf-style-slice .smf-deco-1 {
	inset: 0;
	background: linear-gradient(var(--smf-angle, 135deg), var(--smf-c1, #6c4cff), var(--smf-c2, #ff4f8b));
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--smf-slice, 14%)));
	transform: translate(calc(var(--smf-offset, 24px) * -1), var(--smf-offset, 24px));
}

/* triangle */
.smf-style-slice .smf-deco-2 {
	top: -4%;
	right: -3%;
	width: 16%;
	aspect-ratio: 1;
	background: var(--smf-accent, #ffb703);
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* dotted band */
.smf-style-slice .smf-deco-3 {
	right: -4%;
	bottom: 2%;
	width: 30%;
	height: 24%;
	background-image: radial-gradient(var(--smf-c1, #6c4cff) 2px, transparent 2.4px);
	background-size: 14px 14px;
}

/* circle outline */
.smf-style-slice .smf-deco-4 {
	left: -3%;
	top: 38%;
	width: 12%;
	aspect-ratio: 1;
	border-radius: 50%;
	border: var(--smf-bw, 5px) solid var(--smf-accent, #ffb703);
}

/* ====================================================================
   HOVER EFFECTS
   ==================================================================== */
.smf-hover-zoom .smf-media:hover img {
	transform: scale(1.08);
}

.smf-hover-lift .smf-media {
	transition: transform .5s var(--smf-ease);
}

.smf-hover-lift .smf-media:hover {
	transform: translateY(-8px);
}

.smf-hover-color .smf-media img {
	filter: grayscale(1);
}

.smf-hover-color .smf-media:hover img {
	filter: grayscale(0);
}

/* ====================================================================
   CONTINUOUS FLOAT MOTION (optional)
   Only elements that are positioned without transforms are animated, so the
   offset shapes keep their position.
   ==================================================================== */
.smf-float.smf-in .smf-chip-1 { animation: smf-float-a 5s ease-in-out 1.6s infinite; }
.smf-float.smf-in .smf-chip-2 { animation: smf-float-b 6s ease-in-out 1.8s infinite; }

/* Orbit: ring spins, the satellite dot rides on the ring */
.smf-style-orbit .smf-deco-2::after {
	content: "";
	position: absolute;
	top: -9px;
	left: 50%;
	width: 18px;
	height: 18px;
	margin-left: -9px;
	border-radius: 50%;
	background: var(--smf-accent, #ffb703);
}

.smf-style-orbit .smf-deco-3 {
	display: none;
}

.smf-float.smf-in.smf-style-orbit .smf-deco-2 { animation: smf-spin 30s linear 1.4s infinite; }
.smf-float.smf-in.smf-style-orbit .smf-deco-4 { animation: smf-float-a 8s ease-in-out 1.4s infinite; }

.smf-float.smf-in.smf-style-hex .smf-deco-3,
.smf-float.smf-in.smf-style-tilt .smf-deco-3,
.smf-float.smf-in.smf-style-slice .smf-deco-3 { animation: smf-float-b 7s ease-in-out 1.4s infinite; }

.smf-float.smf-in.smf-style-hex .smf-deco-4,
.smf-float.smf-in.smf-style-tilt .smf-deco-4,
.smf-float.smf-in.smf-style-slice .smf-deco-4,
.smf-float.smf-in.smf-style-squircle .smf-deco-4 { animation: smf-float-a 8s ease-in-out 1.4s infinite; }

.smf-float.smf-in.smf-style-slice .smf-deco-2 { animation: smf-float-b 9s ease-in-out 1.4s infinite; }

@keyframes smf-float-a {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-12px); }
}

@keyframes smf-float-b {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50%      { transform: translateY(10px) rotate(4deg); }
}

@keyframes smf-spin {
	to { transform: rotate(360deg); }
}

/* ====================================================================
   ENTRY ANIMATIONS  (JS adds .smf-in when the widget is visible)
   ==================================================================== */
.smf-anim .smf-frame {
	transition:
		opacity var(--smf-dur) ease var(--smf-delay),
		transform var(--smf-dur) var(--smf-ease) var(--smf-delay);
}

/* decorative shapes and chips arrive after the image */
.smf-anim:not(.smf-in) .smf-deco {
	opacity: 0;
	transform: scale(.85) !important;
}

.smf-anim:not(.smf-in) .smf-chip {
	opacity: 0;
	transform: translateY(18px) scale(.9);
}

.smf-anim-pop .smf-frame {
	transition-timing-function: ease, cubic-bezier(.34, 1.56, .64, 1);
}

.smf-anim-pop:not(.smf-in) .smf-frame {
	opacity: 0;
	transform: scale(.6);
}

.smf-anim-fade-up:not(.smf-in) .smf-frame {
	opacity: 0;
	transform: translateY(50px);
}

.smf-anim-slide-left:not(.smf-in) .smf-frame {
	opacity: 0;
	transform: translateX(-80px);
}

.smf-anim-slide-right:not(.smf-in) .smf-frame {
	opacity: 0;
	transform: translateX(80px);
}

.smf-anim-spin-in:not(.smf-in) .smf-frame {
	opacity: 0;
	transform: rotate(-14deg) scale(.7);
}

/* Gradient wipe: a gradient panel covers the image, then slides away */
.smf-anim-wipe .smf-wipe {
	display: block;
}

.smf-anim-wipe:not(.smf-in) .smf-wipe {
	transform: translateX(0);
}

.smf-anim-wipe.smf-in .smf-wipe {
	transform: translateX(101%);
	transition: transform var(--smf-dur) cubic-bezier(.77, 0, .18, 1) var(--smf-delay);
}

.smf-anim-wipe .smf-media img {
	transition: transform calc(var(--smf-dur) * 1.4) var(--smf-ease) var(--smf-delay), filter .6s ease;
}

.smf-anim-wipe:not(.smf-in) .smf-media img {
	transform: scale(1.25);
}

.smf-anim-wipe.smf-in.smf-hover-zoom .smf-media:hover img {
	transform: scale(1.08);
	transition-delay: 0s;
	transition-duration: .9s;
}

/* ====================================================================
   RESPONSIVE
   ==================================================================== */
@media (max-width: 767px) {
	.smf-chip {
		padding: 8px 12px 8px 9px;
		gap: 8px;
	}
	.smf-chip-icon {
		width: 28px;
		height: 28px;
	}
	.smf-chip-value {
		font-size: 15px;
	}
	.smf-chip-label {
		font-size: 11px;
	}
	/* keep chips inside the viewport on narrow screens */
	.smf-pos-tl, .smf-pos-bl, .smf-pos-ml { left: -2%; }
	.smf-pos-tr, .smf-pos-br, .smf-pos-mr { right: -2%; }
}

/* ====================================================================
   REDUCED MOTION
   ==================================================================== */
@media (prefers-reduced-motion: reduce) {
	.smf-wrap *,
	.smf-wrap *::before,
	.smf-wrap *::after {
		transition: none !important;
		animation: none !important;
	}
	.smf-anim:not(.smf-in) .smf-frame {
		opacity: 1 !important;
		transform: none !important;
	}
	.smf-anim:not(.smf-in) .smf-deco,
	.smf-anim:not(.smf-in) .smf-chip {
		opacity: 1;
	}
	.smf-anim-wipe .smf-wipe {
		display: none;
	}
	.smf-anim-wipe:not(.smf-in) .smf-media img {
		transform: none;
	}
}