.name-reveal { display:inline-block; margin:0; padding:0; border:0; border-radius:0; background:none; color:inherit; vertical-align:baseline; cursor:pointer; transition:transform 220ms cubic-bezier(.22,1,.36,1); }
.name-image-card[hidden] { display:none; }
.name-image-card { position:fixed; z-index:10002; width:min(240px,calc(100vw - 32px)); margin:0; overflow:visible; border-radius:8px; background:transparent; color:#fff; pointer-events:none; opacity:0; transform:translateY(8px) rotate(-4deg) scale(.9); transform-origin:50% 50%; transition:opacity 180ms ease,transform 260ms cubic-bezier(.22,1,.36,1); box-shadow:0 8px 28px rgb(0 0 0 / .10); }
.name-image-card.is-visible { opacity:1; transform:translateY(0) rotate(0) scale(1); animation:bird-pop 280ms both; }
@keyframes bird-pop {
  0% { opacity:0; transform:translateY(8px) rotate(-4deg) scale(.9); }
  70% { opacity:1; transform:translateY(-2px) rotate(1deg) scale(1.015); }
  100% { opacity:1; transform:translateY(0) rotate(0) scale(1); }
}
.name-reveal:focus-visible { transform:translateY(-2px) rotate(-2deg); }
@media(hover:hover) {
  .name-reveal:hover { transform:translateY(-2px) rotate(-2deg); }
}
.name-image-card img { display:block; width:100%; height:auto; aspect-ratio:1280/1067; object-fit:cover; border-radius:8px; }
.name-image-card.is-princesa img { aspect-ratio:4/5; }
.name-image-card.is-gordo img { aspect-ratio:2586/3307; }
.name-image-card figcaption {
  position:absolute;
  top:100%;
  left:50%;
  transform:translate(-50%,-50%);
  width:max-content;
  max-width:calc(100vw - 32px);
  box-sizing:border-box;
  padding:12px 20px;
  border-radius:999px;
  background:#000;
  color:#fff;
  text-align:center;
}
@media(prefers-reduced-motion:reduce) {
  .name-image-card, .name-image-card.is-visible, .name-reveal:is(:hover,:focus-visible) {
    animation:none;
    transition:none;
    transform:none;
  }
}