/* Germi: aspetto e gesti. Curve e durate dalla stessa scala del sito. */
.germe { --d: 72px; position: absolute; width: var(--d); height: var(--d); touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button.germe { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; }
button.germe:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; border-radius: 50%; }
.g-corpo { display: block; width: 100%; height: 100%; transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1); }
.g-corpo svg { display: block; width: 100%; height: 100%; overflow: visible; }
.germe.galleggia .g-corpo { animation: g-ondeggia var(--t, 3.4s) cubic-bezier(0.77, 0, 0.175, 1) infinite alternate; animation-delay: var(--ritardo, 0s); }
@keyframes g-ondeggia { from { transform: translate(0, 0) rotate(-5deg); } to { transform: translate(var(--x, 6px), var(--y, -8px)) rotate(5deg); } }
button.germe:active .g-corpo { transform: scale(.94); }

.germe .g-pupilla { transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1); }
.germe .g-occhio { transform-box: fill-box; transform-origin: center; animation: g-battito 6s infinite; animation-delay: var(--ritardo, 0s); }
@keyframes g-battito { 0%, 96%, 100% { transform: none; } 98% { transform: scaleY(.1); } }
.germe.ammicca .g-oc-d { animation: g-ammicca 520ms cubic-bezier(0.77, 0, 0.175, 1) 2; }
@keyframes g-ammicca { 50% { transform: scaleY(.08); } }

.germe .g-braccio { transform-box: fill-box; transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1); }
.germe .g-br-d { transform-origin: 0% 100%; }
.germe .g-br-s { transform-origin: 100% 0%; }
.germe.saluta .g-br-d { animation: g-saluta 260ms cubic-bezier(0.77, 0, 0.175, 1) 5 alternate; }
@keyframes g-saluta { from { transform: rotate(-25deg); } to { transform: rotate(28deg); } }
.germe.spalle .g-br-s { transform: rotate(92deg); }
.germe.spalle .g-br-d { transform: rotate(-14deg); }
.germe.spalle .g-corpo { transform: translateY(-4px); }

.germe .g-bocca-bacio { opacity: 0; }
.germe.bacia .g-bocca { opacity: 0; }
.germe.bacia .g-bocca-bacio { opacity: 1; }
.germe.bacia .g-corpo { transform: rotate(-8deg) scale(1.04); }

.fumetto { position: absolute; left: 72%; bottom: 88%; z-index: 2; max-width: min(15em, calc(100vw - 24px)); width: max-content; padding: 6px 12px; background: #fff; color: #0d1114;
  font: 700 15px/1.25 Archivo, system-ui, sans-serif; font-stretch: 90%; border-radius: 16px 16px 16px 4px; text-align: left;
  opacity: 0; transform: translateY(6px) scale(.96); transform-origin: 0% 100%; pointer-events: none;
  transition: opacity 180ms cubic-bezier(0.23, 1, 0.32, 1), transform 180ms cubic-bezier(0.23, 1, 0.32, 1); }
.germe.fumetto-sx .fumetto { left: auto; right: 72%; border-radius: 16px 16px 4px 16px; transform-origin: 100% 100%; }
.germe.fumetto-giu .fumetto { bottom: auto; top: 92%; }
.germe.parla .fumetto { opacity: 1; transform: none; }
.fumetto:empty { display: none; }

.g-cuore { position: fixed; z-index: 60; width: 28px; height: 26px; pointer-events: none; }
.g-cuore svg { display: block; width: 100%; height: 100%; }

@media (prefers-reduced-motion: reduce) {
  .germe.galleggia .g-corpo, .germe .g-occhio, .germe.saluta .g-br-d { animation: none; }
  .germe .g-pupilla, .g-corpo, .germe .g-braccio { transition: none; }
  .fumetto { transform: none; transition: opacity 120ms ease; }
}