/* ===========================
   KERST LICHTSNOER – FULL COLOR
   =========================== */

.lightrope {
	position: fixed;
	top: 0;
	left: 0;

	width: 100%;
	margin: 0;
	padding: 0;

	text-align: center;
	white-space: nowrap;
	overflow: hidden;

	pointer-events: none;
	z-index: 9999;
}

/* ===========================
   LAMPJES – BASIS
   =========================== */

.lightrope li {
	position: relative;
	display: inline-block;
	list-style: none;

	width: 12px;
	height: 36px;
	margin: 0 18px;
	padding: 0;

	border-radius: 50% 50% 45% 45%;

	animation-name: christmas-colors;
	animation-duration: 6s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

/* ===========================
   KLEURVERSCHUIVING
   =========================== */

.lightrope li:nth-child(1)  { animation-delay: 0s; }
.lightrope li:nth-child(2)  { animation-delay: .35s; }
.lightrope li:nth-child(3)  { animation-delay: .7s; }
.lightrope li:nth-child(4)  { animation-delay: 1.05s; }
.lightrope li:nth-child(5)  { animation-delay: 1.4s; }
.lightrope li:nth-child(6)  { animation-delay: 1.75s; }
.lightrope li:nth-child(7)  { animation-delay: 2.1s; }
.lightrope li:nth-child(8)  { animation-delay: 2.45s; }
.lightrope li:nth-child(9)  { animation-delay: 2.8s; }
.lightrope li:nth-child(10) { animation-delay: 3.15s; }

/* ===========================
   FITTING & SNOER
   =========================== */

.lightrope li::before {
	content: "";
	position: absolute;
	top: -5px;
	left: 1px;

	width: 10px;
	height: 9px;

	background: #1a1a1a;
	border-radius: 3px;
}

.lightrope li::after {
	content: "";
	position: absolute;
	top: -14px;
	left: 9px;

	width: 52px;
	height: 18px;

	border-bottom: solid #1a1a1a 2px;
	border-radius: 50%;
}

.lightrope li:last-child::after {
	content: none;
}

.lightrope li:first-child {
	margin-left: -40px;
}

/* ===========================
   KERSTKLEUR-ANIMATIE
   =========================== */

@keyframes christmas-colors {

	/* GROEN */
	0% {
		background: #0f6b3e;
		box-shadow:
			0 0 6px rgba(15,107,62,0.75),
			0 0 18px rgba(15,107,62,0.6),
			0 0 36px rgba(15,107,62,0.45);
	}

	/* ROOD */
	20% {
		background: #8b1c1c;
		box-shadow:
			0 0 6px rgba(139,28,28,0.75),
			0 0 18px rgba(139,28,28,0.6),
			0 0 36px rgba(139,28,28,0.45);
	}

	/* GEEL */
	40% {
		background: #c9a227;
		box-shadow:
			0 0 8px rgba(201,162,39,0.85),
			0 0 22px rgba(201,162,39,0.7),
			0 0 38px rgba(201,162,39,0.5);
	}

	/* BLAUW */
	60% {
		background: #1b4f8a;
		box-shadow:
			0 0 8px rgba(27,79,138,0.8),
			0 0 22px rgba(27,79,138,0.65),
			0 0 40px rgba(27,79,138,0.5);
	}

	/* WIT */
	80% {
		background: #f5f5f2;
		box-shadow:
			0 0 10px rgba(255,255,245,0.95),
			0 0 26px rgba(255,255,245,0.8),
			0 0 46px rgba(255,255,245,0.6);
	}

	/* TERUG NAAR GROEN */
	100% {
		background: #0f6b3e;
		box-shadow:
			0 0 6px rgba(15,107,62,0.75),
			0 0 18px rgba(15,107,62,0.6),
			0 0 36px rgba(15,107,62,0.45);
	}
}

/* ===========================
   CANDY CANE RAND
   =========================== */

.candy-border {
	position: fixed;
	top: 0px;                 /* exact onder de lampjes */
	left: 0;

	width: 100%;
	height: 22px;

	background: url("./images/candy-stripe.png") repeat-x;
	background-size: auto 100%;

	opacity: 0.30;             /* subtiel */
	filter: blur(0.2px);      /* zacht randje */

	pointer-events: none;
	z-index: 9998;             /* net onder lichtsnoer */
}