/* Giro inspirado en https://uiverse.io/joe-watson-sbf/little-goat-24, activado por clic y teclado. */
#team .team-flip { margin: 0 auto; text-align: center; }
.team-flip__stage {
    position: relative;
    display: block;
    width: min(100%, 18rem);
    aspect-ratio: 9 / 11;
    margin: 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    cursor: pointer;
    perspective: 1100px;
    text-align: center;
}
.team-flip__stage:focus-visible { outline: 3px solid #80dcf3; outline-offset: 5px; border-radius: 1rem; }
.team-flip__rotator { position: absolute; inset: 0; display: block; transform-style: preserve-3d; transition: transform .75s cubic-bezier(.2, .7, .2, 1); }
.team-flip.is-flipped .team-flip__rotator { transform: rotateY(180deg); }
.team-flip__face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: 0 12px 25px rgba(0, 0, 0, .26);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.team-flip__front { background: #212529; }
#team .team-flip__front img { display: block; width: 100%; height: 100%; margin: 0; border: 0; border-radius: inherit; object-fit: cover; object-position: center top; }
.team-flip__back { gap: .65rem; padding: 1.1rem; border: 1px solid rgba(255, 255, 255, .18); background: #212529; transform: rotateY(180deg); }
.team-flip__description { display: block; min-height: 0; flex: 1; overflow-y: auto; color: #f3f4f5; font-size: .9rem; font-weight: 400; line-height: 1.5; text-align: left; scrollbar-width: thin; scrollbar-color: #819099 transparent; }
.team-flip__hint { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; max-width: calc(100% - 1rem); padding: .4rem .65rem; border: 1px solid rgba(255, 255, 255, .32); border-radius: 999px; background: rgba(21, 26, 30, .78); color: #fff; font-size: .72rem; font-weight: 700; line-height: 1.25; }
.team-flip__front .team-flip__hint { position: absolute; right: .5rem; bottom: .55rem; left: .5rem; width: max-content; margin: 0 auto; }
.team-flip__back .team-flip__hint { flex-shrink: 0; align-self: center; }
@media (hover: hover) and (pointer: fine) {
    .team-flip__front .team-flip__hint { visibility: hidden; opacity: 0; transform: scale(.55); }
    .team-flip__stage:is(:hover, :focus-visible) .team-flip__front .team-flip__hint {
        visibility: visible;
        animation: team-flip-hint-reveal .55s ease-out both;
    }
}
@keyframes team-flip-hint-reveal {
    0% { opacity: 0; transform: scale(.55); }
    55% { opacity: 1; transform: scale(1.17); }
    78% { opacity: 1; transform: scale(.96); }
    100% { opacity: 1; transform: scale(1); }
}
#team .team-flip__name { margin: .45rem 0 .15rem; }
#team .team-flip__role { margin: 0; }
#team .team-flip__social { display: inline-grid; place-items: center; margin-top: .55rem; }
.team-flip.is-hopping .team-flip__stage { animation: team-flip-hop .65s ease both; }
@keyframes team-flip-hop {
    0%, 100% { transform: translateY(0) scale(1); }
    38% { transform: translateY(-.85rem) scale(1.025); }
    68% { transform: translateY(-.2rem) scale(1.01); }
}
@media (prefers-reduced-motion: reduce) {
    .team-flip__rotator { transition: none; }
    .team-flip.is-hopping .team-flip__stage { animation: none; }
    .team-flip__stage:is(:hover, :focus-visible) .team-flip__front .team-flip__hint { animation: none; opacity: 1; transform: none; }
}