/* Header logo animation.
 *
 * Two layered effects on the same element, sequenced so they never fight
 * over the `transform` property:
 *
 * 1. Entrance (0.1s-0.8s, once): fade + slide + scale-in, plays on load.
 * 2. Living (from 0.8s, forever): a very subtle, continuous drift +
 *    breathing scale + hairline tilt, meant to be almost unnoticed --
 *    just enough that the logo doesn't read as static. Transform-only,
 *    so it's GPU-composited and never triggers layout.
 *
 * The living animation's 0% keyframe matches the entrance's end state
 * exactly (no net translate/scale/rotate), so the handoff at 0.8s is
 * seamless.
 */

.navigation-logo img {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
    transform-origin: 50% 50%;
    will-change: transform;
    animation:
        stc-logo-in 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s forwards,
        stc-logo-live 9s cubic-bezier(0.45, 0, 0.55, 1) 0.8s infinite;
}

@keyframes stc-logo-in {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes stc-logo-live {
    0%   { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
    22%  { transform: translate3d(0.3px, -1px, 0) scale(1.006) rotate(0.22deg); }
    48%  { transform: translate3d(-0.3px, -0.3px, 0) scale(1.002) rotate(-0.15deg); }
    74%  { transform: translate3d(0.2px, 0.8px, 0) scale(0.997) rotate(0.18deg); }
    100% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
}

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