@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Cormorant+Garamond:ital,wght@0,600;0,700;1,600&family=Great+Vibes&display=swap');

:root {
    --pearl-bg: #fffaf5;
    --rose-soft: #fff0f3;
    --champagne-gold: #b45309;
    --text-primary: #1c1917;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: linear-gradient(160deg, #fffdf9 0%, #fff4f6 45%, #fdf3e1 100%);
    color: var(--text-primary);
    overflow-x: hidden;
    margin: 0;
}

.font-luxury {
    font-family: 'Cormorant Garamond', serif;
}

.font-script {
    font-family: 'Great Vibes', cursive;
}

#webgl-viewport {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
}

.content-wrapper {
    position: relative;
    z-index: 10;
}

/* ==========================================================================
   HIỆU ỨNG ANTIGRAVITY HAI CHIỀU (HOẠT ĐỘNG LẶP LẠI MỖI KHI CUỘN LÊN & CUỘN XUỐNG)
   ========================================================================== */
@keyframes antigravityWave {
    0%, 100% { translate: 0px 0px; }
    50% { translate: 0px -12px; }
}

.reveal-3d {
    opacity: 0;
    transform: perspective(1100px) translateY(65px) rotateX(14deg) scale(0.92);
    transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.reveal-3d.is-visible {
    opacity: 1;
    transform: perspective(1100px) translateY(0px) rotateX(0deg) scale(1);
    animation: antigravityWave 4.5s ease-in-out infinite;
}

/* ==========================================================================
   KHÔNG GIAN THIỆP ĐA CHIỀU — TUYỂN TẬP THIỆP 3D (BUNG XÒE QUẠT ANTIGRAVITY)
   ========================================================================== */
.deck-fan-container {
    perspective: 1500px;
    padding-top: 2rem;
    padding-bottom: 2.5rem;
}

.deck-card {
    transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease, box-shadow 0.4s ease;
    transform-origin: bottom center;
    box-shadow: 0 22px 48px rgba(120, 53, 15, 0.18);
    animation: antigravityWave 5s ease-in-out infinite;
    will-change: transform;
}

/* Khi chưa cuộn tới: 5 tấm thiệp thu gọn vào giữa như một bộ bài đóng */
.deck-fan-container:not(.fan-active) .deck-card {
    transform: rotate(0deg) translateY(60px) scale(0.82) !important;
    opacity: 0.25;
}

/* Khi cuộn tới: Bung xòe quạt 3D + lệch nhịp bay không trọng lực cho từng lá bài */
.deck-fan-container.fan-active .deck-card:nth-child(1) { animation-delay: 0s; }
.deck-fan-container.fan-active .deck-card:nth-child(2) { animation-delay: 0.6s; }
.deck-fan-container.fan-active .deck-card:nth-child(3) { animation-delay: 1.2s; }
.deck-fan-container.fan-active .deck-card:nth-child(4) { animation-delay: 1.8s; }
.deck-fan-container.fan-active .deck-card:nth-child(5) { animation-delay: 2.4s; }

.deck-card:hover {
    transform: translateY(-30px) rotate(0deg) scale(1.10) !important;
    z-index: 40 !important;
    box-shadow: 0 35px 70px rgba(180, 83, 9, 0.35);
}

/* KHUNG KÍNH NGỌC TRAI & KHUNG THẺ ĐỘ TƯƠNG PHẢN CAO */
.pearl-glass {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1.5px solid rgba(217, 119, 6, 0.32);
    box-shadow: 0 18px 45px -10px rgba(180, 83, 9, 0.14), 0 4px 16px rgba(244, 63, 94, 0.08);
    transition: transform 0.25s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.luxury-box {
    background: #ffffff;
    border: 2px solid #f59e0b;
    box-shadow: 0 16px 38px -8px rgba(180, 83, 9, 0.15), 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.luxury-box:hover {
    transform: translateY(-6px);
    border-color: #e11d48;
    box-shadow: 0 24px 48px -10px rgba(225, 29, 72, 0.24);
}

.event-card {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(16px);
    border: 2px solid rgba(217, 119, 6, 0.25);
    box-shadow: 0 12px 30px -5px rgba(180, 83, 9, 0.1);
    transition: transform 0.2s ease-out, border-color 0.3s ease, box-shadow 0.3s ease;
    transform-style: preserve-3d;
}

.event-card:hover {
    border-color: #b45309;
    box-shadow: 0 26px 55px -12px rgba(180, 83, 9, 0.28);
}

.event-card.active-event {
    background: linear-gradient(135deg, #fffbeb 0%, #ffe4e6 100%);
    border: 2.5px solid #e11d48;
    box-shadow: 0 24px 52px -10px rgba(225, 29, 72, 0.35);
    transform: translateY(-8px) scale(1.02);
}

.theme-item-card {
    background: #ffffff;
    border: 2px solid rgba(217, 119, 6, 0.28);
    box-shadow: 0 14px 32px -8px rgba(180, 83, 9, 0.12);
    transition: all 0.35s ease;
}

.theme-item-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: #e11d48;
    box-shadow: 0 24px 45px -12px rgba(225, 29, 72, 0.26);
}

.modal-backdrop-safe {
    position: fixed;
    inset: 0;
    z-index: 120;
    background: rgba(28, 25, 23, 0.72);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 5.5rem;
    padding-bottom: 2rem;
    padding-left: 1rem;
    padding-right: 1rem;
    overflow-y: auto;
}

.envelope-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, #fffdf9 0%, #fde68a 55%, #fecdd3 100%);
    transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.envelope-overlay.opened {
    opacity: 0;
    transform: scale(1.15);
    pointer-events: none;
}

.champagne-border {
    border: 2px solid rgba(217, 119, 6, 0.4);
    box-shadow: 0 20px 55px rgba(180, 83, 9, 0.14), inset 0 0 25px rgba(251, 191, 36, 0.08);
}

.timeline-line::before {
    content: '';
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 19px;
    width: 2px;
    background: linear-gradient(to bottom, #d97706, #e11d48);
}

#kham-pha-su-kien { scroll-margin-top: 85px; }
#tuyen-tap-3d      { scroll-margin-top: 90px; }
#giai-dieu-cam-xuc { scroll-margin-top: 95px; }
#dac-quyen-he-thong { scroll-margin-top: 95px; }
#quy-trinh-tao-thiep { scroll-margin-top: 90px; }
#in-place-catalog-drawer { scroll-margin-top: 100px; }