/* =====================================================
   SVG Notabin v1.0.1 – Widget Styles
   ===================================================== */

/* ---- Wrapper ---- */
.svgn-wrapper {
	display: inline-block;
	max-width: 100%;
	line-height: 0;
	transition-property: transform, opacity, filter;
	transition-timing-function: ease;
	transition-duration: 0.3s;
	transform:
		rotate(var(--svgn-rotate, 0deg))
		scaleX(var(--svgn-scale-x, 1))
		scaleY(var(--svgn-scale-y, 1))
		skewX(var(--svgn-skew-x, 0deg))
		skewY(var(--svgn-skew-y, 0deg));
}

.svgn-wrapper:hover {
	transform:
		rotate(var(--svgn-hover-rotate, var(--svgn-rotate, 0deg)))
		scaleX(var(--svgn-hover-scale, var(--svgn-scale-x, 1)))
		scaleY(var(--svgn-hover-scale, var(--svgn-scale-y, 1)))
		skewX(var(--svgn-skew-x, 0deg))
		skewY(var(--svgn-skew-y, 0deg))
		translateX(var(--svgn-hover-tx, 0px))
		translateY(var(--svgn-hover-ty, 0px));
}

/* ---- SVG element ---- */
.svgn-wrapper > svg,
.svgn-wrapper > a > svg {
	display: block;
	max-width: 100%;
	height: auto;
}

/* ---- Image fallback ---- */
.svgn-wrapper img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* ---- Placeholder ---- */
.svgn-placeholder {
	display: inline-block;
	max-width: 100%;
}
.svgn-placeholder svg {
	display: block;
	max-width: 100%;
}

/* ---- Caption ---- */
.svgn-caption {
	display: block;
	line-height: 1.5;
	margin-top: 8px;
}

/* =====================================================
   Built-in CSS Animations
   ===================================================== */

.svgn-anim-active {
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-fill-mode: both;
}

/* Spin */
@keyframes svgn-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}
.svgn-anim-spin {
	animation-name: svgn-spin;
	animation-timing-function: linear;
}

/* Pulse */
@keyframes svgn-pulse {
	0%, 100% { transform: scale(1); }
	50%       { transform: scale(1.12); }
}
.svgn-anim-pulse {
	animation-name: svgn-pulse;
	animation-timing-function: ease-in-out;
}

/* Bounce */
@keyframes svgn-bounce {
	0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
	40%                      { transform: translateY(-20px); }
	60%                      { transform: translateY(-10px); }
}
.svgn-anim-bounce {
	animation-name: svgn-bounce;
	animation-timing-function: ease;
}

/* Shake */
@keyframes svgn-shake {
	0%, 100%                { transform: translateX(0); }
	10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); }
	20%, 40%, 60%, 80%      { transform: translateX(8px); }
}
.svgn-anim-shake {
	animation-name: svgn-shake;
	animation-timing-function: ease-in-out;
}

/* Float */
@keyframes svgn-float {
	0%, 100% { transform: translateY(0); }
	50%       { transform: translateY(-14px); }
}
.svgn-anim-float {
	animation-name: svgn-float;
	animation-timing-function: ease-in-out;
}

/* Swing */
@keyframes svgn-swing {
	0%, 100% { transform: rotate(0deg); }
	20%       { transform: rotate(12deg); }
	40%       { transform: rotate(-8deg); }
	60%       { transform: rotate(4deg); }
	80%       { transform: rotate(-4deg); }
}
.svgn-anim-swing {
	animation-name: svgn-swing;
	animation-timing-function: ease-in-out;
	transform-origin: top center;
}

/* Blink */
@keyframes svgn-blink {
	0%, 100% { opacity: 1; }
	49%       { opacity: 1; }
	50%       { opacity: 0; }
	99%       { opacity: 0; }
}
.svgn-anim-blink {
	animation-name: svgn-blink;
	animation-timing-function: linear;
}

/* =====================================================
   Responsive
   ===================================================== */
@media (max-width: 767px) {
	.svgn-wrapper {
		max-width: 100%;
	}
}