/* ==========================================================================
   Logo mark animation — proof of concept
   #brxe-hphd04 ships from Bricks as a single flattened PNG, so the four
   squares can't be targeted individually. homepezzo-logo-mark.js swaps in
   an inline SVG (same visual size/position) with each square as its own
   element, so only the blue one can be isolated here. The PNG itself is
   untouched on disk and untouched in Bricks — JS only hides it after the
   SVG is built, so a JS failure leaves the original logo exactly as before.

   Trigger is click/selection only (.hp-logo-animate, added/removed by JS),
   not hover — hovering the logo must never animate it, on any device.
   ========================================================================== */

/* Match the existing #brxe-hphd04 img sizing (height: 46px, square aspect). */
.hp-logo-mark {
    display: block;
    height: 46px;
    width: 46px;
}

.hp-logo-square-blue {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 420ms ease;
}

/* A flat rotate(180deg) alone is visually identical to rest on a solid
   square — scale(0.94) is what actually makes the motion readable. */
.hp-logo-link.hp-logo-animate .hp-logo-square-blue {
    transform: rotate(180deg) scale(0.94);
}

@media (prefers-reduced-motion: reduce) {
    .hp-logo-square-blue {
        transition: none;
    }
}

/* Focus states (v0.1.89). The click animation preventDefault()s and delays
   navigation ~200ms, so the clicked logo/wordmark anchor keeps :focus long
   enough for the UA default black focus rectangle to flash over the blue-
   square animation. Silence mouse focus on these two anchors ONLY; keyboard
   users get a soft ring via :focus-visible (color = --hp-blue #315E9E at
   45% alpha). Scoped to the two header logo anchors — nothing global. */
#brxe-hphd04:focus,
#brxe-hphd05:focus {
	outline: none;
	box-shadow: none;
}

#brxe-hphd04:focus-visible,
#brxe-hphd05:focus-visible {
	outline: 2px solid rgba(49, 94, 158, 0.45);
	outline-offset: 4px;
	border-radius: 8px;
	box-shadow: none;
}