/* Vaporwave styles scoped only to the vaporwave section */
@property --annie {
	syntax: "*";
	inherits: false;
}

#nightlifeBody #nightlifeVaporwave.vw-vaporwave {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	min-width: 100%;
	height: 100vh;
	min-height: 100vh;
	z-index: 0;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

#nightlifeBody {
	overflow: visible;
}

.vw-vaporwave {
	position: relative;
	width: 100vw;
	min-width: 100vw;
	min-height: 100vh;
	overflow: hidden;
	isolation: isolate;
}

.vw-vaporwave,
.vw-vaporwave *::before,
.vw-vaporwave *::after,
.vw-vaporwave * {
	animation: var(--annie, none);
}

.vw-vaporwave > .vw-overlays {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	overflow: hidden;
	perspective: 900px;
	transform-style: preserve-3d;
	filter: hue-rotate(0deg);
	--annie_play_state: running;
	--vw-start: 0.88;
	--vw-parallax: 0px;
	--annie: --a 10s calc(-1s * var(--vw-start)) infinite ease-in-out alternate var(--annie_play_state);
	pointer-events: none;
}

.vw-vaporwave > *:not(.vw-overlays) {
	position: relative;
	z-index: 1;
}

.vw-vaporwave .vw-overlay {
	position: absolute;
	inset: 0;
}

.vw-vaporwave #vw-overlay_sky {
	background-image:
		radial-gradient(circle at bottom, transparent 65%, #270245),
		linear-gradient(to bottom, #0000, #ff294166),
		linear-gradient(to bottom, #270245, #871a85);
	background-size: cover, cover, cover;
}

.vw-vaporwave #vw-overlay_stars {
	background-image:
		repeating-conic-gradient(#fff2 0%, transparent 0.0002%, transparent 0.0045%, transparent 0.045%),
		repeating-conic-gradient(#fff9 0%, transparent 0.0002%, transparent 0.0090%, transparent 0.090%),
		repeating-conic-gradient(#fff6 0%, transparent 0.0002%, transparent 0.0075%, transparent 0.075%);
	background-size: 100vmin 100vmin;
	filter: drop-shadow(0 0 0.8vmin #fff) drop-shadow(0 0 0.2vmin #fff) drop-shadow(0 0 0.2vmin #fff);
}

.vw-vaporwave .vw-overlay--sun {
	display: flex;
	flex-direction: column;
	filter: drop-shadow(0 0 5vmin var(--vw-lead-color, #ff2941)) drop-shadow(0 0 7.5vmin var(--vw-lead-color, #fe18d3));
}

.vw-vaporwave .vw-sun {
	background-image:
		radial-gradient(circle at top, #fff 0%, transparent 50%),
		radial-gradient(circle, transparent, #fe18d3),
		repeating-linear-gradient(#ff2941 0%, transparent 0.5%, #ff2941 1%),
		radial-gradient(circle, #feff38 0% 45%, #ff2941 85%, #fe18d3 100%);
	box-shadow: inset 0 0.5vmin 1vmin #fff, inset 0 1vmin 2vmin #feff38;
	border-radius: 50%;
	width: 30vmin;
	height: 30vmin;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: 0 auto;
	margin-top: 10vmin;
	-webkit-mask: linear-gradient(to bottom, #000 10% 15%, transparent 15% 15.25%, #000 15.25% 21%, transparent 21% 21.5%, #000 21.5% 27%, transparent 27% 27.75%, #000 27.75% 33%, transparent 33% 34%, #000 34% 39%, transparent 39% 40.5%, #000 40.5% 44%, transparent 44% 46%, #000 46% 50%, transparent 50% 52%, #000 52% 56%, transparent 56% 58%, #000 58% 62%, transparent 62% 64%, #000 64% 67%, transparent 67% 70%, #000 70% 73%, transparent 73% 76%, #000 76% 79%, transparent 79% 82%, #000 82% 84%, transparent 84% 88%, #000 88% 90%, transparent 90% 94%, #000 94% 95%, transparent 95% 100%);
	transform: translateY(calc(var(--vw-parallax) * -0.08));
}

.vw-vaporwave #vw-overlay_sun2,
.vw-vaporwave #vw-overlay_sun3 {
	filter: blur(5vmin);
	z-index: 1;
	transform: scale(1.5);
	transform-origin: top center;
}

.vw-vaporwave #vw-overlay_sun3 {
	transform: scale(1.5) translateY(35%) translateZ(-1500px) rotateX(75deg);
	filter: blur(15vmin);
	z-index: 2;
}

.vw-vaporwave #vw-overlay_sun3 .vw-sun {
	width: 90vmin;
	height: 90vmin;
}

.vw-vaporwave #vw-overlay_floor {
	width: 200%;
	transform: rotateX(70deg) translateX(-10%) translateY(50%);
	transform-style: preserve-3d;
	margin: 0 auto;
	z-index: 1;
}

.vw-vaporwave .vw-floor-color,
.vw-vaporwave .vw-floor-grid,
.vw-vaporwave .vw-floor-horizon,
.vw-vaporwave .vw-floor-horizon2 {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.vw-vaporwave .vw-floor-color {
	background-image: linear-gradient(to bottom, #270245cc, #871a85cc);
}

.vw-vaporwave .vw-floor-grid {
	background-image:
		repeating-linear-gradient(to bottom, var(--vw-lead-color, #fe18d3) 0%, #0000 0.1% 1.9%, var(--vw-lead-color, #fe18d3) 2%),
		repeating-linear-gradient(to right, var(--vw-lead-color, #fe18d3) 0%, #0000 0.1% 1.9%, var(--vw-lead-color, #fe18d3) 2%);
	background-size: 100vw 100vw;
	background-position: 0 0;
	filter: drop-shadow(0 0 1vmin var(--vw-lead-color, #fe18d3));
	animation: vw-grid-scroll 12s linear infinite;
}

.vw-vaporwave .vw-floor-horizon {
	background-image: linear-gradient(to bottom, #ff78f0 0%, transparent 30%);
	background-size: cover;
	background-position: center;
	background-repeat: repeat-x;
	box-shadow: 0 -1vmin 5vmin #fff, 0 0 10vmin 2.5vmin var(--vw-lead-color, #fe18d3);
}

.vw-vaporwave .vw-floor-horizon2 {
	transform: translateZ(1vmin);
	box-shadow: inset 0 0 24vmin #fffc, 0 0 32vmin #fffc;
}

.vw-vaporwave #vw-overlay_mountain {
	transform-style: preserve-3d;
	filter: drop-shadow(0 0 24px #fff9) drop-shadow(0 0 48px var(--vw-lead-color, #fe18d3));
}

.vw-vaporwave .vw-mountain {
	background: linear-gradient(to bottom, #871a85, #270245, #fe18d3);
	width: 10000px;
	margin-left: -1500px;
	height: 100%;
	-webkit-mask-image: url("https://rockstarwind.github.io/codepen-footer/pen-assets/2022-01-27_has-5/mountain3.svg");
	-webkit-mask-position: 100% 0;
	-webkit-mask-repeat: repeat-x;
	mask-image: url("https://rockstarwind.github.io/codepen-footer/pen-assets/2022-01-27_has-5/mountain3.svg");
	mask-position: 100% 0;
	mask-repeat: repeat-x;
	transform: rotateX(0deg) translateY(-200px) translateZ(-3000px);
}

.vw-vaporwave #vw-overlay_overlay {
	background-image:
		radial-gradient(circle at top, #fff0 45%, #270245cc, #000),
		radial-gradient(circle at top, #feff3833 0%, #ff294133 15%, #0000);
	background-size: cover;
	z-index: 1;
}

@keyframes --a {
	0%,
	5% {
		filter: hue-rotate(30deg);
	}
	95%,
	100% {
		filter: hue-rotate(-120deg);
	}
}

/* Additional animated details: stars twinkle, sun pulse, grid scroll */
.vw-vaporwave #vw-overlay_stars {
	animation: vw-stars 6s linear infinite;
	will-change: opacity, transform;
	opacity: 0.95;
}

.vw-vaporwave .vw-sun {
	animation: vw-sun-pulse 8s ease-in-out infinite;
	transform-origin: center center;
}

.vw-vaporwave > .vw-overlays {
	/* small mouse-driven parallax via CSS variables set by JS */
	transform: translate3d(var(--vw-mouse-x, 0px), var(--vw-mouse-y, 0px), 0) preserve-3d;
}

@keyframes vw-stars {
	0% { opacity: 0.9; transform: translateZ(0) scale(1); filter: blur(0.2vmin); }
	50% { opacity: 0.45; transform: translateZ(0) scale(1.02); filter: blur(0.6vmin); }
	100% { opacity: 0.95; transform: translateZ(0) scale(1); filter: blur(0.2vmin); }
}

@keyframes vw-sun-pulse {
	0% { transform: translateY(calc(var(--vw-parallax) * -0.08)) scale(1); filter: drop-shadow(0 0 4vmin #ff2941); }
	50% { transform: translateY(calc(var(--vw-parallax) * -0.1)) scale(1.06); filter: drop-shadow(0 0 8vmin #fe18d3); }
	100% { transform: translateY(calc(var(--vw-parallax) * -0.08)) scale(1); filter: drop-shadow(0 0 4vmin #ff2941); }
}

@keyframes vw-grid-scroll {
	/* reverse: move vertically away from the viewer toward the horizon (opposite direction) */
	0% { background-position: 0 0; }
	100% { background-position: 0 1000px; }
}

@media (max-width: 720px) {
	.vw-vaporwave .vw-sun {
		width: 36vmin;
		height: 36vmin;
		margin-top: 4vmin;
	}

	.vw-vaporwave .vw-floor-grid {
		background-size: 24px 24px, 24px 24px;
	}
}

/* Keep the vaporwave artwork fixed in the viewport, centered, and
   positioned behind the `#nightlifeBody` content. */
/* ── Low-tier freeze for #nightlifeVaporwave ───────────────────────────────────
   Disables: hue-rotate loop (--annie), star twinkle, sun pulse, grid scroll,
   and minimizes expensive glow/blur filters for cheaper rendering.          */
html[data-device-tier='low'] #nightlifeVaporwave.vw-vaporwave,
html[data-device-tier='low'] #nightlifeVaporwave.vw-vaporwave * {
	animation: none !important;
	transition: none !important;
}

@media (min-width: 768px) {
	html[data-device-tier='low'] #nightlifeVaporwave.vw-vaporwave {
		background: transparent !important;
		isolation: auto;
	}
}

/* Low tier text-only mode: remove the vaporwave artwork completely. */
html[data-device-tier='low'] #nightlifeVaporwave.vw-vaporwave > .vw-overlays,
html[data-device-tier='low'] #nightlifeVaporwave.vw-vaporwave .vw-overlay {
	display: none !important;
	visibility: hidden !important;
}

html[data-device-tier='low'] #nightlifeVaporwave.vw-vaporwave > .vw-overlays {
	animation: none !important;
	--annie: none;
	filter: none !important;
}
html[data-device-tier='low'] #nightlifeVaporwave.vw-vaporwave .vw-floor-grid,
html[data-device-tier='low'] #nightlifeVaporwave.vw-vaporwave .vw-sun,
html[data-device-tier='low'] #nightlifeVaporwave.vw-vaporwave #vw-overlay_stars {
	animation: none !important;
}

html[data-device-tier='low'] #nightlifeVaporwave.vw-vaporwave .vw-overlay--sun,
html[data-device-tier='low'] #nightlifeVaporwave.vw-vaporwave #vw-overlay_stars,
html[data-device-tier='low'] #nightlifeVaporwave.vw-vaporwave #vw-overlay_mountain,
html[data-device-tier='low'] #nightlifeVaporwave.vw-vaporwave .vw-floor-grid {
	filter: none !important;
}

html[data-device-tier='low'] #nightlifeVaporwave.vw-vaporwave #vw-overlay_sun2,
html[data-device-tier='low'] #nightlifeVaporwave.vw-vaporwave #vw-overlay_sun3 {
	filter: none !important;
}

html[data-device-tier='low'] #nightlifeVaporwave.vw-vaporwave .vw-sun,
html[data-device-tier='low'] #nightlifeVaporwave.vw-vaporwave .vw-floor-horizon,
html[data-device-tier='low'] #nightlifeVaporwave.vw-vaporwave .vw-floor-horizon2 {
	box-shadow: none !important;
}
/* ──────────────────────────────────────────────────────────────────────── */

/* ── Touch-device freeze for #nightlifeVaporwave ──────────────────────────────
   Stops all CSS keyframe animations: hue-rotate loop (--annie), star
   twinkle, sun pulse, and grid scroll.  The static artwork (gradients,
   sun silhouette, mountain, grid) stays visible — only motion is removed. */
@media (hover: none) and (pointer: coarse) {
	#nightlifeVaporwave.vw-vaporwave,
	#nightlifeVaporwave.vw-vaporwave *::before,
	#nightlifeVaporwave.vw-vaporwave *::after,
	#nightlifeVaporwave.vw-vaporwave * {
		animation: none !important;
		transition: none !important;
	}
	#nightlifeVaporwave.vw-vaporwave > .vw-overlays {
		--annie: none;
		filter: none !important;
	}
}
/* ──────────────────────────────────────────────────────────────────────── */

#nightlifeVaporwave.vw-vaporwave {
	/* sticky inside its parent so it behaves fixed only while
	   #nightlifeBody is in view */
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: 0;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

#nightlifeVaporwave.vw-vaporwave > .nightlifeVaporwaveImage {
	display: none;
}

#nightlifeVaporwave.vw-vaporwave > .nightlifeVaporwaveImage img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* Mobile replacement: render a responsive <picture> instead of CSS background. */
@media (max-width: 767px) {
	#nightlifeBody #nightlifeVaporwave.vw-vaporwave {
		position: relative;
		top: auto;
		left: auto;
		height: auto;
		min-height: auto;
		max-height: none;
		z-index: 0;
		background: #1f042d;
	}

	#nightlifeVaporwave.vw-vaporwave > .nightlifeVaporwaveImage {
		display: block;
		width: 100%;
	}

	#nightlifeBody #nightlifeIntro {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		height: 0 !important;
		min-height: 0 !important;
		max-height: 0 !important;
		overflow: hidden !important;
		z-index: 20;
	}

	#nightlifeVaporwave.vw-vaporwave > .vw-overlays,
	#nightlifeVaporwave.vw-vaporwave > .neonTextLayer {
		display: none !important;
		visibility: hidden !important;
	}

	#nightlifeBody .vkDivsNSvg{
	background: linear-gradient(to bottom, #011547 0%, #000000 50%);
	padding: 0 16px!important;
  }


}

#nightlifeBody {
	position: relative;
	z-index: 5;
}

#nightlifeIntro {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 20;
}