/**
 * NoticePulse — Bar Entrance Animations
 * Loaded only when a bar uses an animation type.
 * @package NoticePulse
 * @since   2.1.0
 */

/* ── Keyframes ──────────────────────────────────────────────────────────── */
@keyframes np-slide-top {
	from { transform: translateY(-110%); opacity: .4; }
	to   { transform: translateY(0);     opacity: 1; }
}
@keyframes np-slide-bottom {
	from { transform: translateY(110%); opacity: .4; }
	to   { transform: translateY(0);    opacity: 1; }
}
@keyframes np-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes np-bounce {
	0%   { transform: translateY(-110%); opacity: .4; }
	60%  { transform: translateY(6px);   opacity: 1; }
	80%  { transform: translateY(-4px); }
	100% { transform: translateY(0); }
}
@keyframes np-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.0); }
	50%       { box-shadow: 0 0 0 6px rgba(255,255,255,.15); }
}

/* ── Duration maps ──────────────────────────────────────────────────────── */
.np-bar--anim-slide.np-bar--anim-slow   { animation-duration: .8s !important; }
.np-bar--anim-slide.np-bar--anim-normal { animation-duration: .45s !important; }
.np-bar--anim-slide.np-bar--anim-fast   { animation-duration: .22s !important; }

.np-bar--anim-fade.np-bar--anim-slow    { animation-duration: 1s !important; }
.np-bar--anim-fade.np-bar--anim-normal  { animation-duration: .5s !important; }
.np-bar--anim-fade.np-bar--anim-fast    { animation-duration: .22s !important; }

.np-bar--anim-bounce.np-bar--anim-slow  { animation-duration: 1s !important; }
.np-bar--anim-bounce.np-bar--anim-normal{ animation-duration: .6s !important; }
.np-bar--anim-bounce.np-bar--anim-fast  { animation-duration: .35s !important; }

/* ── Slide ───────────────────────────────────────────────────────────────── */
.np-bar--top.np-bar--anim-slide {
	animation-name: np-slide-top;
	animation-timing-function: cubic-bezier(.34,1.26,.64,1);
	animation-fill-mode: both;
}
.np-bar--bottom.np-bar--anim-slide {
	animation-name: np-slide-bottom;
	animation-timing-function: cubic-bezier(.34,1.26,.64,1);
	animation-fill-mode: both;
}

/* ── Fade ────────────────────────────────────────────────────────────────── */
.np-bar--anim-fade {
	animation-name: np-fade;
	animation-timing-function: ease;
	animation-fill-mode: both;
}

/* ── Bounce ──────────────────────────────────────────────────────────────── */
.np-bar--top.np-bar--anim-bounce {
	animation-name: np-bounce;
	animation-timing-function: ease;
	animation-fill-mode: both;
}
.np-bar--bottom.np-bar--anim-bounce {
	animation-name: np-slide-bottom;
	animation-timing-function: cubic-bezier(.34,1.56,.64,1);
	animation-fill-mode: both;
}

/* ── Pulse (CTA button) ──────────────────────────────────────────────────── */
.np-bar--anim-pulse .np-bar__cta {
	animation: np-pulse 2s ease-in-out infinite;
}

/* ── Respect motion preference ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.np-bar--anim-slide,
	.np-bar--anim-fade,
	.np-bar--anim-bounce,
	.np-bar--anim-pulse .np-bar__cta {
		animation: none !important;
	}
}