/* Translation and rotation stay independent so the cards retain their geometry. */
.hero .reward-peek,
.hero .social-peek {
  animation: hero-card-reveal 1.2s .2s var(--ease) both;
  translate: 0 var(--card-parallax, 0px);
  will-change: translate;
}
.hero .social-peek { animation-delay: .4s; }
@keyframes hero-card-reveal { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 901px) {
  .hero {
    min-height: 100svh;
    padding-top: 130px;
    padding-bottom: 60px;
  }
  .hero-product { min-height: 0; height: calc(100svh - 190px); max-height: 620px; }
  .phone-hero { width: clamp(200px, calc((100svh - 190px) * .454), 278px); }
  .hero .reward-peek { top: clamp(80px, 15svh, 145px); }
  .hero .social-peek { bottom: 55px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .reward-peek,
  .hero .social-peek { translate: none; will-change: auto; }
}