/* Airia homepage header logo animation */

.airia-global-header .airia-logo-wrap {
	text-align: center;
	width: 100%;
}

.airia-global-header .airia-logo-link {
	display: inline-block;
	line-height: 0;
	text-decoration: none;
	margin: 0 auto;
}

.airia-global-header .airia-logo {
	display: block;
	width: auto;
	height: 82px;
	max-width: min(316px, 100%);
}

/*
 * Hide later phases until their turn.
 * AiR (A, i, R) is the only visible wordmark at start.
 */
.airia-logo--animate #logo-purple-bar [id^="logo-bar-"],
.airia-logo--animate #logo-i-right-top,
.airia-logo--animate #logo-i-right,
.airia-logo--animate #logo-a-right,
.airia-logo--animate #logo-tagline,
.airia-logo--animate #logo-reg {
	opacity: 0;
}

/* Phase 1: AiR flies in — A, i, R — then brief hold before bar */
.airia-logo--animate #logo-a-left {
	animation: airia-fly-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0s both;
}

.airia-logo--animate #logo-i-first {
	animation: airia-fly-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;
}

.airia-logo--animate #logo-r {
	animation: airia-fly-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.36s both;
}

/* Phase 2: purple bar stacks left to right (starts after ~0.5s AiR hold) */
.airia-logo--animate #logo-bar-1-left-cap {
	animation: airia-bar-stack 0.28s cubic-bezier(0.34, 1.2, 0.64, 1) 1.5s both;
	transform-origin: center bottom;
}

.airia-logo--animate #logo-bar-2-left-fill {
	animation: airia-bar-stack 0.28s cubic-bezier(0.34, 1.2, 0.64, 1) 1.63s both;
	transform-origin: center bottom;
}

.airia-logo--animate #logo-bar-3-span {
	animation: airia-bar-stack 0.28s cubic-bezier(0.34, 1.2, 0.64, 1) 1.76s both;
	transform-origin: center bottom;
}

.airia-logo--animate #logo-bar-4-right-fill {
	animation: airia-bar-stack 0.28s cubic-bezier(0.34, 1.2, 0.64, 1) 1.89s both;
	transform-origin: center bottom;
}

.airia-logo--animate #logo-bar-5-right-cap {
	animation: airia-bar-stack 0.28s cubic-bezier(0.34, 1.2, 0.64, 1) 2.02s both;
	transform-origin: center bottom;
}

/* Phase 3: remaining palindrome — right i + mirrored A */
.airia-logo--animate #logo-i-right-top {
	animation: airia-mirror-in-right 0.45s cubic-bezier(0.22, 1, 0.36, 1) 2.3s both;
}

.airia-logo--animate #logo-i-right {
	animation: airia-mirror-in-right 0.45s cubic-bezier(0.22, 1, 0.36, 1) 2.43s both;
}

.airia-logo--animate #logo-a-right {
	animation: airia-mirror-in-right 0.45s cubic-bezier(0.22, 1, 0.36, 1) 2.56s both;
}

/* Phase 4: tagline + reg mark stomp */
.airia-logo--animate #logo-tagline,
.airia-logo--animate #logo-reg {
	animation: airia-stomp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 2.9s both;
	transform-origin: center bottom;
}

@keyframes airia-fly-in {
	from {
		opacity: 0;
		transform: translateX(-56px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes airia-bar-stack {
	0% {
		opacity: 0;
		transform: translateY(-16px) scaleY(0.4);
	}

	65% {
		opacity: 1;
		transform: translateY(3px) scaleY(1.08);
	}

	100% {
		opacity: 1;
		transform: translateY(0) scaleY(1);
	}
}

@keyframes airia-mirror-in-left {
	from {
		opacity: 0;
		transform: translateX(20px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes airia-mirror-in-right {
	from {
		opacity: 0;
		transform: translateX(-20px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes airia-stomp {
	0% {
		opacity: 0;
		transform: scale(1.18) translateY(-8px);
	}

	65% {
		opacity: 1;
		transform: scale(0.97) translateY(2px);
	}

	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

@media (max-width: 980px) {
	.airia-global-header .airia-logo {
		height: 64px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.airia-logo--animate #logo-a-left,
	.airia-logo--animate #logo-i-first,
	.airia-logo--animate #logo-r,
	.airia-logo--animate #logo-purple-bar [id^="logo-bar-"],
	.airia-logo--animate #logo-i-right-top,
	.airia-logo--animate #logo-i-right,
	.airia-logo--animate #logo-a-right,
	.airia-logo--animate #logo-tagline,
	.airia-logo--animate #logo-reg {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}