/* ==========================================================================
   css/animations.css — Toàn bộ @keyframes dùng cho thiệp.
   ========================================================================== */

@keyframes wd-spin {
  to { transform: rotate(360deg); }
}

@keyframes wd-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes wd-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes wd-blur-in {
  from { opacity: 0; filter: blur(10px); }
  to { opacity: 1; filter: blur(0); }
}

@keyframes wd-pulse-ring {
  0% { transform: scale(0.9); opacity: 0.55; }
  70% { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

@keyframes wd-shimmer {
  0% { background-position: -140% 0; }
  100% { background-position: 240% 0; }
}

@keyframes wd-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes wd-sway {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

@keyframes wd-spin-slow {
  to { transform: rotate(360deg); }
}

/* ------------------------------ Theme D — Nến ---------------------------- */

@keyframes wd-candle-grow {
  from { transform: translateY(80px) scale(0.92); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes wd-flame-light {
  0% { transform: scale(0) translateY(6px); opacity: 0; }
  60% { transform: scale(1.16) translateY(0); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes wd-flicker {
  0%, 100% {
    transform: scale(1) rotate(-1deg);
    filter: drop-shadow(0 0 12px rgba(255, 178, 78, 0.85)) drop-shadow(0 0 26px rgba(255, 140, 36, 0.45));
  }
  25% {
    transform: scale(1.06, 0.95) rotate(1.4deg);
    filter: drop-shadow(0 0 16px rgba(255, 196, 96, 0.95)) drop-shadow(0 0 34px rgba(255, 150, 40, 0.5));
  }
  50% {
    transform: scale(0.95, 1.07) rotate(-1.8deg);
    filter: drop-shadow(0 0 10px rgba(255, 172, 70, 0.8)) drop-shadow(0 0 22px rgba(255, 132, 30, 0.4));
  }
  75% {
    transform: scale(1.03) rotate(1deg);
    filter: drop-shadow(0 0 15px rgba(255, 188, 88, 0.9)) drop-shadow(0 0 30px rgba(255, 146, 38, 0.48));
  }
}

@keyframes wd-flowers-in-left {
  from { transform: translateX(-60px) rotate(-8deg); opacity: 0; }
  to { transform: translateX(0) rotate(0); opacity: 1; }
}

@keyframes wd-flowers-in-right {
  from { transform: translateX(60px) rotate(8deg); opacity: 0; }
  to { transform: translateX(0) rotate(0); opacity: 1; }
}

/* --------------------------- Theme G — Bướm ------------------------------ */

@keyframes wd-butterfly-fly {
  0% { transform: translate3d(0, 22vh, 0) rotate(-6deg) scale(var(--scale, 1)); opacity: 0; }
  12% { opacity: 0.85; }
  50% { transform: translate3d(6vw, -38vh, 0) rotate(7deg) scale(var(--scale, 1)); }
  88% { opacity: 0.8; }
  100% { transform: translate3d(-4vw, -92vh, 0) rotate(-5deg) scale(var(--scale, 1)); opacity: 0; }
}

@keyframes wd-wing-flap {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(0.68); }
}

/* -------------------------- Theme E — Phong bì --------------------------- */

@keyframes wd-card-slide-out {
  from { transform: translateY(58%) scale(0.96); }
  to { transform: translateY(-4%) scale(1); }
}

/* -------------------- Hiệu ứng Nút mở thiệp Luxury ----------------------- */
@keyframes lacyTapFloat {
  0%, 100% { opacity: 0.96; transform: translate(-50%, -50%); }
  50% { opacity: 1; transform: translate(-50%, calc(-50% - 6px)); }
}

@keyframes lacyTapRing {
  0% { opacity: 0; transform: scale(0.96); }
  24% { opacity: 0.75; }
  100% { opacity: 0; transform: scale(1.14); }
}

@keyframes pearlGoldSheen {
  0%, 32% { left: -45%; opacity: 0; }
  42% { opacity: 0.72; }
  64% { left: 118%; opacity: 0; }
  100% { left: 118%; opacity: 0; }
}

/* -------------------- Hiệu ứng Scroll Down & Bản đồ ---------------------- */
@keyframes scrollDownBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

@keyframes mapPinDropBounce {
  0% { transform: translate(-50%, -90px) scale(0.4); opacity: 0; }
  60% { transform: translate(-50%, 0) scale(1.15); opacity: 1; }
  75% { transform: translate(-50%, -14px) scale(0.92); }
  88% { transform: translate(-50%, 0) scale(1.06); }
  100% { transform: translate(-50%, 0) scale(1); opacity: 1; }
}

@keyframes mapPinHoverSway {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, -6px); }
}

@keyframes svgStrokeDraw {
  0% { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
  12% { opacity: 0.85; }
  100% { stroke-dasharray: 1; stroke-dashoffset: 0; opacity: 0.85; }
}

/* ----------------- Hiệu ứng trải tên & chữ bay vào (Cover) ---------------- */

@keyframes charFlyInLeft {
  0% {
    opacity: 0;
    transform: translate3d(-18px, 12px, 0);
    filter: blur(5px);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

@keyframes charFlyInRight {
  0% {
    opacity: 0;
    transform: translate3d(18px, 12px, 0);
    filter: blur(5px);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

@keyframes groomUnrollLeft {
  0% {
    opacity: 0;
    transform: translate3d(-22px, 10px, 0);
    filter: blur(6px);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

@keyframes brideUnrollRight {
  0% {
    opacity: 0;
    transform: translate3d(22px, 10px, 0);
    filter: blur(6px);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

/* ---------------------- Hiệu ứng chung khi cuộn tới ---------------------- */

@keyframes wd-scroll-cue {
  0% { transform: translateY(0); opacity: 0.2; }
  50% { transform: translateY(7px); opacity: 1; }
  100% { transform: translateY(0); opacity: 0.2; }
}

/* ==========================================================================
   Theme A — Élysée Sage (2026-11): nút chạm mở, mũi tên, ghim chibi,
   marquee lời chúc, cover bay vào chậm và album 2 hàng khép lại.
   ========================================================================== */

/* Cụm nút "CHẠM ĐỂ MỞ" nhún nhảy nhẹ (đã căn giữa bằng translate -50%). */
@keyframes sageFloatPulse {
  0%,
  100% {
    transform: translate(-50%, -50%);
    opacity: 0.85;
  }
  50% {
    transform: translate(-50%, calc(-50% - 10px));
    opacity: 1;
  }
}

/* Mũi tên ↓ của nút "Cuộn xuống" nhấp nhô liên tục, không đứt đoạn. */
@keyframes arrowBob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(4px);
  }
}

/* Ghim chibi nhún tại chỗ (giữ nguyên tâm -50%). */
@keyframes sagePinBounce {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, calc(-50% - 8px)) scale(1.04);
  }
}

/* Marquee lời chúc: nội dung nhân đôi ⇒ dịch đúng 50% là vòng lặp liền mạch. */
@keyframes sageTickerLoop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Theme B — Blush Garden: cùng nguyên lý, tên riêng cho dễ đọc. */
@keyframes blushTickerLoop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Theme C — Orchidée. */
@keyframes orchidTickerLoop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Theme E — Roselie. */
@keyframes roselieTickerLoop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Theme F — Serene. */
@keyframes sereneTickerLoop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Theme G — Butterfly: chạy ngang vô tận 1 dòng lời chúc. */
@keyframes butterflyTickerLoop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Theme H — Lora: chạy ngang vô tận 1 dòng lời chúc. */
@keyframes loraTickerLoop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Theme I / J / K — Bohem, Swan Lake, Lacy Deluxe: chạy ngang vô tận 1 dòng lời chúc. */
@keyframes bohemTickerLoop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes swanTickerLoop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes lacyTickerLoop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Chữ trang bìa bay vào chậm rãi, mờ dần thành rõ nét.
   KHÔNG dùng filter: blur() — Chromium giải phóng bộ đệm filter ở frame cuối
   và repaint lại text ⇒ thấy rõ một nhịp "giật"/snap chữ. */
@keyframes fadeInSlow {
  0% {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Album: hàng trên khép từ trên xuống, hàng dưới khép từ dưới lên (blur-free). */
@keyframes sageAlbumFromTop {
  0% {
    opacity: 0;
    transform: translate3d(0, -32px, 0) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes sageAlbumFromBottom {
  0% {
    opacity: 0;
    transform: translate3d(0, 32px, 0) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* --- Theme A: bộ keyframes blur-free (thay cho smoothFadeIn* có blur) ----- */

@keyframes sageCharInLeft {
  0% {
    opacity: 0;
    transform: translate3d(-18px, 12px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes sageCharInRight {
  0% {
    opacity: 0;
    transform: translate3d(18px, 12px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes sageFadeUp {
  from {
    opacity: 0;
    transform: translate3d(0, 32px, 0) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes sageFadeDown {
  from {
    opacity: 0;
    transform: translate3d(0, -24px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes sageFadeLeft {
  from {
    opacity: 0;
    transform: translate3d(-32px, 14px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes sageFadeRight {
  from {
    opacity: 0;
    transform: translate3d(32px, 14px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes sageFadeScale {
  from {
    opacity: 0;
    transform: translate3d(0, 22px, 0) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes sageMaskUp {
  from {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    clip-path: inset(0 0 100% 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    clip-path: inset(0 0 -12% 0);
  }
}

/* ==========================================================================
   CANDELA (THEME D) KEYFRAMES: NGỌN LỬA CHÁY RỰC RỠ & CÁC HIỆU ỨNG
   (arrowBob dùng lại khai báo phía trên)
   ========================================================================== */

/* Ngọn lửa Trái: Lắc lư góc rộng, bập bùng sống động */
@keyframes candelaFlameLeft {
  0%,
  100% {
    transform: scale(1) rotate(-3deg) skewX(-2deg);
    filter: drop-shadow(0 0 10px rgba(255, 178, 78, 0.85));
  }
  25% {
    transform: scale(1.12, 0.92) rotate(6deg) skewX(4deg);
    filter: drop-shadow(0 0 18px rgba(255, 196, 96, 0.95));
  }
  50% {
    transform: scale(0.92, 1.08) rotate(-7deg) skewX(-5deg);
    filter: drop-shadow(0 0 12px rgba(255, 165, 60, 0.8));
  }
  75% {
    transform: scale(1.06, 0.96) rotate(4deg) skewX(3deg);
    filter: drop-shadow(0 0 16px rgba(255, 190, 85, 0.9));
  }
}

/* Ngọn lửa Giữa: Cao hơn, uốn lượn mạnh mẽ */
@keyframes candelaFlameCenter {
  0%,
  100% {
    transform: scale(1) rotate(2deg) skewX(1deg);
    filter: drop-shadow(0 0 12px rgba(255, 185, 80, 0.9));
  }
  30% {
    transform: scale(0.94, 1.1) rotate(-6deg) skewX(-4deg);
    filter: drop-shadow(0 0 20px rgba(255, 205, 110, 1));
  }
  65% {
    transform: scale(1.1, 0.92) rotate(7deg) skewX(5deg);
    filter: drop-shadow(0 0 14px rgba(255, 170, 70, 0.85));
  }
  85% {
    transform: scale(1.02, 0.98) rotate(-3deg) skewX(-2deg);
    filter: drop-shadow(0 0 16px rgba(255, 195, 95, 0.95));
  }
}

/* Ngọn lửa Phải: Lắc đối xứng so le */
@keyframes candelaFlameRight {
  0%,
  100% {
    transform: scale(1) rotate(-2deg) skewX(-1deg);
    filter: drop-shadow(0 0 10px rgba(255, 175, 75, 0.85));
  }
  35% {
    transform: scale(1.08, 0.94) rotate(7deg) skewX(5deg);
    filter: drop-shadow(0 0 16px rgba(255, 195, 95, 0.95));
  }
  70% {
    transform: scale(0.93, 1.07) rotate(-6deg) skewX(-4deg);
    filter: drop-shadow(0 0 13px rgba(255, 168, 65, 0.8));
  }
}

/* Marquee Ticker 1 dòng vòng lặp mượt mà */
@keyframes candelaTickerLoop {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

/* Nút mở thiệp nhún nhảy mời gọi */
@keyframes openInviteBounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}

/* Ghim định vị nhún nhảy */
@keyframes pinBounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* Trải chữ đối xứng Tên Chú Rể (trái sang phải) */
@keyframes fadeSpreadLeft {
  from {
    opacity: 0;
    transform: translate3d(-25px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Trải chữ đối xứng Tên Cô Dâu (phải sang trái) */
@keyframes fadeSpreadRight {
  from {
    opacity: 0;
    transform: translate3d(25px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}