@font-face {
	font-family: 'TeleNeoWeb';
	src: url('fonts/TeleNeoWeb-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: 'TeleNeoWeb';
	src: url('fonts/TeleNeoWeb-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
}
@font-face {
	font-family: 'TeleNeoWeb';
	src: url('fonts/TeleNeoWeb-ExtraBold.woff') format('woff');
	font-weight: 900;
	font-style: normal;
}
@font-face {
	font-family: 'SUSE Mono';
	src: url('fonts/suse-mono-v1-latin-700.woff2') format('woff');
	font-weight: 700;
	font-style: normal;
}

:root {
	--magenta: #e20074;
	--magenta-hover: #9b0050;
	--white: rgba(246, 246, 246, 1);
	--white-dimmed: rgba(246, 246, 246, .8);
	--blue: #6aaee0;
	--gray: #999;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'TeleNeoWeb', sans-serif; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 70px; 
}

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

body {
	background-color: var(--magenta);
}

section.hero header {
	position: relative;
	aspect-ratio: 168 / 100;
	max-width: 1600px;
	width: 100%;
	height: auto;
	margin-inline: auto;

}

section.hero header h1 img {
	display: block;
	width: 100%;
	height: auto;
}

section.hero header h1 img.m {
	display: none;
}

section.hero header > img {
	position: absolute;
	height: auto;
}

section.hero .glava {
	width: 32.62%;
	top: 1.5%;
	left: 54.76%;
}

section.hero .lopta {
	width: 14.52%;
	top: 22.8%;
	left: 3.8%;
}

section.hero .zvizdaljka {
	width: 11.62%;
	top: 76.4%;
	left: 39.86%;
}

.glavna-nagrada {
	position: absolute;
	bottom: 0;
	left: 5%;
	width: 10vmax;
	height: 10vmax;
	background: var(--blue);
	border-radius: 50%;
	display: flex;
	align-items: center;
	text-align: center;
	color: var(--white);
	font-weight: 700;
	font-size: 1.7vmax;
}

.glavna-nagrada span {
	font-size: 2.5vmax;
	font-weight: 900;
}

@media screen and (max-width: 767px){
	section.hero header {
		aspect-ratio: 12 / 21;
	}
	section.hero header h1 img.d {
		display: none;
	}
	section.hero header h1 img.m {
		display: block;
	}
	section.hero .glava {
		width: 40%;
		top: 6%;
		left: 52%;
	}
	section.hero .lopta {
		width: 20%;
		top: 40%;
		left: 10%;
	}
	section.hero .zvizdaljka {
		width: 26%;
		top: 77%;
		left: 56%;
	}
	.glavna-nagrada {
		width: 14vmax;
		height: 14vmax;
	}
}

@media screen and (min-width: 1200px){
	.logo { padding: 20px; }
}

@media screen and (min-width: 1600px){
	.logo { padding: 30px; width: 130px; height: auto; }
}

p, input[type="text"], input[type="email"], h4 {
	font-size: clamp(16px,1.2vmax,24px);
}

p {
	margin-block: 1rem;
}

.d-flex div * {
	margin: 0;
}

.style-text {
	max-width: 80ch;
	width: 100%;
	margin-inline: auto;
}

.style-text * {
	color: var(--white);
	text-align: center;
	text-wrap: balance;
}

.style-text h2, h3 {
	font-weight: 900;
	margin-block: 2rem 1rem;
}

.d-flex {
	display: flex;
	gap: 2rem;
	margin-inline: auto;

}

@media (max-width: 768px) {
	.d-flex { 
		flex-direction: column; 
	}
}

.d-flex > div {
	width: 100%;
	border: 1px solid rgba(255,255,255,.3);
	padding: 40px;
}

.container {
	width: 90%;
	max-width: 1024px; 
	margin: 0 auto; 
}

.form-container { 
	max-width: 600px;
	margin-inline: auto;  
	border: 1px solid rgba(255,255,255,.3);
}

.card {
	padding: 2rem; 
	position: relative; 
	overflow: hidden; 
}

.btn {
	display: inline-block;
	padding: 12px 30px 7px;
	font-size: clamp(24px, 2vmax, 32px);
	text-decoration: none;
	font-weight: 900;
	text-transform: uppercase;
	line-height: 1;
	border: none;
	cursor: pointer;
}

.btn.small {
	font-size: clamp(16px, 1.4vmax, 24px);
	font-weight: 400;
	padding: 7px 20px;
}

.btn.white {
	background: var(--white);
	color: var(--magenta);
}

.btn.magenta {
	background: var(--magenta);
	color: var(--white);
}

.btn.centered {
	margin-inline: auto;
}

.form-section { 
	margin-bottom: 2rem; 
}

.form-row { 
	display: grid; 
	grid-template-columns: 1fr; 
	gap: 1rem; 
	margin-bottom: 1rem; 
}

@media (min-width: 768px) { 
	.form-row { 
		grid-template-columns: 1fr 1fr; 
	} 
}

.form-group { 
	margin-bottom: 1rem; 
}

label { 
	display: block; 
	font-weight: 700; 
	color: var(--white); 
	margin-bottom: 0.35rem;
	font-size: 1rem;
	text-transform: uppercase;
}

input[type="text"], 
input[type="email"] { 
	width: 100%; 
	padding: 0.65rem 1rem;
	border: none; 
	transition: all 0.2s; 
	outline: none; 
	background-color: var(--white-dimmed);
	transition: .3s all ease-in-out;
}

input[type="text"]:focus, 
input[type="email"]:focus { 
	background-color: var(--white); 
}

.file-drop { 
	padding: 2.5rem 1.5rem; 
	text-align: center; 
	cursor: pointer; 
	transition: background 0.2s, border-color 0.2s; 
	display: flex; 
	flex-direction: column; 
	align-items: center; 
	justify-content: center; 
	background: var(--white-dimmed); 
}
.file-drop:hover,
.file-drop.drag-active { 
	background: var(--white); 
}
.file-drop input { 
	display: none; 
}
.file-drop svg { 
	width: 2.5rem; 
	height: 2.5rem; 
	margin-bottom: 0.75rem; 
}
.file-drop svg path { 
	fill: var(--gray); 
}
.file-drop p { 
	font-size: 0.875rem; 
	color: var(--gray);
	margin: 0;
}
.file-drop .small { 
	font-size: 0.75rem;
	margin-top: 0.25rem; 
}

.local-preview { 
	margin-top: 1rem; 
}
.local-preview-title { 
	font-size: 0.875rem; 
	font-weight: 500; 
	margin-bottom: 0.5rem; 
}
.media-container { 
	overflow: hidden; 
	background: var(--white); 
	display: flex; 
	justify-content: center; 
	padding: 0.5rem;
}
.media-container img, 
.media-container video { 
	max-width: 100%; 
	max-height: 15rem; 
	object-fit: contain; 
	border-radius: 0.25rem; 
}
.file-name-display { 
	font-size: 0.75rem; 
	text-align: center; 
	margin-top: 0.5rem; 
}

.modal-overlay {
	position: fixed; 
	inset: 0; 
	background: rgba(0, 0, 0, 0.5); 
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	display: flex; 
	align-items: center; 
	justify-content: center; 
	z-index: 50;
	opacity: 0; 
	visibility: hidden; 
	transition: all 0.3s ease;
}
.modal-overlay.active { 
	opacity: 1; 
	visibility: visible; 
}
.modal-content {
	background: var(--white);
	width: 90%; 
	max-width: 400px;
	padding: 2.5rem 2rem; 
	transform: translateY(20px); 
	transition: all 0.3s ease;
	text-align: center;
}
.modal-content h3,
.modal-content p {
	color: #000;
}
.modal-overlay.active .modal-content { 
	transform: translateY(0); 
}
.modal-title {
	font-size: clamp(24px, 2vmax, 32px); 
	margin-bottom: 0.75rem; 
}
.modal-message { 
	margin-bottom: 2rem;
}

.hidden { 
	display: none !important; 
}

.loading-overlay { 
	position: absolute; 
	inset: 0; 
	background: var(--white-dimmed); 
	backdrop-filter: blur(4px); 
	z-index: 10; 
	display: flex; 
	flex-direction: column; 
	align-items: center; 
	justify-content: center; 
}
.loading-text { 
	color: #000; 
	font-weight: 500; 
	animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; 
}

@keyframes spinner { 
	0% { transform: rotate(0deg); } 
	100% { transform: rotate(360deg); } 
}

@keyframes pulse { 
	0%, 100% { opacity: 1; } 
	50% { opacity: .5; } 
}

.my-0 {
	margin-block: 0;
}

.text-center {
	text-align: center;
}

::placeholder {
	color: var(--gray);
	font-size: 0.875rem;
}


.swiper-track {
	background-color: var(--white);
	padding-block: 60px;
	margin-block: 60px;
	text-align: center;
}
.swiper-track p {
	margin: 0;
}

.swiper {
  display: flex;
  overflow-x: auto;
  cursor: grab;
  -ms-overflow-style: none;
  scrollbar-width: none;
  margin-top: 60px;
}

.swiper::-webkit-scrollbar {
  display: none;
}

.swiper:active {
  cursor: grabbing;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

footer { 
	background: #18181a; 
	margin-top: 40px; 
	padding-block: 60px;
}

footer .container div {
	display: flex;
	justify-content: space-between;
	gap: 20px;
}

footer a {
	color: var(--white);
	text-decoration: none;
}

@media screen and (max-width: 480px){
	footer .container div {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}

.videos {
	padding-inline: 40px;
	display: flex;
	justify-content: center;
	gap: 20px;
}

.video {
	width: 100%;
	aspect-ratio: 16 /9;
}

.video iframe {
	width: 100%;
	height: 100%;
}

.my { margin-block: 50px; }
.mt { margin-top: 50px; }
.mb { margin-bottom: 50px; }

@media screen and (max-width: 767px){
	.videos {
		flex-direction: column;
	}
}

#canvas-container {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	/*filter: grayscale(1);*/
	/*text-shadow: 0 0 5px rgba(255,255,255,0.5);*/
}

.typing-element {
	position: absolute;
	/* color: rgba(80,80,80,.5); */
	color: #ef75b8;
	/*mix-blend-mode: difference;*/
	font-family: 'SUSE Mono', monospace;
	font-weight: 700;
	font-size: 1rem;
	white-space: nowrap;
}

.typing-element::after {
	content: '∎';
	margin-left: 2px;
	animation: blink 1s step-end infinite;
	opacity: 0.8;
	font-size: 0.9em;
}

@keyframes blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
}

.glitch-block {
	position: absolute;
	background-color: #fff;
	mix-blend-mode: difference;
	pointer-events: none;
	display: none;
	z-index: 10;
}