/* Hiệu ứng chuyển động của trang chính: đầu trang hiện lần lượt, hiện dần khi cuộn, họa tiết V&N.
   Màn "Mở thiệp" + phong bì: css/cover-envelope.css */
/* ---------- Đầu trang: chữ hiện lần lượt, ảnh phóng chậm ---------- */
.js-motion .hero__content > * { opacity: 0; transform: translateY(18px); transition: opacity .9s, transform .9s cubic-bezier(.2, .7, .2, 1); }
.js-motion.is-open .hero__content > * { opacity: 1; transform: none; }
.hero__content > :nth-child(2) { transition-delay: .15s; }
.hero__content > :nth-child(3) { transition-delay: .3s; }
.hero__content > :nth-child(4) { transition-delay: .5s; }
.hero__content > :nth-child(5) { transition-delay: .65s; }
/* Tên hai người: chú rể trượt vào từ trái, cô dâu từ phải, "&" xoay nở ra ở giữa; ngày giãn chữ ra dần */
.js-motion .hero__names > span { display: inline-block; opacity: 0; transition: opacity 1s ease, transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.js-motion .hero__names > :first-child { transform: translateX(-.35em); transition-delay: .25s; }
.js-motion .hero__names > :last-child { transform: translateX(.35em); transition-delay: .45s; }
.js-motion .hero__names > .hero__amp {
  transform: scale(.3) rotate(-35deg);
  transition: opacity .6s ease .8s, transform 1s cubic-bezier(.34, 1.56, .64, 1) .8s;
}
.js-motion.is-open .hero__names > span { opacity: 1; transform: none; }
/* Ngày "20 · 12 · 2026" quay số: xem css/hero-date-roll.css */
.js-motion .hero__media img { transform: scale(1.12); transition: transform 2.8s cubic-bezier(.2, .7, .2, 1); }
.js-motion.is-open .hero__media img { transform: scale(1); }

/* ---------- Hiện dần khi cuộn tới ---------- */
.js-motion [data-reveal] {
  opacity: 0; transform: translateY(28px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--reveal-delay, 0s);
}
.js-motion [data-reveal].is-visible { opacity: 1; transform: none; }

/* Vạch trang trí V&N: vòng tròn nở ra → 2 nét vàng vẽ từ vòng tròn tỏa ra 2 bên → V · & · N hiện lần lượt.
   Chỉ chạy 1 lần khi cuộn tới; máy bật "giảm chuyển động" thì JS không gắn data-reveal nên hiện sẵn. */
.js-motion .ornament[data-reveal] { opacity: 1; transform: none; }
.js-motion .ornament[data-reveal]::before,
.js-motion .ornament[data-reveal]::after {
  transform: scaleX(0); transform-origin: right;
  transition: transform 1.1s cubic-bezier(.65, 0, .35, 1) .3s;
}
.js-motion .ornament[data-reveal]::after { transform-origin: left; }
.js-motion .ornament[data-reveal] .ornament__mono {
  opacity: 0; transform: scale(.6) rotate(-20deg);
  transition: opacity .6s ease, transform .9s cubic-bezier(.34, 1.56, .64, 1);
}
.js-motion .ornament[data-reveal] .mono > * {
  display: inline-block; opacity: 0; transform: translateY(.4em);
  transition: opacity .5s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}
.js-motion .ornament[data-reveal] .mono > :nth-child(1) { transition-delay: .45s; }
.js-motion .ornament[data-reveal] .mono > :nth-child(2) { transition-delay: .65s; }
.js-motion .ornament[data-reveal] .mono > :nth-child(3) { transition-delay: .85s; }
.js-motion .ornament.is-visible::before,
.js-motion .ornament.is-visible::after,
.js-motion .ornament.is-visible .ornament__mono,
.js-motion .ornament.is-visible .mono > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-motion [data-reveal], .js-motion .hero__content > *, .js-motion .hero__names > span, .js-motion .hero__media img { transition: none; }
}