/*----------------------------------------------
Area 51 alien theme layer
Loaded after main.css. Everything here is decorative
and can be removed without breaking the site.
----------------------------------------------*/

:root {
	--a51-green: #17ff5c;
	--a51-green-glow: rgba(23, 255, 92, .45);
	--a51-green-soft: rgba(23, 255, 92, .12);
}

/* #region Selection & scrollbar */

::selection {
	background-color: var(--a51-green);
	color: #111114;
}

html {
	scrollbar-color: #2c2c34 #141418;
}

::-webkit-scrollbar {
	width: 10px;
	background-color: #141418;
}

::-webkit-scrollbar-thumb {
	background-color: #2c2c34;
	border-radius: 10px;
	border: 2px solid #141418;
}

::-webkit-scrollbar-thumb:hover {
	background-color: var(--a51-green);
}

/* #endregion Selection & scrollbar */

/* #region Preloader */

.preloader::after {
	width: 110px;
	height: 110px;
	margin: -55px 0 0 -55px;
	animation: none;
	filter: drop-shadow(0 0 14px var(--a51-green-glow));
}

/* #endregion Preloader */

/* #region Logo */

.shock-header .navbar .navbar-brand .logo,
.shock-footer .footer-content .footer-brand .logo {
	transition: filter .4s ease, transform .4s ease;
}

.shock-header .navbar .navbar-brand:hover .logo,
.shock-footer .footer-content .footer-brand:hover .logo {
	filter: drop-shadow(0 0 10px var(--a51-green-glow));
	transform: translateY(-2px);
}

/* #endregion Logo */

/* #region Starfield */

.a51-has-stars {
	isolation: isolate;
}
.a51-stars {
	position: absolute;
	z-index: -1;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.a51-stars span {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	border-radius: 50%;
	background: transparent;
	animation: a51-twinkle 4s ease-in-out infinite alternate;
}

.a51-stars span.big {
	width: 2px;
	height: 2px;
	animation-duration: 6s;
	animation-delay: -2s;
}

@keyframes a51-twinkle {
	from { opacity: .25; }
	to   { opacity: 1; }
}

/* #endregion Starfield */

/* #region UFO fly-by */

.a51-ufo {
	position: fixed;
	z-index: 90;
	top: 14vh;
	left: 0;
	width: 64px;
	pointer-events: none;
	opacity: 0;
	filter: drop-shadow(0 0 8px var(--a51-green-glow));
	will-change: transform;
}

.a51-ufo.is-flying {
	animation: a51-flyby 9s cubic-bezier(.45, .05, .55, .95) forwards;
}

.a51-ufo.is-flying .a51-ufo-ship {
	animation: a51-wobble 1.1s ease-in-out infinite alternate;
}

.a51-ufo .a51-ufo-beam {
	opacity: 0;
	transform-origin: 50% 0;
	transition: opacity .3s ease;
}

.a51-ufo.is-beaming .a51-ufo-beam {
	opacity: 1;
	animation: a51-beam .6s ease-in-out infinite alternate;
}

@keyframes a51-flyby {
	0%   { opacity: 0; transform: translate(-80px, 0) rotate(-4deg); }
	8%   { opacity: .9; }
	50%  { transform: translate(50vw, 6vh) rotate(3deg); }
	92%  { opacity: .9; }
	100% { opacity: 0; transform: translate(calc(100vw + 80px), -4vh) rotate(-3deg); }
}

@keyframes a51-wobble {
	from { transform: translateY(-3px) rotate(-2deg); }
	to   { transform: translateY(3px) rotate(2deg); }
}

@keyframes a51-beam {
	from { opacity: .45; transform: scaleX(.85); }
	to   { opacity: 1; transform: scaleX(1); }
}

/* Easter egg: hovering UFO in the middle of the screen */
.a51-ufo.is-abducting {
	top: 22vh;
	left: 50%;
	width: 120px;
	margin-left: -60px;
	opacity: 1;
	animation: a51-arrive 1s cubic-bezier(.2, .8, .3, 1) forwards;
}

@keyframes a51-arrive {
	from { transform: translateY(-40vh) scale(.4); }
	to   { transform: translateY(0) scale(1); }
}

.a51-toast {
	position: fixed;
	z-index: 91;
	left: 50%;
	top: calc(22vh + 190px);
	padding: .7rem 1.2rem;
	border: 1px solid var(--a51-green);
	border-radius: 4px;
	background: rgba(20, 20, 24, .92);
	color: var(--a51-green);
	font-family: var(--secondary-font);
	font-size: .95rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	box-shadow: 0 0 24px var(--a51-green-soft);
	transform: translateX(-50%);
	pointer-events: none;
	animation: a51-fade-in .5s ease .6s both;
}

@keyframes a51-fade-in {
	from { opacity: 0; transform: translate(-50%, 8px); }
	to   { opacity: 1; transform: translate(-50%, 0); }
}

/* #endregion UFO fly-by */

/* #region Text effects */

mark.animated-underline.tertiary {
	text-shadow: 0 0 22px var(--a51-green-glow);
}

.text-outline:hover {
	animation: a51-glitch .45s steps(2) 1;
}

@keyframes a51-glitch {
	0%   { text-shadow: 2px 0 var(--a51-green), -2px 0 var(--secondary-color); transform: translateX(0); }
	25%  { text-shadow: -3px 0 var(--a51-green), 3px 0 var(--secondary-color); transform: translateX(-1px) skewX(-4deg); }
	50%  { text-shadow: 2px 1px var(--a51-green), -2px -1px var(--secondary-color); transform: translateX(1px); }
	75%  { text-shadow: -1px 0 var(--a51-green), 1px 0 var(--secondary-color); transform: skewX(3deg); }
	100% { text-shadow: none; transform: none; }
}

/* #endregion Text effects */

/* #region Cards: levitating icons */

.card.has-icon .card-image-icon {
	transition: transform .5s cubic-bezier(.2, .8, .3, 1), filter .5s ease;
}

.card.has-icon:hover .card-image-icon {
	transform: translateY(-6px);
	filter: drop-shadow(0 8px 6px var(--a51-green-soft)) drop-shadow(0 0 8px currentColor);
}

.card.has-icon {
	transition: box-shadow .5s ease;
}

.card.has-icon:hover {
	box-shadow: 0 0 0 1px var(--a51-green-soft), 0 18px 40px -18px var(--a51-green-glow);
}

/* #endregion Cards */

/* #region Social icons */

.shock-footer a i.fa-brands,
.shock-footer a i.fab {
	transition: color .3s ease, text-shadow .3s ease;
}

.shock-footer a:hover i.fa-brands,
.shock-footer a:hover i.fab {
	color: var(--a51-green);
	text-shadow: 0 0 10px var(--a51-green-glow);
}

/* #endregion Social icons */

/* #region Reduced motion */

@media (prefers-reduced-motion: reduce) {
	.a51-stars span,
	.a51-ufo,
	.text-outline:hover {
		animation: none !important;
	}

	.a51-ufo:not(.is-abducting) {
		display: none;
	}
}

/* #endregion Reduced motion */