/* Fonts */
@font-face {
    font-family: "AngstVF";
	font-style: "normal";
	font-weight:400;
    src: local("AngstVF"),
		url("../fonts/AngstVF.woff2") format(woff2),
        url("../fonts/AngstVF.woff") format(woff),
        url("../fonts/AngstVF.ttf") format(truetype);
	  }
	body {
		font-family: "AngstVF";
		font-style: "normal";
	}
/* Basic */

	body, input, select, textarea {
		color: white;
		font-family: "AngstVF";
		font-size: 15pt;
		font-weight: 300 !important;
		letter-spacing: -0.025em;
		line-height: 1.75em;
	}

	body {
		background: white;
		overflow: hidden;
	}

		body.loading * {
			-moz-animation: none !important;
			-webkit-animation: none !important;
			-o-animation: none !important;
			-ms-animation: none !important;
			animation: none !important;
		}

	a {
		-moz-transition: border-color 0.2s ease-in-out;
		-webkit-transition: border-color 0.2s ease-in-out;
		-o-transition: border-color 0.2s ease-in-out;
		-ms-transition: border-color 0.2s ease-in-out;
		transition: border-color 0.2s ease-in-out;
		border-bottom: dotted 1px;
		color: inherit;
		outline: 0;
		text-decoration: none;
	}

		a:hover {
			border-color: transparent;
		}

/* Wrapper */
	@-moz-keyframes wrapper { 0% { opacity: 0; } 100% { opacity: 1; } }
	@-webkit-keyframes wrapper { 0% { opacity: 0; } 100% { opacity: 1; } }
	@-o-keyframes wrapper { 0% { opacity: 0; } 100% { opacity: 1; } }
	@-ms-keyframes wrapper { 0% { opacity: 0; } 100% { opacity: 1; } }
	@keyframes wrapper { 0% { opacity: 0; } 100% { opacity: 1; } }

	#wrapper {
		-moz-animation: wrapper 3s forwards;
		-webkit-animation: wrapper 3s forwards;
		-o-animation: wrapper 3s forwards;
		-ms-animation: wrapper 3s forwards;
		animation: wrapper 3s forwards;
		height: 100%;
		left: 0;
		opacity: 0;
		position: fixed;
		top: 0;
		width: 100%;
	}

/* BG */

	#bg {
		-moz-animation: bg 60s linear infinite, bg-trip 20s ease-in-out infinite;
		-webkit-animation: bg 60s linear infinite, bg-trip 20s ease-in-out infinite;
		-o-animation: bg 60s linear infinite, bg-trip 20s ease-in-out infinite;
		-ms-animation: bg 60s linear infinite, bg-trip 20s ease-in-out infinite;
		animation: bg 60s linear infinite, bg-trip 20s ease-in-out infinite;
		-moz-backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		-o-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		backface-visibility: hidden;
		-moz-transform: translate3d(0,0,0);
		-webkit-transform: translate3d(0,0,0);
		-o-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
		background-color: #348cb2;
		background-image: url("../bgimage.webp");
		background-position: center;
		background-repeat: repeat;
		height: 100%;
		left: 0;
		opacity: 1;
		position: fixed;
		top: 0;
	}
	@-moz-keyframes bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-2250px,0,0); -webkit-transform: translate3d(-2250px,0,0); -o-transform: translate3d(-2250px,0,0); -ms-transform: translate3d(-2250px,0,0); transform: translate3d(-2250px,0,0); } }
	@-webkit-keyframes bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-2250px,0,0); -webkit-transform: translate3d(-2250px,0,0); -o-transform: translate3d(-2250px,0,0); -ms-transform: translate3d(-2250px,0,0); transform: translate3d(-2250px,0,0); } }
	@-o-keyframes bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-2250px,0,0); -webkit-transform: translate3d(-2250px,0,0); -o-transform: translate3d(-2250px,0,0); -ms-transform: translate3d(-2250px,0,0); transform: translate3d(-2250px,0,0); } }
	@-ms-keyframes bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-2250px,0,0); -webkit-transform: translate3d(-2250px,0,0); -o-transform: translate3d(-2250px,0,0); -ms-transform: translate3d(-2250px,0,0); transform: translate3d(-2250px,0,0); } }
	@keyframes bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-2250px,0,0); -webkit-transform: translate3d(-2250px,0,0); -o-transform: translate3d(-2250px,0,0); -ms-transform: translate3d(-2250px,0,0); transform: translate3d(-2250px,0,0); } }

	#bg {
		background-size: contain;
		width: 13500px;
	}

#bghover,
	#bghover2 {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		opacity: 0;
		transition: opacity 2.25s ease;
		pointer-events: none;
		z-index: 0;
	}

	/* Панорама фото при ховере: вправо (противоположно фону), медленно, только когда фото шире экрана */
	#bghover.pan-x,
	#bghover2.pan-x {
		background-position: 100% 50%;
		animation: bg-pan-x 42s linear infinite;
	}

	@keyframes bg-pan-x {
		0% { background-position: 100% 50%; }
		100% { background-position: 0% 50%; }
	}

#grp-cursor {
		position: fixed;
		left: 0;
		top: 0;
		width: 42px;
		height: 42px;
		margin: -21px 0 0 -21px;
		border-radius: 50%;
		border: 1px solid rgba(255, 255, 255, 0.9);
		box-shadow: 0 0 18px rgba(255, 255, 255, 0.55), inset 0 0 12px rgba(255, 255, 255, 0.25);
		pointer-events: none;
		display: none;
		z-index: 9999;
		animation: grp-cursor-blink 0.9s ease-in-out infinite;
	}

	@keyframes grp-cursor-blink {
		0%, 100% { opacity: 0.25; transform: scale(0.85); }
		50% { opacity: 1; transform: scale(1.15); }
	}

/* Психоделический эффект движущегося фона: медленное осеннее перетекание (жёлтый/фиолетовый/оранжевый, без зелени) */
	@keyframes bg-trip {
		0%, 100% { filter: brightness(0.8) hue-rotate(-8deg) saturate(1.05); }
		25% { filter: brightness(0.8) hue-rotate(-2deg) saturate(1.3); }
		50% { filter: brightness(0.8) hue-rotate(10deg) saturate(1.5); }
		75% { filter: brightness(0.8) hue-rotate(18deg) saturate(1.35); }
	}

/* Main */

	#main {
		height: 100%;
		left: 0;
		position: fixed;
		text-align: center;
		top: 0;
		width: 100%;
		box-sizing: border-box;
		padding-bottom: 1.5em;
		overflow-y: auto;
		overflow-x: hidden;
		display: flex;
		align-items: flex-start;
		justify-content: center;
		scrollbar-width: none;
	}

	#main::-webkit-scrollbar {
		display: none;
	}

/* Header */
	@-moz-keyframes header { 0% { -moz-transform: translate3d(0,1em,0); -webkit-transform: translate3d(0,1em,0); -o-transform: translate3d(0,1em,0); -ms-transform: translate3d(0,1em,0); transform: translate3d(0,1em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } }
	@-webkit-keyframes header { 0% { -moz-transform: translate3d(0,1em,0); -webkit-transform: translate3d(0,1em,0); -o-transform: translate3d(0,1em,0); -ms-transform: translate3d(0,1em,0); transform: translate3d(0,1em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } }
	@-o-keyframes header { 0% { -moz-transform: translate3d(0,1em,0); -webkit-transform: translate3d(0,1em,0); -o-transform: translate3d(0,1em,0); -ms-transform: translate3d(0,1em,0); transform: translate3d(0,1em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } }
	@-ms-keyframes header { 0% { -moz-transform: translate3d(0,1em,0); -webkit-transform: translate3d(0,1em,0); -o-transform: translate3d(0,1em,0); -ms-transform: translate3d(0,1em,0); transform: translate3d(0,1em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } }
	@keyframes header { 0% { -moz-transform: translate3d(0,1em,0); -webkit-transform: translate3d(0,1em,0); -o-transform: translate3d(0,1em,0); -ms-transform: translate3d(0,1em,0); transform: translate3d(0,1em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } }
	@-moz-keyframes nav-icons { 0% { -moz-transform: translate3d(0,1em,0); -webkit-transform: translate3d(0,1em,0); -o-transform: translate3d(0,1em,0); -ms-transform: translate3d(0,1em,0); transform: translate3d(0,1em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } }
	@-webkit-keyframes nav-icons { 0% { -moz-transform: translate3d(0,1em,0); -webkit-transform: translate3d(0,1em,0); -o-transform: translate3d(0,1em,0); -ms-transform: translate3d(0,1em,0); transform: translate3d(0,1em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } }
	@-o-keyframes nav-icons { 0% { -moz-transform: translate3d(0,1em,0); -webkit-transform: translate3d(0,1em,0); -o-transform: translate3d(0,1em,0); -ms-transform: translate3d(0,1em,0); transform: translate3d(0,1em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } }
	@-ms-keyframes nav-icons { 0% { -moz-transform: translate3d(0,1em,0); -webkit-transform: translate3d(0,1em,0); -o-transform: translate3d(0,1em,0); -ms-transform: translate3d(0,1em,0); transform: translate3d(0,1em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } }
	@keyframes nav-icons { 0% { -moz-transform: translate3d(0,1em,0); -webkit-transform: translate3d(0,1em,0); -o-transform: translate3d(0,1em,0); -ms-transform: translate3d(0,1em,0); transform: translate3d(0,1em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } }

	#header {
		-moz-animation: header 1s 2.25s forwards;
		-webkit-animation: header 1s 2.25s forwards;
		-o-animation: header 1s 2.25s forwards;
		-ms-animation: header 1s 2.25s forwards;
		animation: header 1s 2.25s forwards;
		-moz-backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		-o-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		backface-visibility: hidden;
		-moz-transform: translate3d(0,0,0);
		-webkit-transform: translate3d(0,0,0);
		-o-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
		cursor: default;
		display: block;
		margin: auto;
		opacity: 0;
		position: relative;
		text-align: center;
		vertical-align: middle;
		width: 90%;
		z-index: 10;
	}

		#header h1 {
			font-size: min(var(--title-size, 4.35em), var(--title-vw, 8.75vw));
			font-weight: 900;
			letter-spacing: -0.035em;
			line-height: 1.1em;
			margin: 0 0 0.18em 0;
		}

		#header h2 {
			font-size: 2.35em;
			font-weight: 666;
			letter-spacing: -0.035em;
			line-height: 1.15em;
			margin: 0.15em 0 0 0;
		}

		#header h2#subline {
			display: inline-flex;
			align-items: center;
			flex-wrap: wrap;
			justify-content: center;
			line-height: 1em;
			margin: 0 0 3em 0;
		}

		#header h2#ticketline {
			margin: 0 0 1.5em 0;
		}

		#header p {
			font-size: 2.5em;
			font-weight: 419;
			margin: 0.75em 0 0.25em 0;
			opacity: 1;
		}

		#header nav {
			margin: 0 0 1.6em 0;
		}

			#header nav li {
				-moz-animation: nav-icons 0.5s ease-in-out forwards;
				-webkit-animation: nav-icons 0.5s ease-in-out forwards;
				-o-animation: nav-icons 0.5s ease-in-out forwards;
				-ms-animation: nav-icons 0.5s ease-in-out forwards;
				animation: nav-icons 0.5s ease-in-out forwards;
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-o-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transform: translate3d(0,0,0);
				-webkit-transform: translate3d(0,0,0);
				-o-transform: translate3d(0,0,0);
				-ms-transform: translate3d(0,0,0);
				transform: translate3d(0,0,0);
				display: inline-block;
				height: 5.35em;
				line-height: 5.885em;
				opacity: 0;
				position: relative;
				top: 0;
				width: 5.35em;
			}

				#header nav li:nth-child(1) {
					-moz-animation-delay: 2.5s;
					-webkit-animation-delay: 2.5s;
					-o-animation-delay: 2.5s;
					-ms-animation-delay: 2.5s;
					animation-delay: 2.5s;
				}

				#header nav li:nth-child(2) {
					-moz-animation-delay: 2.75s;
					-webkit-animation-delay: 2.75s;
					-o-animation-delay: 2.75s;
					-ms-animation-delay: 2.75s;
					animation-delay: 2.75s;
				}

				#header nav li:nth-child(3) {
					-moz-animation-delay: 3s;
					-webkit-animation-delay: 3s;
					-o-animation-delay: 3s;
					-ms-animation-delay: 3s;
					animation-delay: 3s;
				}

				#header nav li:nth-child(4) {
					-moz-animation-delay: 3.25s;
					-webkit-animation-delay: 3.25s;
					-o-animation-delay: 3.25s;
					-ms-animation-delay: 3.25s;
					animation-delay: 3.25s;
				}

				#header nav li:nth-child(5) {
					-moz-animation-delay: 3.5s;
					-webkit-animation-delay: 3.5s;
					-o-animation-delay: 3.5s;
					-ms-animation-delay: 3.5s;
					animation-delay: 3.5s;
				}

				#header nav li:nth-child(6) {
					-moz-animation-delay: 3.75s;
					-webkit-animation-delay: 3.75s;
					-o-animation-delay: 3.75s;
					-ms-animation-delay: 3.75s;
					animation-delay: 3.75s;
				}

				#header nav li:nth-child(7) {
					-moz-animation-delay: 4s;
					-webkit-animation-delay: 4s;
					-o-animation-delay: 4s;
					-ms-animation-delay: 4s;
					animation-delay: 4s;
				}

				#header nav li:nth-child(8) {
					-moz-animation-delay: 4.25s;
					-webkit-animation-delay: 4.25s;
					-o-animation-delay: 4.25s;
					-ms-animation-delay: 4.25s;
					animation-delay: 4.25s;
				}

				#header nav li:nth-child(9) {
					-moz-animation-delay: 4.5s;
					-webkit-animation-delay: 4.5s;
					-o-animation-delay: 4.5s;
					-ms-animation-delay: 4.5s;
					animation-delay: 4.5s;
				}

				#header nav li:nth-child(10) {
					-moz-animation-delay: 4.75s;
					-webkit-animation-delay: 4.75s;
					-o-animation-delay: 4.75s;
					-ms-animation-delay: 4.75s;
					animation-delay: 4.75s;
				}

			#header nav a {
				-webkit-tap-highlight-color: transparent;
				-webkit-touch-callout: none;
				border: 0;
				display: inline-block;
			}

				#header nav a:before {
					-moz-transition: all 0.2s ease-in-out;
					-webkit-transition: all 0.2s ease-in-out;
					-o-transition: all 0.2s ease-in-out;
					-ms-transition: all 0.2s ease-in-out;
					transition: all 0.2s ease-in-out;
					border-radius: 100%;
					border: solid 1px;
					border-color: var(--link-color, white);
					color: var(--link-color, inherit);
					display: block;
					font-size: var(--link-font, 1.75em);
					height: 2.5em;
					line-height: 2.5em;
					position: relative;
					text-align: center;
					top: 0;
					width: 2.5em;
				}

				#header nav a:hover {
					font-size: 1.1em;
				}

					#header nav a:hover:before {
						background-color: rgba(255, 255, 255, 0.175);
						color: white;
					}

				#header nav a:active {
					font-size: 0.95em;
					background: none;
				}

					#header nav a:active:before {
						background-color: rgba(255, 255, 255, 0.35);
						color: white;
					}

				#header nav a span {
					display: none;
				}

/* Footer */

	#footer {
		bottom: 0;
		cursor: default;
		height: 6em;
		left: 0;
		line-height: 8em;
		position: absolute;
		text-align: center;
		width: 100%;
		opacity: 30;
	}

/* Focus (accessibility) */

	:focus-visible {
		outline: 2px solid #fff;
		outline-offset: 6px;
		border-radius: 0.4em;
	}

/* Переносы длинного текста — ничего не «сплющивается» при сужении */
	#header h1,
	#header h2,
	#header h3,
	#groups,
	#countdown {
		overflow-wrap: break-word;
		word-break: normal;
		white-space: normal;
	}

/* Countdown */

	#countdown {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto 1.6em auto;
		line-height: 1em;
	}

	.cd-box {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		min-width: 5.4em;
	}

	.cd-num {
		font-size: min(var(--timer-size, 2.4em), var(--timer-vw, 5vw));
		font-weight: 900;
		line-height: 1em;
		letter-spacing: 0.02em;
		font-variant-numeric: tabular-nums;
	}

	.cd-label {
		font-size: 0.7em;
		font-weight: 400;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		opacity: 0.75;
		margin-top: 0.4em;
	}

	.cd-sep {
		display: inline-block;
		width: 1em;
		font-size: calc(min(var(--timer-size, 2.4em), var(--timer-vw, 5vw)) * 0.6);
		line-height: 1em;
		margin: 0 0.4em;
	}

	.cd-fallback {
		font-size: 1.2em;
		margin: 1em 0 0 0;
		opacity: 0.8;
	}

/* Центрирование по вертикали: flex саблайн + line-height 1em у #subline уже выставляют кружки по центру текста */
	.sub-sep {
		display: inline-block;
		font-size: calc(var(--sub-size, min(35pt, 4.375vw)) * 0.6);
		line-height: 1em;
		opacity: 0.6;
		margin: -0.167em 0.4em 0;
		vertical-align: middle;
	}

/* Крупные строки не переносятся при сужении — масштабируются шрифтом (vw). Переносятся только группы */
	#header h1,
	#header h2,
	#header h3,
	#countdown {
		white-space: nowrap;
		overflow: visible;
	}

	#groups {
		overflow-wrap: break-word;
		word-break: normal;
		white-space: normal;
	}

/* Groups (состав) */

	#groups {
		display: none;
		margin: 0 0 3.2em 0;
		line-height: 1.3em;
		text-align: center;
	}

	.grp {
		display: inline-block;
		position: relative;
		z-index: 0;
		font-size: min(var(--gs, 4.35em), var(--gs-vw, 6.75vw));
		line-height: 1.25em;
		cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M8 5v14l11-7z' fill='%23ffffff' stroke='%23000'/%3E%3C/svg%3E") 12 12, pointer;
		transition: transform 0.35s ease, opacity 0.3s ease, filter 0.3s ease;
		will-change: transform;
	}

	.grp.grp-playing {
		cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='7' y='5' width='4' height='14' fill='%23ffffff' stroke='%23000'/%3E%3Crect x='14' y='5' width='4' height='14' fill='%23ffffff' stroke='%23000'/%3E%3C/svg%3E") 12 12, pointer;
	}

	.grp-active,
	.grp:hover {
		transform: scale(1.3);
		transform-origin: 50% 50%;
	}

	/* Свечение: размытая копия текста за ним, дышит прозрачностью (без перерисовки глифов — нет тряски) */
	.grp::after {
		content: attr(data-text);
		position: absolute;
		inset: 0;
		z-index: -1;
		color: inherit;
		opacity: 0;
		filter: blur(10px);
		pointer-events: none;
	}

	.grp:hover::after {
		animation: grp-glow 1.6s ease-in-out infinite;
	}

	@keyframes grp-glow {
		0%, 100% { opacity: 0.3; }
		50% { opacity: 0.75; }
	}

	/* Остальные группы и разделители при наведении: полупрозрачные и слегка размытые */
	#groups.grp-hovering .grp:not(:hover),
	#groups.grp-hovering .grp-sep {
		opacity: 0.4;
		filter: blur(1.5px);
	}

	.grp-sep {
		display: inline-block;
		font-size: min(var(--gs, 4.35em), var(--gs-vw, 6.75vw));
		line-height: 1em;
		margin: 0 0.45em;
		opacity: 0.65;
		transition: opacity 0.3s ease, filter 0.3s ease;
	}