/* ─── Base ─────────────────────────────────────────────────── */
.avanton-animate {
	opacity: 0;
	transition-property: opacity, transform, filter;
	transition-duration: var(--avanton-duration, 800ms);
	transition-delay: var(--avanton-delay, 0ms);
	transition-timing-function: var(--avanton-easing, cubic-bezier(0.22, 1, 0.36, 1));
	will-change: opacity, transform, filter;
}

.avanton-animate.is-avanton-visible {
	opacity: 1;
	transform: none !important;
	filter: none !important;
}

/* ─── Initial states per animation type ───────────────────── */
.avanton-animate[data-avanton-animate="fade-in"] {
	opacity: 0;
}

.avanton-animate[data-avanton-animate="fade-up"] {
	transform: translateY(var(--avanton-distance, 40px));
}

.avanton-animate[data-avanton-animate="fade-down"] {
	transform: translateY(calc(var(--avanton-distance, 40px) * -1));
}

.avanton-animate[data-avanton-animate="fade-left"] {
	transform: translateX(var(--avanton-distance, 40px));
}

.avanton-animate[data-avanton-animate="fade-right"] {
	transform: translateX(calc(var(--avanton-distance, 40px) * -1));
}

.avanton-animate[data-avanton-animate="zoom-in"] {
	transform: scale(0.94);
}

.avanton-animate[data-avanton-animate="zoom-out"] {
	transform: scale(1.06);
}

/* slide-* keeps full opacity — only the transform changes */
.avanton-animate[data-avanton-animate="slide-up"] {
	opacity: 1;
	transform: translateY(var(--avanton-distance, 40px));
}

.avanton-animate[data-avanton-animate="slide-down"] {
	opacity: 1;
	transform: translateY(calc(var(--avanton-distance, 40px) * -1));
}

.avanton-animate[data-avanton-animate="slide-left"] {
	opacity: 1;
	transform: translateX(var(--avanton-distance, 40px));
}

.avanton-animate[data-avanton-animate="slide-right"] {
	opacity: 1;
	transform: translateX(calc(var(--avanton-distance, 40px) * -1));
}

.avanton-animate[data-avanton-animate="blur-in"] {
	filter: blur(12px);
}

.avanton-animate[data-avanton-animate="rotate-in"] {
	transform: rotate(4deg) translateY(var(--avanton-distance, 30px));
}

/* ─── Accessibility ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.avanton-animate {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		transition: none !important;
	}
}

/* ─── Builder canvas: show scroll-trigger elements immediately ─ */
body.bricks-is-iframe .avanton-animate,
body.bricks-is-iframe [data-avanton-animate] {
	opacity: 1 !important;
	transform: none !important;
	filter: none !important;
	transition: none !important;
}

/* ════════════════════════════════════════════════════════════
   LOOP ANIMATIONS
   ════════════════════════════════════════════════════════════ */

/* ─── Base ─────────────────────────────────────────────────── */
.avanton-loop {
	animation-duration:        var(--avanton-loop-duration, 2000ms);
	animation-delay:           var(--avanton-loop-delay, 0ms);
	animation-iteration-count: infinite;
	animation-fill-mode:       both;
	animation-direction:       var(--avanton-loop-direction, normal);
}

/* ─── Per-type: name + timing function ────────────────────── */
.avanton-loop[data-avanton-loop="rotate"]     { animation-name: avanton-loop-rotate;      animation-timing-function: linear; }
.avanton-loop[data-avanton-loop="rotate-rev"] { animation-name: avanton-loop-rotate;      animation-timing-function: linear; animation-direction: reverse; }
.avanton-loop[data-avanton-loop="pulse"]      { animation-name: avanton-loop-pulse;       animation-timing-function: ease-in-out; }
.avanton-loop[data-avanton-loop="bounce"]     { animation-name: avanton-loop-bounce;      animation-timing-function: cubic-bezier(0.36, 0.07, 0.19, 0.97); }
.avanton-loop[data-avanton-loop="swing"]      { animation-name: avanton-loop-swing;       animation-timing-function: ease-in-out; }
.avanton-loop[data-avanton-loop="float"]      { animation-name: avanton-loop-float;       animation-timing-function: ease-in-out; }
.avanton-loop[data-avanton-loop="fade-pulse"] { animation-name: avanton-loop-fade-pulse;  animation-timing-function: ease-in-out; }
.avanton-loop[data-avanton-loop="shake"]      { animation-name: avanton-loop-shake;       animation-timing-function: ease-in-out; }
.avanton-loop[data-avanton-loop="heartbeat"]  { animation-name: avanton-loop-heartbeat;   animation-timing-function: ease-in-out; }
.avanton-loop[data-avanton-loop="flip-x"]     { animation-name: avanton-loop-flip-x;      animation-timing-function: ease-in-out; }
.avanton-loop[data-avanton-loop="flip-y"]     { animation-name: avanton-loop-flip-y;      animation-timing-function: ease-in-out; }
.avanton-loop[data-avanton-loop="wobble"]     { animation-name: avanton-loop-wobble;      animation-timing-function: ease-in-out; }

/* ─── Keyframes ────────────────────────────────────────────── */
@keyframes avanton-loop-rotate {
	to { transform: rotate(360deg); }
}

@keyframes avanton-loop-pulse {
	0%, 100% { transform: scale(1);    }
	50%       { transform: scale(1.1); }
}

@keyframes avanton-loop-bounce {
	0%, 100% { transform: translateY(0);     animation-timing-function: ease-in;  }
	40%       { transform: translateY(-20px); animation-timing-function: ease-out; }
	60%       { transform: translateY(-10px); }
}

@keyframes avanton-loop-swing {
	0%, 100% { transform: rotate(0deg);   }
	25%       { transform: rotate(-12deg); }
	75%       { transform: rotate(12deg);  }
}

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

@keyframes avanton-loop-fade-pulse {
	0%, 100% { opacity: 1;   }
	50%       { opacity: .3; }
}

@keyframes avanton-loop-shake {
	0%, 100% { transform: translateX(0);   }
	15%       { transform: translateX(-8px); }
	30%       { transform: translateX(8px);  }
	45%       { transform: translateX(-6px); }
	60%       { transform: translateX(6px);  }
	75%       { transform: translateX(-3px); }
	90%       { transform: translateX(3px);  }
}

@keyframes avanton-loop-heartbeat {
	0%, 100% { transform: scale(1);    }
	15%       { transform: scale(1.15); }
	30%       { transform: scale(1);    }
	45%       { transform: scale(1.12); }
	60%       { transform: scale(1);    }
}

@keyframes avanton-loop-flip-x {
	0%, 100% { transform: perspective(400px) rotateY(0deg);    }
	50%       { transform: perspective(400px) rotateY(180deg); }
}

@keyframes avanton-loop-flip-y {
	0%, 100% { transform: perspective(400px) rotateX(0deg);    }
	50%       { transform: perspective(400px) rotateX(180deg); }
}

@keyframes avanton-loop-wobble {
	0%, 100% { transform: translateX(0) rotate(0deg);   }
	15%       { transform: translateX(-8px) rotate(-5deg); }
	30%       { transform: translateX(6px)  rotate(3deg);  }
	45%       { transform: translateX(-5px) rotate(-3deg); }
	60%       { transform: translateX(4px)  rotate(2deg);  }
	75%       { transform: translateX(-2px) rotate(-1deg); }
}

/* ─── Accessibility ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.avanton-loop {
		animation: none !important;
	}
}

/* ─── Builder canvas: force loop animations visible ────────── */
/* Target [data-avanton-loop] directly — class may be stripped by Vue re-render */
body.bricks-is-iframe [data-avanton-loop] {
	animation-iteration-count: infinite !important;
	animation-fill-mode: both !important;
	animation-play-state: running !important;
	animation-duration: var(--avanton-loop-duration, 2000ms) !important;
	animation-delay: var(--avanton-loop-delay, 0ms) !important;
	animation-direction: var(--avanton-loop-direction, normal) !important;
}

body.bricks-is-iframe [data-avanton-loop="rotate"]     { animation-name: avanton-loop-rotate !important;     animation-timing-function: linear !important; }
body.bricks-is-iframe [data-avanton-loop="rotate-rev"] { animation-name: avanton-loop-rotate !important;     animation-timing-function: linear !important; animation-direction: reverse !important; }
body.bricks-is-iframe [data-avanton-loop="pulse"]      { animation-name: avanton-loop-pulse !important;      animation-timing-function: ease-in-out !important; }
body.bricks-is-iframe [data-avanton-loop="bounce"]     { animation-name: avanton-loop-bounce !important;     animation-timing-function: cubic-bezier(0.36, 0.07, 0.19, 0.97) !important; }
body.bricks-is-iframe [data-avanton-loop="swing"]      { animation-name: avanton-loop-swing !important;      animation-timing-function: ease-in-out !important; }
body.bricks-is-iframe [data-avanton-loop="float"]      { animation-name: avanton-loop-float !important;      animation-timing-function: ease-in-out !important; }
body.bricks-is-iframe [data-avanton-loop="fade-pulse"] { animation-name: avanton-loop-fade-pulse !important; animation-timing-function: ease-in-out !important; }
body.bricks-is-iframe [data-avanton-loop="shake"]      { animation-name: avanton-loop-shake !important;      animation-timing-function: ease-in-out !important; }
body.bricks-is-iframe [data-avanton-loop="heartbeat"]  { animation-name: avanton-loop-heartbeat !important;  animation-timing-function: ease-in-out !important; }
body.bricks-is-iframe [data-avanton-loop="flip-x"]     { animation-name: avanton-loop-flip-x !important;     animation-timing-function: ease-in-out !important; }
body.bricks-is-iframe [data-avanton-loop="flip-y"]     { animation-name: avanton-loop-flip-y !important;     animation-timing-function: ease-in-out !important; }
body.bricks-is-iframe [data-avanton-loop="wobble"]     { animation-name: avanton-loop-wobble !important;     animation-timing-function: ease-in-out !important; }