/* NAKWON Italia
 *
 * Una notte a Nakwon: si parte sotto la pioggia in una strada piena di infetti,
 * si legge il bollettino del Comitato affisso al muro, si vive la notte in città e
 * il giorno nel rifugio, si ripassano le regole sul nastro di pericolo e si torna
 * al checkpoint all'alba, dove il semaforo è verde. Il Discord è il checkpoint.
 * Il giallo del nastro è per titoli e dettagli, il blu violaceo solo per il Discord.
 *
 * 1. Font
 * 2. Colori e base
 * 3. Pulsanti
 * 4. Eroe e pioggia
 * 5. Il bollettino del Comitato
 * 6. La notte e il giorno
 * 7. Le quattro regole
 * 8. Scorci e link
 * 9. Domande frequenti
 * 10. Chiusura e piede
 * 11. Pagine di testo
 * 12. Telefono e tablet
 * 13. Movimento
 */

/* 1. Font: file sul nostro server, licenza SIL Open Font License ------------- */

@font-face { font-family: "Black Ops One"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/black-ops-one-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/ibm-plex-sans.woff2") format("woff2"); }

/* 2. Colori e base --------------------------------------------------------- */

:root {
	--nki-notte: #0a0e14;
	--nki-asfalto: #12181f;
	--nki-blu-notte: #16222e;
	--nki-cemento: #c9c6bd;
	--nki-cemento-scuro: #a9a59a;
	--nki-carta: #efeadc;
	--nki-inchiostro: #191b1e;
	--nki-grigio: #4b5056;
	--nki-nebbia: #b9c4cc;
	--nki-bianco: #f4f5f2;
	--nki-giallo: #f2c230;
	--nki-sodio: #f29a3a;
	--nki-sangue: #b3261e;
	--nki-sangue-chiaro: #d2412f;
	--nki-alba: #f6b073;
	--nki-verde-semaforo: #36d07a;
	--nki-verde-it: #1f8a4c;
	--nki-rosso-it: #c62f2b;
	--nki-rosso: #c8322c;
	--nki-rosso-acceso: #de423b;
	--nki-verde: #3ba55d;
	--nki-blu: #5865f2;
	--nki-blu-chiaro: #6c78f7;
	--nki-titoli: "Black Ops One", Impact, "Arial Black", sans-serif;
	--nki-testo: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
	--nki-sfondo-img: url("../img/sfondo.webp");
	--nki-sfondo-img-piccola: url("../img/sfondo-telefono.webp");
	--nki-nastro: repeating-linear-gradient(-45deg, var(--nki-giallo) 0 22px, var(--nki-inchiostro) 22px 44px);
	--nki-tricolore: linear-gradient(90deg, var(--nki-verde-it) 0 33.33%, var(--nki-bianco) 33.33% 66.66%, var(--nki-rosso-it) 66.66%);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--nki-notte);
	color: var(--nki-bianco);
	font: 400 1.1rem/1.6 var(--nki-testo);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

figure { margin: 0; }

a { color: inherit; }

:focus-visible { outline: 3px solid var(--nki-giallo); outline-offset: 4px; }

h1, h2, h3 { font-family: var(--nki-titoli); font-weight: 400; letter-spacing: .01em; }

/* 3. Pulsanti -------------------------------------------------------------- */

.nki-pulsanti {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 16px;
}

.nki-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55em;
	border-radius: 6px;
	color: #fff;
	font-family: var(--nki-testo);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: transform .2s, background-color .2s, box-shadow .2s;
}

.nki-btn:hover { transform: translateY(-2px); }

.nki-btn--discord {
	padding: .85em 1.45em;
	background: var(--nki-blu);
	box-shadow: 0 10px 30px rgba(88, 101, 242, .5);
	font-size: clamp(1.25rem, 2vw, 1.42rem);
}

.nki-btn--discord:hover {
	background: var(--nki-blu-chiaro);
	box-shadow: 0 12px 36px rgba(108, 120, 247, .7);
}

.nki-btn--discord .nki-icona { width: 1.15em; height: 1.15em; }

.nki-btn--reddit {
	padding: .85em 1.25em;
	background: var(--nki-rosso);
	box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
	font-size: 1.08rem;
}

.nki-btn--reddit:hover { background: var(--nki-rosso-acceso); }

.nki-btn--reddit .nki-icona { width: 1.1em; height: 1.1em; }

.nki-icona { flex: none; }

/* 4. Eroe e pioggia -------------------------------------------------------- */

.nki-eroe {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 100vh;
	min-height: 100svh;
	padding: clamp(28px, 6vh, 64px) clamp(16px, 6vw, 96px) clamp(80px, 12vh, 120px);
	overflow: hidden;
	isolation: isolate;
	background: var(--nki-notte);
}

/* La strada di notte: il testo sul lato buio a sinistra, gli infetti che arrivano da destra. */
.nki-eroe__sfondo {
	position: absolute;
	inset: 0;
	z-index: -2;
	background: var(--nki-sfondo-img) 18% 50% / cover no-repeat;
}

.nki-eroe__sfondo::before,
.nki-eroe__sfondo::after {
	content: "";
	position: absolute;
	inset: 0;
}

.nki-eroe__sfondo::before {
	background: linear-gradient(90deg, rgba(10, 14, 20, .9) 0, rgba(10, 14, 20, .72) 30%, rgba(10, 14, 20, .15) 62%, rgba(10, 14, 20, 0) 80%);
}

.nki-eroe__sfondo::after {
	top: auto;
	height: 24%;
	background: linear-gradient(180deg, rgba(10, 14, 20, 0), var(--nki-notte));
}

/* La pioggia: gocce inclinate su due strati, in riquadri da 200 px che si ripetono. */
.nki-pioggia {
	position: absolute;
	inset: -800px -200px 0 0;
	z-index: -1;
	background: url("../img/pioggia-vicina.svg"), url("../img/pioggia-lontana.svg");
	pointer-events: none;
}

.nki-eroe__corpo {
	display: flex;
	align-items: center;
	gap: clamp(24px, 3vw, 44px);
	width: 100%;
}

.nki-logo {
	flex: none;
	width: min(260px, 32vh);
	filter: drop-shadow(0 14px 28px rgba(0, 0, 0, .75));
}

.nki-eroe__testo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	min-width: 0;
	max-width: 540px;
}

.nki-titolo {
	margin: 0;
	font-size: clamp(3.1rem, 5.6vw, 5.2rem);
	line-height: .98;
}

.nki-motto {
	display: block;
	margin-bottom: .6em;
	color: var(--nki-giallo);
	font: 600 clamp(.98rem, 1.4vw, 1.12rem)/1.25 var(--nki-testo);
	letter-spacing: .08em;
	text-transform: uppercase;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .9);
}

.nki-scritta {
	color: var(--nki-bianco);
	text-shadow: 0 4px 24px rgba(0, 0, 0, .8);
}

.nki-invito {
	margin: 0 0 8px;
	max-width: 30em;
	font-size: 1.2rem;
	line-height: 1.45;
	text-wrap: balance;
	text-shadow: 0 1px 10px rgba(0, 0, 0, .95);
}

.nki-numeri {
	margin: 2px 0 0;
	font-weight: 600;
	color: var(--nki-nebbia);
	text-shadow: 0 1px 8px rgba(0, 0, 0, .9);
}

.nki-numeri strong { color: var(--nki-bianco); font-weight: 700; }

.nki-pallino {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin: 0 .5em .16em 0;
	border-radius: 50%;
	background: var(--nki-verde);
	box-shadow: 0 0 8px var(--nki-verde);
	vertical-align: middle;
}

.nki-giu {
	position: absolute;
	left: 50%;
	bottom: 14px;
	z-index: 2;
	translate: -50% 0;
	padding: 8px;
	color: var(--nki-giallo);
}

.nki-giu:hover { color: var(--nki-bianco); }

/* 5. Il bollettino del Comitato, affisso a un muro di cemento -------------- */

.nki-gioco {
	margin-top: -1px;
	padding: 56px 16px 96px;
	background:
		url("../img/grana.webp"),
		linear-gradient(180deg, var(--nki-notte), var(--nki-asfalto) 120px, var(--nki-asfalto));
}

.nki-gioco__corpo { max-width: 1140px; margin: 0 auto; }

.nki-bollettino {
	position: relative;
	padding: 0 clamp(20px, 4vw, 48px) clamp(24px, 4vw, 40px);
	background:
		url("../img/grana.webp"),
		linear-gradient(180deg, #f4f0e4, var(--nki-carta));
	box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .85);
	color: var(--nki-inchiostro);
	rotate: -.4deg;
}

/* Il nastro adesivo che tiene il foglio. */
.nki-bollettino::before,
.nki-bollettino::after {
	content: "";
	position: absolute;
	top: -14px;
	width: 120px;
	height: 30px;
	background: rgba(225, 216, 190, .78);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

.nki-bollettino::before { left: 8%; rotate: -4deg; }

.nki-bollettino::after { right: 8%; rotate: 5deg; }

.nki-bollettino :focus-visible { outline-color: var(--nki-inchiostro); }

.nki-bollettino__testata {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 0 calc(-1 * clamp(20px, 4vw, 48px)) 28px;
	padding: 12px clamp(20px, 4vw, 48px);
	background: var(--nki-sangue);
	color: #fff;
	font: 700 .9rem/1.2 var(--nki-testo);
	letter-spacing: .12em;
	text-transform: uppercase;
}

.nki-coppia {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: center;
	gap: clamp(28px, 5vw, 56px);
}

.nki-coppia__testo h2 {
	margin: 0 0 16px;
	font-size: clamp(2rem, 3.8vw, 2.8rem);
	line-height: 1.04;
}

.nki-coppia__testo p { margin: 0 0 14px; max-width: 34em; }

.nki-coppia__testo p:last-child { margin-bottom: 0; }

.nki-foto img {
	width: 100%;
	filter: contrast(1.05);
	box-shadow: 0 0 0 1px rgba(25, 27, 30, .35), 0 18px 34px -16px rgba(0, 0, 0, .6);
}

.nki-dati {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 40px 0 0;
	border-top: 3px solid var(--nki-inchiostro);
}

.nki-dati > div { padding: 16px 18px 4px; }

.nki-dati > div + div { border-left: 1px solid rgba(25, 27, 30, .25); }

.nki-dati dt {
	color: var(--nki-sangue);
	font-size: .88rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.nki-dati dd {
	margin: 4px 0 0;
	font: 400 clamp(1.15rem, 1.8vw, 1.4rem)/1.15 var(--nki-titoli);
}

.nki-nota {
	max-width: 44em;
	margin: 32px auto 0;
	color: var(--nki-nebbia);
	text-align: center;
	text-wrap: balance;
}

/* 6. La notte e il giorno: la memoria visiva della pagina ------------------ */

.nki-ciclo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	background: var(--nki-asfalto);
}

.nki-ciclo > h2 {
	grid-column: 1 / -1;
	margin: 0;
	padding: 72px 16px 40px;
	font-size: clamp(2.2rem, 4.6vw, 3.3rem);
	line-height: 1.04;
	text-align: center;
}

.nki-ciclo__parte {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: clamp(28px, 4vw, 56px) clamp(16px, 4vw, 56px) clamp(48px, 6vw, 80px);
}

.nki-ciclo__notte {
	background: linear-gradient(180deg, var(--nki-blu-notte), #0d141c);
}

.nki-ciclo__giorno {
	background: linear-gradient(180deg, #3a2a20, #5a3a26 40%, #8a5532);
}

/* L'ora, come su un orologio digitale. */
.nki-ora {
	margin: 0;
	font: 400 clamp(3rem, 7vw, 5.4rem)/1 var(--nki-titoli);
	letter-spacing: .04em;
}

.nki-ciclo__notte .nki-ora { color: #7fa6c8; text-shadow: 0 0 24px rgba(127, 166, 200, .35); }

.nki-ciclo__giorno .nki-ora { color: var(--nki-alba); text-shadow: 0 0 24px rgba(246, 176, 115, .4); }

.nki-ciclo__foto img {
	width: 100%;
	aspect-ratio: 10 / 7;
	object-fit: cover;
	box-shadow: 0 24px 44px -18px rgba(0, 0, 0, .8);
}

.nki-ciclo__testo h3 {
	margin: 0 0 10px;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	line-height: 1.1;
}

.nki-ciclo__testo p { margin: 0; max-width: 32em; color: #e6e9ea; }

.nki-ciclo__giorno .nki-ciclo__testo p { color: #f7e9dc; }

/* 7. Le quattro regole, sul nastro di pericolo ----------------------------- */

.nki-regole {
	position: relative;
	padding: 96px 16px 88px;
	background: var(--nki-notte);
}

.nki-nastro {
	position: absolute;
	inset: 0 0 auto;
	height: 26px;
	background: var(--nki-nastro);
	box-shadow: 0 4px 0 rgba(0, 0, 0, .35);
}

.nki-regole > h2 {
	max-width: 1120px;
	margin: 0 auto 44px;
	color: var(--nki-giallo);
	font-size: clamp(2.2rem, 4.6vw, 3.3rem);
	line-height: 1.04;
}

.nki-regole__elenco {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 40px);
	max-width: 1120px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.nki-regola {
	display: flex;
	flex-direction: column;
	border: 1px solid rgba(242, 194, 48, .28);
	border-top: 6px solid var(--nki-giallo);
	background: var(--nki-asfalto);
}

.nki-regola__foto img {
	width: 100%;
	aspect-ratio: 25 / 14;
	object-fit: cover;
}

.nki-regola__testo { position: relative; padding: 22px 24px 26px; }

.nki-regola__numero {
	position: absolute;
	top: -30px;
	right: 18px;
	padding: 6px 10px;
	background: var(--nki-giallo);
	color: var(--nki-inchiostro);
	font: 400 1.4rem/1 var(--nki-titoli);
}

.nki-regola h3 {
	margin: 0 0 8px;
	font-size: clamp(1.4rem, 2.2vw, 1.75rem);
	line-height: 1.1;
}

.nki-regola p { margin: 0; color: var(--nki-nebbia); }

/* 8. Scorci e link --------------------------------------------------------- */

.nki-scorci {
	padding: 0 16px 64px;
	background: var(--nki-notte);
}

.nki-scorci__foto {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
	max-width: 1240px;
	margin: 0 auto;
}

.nki-scorci__foto img { width: 100%; }

.nki-link {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 36px;
	margin: 36px 0 0;
	padding: 0;
	list-style: none;
}

.nki-link a {
	font-weight: 700;
	text-decoration-color: var(--nki-giallo);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

.nki-link a:hover { color: var(--nki-giallo); }

/* 9. Domande frequenti ----------------------------------------------------- */

.nki-domande {
	margin-top: -1px;
	padding: 48px max(16px, calc((100% - 780px) / 2)) 88px;
	background: var(--nki-asfalto);
}

.nki-domande > h2 {
	margin: 0 0 22px;
	font-size: clamp(2.1rem, 4.2vw, 2.9rem);
	line-height: 1.04;
}

.nki-domande details { border-top: 1px solid rgba(185, 196, 204, .22); }

.nki-domande details:last-of-type { border-bottom: 1px solid rgba(185, 196, 204, .22); }

.nki-domande summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 14px 2px;
	cursor: pointer;
	list-style: none;
}

.nki-domande summary::-webkit-details-marker { display: none; }

.nki-domande summary::after {
	content: "+";
	flex: none;
	color: var(--nki-giallo);
	font: 700 1.6rem/1 var(--nki-testo);
	transition: rotate .2s;
}

.nki-domande details[open] summary::after { rotate: 45deg; }

.nki-domande h3 { margin: 0; font: 600 1.14rem/1.3 var(--nki-testo); letter-spacing: 0; }

.nki-domande details p { margin: 0 0 16px; max-width: 40em; color: var(--nki-nebbia); }

/* 10. Chiusura e piede ----------------------------------------------------- */

.nki-chiusura {
	position: relative;
	margin-top: -1px;
	padding: 88px 16px 120px;
	overflow: hidden;
	isolation: isolate;
	background: var(--nki-asfalto);
	text-align: center;
}

/* L'alba sul fiume: si torna al checkpoint. */
.nki-alba {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(80% 70% at 50% 110%, #ffd9a8 0, var(--nki-alba) 24%, rgba(214, 112, 76, .85) 48%, rgba(70, 52, 74, .7) 72%, rgba(18, 24, 31, 0) 100%),
		linear-gradient(180deg, var(--nki-asfalto), #2b2a3a 70%, #4f3b48);
}

.nki-chiusura__corpo { position: relative; }

/* Il semaforo del checkpoint: verde, si può passare. */
.nki-semaforo {
	display: flex;
	justify-content: center;
	margin: 0 0 18px;
}

.nki-semaforo span {
	display: block;
	width: 46px;
	height: 46px;
	border: 8px solid #1b1d20;
	border-radius: 50%;
	background: var(--nki-verde-semaforo);
	box-shadow: 0 0 0 3px #3a3d42, 0 0 26px 6px rgba(54, 208, 122, .55);
}

.nki-chiusura h2 {
	margin: 0;
	color: var(--nki-bianco);
	font-size: clamp(2.6rem, 7.4vw, 5rem);
	line-height: 1.02;
	text-wrap: balance;
	text-shadow: 0 3px 26px rgba(20, 10, 20, .75);
}

.nki-chiusura p {
	margin: 14px auto 28px;
	max-width: 34em;
	font-size: 1.16rem;
	font-weight: 600;
	text-wrap: balance;
	text-shadow: 0 1px 12px rgba(20, 10, 20, .9);
}

.nki-chiusura .nki-pulsanti { justify-content: center; }

.nki-chiusura .nki-btn--discord { box-shadow: 0 12px 30px rgba(20, 10, 20, .6); }

.nki-chiusura :focus-visible { outline-color: var(--nki-bianco); }

.nki-piede {
	position: relative;
	padding: 28px 16px 30px;
	background: var(--nki-notte);
	color: var(--nki-nebbia);
	text-align: center;
	font-size: .98rem;
	line-height: 1.5;
}

.nki-piede::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 4px;
	background: var(--nki-tricolore);
}

.nki-piede p { margin: 0 auto 6px; max-width: 60em; }

/* 11. Pagine di testo ------------------------------------------------------ */

.nki-pagina {
	max-width: 720px;
	margin: 0 auto;
	padding: 40px 16px 88px;
}

.nki-pagina__logo { display: inline-block; margin-bottom: 24px; }

.nki-pagina__logo img { width: 84px; }

.nki-pagina h1 {
	color: var(--nki-giallo);
	font-size: clamp(2.2rem, 6.6vw, 3rem);
	line-height: 1.06;
}

.nki-pagina h2 { font: 700 1.45rem/1.2 var(--nki-testo); }

.nki-pagina a { color: var(--nki-bianco); text-decoration-color: var(--nki-giallo); }

.nki-pagina figure { margin: 1.25em 0; overflow-x: auto; }

.nki-pagina table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .98rem; line-height: 1.4; }

.nki-pagina th, .nki-pagina td { padding: .6em .75em; border: 1px solid rgba(244, 245, 242, .25); text-align: left; vertical-align: top; }

/* 12. Telefono e tablet ---------------------------------------------------- */

@media (max-width: 860px) {
	.nki-eroe {
		align-items: flex-end;
		padding-top: 24px;
		padding-bottom: 72px;
		text-align: center;
	}

	/* Sul telefono la strada è un taglio verticale sugli infetti che avanzano. */
	.nki-eroe__sfondo { background-image: var(--nki-sfondo-img-piccola); background-position: 50% 40%; }

	.nki-eroe__sfondo::before {
		background: linear-gradient(180deg, rgba(10, 14, 20, .3) 0, rgba(10, 14, 20, .1) 22%, rgba(10, 14, 20, .72) 48%, rgba(10, 14, 20, .92) 74%, rgba(10, 14, 20, .85) 100%);
	}

	.nki-eroe__corpo { flex-direction: column; gap: 14px; }

	.nki-eroe__testo { align-items: center; }

	.nki-logo { width: min(48vw, 200px, 26vh); }

	.nki-coppia { grid-template-columns: minmax(0, 1fr); }

	.nki-bollettino { rotate: 0deg; }

	.nki-bollettino__testata { flex-direction: column; gap: 2px; }

	.nki-dati { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.nki-dati > div:nth-child(odd) { border-left: 0; }

	.nki-dati > div:nth-child(n + 3) { border-top: 1px solid rgba(25, 27, 30, .25); padding-top: 14px; }

	.nki-ciclo { grid-template-columns: minmax(0, 1fr); }

	.nki-regole__elenco { grid-template-columns: minmax(0, 1fr); }

	.nki-scorci__foto { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
	.nki-pulsanti { flex-direction: column; align-items: stretch; width: 100%; }

	.nki-chiusura .nki-pulsanti { max-width: 340px; margin: 0 auto; }

	.nki-titolo { font-size: clamp(2.6rem, 12vw, 3.4rem); }

	.nki-regole { padding-top: 80px; }
}

/* 13. Movimento: la pioggia che cade e il semaforo che respira. ------------- */

@media (prefers-reduced-motion: no-preference) {
	.nki-pioggia { animation: nki-piove 2.6s linear infinite; will-change: transform; }

	.nki-semaforo span { animation: nki-respira 2.4s ease-in-out infinite alternate; }

	/*
	 * Il logo non parte mai da opacità 0: un elemento invisibile non conta come
	 * "Largest Contentful Paint" e Lighthouse finirebbe in errore (NO_LCP).
	 */
	.nki-eroe__corpo > .nki-logo { animation: nki-sale .8s ease-out both; }

	.nki-eroe__testo { animation: nki-appare .8s ease-out .1s both; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

@keyframes nki-piove {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-200px, 800px, 0); }
}

@keyframes nki-respira {
	from { box-shadow: 0 0 0 3px #3a3d42, 0 0 14px 2px rgba(54, 208, 122, .35); }
	to   { box-shadow: 0 0 0 3px #3a3d42, 0 0 30px 8px rgba(54, 208, 122, .65); }
}

@keyframes nki-sale {
	from { transform: translateY(14px) scale(.97); }
	to   { transform: none; }
}

@keyframes nki-appare {
	from { opacity: 0; }
	to   { opacity: 1; }
}