/* ==========================================================================
   Hiệu ứng (duyệt 14/11): chữ trồi lên khi mở trang, pháo giấy + hoa mai trên bằng khen,
   tiêu đề các khu trồi lên khi kéo tới. Tắt hết khi máy bật "giảm chuyển động".
   ========================================================================== */

/* Lớp vẽ pháo giấy phủ lên phần mở đầu */
.hero { position: relative; overflow: hidden; }
.hero__confetti {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---------- Chữ trồi lên lần lượt khi mở trang ---------- */
.rise {
  opacity: 0;
  transform: translateY(28px);
  animation: rise .9s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) forwards;
}
.rise--1 { --d: .1s; }
.rise--2 { --d: .25s; }
.rise--3 { --d: .35s; }
.rise--4 { --d: .5s; }
.rise--5 { --d: .65s; }

/* Tiêu đề: trồi lên rồi ánh kim lướt qua (foil-sweep khai báo trong hero.css) */
.hero__title.rise {
  animation:
    rise .9s cubic-bezier(.2, .7, .2, 1) var(--d) forwards,
    foil-sweep 2.4s calc(var(--d) + .4s) cubic-bezier(.4, 0, .2, 1) both;
}

/* Vòng nguyệt quế: trồi lên + phóng nhẹ (bên phải giữ lật gương) */
.hero__laurel--left.rise { animation-name: rise-laurel; }
.hero__laurel--right.rise { animation-name: rise-laurel-mirror; }

@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes rise-laurel {
  from { opacity: 0; transform: translateY(28px) scale(.9); }
  to { opacity: 1; transform: none; }
}
@keyframes rise-laurel-mirror {
  from { opacity: 0; transform: translateY(28px) scaleX(-1) scale(.9); }
  to { opacity: 1; transform: scaleX(-1); }
}

/* ---------- Trồi lên khi kéo tới (kiểu trang 20/11) ----------
   Chỉ ẩn khi JS đã chạy (lớp .rv-on trên <html>) → không có JS vẫn thấy đủ nội dung.
   --rd: độ trễ nối đuôi do JS đặt (mỗi phần tử +80ms). */
.rv-on .rv { opacity: 0; transform: translate3d(0, 34px, 0); }
.rv-on .rv.rv-in {
  opacity: 1;
  transform: none;
  transition:
    opacity .9s cubic-bezier(.16, 1, .3, 1) var(--rd, 0s),
    transform 1.05s cubic-bezier(.16, 1, .3, 1) var(--rd, 0s);
}

/* Tiêu đề trồi lên từng chữ: chữ trượt lên từ dưới một "khe" che */
.wm {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* chừa chỗ cho dấu tiếng Việt (ễ, ặ…) và chân chữ g, y không bị cắt */
  padding: .14em 0 .1em;
  margin: -.14em 0 -.1em;
}
.wi { display: inline-block; }
.rv-on .split .wi { transform: translate3d(0, 115%, 0); }
.rv-on .split.rv-in .wi {
  transform: none;
  transition: transform 1.05s cubic-bezier(.16, 1, .3, 1) calc(var(--rd, 0s) + var(--i, 0) * 55ms);
}

@media (prefers-reduced-motion: reduce) {
  .rise,
  .rv-on .rv,
  .rv-on .split .wi {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .hero__laurel--right.rise { transform: scaleX(-1) !important; }
  .hero__confetti { display: none; }
}