/* =========================================================
   Stack Designs For Elementor — Main Stylesheet
   ========================================================= */

/* ── Wrapper ──────────────────────────────────────────────── */
.stkds-outer {
	position: relative;
	width: 100%;
	overflow: hidden;
	line-height: 0;
	-webkit-transform: translateZ(0); /* GPU layer for crisp edges */
	transform: translateZ(0);
}

/* ── SVG element ─────────────────────────────────────────── */
.stkds-svg {
	display: block;
	width: 100%;
	height: 80px; /* default; overridden by responsive slider */
}

/* ── Colour fills ─────────────────────────────────────────── */
.stkds-p { fill: var(--stkds-color, #ffffff); }
.stkds-s { fill: var(--stkds-color2, rgba(0, 0, 0, 0.15)); }

/* ── Flip transforms ─────────────────────────────────────── */
.stkds-flip-v .stkds-svg {
	-webkit-transform: scaleY(-1);
	transform: scaleY(-1);
}

.stkds-flip-h .stkds-svg {
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
}

.stkds-flip-v.stkds-flip-h .stkds-svg {
	-webkit-transform: scale(-1, -1);
	transform: scale(-1, -1);
}


/* =========================================================
   Global controls and animation presets
   ========================================================= */
.stkds-outer {
	isolation: isolate;
	pointer-events: none;
}

.stkds-svg {
	transform-origin: 50% 50%;
	will-change: transform, opacity, filter, clip-path;
}

.stkds-outer.stkds-pause-hover:hover .stkds-svg,
.elementor-editor-active .stkds-outer.stkds-pause-hover:hover .stkds-svg {
	animation-play-state: paused;
}

.stkds-anim-float .stkds-svg {
	animation: stkdsFloat var(--stkds-anim-duration, 8s) ease-in-out var(--stkds-anim-delay, 0s) infinite;
}

.stkds-anim-drift-left .stkds-svg {
	width: 160%;
	animation: stkdsDriftLeft var(--stkds-anim-duration, 14s) linear var(--stkds-anim-delay, 0s) infinite;
}

.stkds-anim-drift-right .stkds-svg {
	width: 160%;
	margin-left: -60%;
	animation: stkdsDriftRight var(--stkds-anim-duration, 14s) linear var(--stkds-anim-delay, 0s) infinite;
}

.stkds-anim-pulse .stkds-svg {
	animation: stkdsPulse var(--stkds-anim-duration, 6s) ease-in-out var(--stkds-anim-delay, 0s) infinite;
}

.stkds-anim-breathe .stkds-svg {
	animation: stkdsBreathe var(--stkds-anim-duration, 9s) ease-in-out var(--stkds-anim-delay, 0s) infinite;
}

.stkds-anim-shimmer .stkds-p,
.stkds-anim-shimmer .stkds-s {
	animation: stkdsShimmer var(--stkds-anim-duration, 7s) ease-in-out var(--stkds-anim-delay, 0s) infinite;
}

.stkds-anim-wave .stkds-svg {
	animation: stkdsWave var(--stkds-anim-duration, 10s) ease-in-out var(--stkds-anim-delay, 0s) infinite;
}

.stkds-anim-reveal .stkds-svg {
	animation: stkdsReveal var(--stkds-anim-duration, 4s) cubic-bezier(.2,.8,.2,1) var(--stkds-anim-delay, 0s) both;
}

.stkds-anim-parallax .stkds-svg {
	width: 130%;
	animation: stkdsParallax var(--stkds-anim-duration, 16s) ease-in-out var(--stkds-anim-delay, 0s) infinite;
}

@keyframes stkdsFloat {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50% { transform: translate3d(0, -10px, 0); }
}

@keyframes stkdsDriftLeft {
	0% { transform: translate3d(0, 0, 0); }
	100% { transform: translate3d(-37.5%, 0, 0); }
}

@keyframes stkdsDriftRight {
	0% { transform: translate3d(0, 0, 0); }
	100% { transform: translate3d(37.5%, 0, 0); }
}

@keyframes stkdsPulse {
	0%, 100% { opacity: 1; transform: scaleY(1); }
	50% { opacity: .72; transform: scaleY(1.08); }
}

@keyframes stkdsBreathe {
	0%, 100% { transform: scaleX(1) scaleY(1); }
	50% { transform: scaleX(1.035) scaleY(1.12); }
}

@keyframes stkdsShimmer {
	0%, 100% { filter: brightness(1) saturate(1); }
	50% { filter: brightness(1.22) saturate(1.18); }
}

@keyframes stkdsWave {
	0%, 100% { transform: skewX(0deg) translateY(0); }
	33% { transform: skewX(-2deg) translateY(-4px); }
	66% { transform: skewX(2deg) translateY(4px); }
}

@keyframes stkdsReveal {
	0% { clip-path: inset(0 100% 0 0); opacity: .35; }
	100% { clip-path: inset(0 0 0 0); opacity: 1; }
}

@keyframes stkdsParallax {
	0%, 100% { transform: translate3d(-3%, 0, 0); }
	50% { transform: translate3d(3%, -6px, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.stkds-svg,
	.stkds-p,
	.stkds-s {
		animation: none !important;
	}
}