/*
 * Floorball Performance animated logomark (spring physics).
 * Layered SVG: shield (yellow) + ball (white w/ holes & wisps) + wordmark text.
 * The PNG layers live alongside this file. JS in animated-logo.js drives the spring;
 * these CSS keyframes are a fallback so the logo still animates if JS fails to run.
 */

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

/* The SVG itself reuses the same sizing classes as the static <img> it replaces
   (.fp-app-logo-img / .fp-wp-login-brand-img), so existing CSS still controls height. */

.fp-animated-logo svg {
	overflow: visible;
}

/* CSS-only fallback animation (used until JS takes over).
   Scoped with :not([data-fp-anim="js"]) so the base transform/opacity vanish
   the moment JS marks the wrapper — otherwise the base style would re-apply
   when the JS animation ends and yank the layers back to their initial,
   off-screen positions. */
.fp-animated-logo:not([data-fp-anim="js"]) .fp-al-shield {
	transform: translate(150px, 125px) scale(0) translate(-150px, -125px);
	animation: fp-al-shield-pop 0.95s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s forwards;
}
.fp-animated-logo:not([data-fp-anim="js"]) .fp-al-ball {
	transform: translateX(-290px);
	animation: fp-al-ball-fly 1s cubic-bezier(0.18, 0.7, 0.22, 1) 0.65s forwards;
}
.fp-animated-logo:not([data-fp-anim="js"]) .fp-al-text {
	opacity: 0;
	animation: fp-al-text-fade 0.6s ease-out 0.45s forwards;
}

@keyframes fp-al-shield-pop {
	0%   { transform: translate(150px, 125px) scale(0)    translate(-150px, -125px); }
	60%  { transform: translate(150px, 125px) scale(1.08) translate(-150px, -125px); }
	74%  { transform: translate(150px, 125px) scale(0.96) translate(-150px, -125px); }
	86%  { transform: translate(150px, 125px) scale(1.02) translate(-150px, -125px); }
	100% { transform: translate(150px, 125px) scale(1)    translate(-150px, -125px); }
}
@keyframes fp-al-ball-fly {
	0%   { transform: translateX(-290px); }
	100% { transform: translateX(0); }
}
@keyframes fp-al-text-fade {
	to { opacity: 1; }
}

/* When JS takes over, the :not([data-fp-anim="js"]) scoping above already
   removes the CSS animation and base transform — the SVG `transform`/`opacity`
   attributes set by animated-logo.js then drive the spring animation cleanly. */

/* Reduced motion: skip the entrance entirely, render in final state. */
@media (prefers-reduced-motion: reduce) {
	.fp-animated-logo .fp-al-shield,
	.fp-animated-logo .fp-al-ball,
	.fp-animated-logo .fp-al-text {
		animation: none;
		transform: none;
		opacity: 1;
	}
}