/* One local card, two compositor surfaces, 850 ms, no persistent GPU hints. */
.hr-card.is-new { animation: none; }
.hr-flip { position: relative; width: 275px; height: 502px; flex: none; z-index: 2; perspective: 1000px; }
.hr-flip-front, .hr-flip-back { width: 100%; height: 100%; transform-origin: 50% 50%; backface-visibility: hidden; }
.hr-flip-back { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; }
.hr-flip.is-flipping .hr-flip-back { animation: hr-turn-back 850ms cubic-bezier(.4,0,.2,1) both; }
.hr-flip.is-flipping .hr-flip-front { animation: hr-turn-front 850ms cubic-bezier(.4,0,.2,1) both; }
@keyframes hr-turn-back {
  0% { transform: rotateY(0); opacity: 1; }
  48% { transform: rotateY(90deg); opacity: 1; }
  49%, 100% { transform: rotateY(90deg); opacity: 0; }
}
@keyframes hr-turn-front {
  0%, 48% { transform: rotateY(-90deg); opacity: 0; }
  49% { transform: rotateY(-90deg); opacity: 1; }
  100% { transform: rotateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hr-flip.is-flipping .hr-flip-front, .hr-flip.is-flipping .hr-flip-back { animation: none; will-change: auto; }
  .hr-flip-front { transform: none; opacity: 1; }
  .hr-flip-back { display: none; }
}