/*
	NPI animated mark — self-contained logo + draw-in animation.

	Usage:
	1. Link this stylesheet in <head>:
	     <link rel="stylesheet" href="npi-logo.css">
	2. Paste the markup from npi-logo.html wherever the logo should appear.

	Customize by setting these custom properties on .npi-mark itself,
	or on any ancestor (e.g. a dark-background panel):
	     --npi-logo-height   default 50px
	     --npi-logo-color    default #242829
*/

.npi-mark {
	--npi-logo-height:80px;
	--npi-logo-color:#fff;

	display:block;
	height:var(--npi-logo-height);
	width:auto;
	overflow:visible;
}

.npi-mark .npi-stroke {
	fill:none;
	stroke:var(--npi-logo-color);
	stroke-linecap:square;
	stroke-miterlimit:10;
	stroke-width:66.97px;
}

/* N */
.n-left {
	stroke-dasharray:none;
	stroke-dashoffset:0;
	opacity:0;
	animation:npiAlpha .30s ease-out .153s forwards;
}

.n-left-reveal {
	transform-box:fill-box;
	transform-origin:center bottom;
	transform:scaleY(0);
	animation:nLeftReveal .495s cubic-bezier(.32,.02,.35,1) .153s forwards;
}

.n-main {
	stroke-linecap:butt !important;
	stroke-dasharray:1.01;
	stroke-dashoffset:1.01;
	opacity:0;
	animation:
		nMainDraw .561s cubic-bezier(.34,.02,.26,1) .373s forwards,
		npiAlpha .32s ease-out .373s forwards;
}

.n-right {
	stroke-dasharray:none;
	stroke-dashoffset:0;
	opacity:0;
	animation:npiAlpha .28s ease-out .854s forwards;
}

.n-right-reveal {
	transform-box:fill-box;
	transform-origin:center top;
	transform:scaleY(0);
	animation:nRightReveal .409s cubic-bezier(.24,.04,.30,1) .854s forwards;
}

/* P */
.p-main {
	stroke-dasharray:1.01;
	stroke-dashoffset:1.01;
	opacity:0;
	animation:
		pMainDraw .780s cubic-bezier(.38,.02,.27,1) .153s forwards,
		npiAlpha .30s ease-out .153s forwards;
}

.p-curve {
	stroke-dasharray:none;
	stroke-dashoffset:0;
	opacity:0;
	animation:npiAlpha .28s ease-out .854s forwards;
}

.p-curve-reveal {
	stroke-dasharray:1.01;
	stroke-dashoffset:1.01;
	animation:pCurveReveal .409s cubic-bezier(.24,.08,.30,1) .854s forwards;
}

/* I */
.i-stroke {
	stroke-dasharray:1.01;
	stroke-dashoffset:1.01;
	opacity:0;
	animation:
		iDraw .341s cubic-bezier(.34,.02,.25,1) .922s forwards,
		npiAlpha .26s ease-out .922s forwards;
}

/* Animation */
@keyframes nLeftReveal {
	to { transform:scaleY(1); }
}

@keyframes nMainDraw {
	to { stroke-dashoffset:0; }
}

@keyframes nRightReveal {
	to { transform:scaleY(1); }
}

@keyframes pMainDraw {
	to { stroke-dashoffset:0; }
}

@keyframes pCurveReveal {
	to { stroke-dashoffset:0; }
}

@keyframes iDraw {
	to { stroke-dashoffset:0; }
}

/* Subtle fade-in as each stroke is drawn */
@keyframes npiAlpha {
	0% { opacity:.56; }
	55% { opacity:.86; }
	100% { opacity:1; }
}

/* Accessibility */
@media (prefers-reduced-motion:reduce) {
	.npi-mark *,
	.npi-mark {
		animation:none !important;
	}

	.npi-mark .npi-stroke {
		opacity:1;
		stroke-dashoffset:0;
	}

	.n-left-reveal,
	.n-right-reveal {
		transform:scaleY(1);
	}

	.p-curve-reveal {
		stroke-dashoffset:0;
	}
}