/* ═══════════════════════════════════════════════════════════
   MÀN BẮN TIM — khu vực "Hộp Mừng Cưới"
   Hai lớp chồng nhau:
     .hb-layer--amb   z-index 1 → nằm SAU tấm kính .gift__card, nên tim trôi
                      qua đó bị backdrop-filter của kính làm nhoè → chiều sâu
     .hb-layer--pop   position:fixed, z-index 1001 → phủ cả màn hình và nằm TRÊN
                      popup QR (z-index 1000), vì bấm nút quà là popup mở ra ngay;
                      để trong section thì chùm tim bị popup che sạch
   Chỉ animate transform + opacity để chạy trên GPU, không gây reflow.
   ═══════════════════════════════════════════════════════════ */

.hb-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  transform-style: flat;   /* .gift có perspective — chặn không cho tim bị kéo 3D */
  border-radius: inherit;
}

.hb-layer--amb { z-index: 1 }

.hb-layer--pop {
  position: fixed;
  inset: 0;
  z-index: 1001;
}

/* ── Một trái tim ───────────────────────────────────────────
   Tách 2 lớp để hai chuyển động không giẫm lên nhau:
     .hb-h    bay lên / bắn ra + mờ dần
     .hb-h__i lắc ngang, xoay, phập phồng
   ─────────────────────────────────────────────────────────── */
.hb-h {
  position: absolute;
  bottom: -10%;
  width: var(--s, 5%);
  aspect-ratio: 32 / 29.6;
  opacity: 0;
  will-change: transform, opacity;
  animation: hb-rise var(--dur, 9s) var(--ease-rise, cubic-bezier(.33, .1, .48, .95)) forwards;
}

.hb-h__i {
  display: block;
  width: 100%;
  height: 100%;
  /* Chuyển sắc chéo giữa 2 màu → mượt hơn hẳn tim một màu phẳng */
  background: linear-gradient(135deg, var(--c1) 0%, var(--c2) 100%);
  /* Hình trái tim cắt bằng mask, nhờ vậy tô được gradient bên trong */
  -webkit-mask: var(--hb-shape) center / contain no-repeat;
  mask: var(--hb-shape) center / contain no-repeat;
  filter: drop-shadow(0 0 .55em var(--glow, rgba(255, 120, 160, .55)));
  animation: hb-sway var(--sway-dur, 3.2s) ease-in-out infinite;
}

:root {
  --hb-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 29.6'%3E%3Cpath d='M23.6 0c-3.4 0-6.3 2.7-7.6 5.6C14.7 2.7 11.8 0 8.4 0 3.8 0 0 3.8 0 8.4c0 9.4 9.5 11.9 16 21.2 6.1-9.3 16-12.1 16-21.2C32 3.8 28.2 0 23.6 0z'/%3E%3C/svg%3E");
}

/* Bay lên hiền hoà, hiện dần rồi tan dần — không bao giờ biến mất đột ngột */
@keyframes hb-rise {
  0%   { transform: translate3d(0, 0, 0); opacity: 0 }
  14%  { opacity: var(--o, .8) }
  78%  { opacity: var(--o, .8) }
  100% { transform: translate3d(0, calc(var(--rise, 900px) * -1), 0); opacity: 0 }
}

/* Lắc ngang + xoay nhẹ + phập phồng như nhịp tim */
@keyframes hb-sway {
  0%   { transform: translateX(0) rotate(-13deg) scale(.9) }
  25%  { transform: translateX(var(--sway, 22px)) rotate(7deg) scale(1.06) }
  50%  { transform: translateX(0) rotate(13deg) scale(.94) }
  75%  { transform: translateX(calc(var(--sway, 22px) * -1)) rotate(-7deg) scale(1.04) }
  100% { transform: translateX(0) rotate(-13deg) scale(.9) }
}

/* ── Tim bắn ra khi bấm nút quà ─────────────────────────────
   Vọt ra nhanh theo hướng --dx/--dy rồi thả trôi lên, chậm dần.
   Một cubic-bezier đuôi dài lo cả hai đoạn, mượt hơn ghép 2 animation.
   ─────────────────────────────────────────────────────────── */
.hb-h--pop {
  bottom: auto;
  animation-name: hb-pop;
  animation-timing-function: cubic-bezier(.11, .78, .28, 1);
}

@keyframes hb-pop {
  0%   { transform: translate3d(0, 0, 0) scale(.35); opacity: 0 }
  10%  { opacity: var(--o, .95) }
  45%  { transform: translate3d(var(--dx), var(--dy), 0) scale(1); opacity: var(--o, .95) }
  100% {
    transform: translate3d(calc(var(--dx) * 1.3), calc(var(--dy) - var(--rise, 320px)), 0) scale(.72);
    opacity: 0
  }
}

/* ── Vầng sáng bung ra tại nút, ngay lúc bấm ─────────────── */
.hb-ring {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  width: var(--ring, 12rem);
  transform: translate(-50%, -50%) scale(.2);
  background: radial-gradient(circle,
      rgba(255, 190, 210, .55) 0%,
      rgba(255, 140, 175, .28) 45%,
      rgba(255, 140, 175, 0) 70%);
  opacity: 0;
  will-change: transform, opacity;
  animation: hb-ring .9s cubic-bezier(.2, .7, .3, 1) forwards;
}

@keyframes hb-ring {
  0%   { transform: translate(-50%, -50%) scale(.2); opacity: .9 }
  100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0 }
}

/* Ai bật "giảm chuyển động" trong hệ điều hành thì tắt hẳn — hearts.js
   cũng tự thoát sớm, đây là lớp chặn thứ hai phòng khi CSS nạp mà JS chưa. */
@media (prefers-reduced-motion: reduce) {
  .hb-layer { display: none }
}