/* Hiệu ứng. Trạng thái ẩn ban đầu chỉ áp dụng dưới html.js để không có JS vẫn thấy nội dung.
   Khi có GSAP (html.gsap), motion.js tự điều khiển một số phần tử và gỡ data-reveal khỏi chúng. */

/* E3–E5, E8, E13: xuất hiện khi cuộn tới (IntersectionObserver trong reveal.js) */
.js [data-reveal] {
  opacity: 0;
  transition:
    opacity .9s var(--ease) var(--d, 0s),
    transform 1.1s var(--ease-out) var(--d, 0s),
    filter .9s var(--ease) var(--d, 0s),
    clip-path 1.8s var(--ease) var(--d, 0s);
}
.js [data-reveal=""], .js [data-reveal="up"] { transform: translate3d(0, 22px, 0); filter: blur(8px); }
.js [data-reveal="fade"] { filter: blur(6px); }
.js [data-reveal="left"] { transform: translate3d(-36px, 0, 0); filter: blur(3px); }
.js [data-reveal="right"] { transform: translate3d(36px, 0, 0); filter: blur(3px); }
.js [data-reveal="zoom"] { transform: scale(.86); filter: blur(4px); }
.js [data-reveal="grow"] { opacity: 1; transform: scaleY(0); transform-origin: 50% 0; }
/* "write": cắt chữ ở thẻ con — nếu cắt kín chính thẻ được theo dõi, Chrome coi như nó không hiển thị và IntersectionObserver không báo */
.js [data-reveal="write"] { opacity: 1; }
.js [data-reveal="write"] > * { display: inline-block; clip-path: inset(-40% 110% -40% -10%); transition: clip-path 1.8s var(--ease) var(--d, 0s); }
.js [data-reveal="img"] img { transform: scale(1.12); transition: transform 1.8s var(--ease-out) var(--d, 0s); }
.js [data-reveal].is-in { opacity: 1; transform: none; filter: none; }
.js [data-reveal="img"].is-in img { transform: none; }
.js [data-reveal="write"].is-in > * { clip-path: inset(-40% -10% -40% -10%); }

/* E1: mở màn — chạy khi html có lớp hero-ready (khách chạm "Mở thiệp", hoặc ảnh đã tải nếu không có màn mở thiệp) */
.js .intro { animation: blur-in 1.2s var(--ease) both; animation-delay: calc(.3s + var(--i, 0) * .28s); animation-play-state: paused; }
/* Ảnh mở đầu hiện dần từ mờ nhoè sang rõ — không phóng to, vì phóng to là cắt ảnh */
.js .hero__img, .js .stage__photo { opacity: 0; filter: blur(16px); animation: photo-in 2.2s var(--ease) .15s forwards; animation-play-state: paused; }
.hero-ready .intro, .hero-ready .hero__img, .hero-ready .stage__photo { animation-play-state: running; }
@keyframes blur-in {
  from { opacity: 0; filter: blur(12px); transform: translate3d(0, 18px, 0); }
  to { opacity: 1; filter: none; transform: none; }
}
@keyframes photo-in { to { opacity: 1; filter: none; } }

/* E6: hoạ tiết đung đưa sau khi trượt vào (khi không có GSAP) */
.deco.is-in { animation: sway 7s ease-in-out 1.4s infinite alternate; }
@keyframes sway { from { transform: rotate(0deg); } to { transform: rotate(2.2deg); } }

/* E7: tim ngày cưới bật lên rồi đập nhẹ */
.js .cal__heart { transform: scale(0); }
.cal__row.is-in .cal__heart {
  animation:
    pop .7s cubic-bezier(.34, 1.56, .64, 1) calc(var(--d, 0s) + .5s) forwards,
    beat 1.6s ease-in-out calc(var(--d, 0s) + 1.4s) infinite;
}
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes beat {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.14); }
  30% { transform: scale(.98); }
  45% { transform: scale(1.08); }
}

/* Chuyển động nhỏ liên tục */
.hero__cue { animation: cue 2s ease-in-out infinite; }
@keyframes cue { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(8px); opacity: 1; } }
.map-btn__pin { animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* Lenis: cuộn mượt khi dùng chuột/trackpad (motion.js) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Lớp lá 3D (leaves3d.js): phủ toàn màn hình nhưng không chặn chạm/bấm */
.leaves3d { position: fixed; inset: 0; z-index: 70; width: 100%; height: 100%; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .js [data-reveal], .js .intro { opacity: 1; transform: none; filter: none; clip-path: none; }
  .js [data-reveal="write"] > * { clip-path: none; }
  .js [data-reveal="img"] img { transform: none; }
  .js .hero__img, .js .stage__photo { opacity: 1; filter: none; }
  .deco.is-in { animation: none; }
}