/* Geoforce: stranica u izradi */
:root {
	--gf-green: #8DC63F;      /* Geo zelena */
	--gf-green-dark: #6AA72A; /* Tamna zelena */
	--gf-graphite: #15191B;   /* Grafit */
	--gf-white: #FFFFFF;
	--gf-concrete: #A7AEB2;   /* Beton siva */
	--gf-font-head: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
	--gf-font-text: "Barlow", Arial, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html,
body { height: 100%; }

body {
	margin: 0;
	background: var(--gf-graphite);
	color: var(--gf-white);
	font-family: var(--gf-font-text);
	-webkit-font-smoothing: antialiased;
}

.uc {
	position: relative;
	min-height: 100%;
	min-height: 100svh;
	display: grid;
	place-items: center;
	padding: 2rem 1rem;
	overflow: hidden;
	isolation: isolate;
	background:
		radial-gradient(ellipse 70% 55% at 50% 45%, rgba(141, 198, 63, .10), transparent 70%),
		var(--gf-graphite);
}

/* tanke dijagonale u pozadini */
.uc::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background: repeating-linear-gradient(
		120deg,
		transparent 0 46px,
		rgba(255, 255, 255, .025) 46px 47px
	);
	mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
}

/* veliki obrubljeni znak u pozadini */
.uc__hex {
	position: absolute;
	z-index: -1;
	width: min(120vmin, 900px);
	right: -18vmin;
	bottom: -22vmin;
	fill: none;
	stroke: rgba(141, 198, 63, .12);
	stroke-width: .35;
	animation: gf-float 14s ease-in-out infinite;
}

.uc__inner {
	width: 100%;
	max-width: 40rem;
	text-align: center;
	animation: gf-in .9s cubic-bezier(.2, .7, .2, 1) both;
}

.uc__logo {
	display: block;
	width: min(100%, 22rem);
	height: auto;
	margin: 0 auto;
}

/* "bušenje": linija koja se spušta */
.uc__drill {
	position: relative;
	width: 2px;
	height: 4.5rem;
	margin: 2.25rem auto;
	background: rgba(255, 255, 255, .12);
	overflow: hidden;
}

.uc__drill span {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 40%;
	background: var(--gf-green);
	animation: gf-drill 2.2s cubic-bezier(.6, 0, .4, 1) infinite;
}

.uc__title {
	margin: 0;
	font-family: var(--gf-font-head);
	font-weight: 800;
	font-size: clamp(2.5rem, 8vw, 4.5rem);
	line-height: .95;
	letter-spacing: .01em;
	text-transform: uppercase;
}

.uc__title span {
	display: block;
	color: var(--gf-green);
}

.uc__lead {
	margin: 1.25rem 0 0;
	font-size: clamp(1rem, 2.5vw, 1.125rem);
	font-weight: 400;
	letter-spacing: .04em;
	color: var(--gf-concrete);
}

@keyframes gf-in {
	from { opacity: 0; transform: translateY(1.25rem); }
	to { opacity: 1; transform: none; }
}

@keyframes gf-drill {
	from { transform: translateY(-100%); }
	to { transform: translateY(250%); }
}

@keyframes gf-float {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50% { transform: translateY(-2vmin) rotate(1.5deg); }
}

@media (prefers-reduced-motion: reduce) {
	.uc__inner,
	.uc__hex,
	.uc__drill span { animation: none; }
	.uc__drill span { transform: translateY(75%); }
}