/*
Theme Name: GIUK Coming Soon
Theme URI: https://giuknyc.com/
Author: Codibu
Description: Single-screen Olive Night coming-soon page for GIUK New York.
Version: 1.4.0
Text Domain: giuk-coming-soon
*/

:root {
	--olive: #535040;
	--olive-deep: #3b392e;
	--ink: #26241c;
	--cream: #f3efe4;
	--gold: #cfc6ad;
}

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

html,
body {
	margin: 0;
	height: 100%;
}

body.giuk-body {
	min-height: 100vh;
	min-height: 100dvh;
	background: var(--olive);
	color: var(--cream);
	font-family: Outfit, "Segoe UI", sans-serif;
	overflow: hidden;
}

a {
	color: inherit;
	text-decoration: none;
}

.giuk-stage {
	position: relative;
	min-height: 100vh;
	min-height: 100dvh;
	display: grid;
	place-items: center;
	overflow: hidden;
	background:
		radial-gradient(ellipse at 50% 42%, rgba(243, 239, 228, 0.08), transparent 46%),
		linear-gradient(180deg, #5a5746 0%, var(--olive) 46%, var(--olive-deep) 100%);
}

.giuk-glow {
	position: absolute;
	width: min(72vw, 640px);
	height: min(72vw, 640px);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(207, 198, 173, 0.16), transparent 68%);
	filter: blur(10px);
	pointer-events: none;
}

.giuk-frame {
	position: absolute;
	inset: 22px;
	border: 1px solid rgba(243, 239, 228, 0.12);
	pointer-events: none;
}

.giuk-center {
	position: relative;
	z-index: 1;
	text-align: center;
	padding: 24px;
}

.giuk-place {
	margin: 0 0 36px;
	font-size: 11px;
	letter-spacing: 0.46em;
	text-transform: uppercase;
	color: var(--gold);
}

.giuk-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.giuk-logo-stage {
	position: relative;
	width: min(58vw, 340px);
	aspect-ratio: 1;
	margin: 0 auto 32px;
	border-radius: 4px;
	overflow: hidden;
	background: #000;
	box-shadow: 0 24px 60px rgba(18, 16, 10, 0.28);
}

.giuk-emblem {
	position: absolute;
	inset: 0;
	container-type: inline-size;
}

.giuk-l,
.giuk-o,
.giuk-dot {
	position: absolute;
	opacity: 0;
}

.giuk-l {
	font-family: Outfit, "Segoe UI", sans-serif;
	font-weight: 400;
	color: #fff;
	font-size: 13.8cqw;
	line-height: 1;
}

.giuk-l-g { top: 13.5%; left: 15.5%; }
.giuk-l-i { top: 36%; left: 18%; }
.giuk-l-u { top: 53.5%; left: 28%; }
.giuk-l-k { top: 69%; left: 63%; }

.giuk-o {
	width: 8.6cqw;
	height: 8.6cqw;
	border: 0.12em solid #8d8d8d;
	border-radius: 50%;
}

.giuk-o-a { top: 38.5%; left: 42%; }
.giuk-o-b { top: 38.5%; left: 61%; }

.giuk-dot {
	width: 2.1cqw;
	height: 2.1cqw;
	border-radius: 50%;
	background: #8d8d8d;
	top: 56.5%;
	left: 57%;
}

.giuk-logo-final {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
}

.giuk-logo-shine {
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.16) 50%, transparent 62%);
	transform: translateX(-140%);
	pointer-events: none;
}

.giuk-waiting .giuk-logo-stage {
	opacity: 0;
	transform: scale(0.88);
}

.giuk-ready .giuk-logo-stage {
	animation: giuk-plate 0.85s cubic-bezier(0.22, 0.8, 0.2, 1) forwards;
}

.giuk-ready .giuk-l-g { animation: giuk-letter 0.7s cubic-bezier(0.22, 0.8, 0.2, 1) 0.28s forwards; }
.giuk-ready .giuk-l-i { animation: giuk-letter 0.7s cubic-bezier(0.22, 0.8, 0.2, 1) 0.42s forwards; }
.giuk-ready .giuk-o-a { animation: giuk-pop 0.55s cubic-bezier(0.22, 0.8, 0.2, 1) 0.56s forwards; }
.giuk-ready .giuk-o-b { animation: giuk-pop 0.55s cubic-bezier(0.22, 0.8, 0.2, 1) 0.68s forwards; }
.giuk-ready .giuk-l-u { animation: giuk-letter 0.7s cubic-bezier(0.22, 0.8, 0.2, 1) 0.8s forwards; }
.giuk-ready .giuk-dot { animation: giuk-pop 0.5s cubic-bezier(0.22, 0.8, 0.2, 1) 0.92s forwards; }
.giuk-ready .giuk-l-k { animation: giuk-letter 0.7s cubic-bezier(0.22, 0.8, 0.2, 1) 1.04s forwards; }
.giuk-ready .giuk-logo-final { animation: giuk-crossfade 0.7s ease 1.45s forwards; }
.giuk-ready .giuk-logo-shine { animation: giuk-shine 1.15s ease 1.55s forwards; }
.giuk-ready .giuk-soon { animation-delay: 1.62s; }
.giuk-ready .giuk-address { animation-delay: 1.78s; }

@keyframes giuk-plate {
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes giuk-letter {
	from {
		opacity: 0;
		transform: translateY(16px);
		filter: blur(8px);
	}
	to {
		opacity: 1;
		transform: none;
		filter: blur(0);
	}
}

@keyframes giuk-pop {
	from {
		opacity: 0;
		transform: scale(0.4);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes giuk-crossfade {
	to {
		opacity: 1;
	}
}

@keyframes giuk-shine {
	to {
		transform: translateX(140%);
	}
}

.giuk-logo {
	display: block;
	width: min(42vw, 220px);
	height: auto;
	margin: 0 auto 22px;
}

.giuk-soon {
	margin: 0;
	font-size: 13px;
	letter-spacing: 0.42em;
	text-transform: uppercase;
	color: var(--cream);
}

.giuk-address {
	display: block;
	margin: 18px 0 0;
	font-size: 12px;
	letter-spacing: 0.14em;
	color: var(--gold);
	transition: color 0.3s ease;
}

.giuk-address:hover {
	color: var(--cream);
}

.giuk-waiting .giuk-fade,
.giuk-waiting .giuk-rule {
	opacity: 0;
	transform: translateY(14px);
}

.giuk-ready .giuk-fade {
	animation: giuk-in 1s cubic-bezier(0.22, 0.8, 0.2, 1) forwards;
	animation-delay: calc(var(--d, 0) * 0.12s);
}

.giuk-ready .giuk-rule {
	transform-origin: center;
	animation: giuk-rule 0.9s cubic-bezier(0.22, 0.8, 0.2, 1) forwards;
	animation-delay: 0.36s;
}

.giuk-fade[data-giuk-delay="1"] { --d: 1; }
.giuk-fade[data-giuk-delay="2"] { --d: 2; }
.giuk-fade[data-giuk-delay="3"] { --d: 3; }
.giuk-fade[data-giuk-delay="4"] { --d: 4; }

@keyframes giuk-in {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes giuk-rule {
	from {
		opacity: 0;
		transform: scaleX(0);
	}
	to {
		opacity: 1;
		transform: scaleX(1);
	}
}

@media (max-width: 700px) {
	.giuk-frame {
		inset: 14px;
	}

	.giuk-logo-stage {
		width: min(68vw, 280px);
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}

	.giuk-waiting .giuk-fade,
	.giuk-waiting .giuk-rule,
	.giuk-waiting .giuk-logo-stage,
	.giuk-fade,
	.giuk-rule,
	.giuk-logo-stage,
	.giuk-logo-final,
	.giuk-l,
	.giuk-o,
	.giuk-dot {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
	}

	.giuk-emblem,
	.giuk-logo-shine {
		display: none !important;
	}
}