/* Hide elements with data-vani attribute immediately (before JS runs) */
[data-vani]:not(.nd-vani--visible):not(.nd-vani--stopped-right):not(.nd-vani--stopped-left){
	opacity:0;
	visibility:hidden;
}

/* Base utility */
.nd-vani{opacity:0;transform:translateX(-40px);will-change:transform,opacity;visibility:visible}
.nd-vani.nd-vani--visible{opacity:1;transform:none;transition:transform var(--nd-vani-duration,1s) ease-out,opacity .6s ease-out}

/* Optional (nicht mehr empfohlen): Slide-in an Position */
.nd-vani.nd-vani--slide-in{position:relative}

/* Wrapping container to preserve layout height when element goes fixed/absolute */
.nd-vani-wrap{position:relative}

/* Fly-right-stop (flies to right edge on same vertical level and then scrolls with content) */
.nd-vani.nd-vani--fly-right{position:absolute;left:0;top:0;transform:translateX(-120vw);z-index:9999;animation:nd-vani-fly-right var(--nd-vani-duration,1s) ease-out both}
.nd-vani.nd-vani--stopped-right{position:absolute;top:0;right:var(--nd-vani-stop-offset,20px);left:auto;transform:none;z-index:auto}

@keyframes nd-vani-fly-right{
	0%{transform:translateX(-120vw)}
	100%{transform:translateX(calc(var(--nd-vani-viewport-width, 100vw) - var(--nd-vani-wrapper-left, 0px) - var(--nd-vani-stop-offset, 20px) - 100%))}
}

/* Fly-left-stop (mirror variant) */
.nd-vani.nd-vani--fly-left{position:absolute;left:0;top:0;transform:translateX(120vw);z-index:9999;animation:nd-vani-fly-left var(--nd-vani-duration,1s) ease-out both}
.nd-vani.nd-vani--stopped-left{position:absolute;top:0;left:var(--nd-vani-stop-offset,20px);right:auto;transform:none;z-index:auto}

@keyframes nd-vani-fly-left{
	0%{transform:translateX(120vw)}
	100%{transform:translateX(calc(var(--nd-vani-stop-offset, 20px) - var(--nd-vani-wrapper-left, 0px)))}
}

/* Fade-Up */
.nd-vani.nd-vani--fade-up{opacity:0;transform:translateY(100px);visibility:visible}
.nd-vani.nd-vani--fade-up.nd-vani--visible{animation:nd-vani-fade-up var(--nd-vani-duration,1.5s) cubic-bezier(0.25,0.1,0.25,1) both}

@keyframes nd-vani-fade-up{
	0%{opacity:0;transform:translateY(100px)}
	10%{opacity:0;transform:translateY(90px)}
	100%{opacity:1;transform:translateY(0)}
}

/* Fade-Down */
.nd-vani.nd-vani--fade-down{opacity:0;transform:translateY(-100px);visibility:visible}
.nd-vani.nd-vani--fade-down.nd-vani--visible{animation:nd-vani-fade-down var(--nd-vani-duration,1.5s) cubic-bezier(0.25,0.1,0.25,1) both}

@keyframes nd-vani-fade-down{
	0%{opacity:0;transform:translateY(-100px)}
	10%{opacity:0;transform:translateY(-90px)}
	100%{opacity:1;transform:translateY(0)}
}

/* Fade-Right */
.nd-vani.nd-vani--fade-right{opacity:0;transform:translateX(min(100vw, 300px));visibility:visible}
.nd-vani.nd-vani--fade-right.nd-vani--visible{animation:nd-vani-fade-right var(--nd-vani-duration,1.5s) cubic-bezier(0.25,0.1,0.25,1) both}

@keyframes nd-vani-fade-right{
	0%{opacity:0;transform:translateX(min(100vw, 300px))}
	10%{opacity:0;transform:translateX(calc(min(100vw, 300px) - 10px))}
	100%{opacity:1;transform:translateX(0)}
}

/* Fade-Left */
.nd-vani.nd-vani--fade-left{opacity:0;transform:translateX(max(-100vw, -300px));visibility:visible}
.nd-vani.nd-vani--fade-left.nd-vani--visible{animation:nd-vani-fade-left var(--nd-vani-duration,1.5s) cubic-bezier(0.25,0.1,0.25,1) both}

@keyframes nd-vani-fade-left{
	0%{opacity:0;transform:translateX(max(-100vw, -300px))}
	10%{opacity:0;transform:translateX(calc(max(-100vw, -300px) + 10px))}
	100%{opacity:1;transform:translateX(0)}
}

/* Fade-In */
.nd-vani.nd-vani--fade-in{opacity:0;transform:none;visibility:visible}
.nd-vani.nd-vani--fade-in.nd-vani--visible{animation:nd-vani-fade-in var(--nd-vani-duration,3s) cubic-bezier(0.25,0.1,0.25,1) both}

@keyframes nd-vani-fade-in{
	0%{opacity:0}
	100%{opacity:1}
}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
	.nd-vani{opacity:1;transform:none}
	.nd-vani.nd-vani--visible{transition:none}
	.nd-vani.nd-vani--fly-right,
	.nd-vani.nd-vani--fly-left{animation:none;transform:none;position:static}
	.nd-vani.nd-vani--fade-up,
	.nd-vani.nd-vani--fade-down,
	.nd-vani.nd-vani--fade-right,
	.nd-vani.nd-vani--fade-left,
	.nd-vani.nd-vani--fade-in{animation:none;transform:none}
}