.hero-art { animation: hero-art-in .9s cubic-bezier(.22,1,.36,1) both; }
.art-sun { transform-origin: center; animation: hero-sun-breathe 7s ease-in-out infinite; }
.art-card-back { animation: hero-card-back 7s ease-in-out infinite; }
.art-card-front { animation: hero-card-front 6s ease-in-out infinite; }
.flower-one { animation: hero-flower-one 5s ease-in-out infinite; }
.flower-two { animation: hero-flower-two 4.5s ease-in-out infinite; }

@keyframes hero-art-in { from { opacity: 0; transform: translateY(22px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes hero-sun-breathe { 0%,100% { transform: translateX(-50%) scale(1); opacity: .82; } 50% { transform: translateX(-50%) scale(1.045); opacity: 1; } }
@keyframes hero-card-back { 0%,100% { transform: translateX(-43%) rotate(9deg) translateY(0); } 50% { transform: translateX(-43%) rotate(11deg) translateY(-10px); } }
@keyframes hero-card-front { 0%,100% { transform: translateX(-58%) rotate(-7deg) translateY(0); } 50% { transform: translateX(-58%) rotate(-5deg) translateY(-13px); } }
@keyframes hero-flower-one { 0%,100% { transform: rotate(-5deg) scale(1); } 50% { transform: rotate(7deg) scale(1.08); } }
@keyframes hero-flower-two { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-9px) rotate(12deg); } }

@media (prefers-reduced-motion: reduce) {
  .hero-art, .art-sun, .art-card-back, .art-card-front, .flower-one, .flower-two { animation: none; }
}