/*
 * AH animated icon set (Icons::tile()). Loops are paused by default and run only while the tile
 * is on screen: ah-motion.js adds .is-playing to .ah-itile. Without JS the icons are still.
 */
.ah-itile {
	flex: none;
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: linear-gradient(150deg, #22356A 0%, #0F1B3C 55%, #0A1430 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -6px 12px rgba(0, 0, 0, .25), 0 12px 24px -14px rgba(9, 18, 42, .9);
	transition: transform .5s var(--ah-spring), box-shadow .5s;
}
.ah-itile::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(160deg, rgba(255, 255, 255, .18), transparent 45%);
	pointer-events: none;
}
.ah-itile.ah-itile--sm { width: 44px; height: 44px; border-radius: 13px; }
.ah-itile.ah-itile--lg { width: 68px; height: 68px; border-radius: 20px; }
.ah-ic { width: 30px; height: 30px; overflow: visible; }
.ah-itile--sm .ah-ic { width: 24px; height: 24px; }
.ah-itile--lg .ah-ic { width: 36px; height: 36px; }
.ah-ic * { fill: none; stroke: #F4F1E8; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; }
.ah-ic .i-g { stroke: var(--ah-gold-hi); }
.ah-ic .i-fg { fill: var(--ah-gold-hi); stroke: none; }
.ah-ic .i-fw { fill: #F4F1E8; stroke: none; }
.ah-ic .i-fn { fill: #13204A; }
.ah-ic .i-vb { transform-box: view-box; }

@media (prefers-reduced-motion: no-preference) {
	.ah-ic-strategy .i-ring { transform-origin: 24px 24px; animation: ah-spin 14s linear infinite; }
	.ah-ic-strategy .i-dart { animation: ah-i-dart 2.6s var(--ah-ease) infinite; }
	.ah-ic-strategy .i-core { animation: ah-i-pop 2.6s var(--ah-ease) infinite; }
	.ah-ic-ads .i-bar { transform-origin: 50% 100%; animation: ah-i-grow 2.4s var(--ah-ease) infinite; }
	.ah-ic-ads .i-b2 { animation-delay: .2s; }
	.ah-ic-ads .i-b3 { animation-delay: .4s; }
	.ah-ic-ads .i-trend { stroke-dasharray: 1; animation: ah-i-drawl 2.4s var(--ah-ease) infinite; }
	.ah-ic-ads .i-spark { animation: ah-i-pop 2.4s var(--ah-ease) infinite .9s; }
	.ah-ic-web .i-blk { animation: ah-i-build 3s var(--ah-spring) infinite; }
	.ah-ic-web .i-k2 { animation-delay: .25s; }
	.ah-ic-web .i-k3 { animation-delay: .5s; }
	.ah-ic-web .i-cursor { animation: ah-i-click 3s var(--ah-ease) infinite; }
	.ah-ic-ai .i-sig { stroke-dasharray: 3 9; animation: ah-i-flow 1.1s linear infinite; }
	.ah-ic-ai .i-cpu { animation: ah-i-glow 1.6s ease-in-out infinite; }
	.ah-ic-events .i-tick { stroke-dasharray: 1; animation: ah-i-drawl 2.8s var(--ah-ease) infinite; }
	.ah-ic-events .i-star { animation: ah-i-twinkle 2.8s var(--ah-ease) infinite; }
	.ah-ic-biz .i-stamp { animation: ah-i-stamp 3s var(--ah-ease) infinite; }
	.ah-ic-biz .i-seal { animation: ah-i-seal 3s var(--ah-ease) infinite; }
	.ah-ic-store .i-coin { animation: ah-i-coin 2.4s cubic-bezier(.5, 0, .75, 0) infinite; }
	.ah-ic-store .i-bag { transform-origin: 50% 100%; animation: ah-i-squash 2.4s var(--ah-ease) infinite; }
	.ah-ic-mail .i-letter { animation: ah-i-letter 2.8s var(--ah-ease) infinite; }
	.ah-ic-course .i-play { animation: ah-i-pop 2s var(--ah-ease) infinite; }
	.ah-ic-course .i-prog { stroke-dasharray: 1; animation: ah-i-drawl 2s linear infinite; }
	.ah-ic-files .i-cell { opacity: 0; animation: ah-i-cell 3s ease-in-out infinite; }
	.ah-ic-files .i-c2 { animation-delay: .3s; }
	.ah-ic-files .i-c3 { animation-delay: .6s; }
	.ah-ic-files .i-c4 { animation-delay: .9s; }
	.ah-ic-book .i-page { transform-origin: 24px 26px; animation: ah-i-page 3s var(--ah-ease) infinite; }
	.ah-ic-guide .i-route { stroke-dasharray: 1; animation: ah-i-drawl 3s var(--ah-ease) infinite; }
	.ah-ic-guide .i-pin { animation: ah-i-bounce 3s var(--ah-spring) infinite; }
	.ah-ic-campaign .i-w1 { animation: ah-i-wave 1.8s ease-out infinite; }
	.ah-ic-campaign .i-w2 { animation: ah-i-wave 1.8s ease-out infinite .3s; }
	.ah-ic-community .i-d { animation: ah-i-dots 1.4s ease-in-out infinite; }
	.ah-ic-community .i-d2 { animation-delay: .18s; }
	.ah-ic-community .i-d3 { animation-delay: .36s; }
	.ah-ic-community .i-b1 { animation: ah-i-bob 2.8s ease-in-out infinite; }

	/* paused unless on screen */
	.ah-ic * { animation-play-state: paused !important; }
	.ah-itile.is-playing .ah-ic *, .ah-ic.is-playing * { animation-play-state: running !important; }
}

@keyframes ah-i-dart { 0% { transform: translate(9px, -9px); opacity: 0; } 25% { opacity: 1; } 50% { transform: translate(0, 0); opacity: 1; } 72%, 100% { transform: translate(0, 0); opacity: 0; } }
@keyframes ah-i-pop { 0%, 40% { transform: scale(1); } 52% { transform: scale(1.55); } 66%, 100% { transform: scale(1); } }
@keyframes ah-i-grow { 0% { transform: scaleY(.25); } 45%, 70% { transform: scaleY(1); } 100% { transform: scaleY(.25); } }
@keyframes ah-i-drawl { 0% { stroke-dashoffset: 1; } 50%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
@keyframes ah-i-build { 0% { opacity: 0; transform: scale(.4); } 22%, 78% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.4); } }
@keyframes ah-i-click { 0%, 100% { transform: translate(6px, 6px); } 40% { transform: translate(0, 0); } 48% { transform: translate(0, 0) scale(.82); } 56% { transform: translate(0, 0) scale(1); } }
@keyframes ah-i-flow { to { stroke-dashoffset: -12; } }
@keyframes ah-i-glow { 50% { fill: #FFF3D6; transform: scale(1.18); } }
@keyframes ah-i-twinkle { 0%, 100% { transform: scale(.6) rotate(0); opacity: .4; } 50% { transform: scale(1.15) rotate(40deg); opacity: 1; } }
@keyframes ah-i-stamp { 0% { transform: translateY(-12px); opacity: 0; } 25% { opacity: 1; } 45% { transform: translateY(5px); } 55% { transform: translateY(3px); } 75% { transform: translateY(-12px); opacity: 1; } 100% { transform: translateY(-12px); opacity: 0; } }
@keyframes ah-i-seal { 0%, 44% { transform: scale(0); opacity: 0; } 52% { transform: scale(1.25); opacity: 1; } 62%, 90% { transform: scale(1); opacity: 1; } 100% { opacity: 0; } }
@keyframes ah-i-coin { 0% { transform: translateY(-6px); opacity: 0; } 15% { opacity: 1; } 60% { transform: translateY(20px); opacity: 1; } 70%, 100% { transform: translateY(20px); opacity: 0; } }
@keyframes ah-i-squash { 0%, 58% { transform: scaleY(1); } 66% { transform: scaleY(.9) scaleX(1.06); } 78%, 100% { transform: scaleY(1); } }
@keyframes ah-i-letter { 0%, 100% { transform: translateY(9px); } 45%, 60% { transform: translateY(-3px); } }
@keyframes ah-i-cell { 0%, 10% { opacity: 0; } 25%, 75% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes ah-i-page { 0% { transform: scaleX(1); opacity: 0; } 12% { opacity: 1; } 55% { transform: scaleX(-1); opacity: 1; } 70%, 100% { transform: scaleX(-1); opacity: 0; } }
@keyframes ah-i-bounce { 0%, 55%, 100% { transform: translateY(0); } 65% { transform: translateY(-5px); } 75% { transform: translateY(0); } 82% { transform: translateY(-2px); } }
@keyframes ah-i-wave { 0% { opacity: 0; transform: scale(.7); } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(1.15); } }
@keyframes ah-i-dots { 0%, 60%, 100% { transform: translateY(0); opacity: .6; } 30% { transform: translateY(-3px); opacity: 1; } }
@keyframes ah-i-bob { 50% { transform: translateY(-2px); } }