/* Chuyển động CSS — chỉ transform/opacity */
@media (prefers-reduced-motion: reduce) {
  .tpl-mock > *,
  .carousel-card,
  .template-card,
  .mk-xi,
  .mk-beast,
  .side-beast { animation: none !important; transition: none !important; }
}

.carousel-card {
  transition: transform .7s cubic-bezier(.22,1,.36,1), opacity .45s ease, filter .45s ease;
}

.tpl-mock .mk-kicker { animation: riseIn .7s ease both; }
.tpl-mock .mk-xi { animation: riseIn .8s .08s ease both, xiPulse 3.2s 1s ease-in-out infinite; }
.tpl-mock .mk-names { animation: riseIn .85s .12s ease both; }
.tpl-mock .mk-date,
.tpl-mock .mk-bar { animation: riseIn .8s .2s ease both; }
.tpl-mock .mk-photo { animation: photoPop .7s .15s cubic-bezier(.22,1,.36,1) both; }
.tpl-mock .mk-beast { animation: beastDrift 6s ease-in-out infinite; }

@keyframes riseIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes photoPop {
  from { opacity: 0; transform: scale(.86); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes xiPulse {
  0%,100% { transform: scale(1); opacity: .95; }
  50% { transform: scale(1.06); opacity: 1; }
}
@keyframes beastDrift {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.tpl-mock .mk-ph { animation-name: beastDriftL; }
@keyframes beastDriftL {
  0%,100% { transform: scaleX(-1) translateY(0); }
  50% { transform: scaleX(-1) translateY(-6px); }
}

.template-card {
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}
.template-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(40,16,24,.14);
}

.hero-title .line1,
.hero-title .line2,
.hero-title .line3 { animation: riseIn .9s ease both; }
.hero-title .line2 { animation-delay: .1s; }
.hero-title .line3 { animation-delay: .2s; }

.envelope-screen.is-open { animation: fadeOut .55s ease forwards; }
@keyframes fadeOut {
  to { opacity: 0; visibility: hidden; }
}

.phone-frame .hero-block .names { animation: riseIn .9s .15s ease both; }
.phone-frame .hero-block .label { animation: riseIn .7s ease both; }
.phone-frame .sec { animation: riseIn .6s ease both; }