/* brunoseixas.com: the hero character as one SVG head (bruno-head-pack) and its blue plus. */
.head-fig { position: relative; aspect-ratio: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; outline-offset: 6px; }
.head-fig svg { display: block; width: 100%; height: 100%; overflow: visible; }
.head-fig .h-plus rect, .head-fig .h-mini rect { fill: var(--blue); }

/* The little strokes by the plus: shown once it has popped, gone while it's away. */
.head-fig .h-sparks { opacity: 0; transition: opacity .15s ease-out; }
.head-fig.shown .h-sparks { opacity: 1; }
.head-fig.pop .h-sparks path { transform-box: fill-box; transform-origin: 0% 100%; animation: head-spark .55s cubic-bezier(.2, 1.5, .4, 1) both; }
.head-fig.pop .h-sparks path:nth-child(2) { animation-delay: .05s; }
.head-fig.pop .h-sparks path:nth-child(3) { animation-delay: .1s; }
@keyframes head-spark { from { transform: scale(0); } to { transform: scale(1); } }

/* Placement in the home hero: centred between the two questions. */
.hero-d .hero-figure.head-fig { justify-self: center; margin-left: 0; }

/* Hero foil sticker: a canvas behind the SVG, moved with a transform (see bfs-head.js). */
.head-fig svg { position: relative; z-index: 1; }
.head-fig .h-foil-wrap { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.head-fig .h-foil { position: absolute; will-change: transform; }