/* Hiện dần khi cuộn — dùng chung cho các mẫu thiệp.
   Khung hiện trước, ảnh quét vào sau, chữ trượt lên sau cùng.
   Dùng `translate` và `scale` rời chứ không dùng `transform`, để không đè mất
   transform riêng của mẫu (ví dụ hình thoi xoay 45 độ). */

html.hd [data-hd] {
  opacity: 0;
}

html.hd [data-hd="khung"] {
  scale: 0.965;
  transition: opacity 0.7s ease var(--hd-tre, 0s),
    scale 0.8s cubic-bezier(0.16, 1, 0.3, 1) var(--hd-tre, 0s);
}

html.hd [data-hd="anh"] {
  clip-path: inset(0 0 101% 0);
  scale: 1.055;
  transition: opacity 0.5s ease var(--hd-tre, 0s),
    clip-path 1s cubic-bezier(0.16, 1, 0.3, 1) var(--hd-tre, 0s),
    scale 1.2s cubic-bezier(0.16, 1, 0.3, 1) var(--hd-tre, 0s);
}

html.hd [data-hd="len"] {
  translate: 0 24px;
  transition: opacity 0.75s ease var(--hd-tre, 0s),
    translate 0.85s cubic-bezier(0.16, 1, 0.3, 1) var(--hd-tre, 0s);
}

html.hd [data-hd][data-hd-vao] {
  opacity: 1;
  translate: none;
  scale: none;
}

html.hd [data-hd="anh"][data-hd-vao] {
  clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
  html.hd [data-hd] {
    opacity: 1;
    translate: none;
    scale: none;
    clip-path: none;
    transition: none;
  }
}

/* Kiểu hiện dần do chủ thiệp chọn. Không chọn thì giữ nguyên ba vai sẵn có ở trên. */
html.hd[data-hd-kieu] [data-hd="len"] {
  transition-duration: calc(0.75s * var(--hd-kieu-nhanh, 1)), calc(0.85s * var(--hd-kieu-nhanh, 1));
}

html.hd[data-hd-kieu="trai"] [data-hd="len"] {
  translate: -28px 0;
}

html.hd[data-hd-kieu="phai"] [data-hd="len"] {
  translate: 28px 0;
}

html.hd[data-hd-kieu="mo"] [data-hd="len"],
html.hd[data-hd-kieu="mo"] [data-hd="khung"] {
  translate: none;
  scale: none;
}

html.hd[data-hd-kieu="phong"] [data-hd="len"] {
  translate: none;
  scale: 0.9;
  transition-property: opacity, scale;
}

html.hd[data-hd-kieu="lat"] [data-hd="len"] {
  translate: none;
  rotate: x -24deg;
  transform-origin: center bottom;
  transition-property: opacity, rotate;
}

html.hd[data-hd-kieu="rem"] [data-hd="len"] {
  translate: none;
  clip-path: inset(0 0 100% 0);
  transition-property: opacity, clip-path;
}

html.hd[data-hd-kieu="rem"] [data-hd="len"][data-hd-vao] {
  clip-path: inset(0 0 0 0);
}

html.hd[data-hd-kieu] [data-hd][data-hd-vao] {
  rotate: none;
}

@media (prefers-reduced-motion: reduce) {
  html.hd[data-hd-kieu] [data-hd] {
    rotate: none;
    clip-path: none;
  }
}