/**
 * Motion Elements for Elementor — front-end styles.
 * Animation *values* (duration/delay/ease) are driven by GSAP via JS;
 * this file only handles layout, initial states, and static visuals.
 */

.mee-el {
	position: relative;
	box-sizing: border-box;
}
.mee-el *,
.mee-el *::before,
.mee-el *::after {
	box-sizing: border-box;
}

/* Prevent flash-of-unstyled-content: elements animated by JS start hidden
   via this class, which JS removes right before playing (or immediately
   if JS fails to load, a timeout fallback in motion-elements.js reveals
   everything after 2s so content is never permanently invisible). */
.mee-pre-animate {
	opacity: 0;
}

/* ==========================================================================
   Animated Text
   ========================================================================== */
.mee-text-wrap {
	position: relative;
	--mee-border-top: 0px;
	--mee-border-right: 0px;
	--mee-border-bottom: 0px;
	--mee-border-left: 0px;
	--mee-border-color: #6C4DF6;
}

.mee-text-wrap.mee-border-solid,
.mee-text-wrap.mee-border-dashed,
.mee-text-wrap.mee-border-dotted,
.mee-text-wrap.mee-border-double {
	border-top: var(--mee-border-top) solid var(--mee-border-color);
	border-right: var(--mee-border-right) solid var(--mee-border-color);
	border-bottom: var(--mee-border-bottom) solid var(--mee-border-color);
	border-left: var(--mee-border-left) solid var(--mee-border-color);
}
.mee-text-wrap.mee-border-dashed { border-style: dashed; }
.mee-text-wrap.mee-border-dotted { border-style: dotted; }
.mee-text-wrap.mee-border-double { border-style: double; }

.mee-text-wrap.mee-border-animated {
	border-color: transparent !important;
}

.mee-text .mee-split-line,
.mee-text .mee-split-word,
.mee-text .mee-split-char {
	display: inline-block;
	will-change: transform, opacity;
}
.mee-text .mee-split-line {
	display: block;
	overflow: hidden;
}

/* ==========================================================================
   Animated border "draw-in" sides — shared by Text / Media / Gallery items
   ========================================================================== */
.mee-border-side {
	position: absolute;
	background-color: var(--mee-border-color, #6C4DF6);
	pointer-events: none;
	z-index: 2;
}
.mee-border-top {
	top: 0; left: 0; right: 0;
	height: var(--mee-border-top, 2px);
	transform: scaleX(0);
	transform-origin: left center;
}
.mee-border-right {
	top: 0; right: 0; bottom: 0;
	width: var(--mee-border-right, 2px);
	transform: scaleY(0);
	transform-origin: top center;
}
.mee-border-bottom {
	bottom: 0; left: 0; right: 0;
	height: var(--mee-border-bottom, 2px);
	transform: scaleX(0);
	transform-origin: right center;
}
.mee-border-left {
	top: 0; left: 0; bottom: 0;
	width: var(--mee-border-left, 2px);
	transform: scaleY(0);
	transform-origin: bottom center;
}

/* ==========================================================================
   Animated Media
   ========================================================================== */
.mee-media-wrap {
	--mee-border-top: 0px;
	--mee-border-right: 0px;
	--mee-border-bottom: 0px;
	--mee-border-left: 0px;
	--mee-border-color: #6C4DF6;
	overflow: hidden;
}
.mee-media-wrap.mee-border-solid,
.mee-media-wrap.mee-border-dashed,
.mee-media-wrap.mee-border-dotted,
.mee-media-wrap.mee-border-double {
	border-top: var(--mee-border-top) solid var(--mee-border-color);
	border-right: var(--mee-border-right) solid var(--mee-border-color);
	border-bottom: var(--mee-border-bottom) solid var(--mee-border-color);
	border-left: var(--mee-border-left) solid var(--mee-border-color);
}
.mee-media-wrap.mee-border-animated { border-color: transparent !important; }

.mee-media-inner {
	position: relative;
	overflow: hidden;
	line-height: 0;
}
.mee-media-wrap img,
.mee-media-wrap video,
.mee-media-iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	transition: filter .4s ease;
}
.mee-media-iframe {
	aspect-ratio: 16 / 9;
	height: auto;
}
.mee-media-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.mee-media-placeholder {
	padding: 60px 20px;
	text-align: center;
	background: #f1f1f5;
	color: #888;
	font-size: 14px;
}

/* Hover effects */
.mee-media-wrap[data-mee-hover="zoom"] .mee-media-inner { overflow: hidden; }
.mee-media-wrap[data-mee-hover="zoom"] img,
.mee-media-wrap[data-mee-hover="zoom"] video { transition: transform .5s ease; }
.mee-media-wrap[data-mee-hover="zoom"]:hover img,
.mee-media-wrap[data-mee-hover="zoom"]:hover video { transform: scale(1.08); }

.mee-media-wrap[data-mee-hover="grayscale"] img,
.mee-media-wrap[data-mee-hover="grayscale"] video { filter: grayscale(1); }
.mee-media-wrap[data-mee-hover="grayscale"]:hover img,
.mee-media-wrap[data-mee-hover="grayscale"]:hover video { filter: grayscale(0); }

.mee-media-wrap[data-mee-hover="overlay"] .mee-media-inner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.35);
	opacity: 0;
	transition: opacity .35s ease;
}
.mee-media-wrap[data-mee-hover="overlay"]:hover .mee-media-inner::after { opacity: 1; }

.mee-media-wrap[data-mee-hover="tilt"] { perspective: 800px; }
.mee-media-wrap[data-mee-hover="tilt"] .mee-media-inner { transition: transform .2s ease-out; transform-style: preserve-3d; }

.mee-ken-burns .mee-media-inner img { animation: mee-ken-burns 16s ease-in-out infinite alternate; }
@keyframes mee-ken-burns {
	from { transform: scale(1); }
	to   { transform: scale(1.15); }
}

/* ==========================================================================
   Animated Gallery
   ========================================================================== */
.mee-gallery {
	--mee-cols: 3;
	--mee-gap: 16px;
	display: grid;
	grid-template-columns: repeat(var(--mee-cols), 1fr);
	gap: var(--mee-gap);
}
.mee-gallery.mee-layout-masonry {
	grid-template-rows: masonry;
	column-count: var(--mee-cols);
	column-gap: var(--mee-gap);
	display: block;
}
.mee-gallery.mee-layout-masonry .mee-gallery-item {
	break-inside: avoid;
	margin-bottom: var(--mee-gap);
	width: 100%;
	display: inline-block;
}

.mee-gallery-item {
	position: relative;
	margin: 0;
	overflow: hidden;
	--mee-border-top: 0px;
	--mee-border-right: 0px;
	--mee-border-bottom: 0px;
	--mee-border-left: 0px;
	--mee-border-color: #6C4DF6;
}
.mee-gallery.mee-border-solid .mee-gallery-item,
.mee-gallery.mee-border-dashed .mee-gallery-item,
.mee-gallery.mee-border-dotted .mee-gallery-item {
	border-top: var(--mee-border-top) solid var(--mee-border-color);
	border-right: var(--mee-border-right) solid var(--mee-border-color);
	border-bottom: var(--mee-border-bottom) solid var(--mee-border-color);
	border-left: var(--mee-border-left) solid var(--mee-border-color);
}
.mee-gallery.mee-border-animated .mee-gallery-item { border-color: transparent !important; }

.mee-gallery-item img { display: block; width: 100%; }
.mee-gallery-link { display: block; position: relative; }

.mee-gallery-overlay {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .35s ease;
	pointer-events: none;
}
.mee-gallery-item:hover .mee-gallery-overlay { opacity: 1; }

.mee-gallery-caption {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	margin: 0;
	padding: 14px 16px;
	transform: translateY(100%);
	transition: transform .35s ease;
}
.mee-gallery-item:hover .mee-gallery-caption { transform: translateY(0); }

.mee-gallery-item[data-mee-hover="zoom"] img { transition: transform .5s ease; }
.mee-gallery-item[data-mee-hover="zoom"]:hover img { transform: scale(1.08); }
.mee-gallery-item[data-mee-hover="grayscale"] img { filter: grayscale(1); transition: filter .4s ease; }
.mee-gallery-item[data-mee-hover="grayscale"]:hover img { filter: grayscale(0); }

.mee-gallery-placeholder {
	padding: 40px;
	text-align: center;
	background: #f1f1f5;
	color: #888;
}

/* ==========================================================================
   Animated Background
   ========================================================================== */
.mee-bg-wrap {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}
/* Sibling widgets inside the same Section should render above the background. */
.elementor-widget-mee-animated-background {
	position: absolute !important;
	inset: 0;
	z-index: 0;
}
.elementor-widget-mee-animated-background ~ .elementor-widget {
	position: relative;
	z-index: 1;
}

.mee-bg-gradient-layer {
	position: absolute;
	inset: -50%;
	width: 200%;
	height: 200%;
	background: linear-gradient(120deg, var(--mee-c1, #6C4DF6), var(--mee-c2, #F6564D), var(--mee-c3, #4DC6F6), var(--mee-c1, #6C4DF6));
	background-size: 400% 400%;
	animation: mee-gradient-shift var(--mee-speed, 12s) ease infinite;
}
@keyframes mee-gradient-shift {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

.mee-bg-blobs-layer {
	position: absolute;
	inset: 0;
	background: var(--mee-base, #0F0F1A);
	overflow: hidden;
}
.mee-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(50px);
	will-change: transform;
}

.mee-bg-particles-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	background: var(--mee-base, transparent);
}

.mee-bg-video,
.mee-bg-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background-size: cover;
	background-position: center;
}
.mee-bg-image[data-mee-motion="ken-burns"],
.mee-bg-wrap[data-mee-motion="ken-burns"] .mee-bg-image {
	animation: mee-ken-burns 18s ease-in-out infinite alternate;
}
.mee-bg-overlay {
	position: absolute;
	inset: 0;
}

/* ==========================================================================
   Accessibility: respect reduced-motion preference
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.mee-pre-animate { opacity: 1 !important; }
	.mee-ken-burns .mee-media-inner img,
	.mee-bg-gradient-layer,
	.mee-bg-image[data-mee-motion="ken-burns"] {
		animation: none !important;
	}
}