/* blocks/mw-animate/style.css */

.mw-animate {
	position: relative;
	z-index: 1;
}

/* Wenn NICHT geclippt wird, soll Hover ueber Nachbarelementen liegen */
.mw-animate:not(.mw-overflow-hidden):hover {
	z-index: 50;
}

/* Overflow / Clipping */
.mw-animate.mw-overflow-hidden {
	overflow: hidden;
}

/* Basis: Animations-Inner */
.mw-animate__inner {
	--mw-duration: 600ms;
	--mw-delay: 0ms;
	--mw-iteration: 1;

	--mw-slide-distance: 24px;
	--mw-slide-direction: up;

	--mw-scale-from: 0.95;

	animation-duration: var(--mw-duration);
	animation-delay: var(--mw-delay);
	animation-iteration-count: var(--mw-iteration);
	animation-fill-mode: both;
	animation-timing-function: ease;
	will-change: transform, opacity;
}

.mw-animate__inner:not(.mw-animate--run) {
	animation-name: none;
}

/* Editor soll immer sichtbar bleiben */
.mw-animate__inner--editor {
	opacity: 1 !important;
	transform: none !important;
}

/* Motion wrapper */
.mw-animate__motion {
	will-change: transform;
}

/* Bild/FIGURE Defaults (verhindert "komische" Ränder beim Clippen) */
.mw-animate .mw-animate__motion figure {
	margin: 0;
}

.mw-animate .mw-animate__motion img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* ==============================
   Initialzustand NUR wenn JS aktiv ist
   (Progressive Enhancement: ohne JS bleibt Content sichtbar)
   ============================== */

/* Fade: vor Start unsichtbar */
.mw-animate.mw-animate--js[data-mw-trigger="scroll"][data-mw-animation="fade"] .mw-animate__inner:not(.mw-animate--run),
.mw-animate.mw-animate--js[data-mw-trigger="load"][data-mw-animation="fade"] .mw-animate__inner:not(.mw-animate--run) {
	opacity: 0;
}

/* Slide: vor Start unsichtbar + Start-Transform passend zur Richtung */
.mw-animate.mw-animate--js[data-mw-trigger="scroll"][data-mw-animation="slide"] .mw-animate__inner:not(.mw-animate--run),
.mw-animate.mw-animate--js[data-mw-trigger="load"][data-mw-animation="slide"] .mw-animate__inner:not(.mw-animate--run) {
	opacity: 0;
}

.mw-animate.mw-animate--js[data-mw-trigger="scroll"][data-mw-animation="slide"][data-mw-slide-direction="up"] .mw-animate__inner:not(.mw-animate--run),
.mw-animate.mw-animate--js[data-mw-trigger="load"][data-mw-animation="slide"][data-mw-slide-direction="up"] .mw-animate__inner:not(.mw-animate--run) {
	transform: translate3d(0, var(--mw-slide-distance), 0);
}

.mw-animate.mw-animate--js[data-mw-trigger="scroll"][data-mw-animation="slide"][data-mw-slide-direction="down"] .mw-animate__inner:not(.mw-animate--run),
.mw-animate.mw-animate--js[data-mw-trigger="load"][data-mw-animation="slide"][data-mw-slide-direction="down"] .mw-animate__inner:not(.mw-animate--run) {
	transform: translate3d(0, calc(var(--mw-slide-distance) * -1), 0);
}

.mw-animate.mw-animate--js[data-mw-trigger="scroll"][data-mw-animation="slide"][data-mw-slide-direction="left"] .mw-animate__inner:not(.mw-animate--run),
.mw-animate.mw-animate--js[data-mw-trigger="load"][data-mw-animation="slide"][data-mw-slide-direction="left"] .mw-animate__inner:not(.mw-animate--run) {
	transform: translate3d(var(--mw-slide-distance), 0, 0);
}

.mw-animate.mw-animate--js[data-mw-trigger="scroll"][data-mw-animation="slide"][data-mw-slide-direction="right"] .mw-animate__inner:not(.mw-animate--run),
.mw-animate.mw-animate--js[data-mw-trigger="load"][data-mw-animation="slide"][data-mw-slide-direction="right"] .mw-animate__inner:not(.mw-animate--run) {
	transform: translate3d(calc(var(--mw-slide-distance) * -1), 0, 0);
}

/* Scale: vor Start unsichtbar + Start-Scale */
.mw-animate.mw-animate--js[data-mw-trigger="scroll"][data-mw-animation="scale"] .mw-animate__inner:not(.mw-animate--run),
.mw-animate.mw-animate--js[data-mw-trigger="load"][data-mw-animation="scale"] .mw-animate__inner:not(.mw-animate--run) {
	opacity: 0;
	transform: scale(var(--mw-scale-from));
}

/* Bounce Varianten: vor Start unsichtbar */
.mw-animate.mw-animate--js[data-mw-trigger="scroll"][data-mw-animation="bounce-in"] .mw-animate__inner:not(.mw-animate--run),
.mw-animate.mw-animate--js[data-mw-trigger="load"][data-mw-animation="bounce-in"] .mw-animate__inner:not(.mw-animate--run),
.mw-animate.mw-animate--js[data-mw-trigger="scroll"][data-mw-animation="bounce-up"] .mw-animate__inner:not(.mw-animate--run),
.mw-animate.mw-animate--js[data-mw-trigger="load"][data-mw-animation="bounce-up"] .mw-animate__inner:not(.mw-animate--run),
.mw-animate.mw-animate--js[data-mw-trigger="scroll"][data-mw-animation="bounce-down"] .mw-animate__inner:not(.mw-animate--run),
.mw-animate.mw-animate--js[data-mw-trigger="load"][data-mw-animation="bounce-down"] .mw-animate__inner:not(.mw-animate--run) {
	opacity: 0;
}

/* ==============================
   Animationen
   ============================== */

.mw-anim-fade.mw-animate--run {
	animation-name: mwFadeIn;
}

@keyframes mwFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

.mw-animate[data-mw-slide-direction="up"] .mw-anim-slide.mw-animate--run { animation-name: mwSlideInUp; }
.mw-animate[data-mw-slide-direction="down"] .mw-anim-slide.mw-animate--run { animation-name: mwSlideInDown; }
.mw-animate[data-mw-slide-direction="left"] .mw-anim-slide.mw-animate--run { animation-name: mwSlideInLeft; }
.mw-animate[data-mw-slide-direction="right"] .mw-anim-slide.mw-animate--run { animation-name: mwSlideInRight; }

@keyframes mwSlideInUp {
	from { opacity: 0; transform: translate3d(0, var(--mw-slide-distance), 0); }
	to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes mwSlideInDown {
	from { opacity: 0; transform: translate3d(0, calc(var(--mw-slide-distance) * -1), 0); }
	to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes mwSlideInLeft {
	from { opacity: 0; transform: translate3d(var(--mw-slide-distance), 0, 0); }
	to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes mwSlideInRight {
	from { opacity: 0; transform: translate3d(calc(var(--mw-slide-distance) * -1), 0, 0); }
	to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Scale: von scale-from -> 1 */
.mw-anim-scale.mw-animate--run {
	animation-name: mwScaleIn;
}

@keyframes mwScaleIn {
	from { opacity: 0; transform: scale(var(--mw-scale-from)); }
	to { opacity: 1; transform: scale(1); }
}

.mw-anim-bounce.mw-animate--run { animation-name: mwBounce; }

@keyframes mwBounce {
	0%, 20%, 50%, 80%, 100% { transform: translate3d(0, 0, 0); }
	40% { transform: translate3d(0, -18px, 0); }
	60% { transform: translate3d(0, -9px, 0); }
}

.mw-anim-bounce-in.mw-animate--run { animation-name: mwBounceIn; }

@keyframes mwBounceIn {
	0% { opacity: 0; transform: scale(0.8); }
	60% { opacity: 1; transform: scale(1.06); }
	80% { transform: scale(0.98); }
	100% { transform: scale(1); }
}

.mw-anim-bounce-up.mw-animate--run { animation-name: mwBounceUp; }

@keyframes mwBounceUp {
	0% { opacity: 0; transform: translate3d(0, 30px, 0); }
	60% { opacity: 1; transform: translate3d(0, -8px, 0); }
	80% { transform: translate3d(0, 3px, 0); }
	100% { transform: translate3d(0, 0, 0); }
}

.mw-anim-bounce-down.mw-animate--run { animation-name: mwBounceDown; }

@keyframes mwBounceDown {
	0% { opacity: 0; transform: translate3d(0, -30px, 0); }
	60% { opacity: 1; transform: translate3d(0, 8px, 0); }
	80% { transform: translate3d(0, -3px, 0); }
	100% { transform: translate3d(0, 0, 0); }
}

/* ==============================
   Hover Effekte (Transform auf INHALT, damit overflow hidden clippt)
   ============================== */

.mw-animate.mw-hover-zoom .mw-animate__motion,
.mw-animate.mw-hover-lift .mw-animate__motion,
.mw-animate.mw-hover-tilt .mw-animate__motion {
	transition: transform 180ms ease;
	transform-origin: center;
	will-change: transform;
}

/* ZOOM */
.mw-animate.mw-hover-zoom:hover .mw-animate__motion {
	transform: scale(var(--mw-hover-zoom-scale, 1.03));
}

/* LIFT */
.mw-animate.mw-hover-lift:hover .mw-animate__motion {
	transform: translate3d(0, calc(var(--mw-hover-lift-px, 6) * -1px), 0);
}

/* TILT */
.mw-animate.mw-hover-tilt:hover .mw-animate__motion {
	transform: rotateX(calc(var(--mw-hover-tilt-x, 3) * 1deg)) rotateY(calc(var(--mw-hover-tilt-y, -3) * 1deg));
}

/* GLOW (Filter am Wrapper) */
.mw-animate.mw-hover-glow {
	transition: filter 180ms ease;
}

.mw-animate.mw-hover-glow:hover {
	filter: drop-shadow(0 10px var(--mw-hover-glow-blur, 18px) rgba(0,0,0,var(--mw-hover-glow-opacity, 0.18)));
}