/* -----------------------------------------------------------------------------
   Header logo component. Standalone: no dependency on main.css selectors
   beyond the shared custom properties defined in :root there.
----------------------------------------------------------------------------- */

.gb-logo {
	display: inline-block;
	line-height: 0;
}

.gb-logo__text {
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #ffffff;
	transition: font-size 0.45s ease;
}

.gb-logo__img {
	max-height: 44px;
	width: auto;
	transition: max-height 0.45s ease;
}

/* Shrinks alongside the header's padding once the glass bar kicks in.
   Scaling max-height/font-size rather than transform keeps the entrance
   animation's transform free on the home screen. */
.gb-header.is-stuck .gb-logo__img {
	max-height: 32px;
}

.gb-header.is-stuck .gb-logo__text {
	font-size: 15px;
}

@media (prefers-reduced-motion: reduce) {
	.gb-logo__img,
	.gb-logo__text {
		transition: none;
	}
}

/* On the home screen, the logo fades in from off-screen left, timed to
   land alongside the background video fade (2.6s delay in main.css'
   gb-bg-in). Kept out of main.css since it's this component's own beat. */
@keyframes gb-logo-in {
	from {
		opacity: 0;
		transform: translateX(-40px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

body.gb-home .gb-logo {
	opacity: 0;
	animation: gb-logo-in 1.4s cubic-bezier(0.22, 0.7, 0.2, 1) 2.6s forwards;
}

@media (prefers-reduced-motion: reduce) {
	body.gb-home .gb-logo {
		animation: none;
		opacity: 1;
		transform: none;
	}
}