/* Explain: Styles for animated logo, button press feedback, and click ripples. */
/* Interactions — animated logo, click press feedback and ripple effects. */

/* --- Animated logo ------------------------------------------ */
.site-header a[aria-label*="Home"] img,
.nav-close-link img,
footer a img {
    transform-origin: 50% 55%;
    animation: logo-breathe 6s ease-in-out infinite;
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), filter 420ms ease;
    will-change: transform;
}

.site-header a[aria-label*="Home"]:hover img,
.nav-close-link:hover img,
footer a:hover img {
    animation: none;
    transform: scale(1.07) rotate(-2deg);
    filter: drop-shadow(0 10px 22px rgba(30, 95, 168, 0.35));
}

@keyframes logo-breathe {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.035) rotate(0.7deg); }
}

@keyframes logo-pop {
    0% { transform: scale(1) rotate(0deg); }
    30% { transform: scale(1.13) rotate(-4deg); }
    60% { transform: scale(0.96) rotate(3deg); }
    100% { transform: scale(1) rotate(0deg); }
}

img.is-logo-pop {
    animation: logo-pop 640ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- Click press feedback ----------------------------------- */
a.is-pressing,
button.is-pressing,
.btn.is-pressing {
    transform: scale(0.96);
}

/* --- Ripple on buttons --------------------------------------- */
.btn,
button {
    position: relative;
    overflow: hidden;
}

.fx-ripple {
    position: absolute;
    border-radius: 999px;
    opacity: 0.9;
    pointer-events: none;
    transform: scale(0);
    animation: fx-ripple 620ms ease-out forwards;
}

@keyframes fx-ripple {
    to {
        transform: scale(2.6);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header a[aria-label*="Home"] img,
    .nav-close-link img,
    footer a img {
        animation: none;
    }

    .fx-ripple {
        display: none;
    }

    a.is-pressing,
    button.is-pressing,
    .btn.is-pressing {
        transform: none;
    }
}