:root {
	--navy: #082542;
	--orange: #f9a531;
	--paper: #f6f4f0;
	--ease-out: cubic-bezier(.16, .84, .3, 1);
}

body.is-loading {
	overflow: hidden
}


/* ================= PRELOADER ================= */
#preloader {
	position: fixed;
	inset: 0;
	z-index: 10000;
	overflow: hidden;
	background: var(--paper);
	transition: opacity .7s ease;
}

#preloader.is-done {
	opacity: 0;
	pointer-events: none;
}

/* navy layer */
.pl-bg {
	position: absolute;
	inset: 0;
	opacity: 0;
	/* background: radial-gradient(ellipse 70% 80% at 50% 38%, #474f98 0%, #343a72 45%, #082542 100%); */
	background: var(--navy);
	transition: opacity .35s linear;
}

#preloader.bg-on .pl-bg {
	opacity: 1;
}

#preloader.to-white .pl-bg {
	opacity: 0;
	transition: opacity .55s ease .05s;
}

/* giant ghost marks in the corners */
.pl-ghost {
	position: absolute;
	fill: #fff;
	opacity: .02;
	filter: blur(2px);
}

.pl-ghost.g1 {
	width: 40vw;
	left: -14vw;
	bottom: -18vh;
	transform: rotate(-4deg);
}

.pl-ghost.g2 {
	width: 36vw;
	right: -14vw;
	top: 8vh;
	transform: rotate(3deg);
}

.pl-stage {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ---------- logo lock-up (white + orange on navy) ---------- */
.lockup {
	width: clamp(230px, 31vw, 580px);
	height: auto;
	overflow: visible;
	opacity: 0;
	filter: blur(22px);
	transform: scale(1.05);
	transition: opacity 1s ease, filter 1.6s var(--ease-out), transform 1.8s var(--ease-out);
}

.lockup .ln {
	fill: #fff;
}

.lockup .lo {
	fill: #fff;
}

.lockup path {
	fill-rule: evenodd;
}

#lg-ghost {
	opacity: .22;
}

#preloader.logo-in .lockup {
	opacity: 1;
	filter: blur(0);
	transform: scale(1);
}

/* Hindi tagline: fades up after the fill */
#lg-tag {
	fill: #fff;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .7s ease, transform .8s var(--ease-out);
}

#preloader.tag-in #lg-tag {
	opacity: 1;
	transform: none;
}

/* exit: lock-up blurs out */
#preloader.to-white .lockup {
	opacity: 0;
	filter: blur(18px);
	transform: scale(1.03);
	transition: opacity .45s ease, filter .45s ease, transform .45s ease;
}

/* ---------- coloured GC icon (final state, on light bg) ---------- */
.pl-icon {
	position: absolute;
	width: clamp(150px, 17vw, 330px);
	height: auto;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	filter: blur(14px);
	transition: opacity .5s ease, filter .5s ease;
}

.pl-icon .n {
	fill: var(--navy)
}

.pl-icon .o {
	fill: var(--orange)
}

.pl-icon path {
	fill-rule: evenodd
}

#preloader.to-white .pl-icon {
	opacity: 1;
	filter: blur(0);
	transition-delay: .15s
}