/**
 * TM Animations — reusable Elementor attribute-based animations
 *
 * Requires tm-animations.js
 *
 * Attributes:
 *   tm-animation="word-rise" | "letter-rise" | "fade-in" | "blur-fade-in" | "scale-down"
 *   tm-animation-trigger="scroll" | "load"
 *   tm-animation-delay="750" | "0.75s"
 */

:root {
	--tm-transition: cubic-bezier(0.455, 0.03, 0.518, 0.915);
	--tm-transition-duration: 0.75s;
	--tm-fade-in-duration: 0.75s;
	--tm-blur-fade-duration: 0.75s;
	--tm-fade-in-y-distance: 30px;
}


/* ------------------------------------------------------------------------------------------------------------
   Attribute animations (tm-animation)
------------------------------------------------------------------------------------------------------------ */

/* Word rise */
[tm-animation="word-rise"] .elementor-heading-title,
[tm-animation="word-rise"] .e-heading-base,
[tm-animation="letter-rise"] .elementor-heading-title,
[tm-animation="letter-rise"] .e-heading-base {
	display: inline;
}

[tm-animation="word-rise"] .tm-word-rise__mask,
[tm-animation="letter-rise"] .tm-letter-rise__word {
	display: inline-block;
	vertical-align: bottom;
}

[tm-animation="word-rise"] .tm-word-rise__mask {
	overflow: hidden;
	margin-right: 0.18em;
}

[tm-animation="word-rise"] .tm-word-rise__mask:last-child {
	margin-right: 0;
}

[tm-animation="word-rise"] .tm-word-rise__word {
	display: inline-block;
	transform: translateY(20px);
	opacity: 0;
	transition:
		transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
		opacity 0.55s ease-out;
	will-change: transform, opacity;
}

[tm-animation="word-rise"].is-visible .tm-word-rise__word {
	transform: translateY(0);
	opacity: 1;
}

/* Letter rise */
[tm-animation="letter-rise"] .tm-letter-rise__word {
	display: inline-block;
	white-space: nowrap;
	margin-right: 0.22em;
	vertical-align: bottom;
}

[tm-animation="letter-rise"] .tm-letter-rise__word:last-child {
	margin-right: 0;
}

[tm-animation="letter-rise"] .tm-letter-rise__mask {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
}

[tm-animation="letter-rise"] .tm-letter-rise__letters {
	display: inline-block;
}

[tm-animation="letter-rise"] .tm-letter-rise__char {
	display: inline-block;
	transform: translateY(18px);
	opacity: 0;
	transition:
		transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
		opacity 0.45s ease-out;
	will-change: transform, opacity;
}

[tm-animation="letter-rise"].is-visible .tm-letter-rise__char {
	transform: translateY(0);
	opacity: 1;
}

/* Fade in — opacity only, on the element with the attribute (widget or container) */
.elementor-element[tm-animation="fade-in"] {
	transition: opacity var(--tm-fade-in-duration) var(--tm-transition);
	opacity: 0;
}

.elementor-element[tm-animation="fade-in"].is-visible {
	opacity: 1;
}

/* Blur fade in — opacity + filter on the element (no will-change: filter breaks child blur) */
.elementor-element[tm-animation="blur-fade-in"] {
	transition:
		opacity var(--tm-blur-fade-duration) var(--tm-transition),
		filter var(--tm-blur-fade-duration) var(--tm-transition);
	filter: blur(10px);
	opacity: 0;
}

.elementor-element[tm-animation="blur-fade-in"].is-visible {
	filter: blur(0);
	opacity: 1;
}

/* Scale down */
[tm-animation="scale-down"] {
	overflow: hidden;
}

[tm-animation="scale-down"] img {
	display: block;
	width: 100%;
	height: auto;
	transform: scale(1.12);
	transform-origin: center center;
	opacity: 0;
	transition:
		transform 1.5s cubic-bezier(0.22, 0.61, 0.36, 1),
		opacity 1s ease-out;
	will-change: transform, opacity;
}

[tm-animation="scale-down"].is-visible img {
	transform: scale(1);
	opacity: 1;
}

/* Image scale hover (tm-element) */
.image-scale [tm-element="image-inside-border"],
[tm-element="image-scale"] [tm-element="image-inside-border"] {
	transition: opacity 0.25s var(--tm-transition);
}

.image-scale:hover img,
[tm-element="image-scale"]:hover img {
	transform: scale(1.1);
}

.image-scale:hover [tm-element="image-inside-border"],
[tm-element="image-scale"]:hover .image__border-decoration {
	opacity: 0.15;
}