/* =================== HIỆU ỨNG KHI CUỘN ===================
   js/hieu-ung.js gắn class .fx lên <html> (bỏ qua nếu máy bật "Giảm chuyển động" hoặc ở chế độ tĩnh ?tinh),
   rồi thêm .fx-in cho phần tử khi nó cuộn tới. Không có .fx thì trang hiện tĩnh như thiết kế.
   Dùng thuộc tính translate / scale riêng (không đụng transform) vì nhiều phần tử đã có transform để căn giữa / xoay. */

.fx [data-fx] {
  opacity: 0;
  transition: opacity .9s ease, translate 1s cubic-bezier(.2, .7, .2, 1), scale 1s cubic-bezier(.2, .7, .2, 1);
}
.fx [data-fx="up"]    { translate: 0 30px; }
.fx [data-fx="zoom"]  { scale: .93; }
/* Save the Date: thiệp và ảnh polaroid trồi lên từ trong phong bì */
.fx [data-fx="rise"]  { translate: 0 120px; transition-duration: 1s, 1.5s, 1s; }
/* Con dấu sáp đóng xuống: từ to về đúng cỡ */
.fx [data-fx="stamp"] { scale: 1.7; transition: opacity .35s ease, scale .55s cubic-bezier(.35, 1.5, .55, 1); }
/* Hoa sen trên timeline nở ra */
.fx [data-fx="bloom"] { scale: .3; transition: opacity .7s ease, scale 1.1s cubic-bezier(.3, 1.4, .5, 1); }
/* Chữ viết tay hiện dần từ trái sang phải. Khung chữ đã được nới đủ chứa nét bay (class .nb trong style.css),
   nên chỉ cắt trong khung: inset(0 100% 0 0) → inset(0). Không dùng lề âm: Safari xử lý khác Chrome. */
.fx [data-fx="write"] {
  opacity: 1;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.8s cubic-bezier(.45, 0, .3, 1);
}
.fx [data-fx="write"].fx-in { clip-path: inset(0); }
.fx [data-fx].fx-in { opacity: 1; translate: 0 0; scale: 1; }

/* Ảnh bìa: phóng nhẹ rồi thu về chậm */
.fx [data-fx="kenburns"] { opacity: 1; scale: 1.1; transition: scale 8s cubic-bezier(.2, .6, .2, 1); }

/* Dây sen timeline tự vẽ theo cuộn (JS đặt --ve từ 0 đến 1) */
.fx [data-fx="draw"] { opacity: 1; clip-path: inset(0 0 calc((1 - var(--ve, 0)) * 100%) 0); transition: none; }

/* Đếm ngược: các số hiện ngay khi bắt đầu lăn vào (JS lăn từng ô); lật từng chữ số khi đếm nằm trong main.js */
.fx [data-fx="roll"] { transition: none; }

/* Cánh sen sau chữ Kindly Respond đung đưa */
.fx [data-sway] { transform-origin: 50% 90%; animation: fx-sway 5s ease-in-out infinite alternate; }
@keyframes fx-sway { from { rotate: -3deg; } to { rotate: 3deg; } }

/* Lá sen phía sau thiệp mời trôi chậm khi cuộn (JS đặt translate) */
.fx [data-parallax] { will-change: translate; }

/* ---------- Cánh sen rơi trên toàn trang ---------- */
.petals { position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; }
.petal {
  position: absolute; top: -70px; left: var(--x);
  width: var(--s); opacity: .8;
  animation: fx-fall var(--d) linear var(--delay) infinite;
}
.petal img { display: block; width: 100%; animation: fx-flutter var(--f) ease-in-out infinite alternate; }
@keyframes fx-fall { to { translate: var(--dx) calc(100vh + 140px); rotate: var(--r); } }
@keyframes fx-flutter { from { translate: -16px 0; rotate: -28deg; } to { translate: 16px 0; rotate: 22deg; } }