/**
 * Suji Theme — Màn hình phong bao mở thiệp (Intro Wedding Envelope)
 * Tương thích Mobile First & Desktop, hỗ trợ chuyển sắc theo từng Template thiệp.
 */

/* Khóa cuộn trang khi phong bao đang hiển thị */
body.suji-envelope-locked {
    overflow: hidden !important;
    height: 100vh !important;
    touch-action: none !important;
}

/* ============================================================
   1. OVERLAY TOÀN MÀN HÌNH
   ============================================================ */
.suji-envelope-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: radial-gradient(ellipse at center, #63141a 0%, #430c11 50%, #280407 100%);
    opacity: 1;
    visibility: visible;
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.65s;
    user-select: none;
    -webkit-user-select: none;
}

/* Biến màu theo từng mẫu thiệp */
.suji-envelope--thiep-do-tham,
.suji-envelope--default {
    background: radial-gradient(ellipse at center, #6a161d 0%, #450c11 55%, #290407 100%);
    --env-primary: #5a1117;
    --env-primary-hover: #72161e;
    --env-gold: #c9a24a;
    --env-seal-bg: radial-gradient(circle at 35% 35%, #7a1820, #40090e);
    --env-seal-shadow: rgba(81, 20, 25, 0.6);
}

.suji-envelope--thiep-hoa-cuc {
    background: radial-gradient(ellipse at center, #2e4325 0%, #1c2b16 55%, #0f180c 100%);
    --env-primary: #314727;
    --env-primary-hover: #425e35;
    --env-gold: #d4a74a;
    --env-seal-bg: radial-gradient(circle at 35% 35%, #3c5630, #1e2c17);
    --env-seal-shadow: rgba(35, 52, 28, 0.6);
}

.suji-envelope--thiep-xanh-thien-nhien {
    background: radial-gradient(ellipse at center, #234234 0%, #152b21 55%, #0b1a13 100%);
    --env-primary: #274738;
    --env-primary-hover: #355f4c;
    --env-gold: #c8a356;
    --env-seal-bg: radial-gradient(circle at 35% 35%, #305846, #162c22);
    --env-seal-shadow: rgba(25, 47, 37, 0.6);
}

.suji-envelope--thiep-hoa-hong {
    background: radial-gradient(ellipse at center, #59202f 0%, #3a111c 55%, #21070e 100%);
    --env-primary: #5c2030;
    --env-primary-hover: #75293d;
    --env-gold: #d29d66;
    --env-seal-bg: radial-gradient(circle at 35% 35%, #70283b, #38111c);
    --env-seal-shadow: rgba(78, 26, 40, 0.6);
}

.suji-envelope--thiep-flower {
    background: radial-gradient(ellipse at center, #4b2d3a 0%, #301a24 55%, #1c0d15 100%);
    --env-primary: #4d2b3a;
    --env-primary-hover: #63384b;
    --env-gold: #cfa86e;
    --env-seal-bg: radial-gradient(circle at 35% 35%, #61364a, #2f1723);
    --env-seal-shadow: rgba(64, 34, 48, 0.6);
}

/* ============================================================
   2. HẠT LƠ LỬNG / AMBIENT FALLING PARTICLES
   ============================================================ */
.suji-envelope__ambient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.suji-envelope__particle {
    position: absolute;
    top: -30px;
    display: inline-block;
    width: 14px;
    height: 14px;
    background: var(--env-gold, #c9a24a);
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    opacity: 0.65;
    animation: suji-ambient-fall 20s linear infinite;
}

.suji-envelope__particle--1  { left: 12%; width: 14px; height: 14px; opacity: 0.45; animation-duration: 22s; animation-delay: -3s; }
.suji-envelope__particle--2  { left: 24%; width: 18px; height: 18px; opacity: 0.65; animation-duration: 18s; animation-delay: -7s; }
.suji-envelope__particle--3  { left: 35%; width: 11px; height: 11px; opacity: 0.35; animation-duration: 25s; animation-delay: -12s; }
.suji-envelope__particle--4  { left: 48%; width: 16px; height: 16px; opacity: 0.55; animation-duration: 19s; animation-delay: -1s; }
.suji-envelope__particle--5  { left: 60%; width: 20px; height: 20px; opacity: 0.7;  animation-duration: 17s; animation-delay: -15s; }
.suji-envelope__particle--6  { left: 72%; width: 13px; height: 13px; opacity: 0.4;  animation-duration: 24s; animation-delay: -9s; }
.suji-envelope__particle--7  { left: 84%; width: 17px; height: 17px; opacity: 0.6;  animation-duration: 21s; animation-delay: -4s; }
.suji-envelope__particle--8  { left: 93%; width: 12px; height: 12px; opacity: 0.35; animation-duration: 26s; animation-delay: -18s; }
.suji-envelope__particle--9  { left: 5%;  width: 15px; height: 15px; opacity: 0.5;  animation-duration: 20s; animation-delay: -10s; }
.suji-envelope__particle--10 { left: 40%; width: 19px; height: 19px; opacity: 0.6;  animation-duration: 16s; animation-delay: -13s; }
.suji-envelope__particle--11 { left: 68%; width: 12px; height: 12px; opacity: 0.45; animation-duration: 23s; animation-delay: -2s; }
.suji-envelope__particle--12 { left: 80%; width: 15px; height: 15px; opacity: 0.5;  animation-duration: 22s; animation-delay: -16s; }

@keyframes suji-ambient-fall {
    0% {
        top: -30px;
        transform: translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.7;
    }
    50% {
        transform: translateX(25px) rotate(180deg);
    }
    90% {
        opacity: 0.7;
    }
    100% {
        top: 105vh;
        transform: translateX(-20px) rotate(360deg);
        opacity: 0;
    }
}

/* ============================================================
   3. KHUNG THIỆP MỜI TRUNG TÂM
   ============================================================ */
.suji-envelope__container {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
}

.suji-envelope__card-box {
    position: relative;
    width: 100%;
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.65s;
}

/* Con dấu sáp đập nhịp tim */
.suji-envelope__seal {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    pointer-events: none;
}

/* Vòng sóng xung kích tròn tỏa rộng khi mở thiệp */
.suji-envelope__seal-shockwave {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    border: 2px solid var(--env-gold, #c9a24a);
    box-shadow: 0 0 16px var(--env-gold, #c9a24a);
    opacity: 0;
    pointer-events: none;
    z-index: 10;
}

/* Bóng trái tim phóng to tỏa rộng rồi biến mất (Heart Shadow Echo) */
.suji-envelope__heart-echo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    transform: translate(-50%, -50%) scale(0.8);
    color: var(--env-gold, #c9a24a);
    opacity: 0;
    pointer-events: none;
    z-index: 15;
}

.suji-envelope__heart-echo svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.suji-envelope__heart-echo--1 svg {
    filter: drop-shadow(0 0 14px var(--env-gold, #c9a24a));
}

.suji-envelope__heart-echo--2 svg {
    filter: drop-shadow(0 0 20px #ffffff);
}

/* Pháo hoa trái tim bung tỏa xung quanh */
.suji-envelope__heart-burst {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 25;
}

.suji-envelope__burst-item {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 16px;
    line-height: 1;
    color: var(--env-gold, #c9a24a);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
    text-shadow: 0 0 10px var(--env-gold, #c9a24a);
    pointer-events: none;
}

.suji-envelope__seal-wax {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--env-seal-bg, radial-gradient(circle at 35% 35%, #7a1820, #40090e));
    box-shadow:
        0 6px 20px var(--env-seal-shadow, rgba(81, 20, 25, 0.6)),
        inset 0 2px 4px rgba(255, 255, 255, 0.35),
        inset 0 -2px 4px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    animation: suji-seal-pulse 2.2s ease-in-out infinite;
    position: relative;
    z-index: 20;
}

.suji-envelope__seal-icon {
    width: 28px;
    height: 28px;
    color: #f7eee4;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
    transition: transform 0.3s ease;
}

@keyframes suji-seal-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow:
            0 6px 20px var(--env-seal-shadow, rgba(81, 20, 25, 0.6)),
            inset 0 2px 4px rgba(255, 255, 255, 0.35);
    }
    50% {
        transform: scale(1.06);
        box-shadow:
            0 8px 28px var(--env-seal-shadow, rgba(81, 20, 25, 0.8)),
            inset 0 3px 5px rgba(255, 255, 255, 0.45);
    }
}

/* Thẻ thiệp sang trọng */
.suji-envelope__card {
    position: relative;
    background: #fffdf9;
    border-radius: 14px;
    border: 1px solid rgba(212, 175, 55, 0.35);
    box-shadow:
        0 25px 65px -12px rgba(0, 0, 0, 0.55),
        0 8px 24px rgba(0, 0, 0, 0.25),
        inset 0 0 0 1px rgba(255, 255, 255, 0.8);
    padding: 56px 28px 36px;
    text-align: center;
    overflow: hidden;
}

/* Hoa văn góc cổ điển */
.suji-envelope__corner {
    position: absolute;
    width: 44px;
    height: 44px;
    color: var(--env-gold, #c9a24a);
    opacity: 0.5;
    pointer-events: none;
}
.suji-envelope__corner--tl {
    top: 10px;
    left: 10px;
}
.suji-envelope__corner--br {
    bottom: 10px;
    right: 10px;
    transform: rotate(180deg);
}

/* Badge trên cùng */
.suji-envelope__badge {
    margin-bottom: 12px;
}
.suji-envelope__badge span {
    display: inline-block;
    font-family: var(--suji-font-body, -apple-system, sans-serif);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: var(--env-gold, #c9a24a);
    padding: 3px 12px;
    border-top: 1px solid rgba(201, 162, 74, 0.3);
    border-bottom: 1px solid rgba(201, 162, 74, 0.3);
}

/* Tên cô dâu & chú rể */
.suji-envelope__names {
    font-family: var(--suji-font-heading, "Playfair Display", "Cormorant Garamond", serif);
    font-size: 32px;
    line-height: 1.25;
    font-weight: 600;
    color: var(--env-primary, #5a1117);
    margin: 0 0 12px;
    letter-spacing: 0.5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.suji-envelope__amp {
    font-size: 20px;
    font-style: italic;
    opacity: 0.75;
    line-height: 1;
}

/* Đường phân cách nhã nhặn */
.suji-envelope__divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 8px 0 16px;
}
.suji-envelope__line {
    width: 38px;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--env-primary, #5a1117));
    opacity: 0.45;
}
.suji-envelope__divider .suji-envelope__line:last-child {
    background: linear-gradient(to left, transparent, var(--env-primary, #5a1117));
}
.suji-envelope__symbol {
    font-size: 13px;
    color: var(--env-primary, #5a1117);
    opacity: 0.7;
}

/* Ngày cưới */
.suji-envelope__date {
    font-family: var(--suji-font-body, "Montserrat", sans-serif);
    font-size: 16.5px;
    font-weight: 500;
    color: #4a383a;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
}

/* Dòng chào khách mời */
.suji-envelope__guest {
    font-family: var(--suji-font-heading, "Cormorant Garamond", serif);
    font-size: 18px;
    font-style: italic;
    color: #6d5557;
    margin-bottom: 24px;
}
.suji-envelope__guest-name {
    font-style: normal;
    font-weight: 700;
    color: var(--env-primary, #5a1117);
    font-size: 19px;
}

/* Nút Mở thiệp sang trọng */
.suji-envelope__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 42px;
    border-radius: 50px;
    background-color: var(--env-primary, #5a1117);
    color: #ffffff;
    font-family: var(--suji-font-body, -apple-system, sans-serif);
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    cursor: pointer;
    overflow: hidden;
    box-shadow:
        0 6px 18px var(--env-seal-shadow, rgba(81, 20, 25, 0.4)),
        inset 0 1px 1px rgba(255, 255, 255, 0.35);
    transition: all 0.25s ease;
}

.suji-envelope__btn:hover {
    background-color: var(--env-primary-hover, #72161e);
    transform: translateY(-2px);
    box-shadow:
        0 10px 24px var(--env-seal-shadow, rgba(81, 20, 25, 0.55)),
        inset 0 1px 1px rgba(255, 255, 255, 0.45);
}

.suji-envelope__btn:active {
    transform: translateY(0);
}

/* Vệt sáng quét ngang nút */
.suji-envelope__btn-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.45) 50%,
        transparent 100%
    );
    transform: skewX(-25deg);
    animation: suji-btn-shine 3.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes suji-btn-shine {
    0%, 60% {
        left: -100%;
    }
    100% {
        left: 200%;
    }
}

/* ============================================================
   4. HIỆU ỨNG KHI BẤM MỞ THIỆP (LUXURY EXIT & EXPANDING HEART)
   ============================================================ */

/* 4.1. Lớp nền mờ dần mềm mại */
.suji-envelope-overlay.is-opening {
    opacity: 0;
    pointer-events: none;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition:
        opacity 0.85s cubic-bezier(0.25, 1, 0.5, 1) 0.12s,
        backdrop-filter 0.85s cubic-bezier(0.25, 1, 0.5, 1),
        visibility 0.85s 0.12s;
}

/* Các hạt hoa/tim rơi xung quanh tăng tốc bay nhẹ tản ra */
.suji-envelope-overlay.is-opening .suji-envelope__particle {
    opacity: 0;
    transform: translateY(-40px) scale(1.3);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Khung thiệp trung tâm phóng to nhẹ như tiến vào trang thiệp */
.suji-envelope-overlay.is-opening .suji-envelope__container {
    transform: scale(1.08) translateY(-25px);
    opacity: 0;
    filter: blur(3px);
    transition:
        transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.08s,
        filter 0.75s ease;
}

/* Thẻ thiệp sang trọng: viền phát sáng nhẹ rồi tan biến */
.suji-envelope-overlay.is-opening .suji-envelope__card {
    border-color: rgba(212, 175, 55, 0.75);
    box-shadow:
        0 35px 85px -10px rgba(0, 0, 0, 0.65),
        0 0 45px rgba(201, 162, 74, 0.4);
    transition: border-color 0.4s ease, box-shadow 0.6s ease;
}

/* Nội dung chữ trên thiệp mờ dần thanh thoát */
.suji-envelope-overlay.is-opening .suji-envelope__content {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
    filter: blur(2.5px);
    transition:
        opacity 0.45s ease,
        transform 0.45s ease,
        filter 0.45s ease;
}

/* Họa tiết góc mờ dần */
.suji-envelope-overlay.is-opening .suji-envelope__corner {
    transform: scale(1.25);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

/* 4.2. Con dấu sáp bung tỏa (Wax Seal pop & burst) */
.suji-envelope-overlay.is-opening .suji-envelope__seal-wax {
    animation: suji-seal-pop 0.75s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

@keyframes suji-seal-pop {
    0% {
        transform: scale(1);
        box-shadow: 0 6px 20px var(--env-seal-shadow, rgba(81, 20, 25, 0.6));
    }
    30% {
        transform: scale(1.24);
        filter: brightness(1.25);
        box-shadow: 0 10px 35px var(--env-gold, #c9a24a);
    }
    100% {
        transform: scale(0.5);
        opacity: 0;
        filter: blur(5px);
    }
}

/* 4.3. BÓNG TRÁI TIM PHÓNG TO TỎA RỘNG RỒI BIẾN MẤT (Heart Shadow Echo) */
.suji-envelope-overlay.is-opening .suji-envelope__heart-echo--1 {
    animation: suji-heart-expand 0.9s cubic-bezier(0.18, 0.85, 0.25, 1) forwards;
}

.suji-envelope-overlay.is-opening .suji-envelope__heart-echo--2 {
    animation: suji-heart-expand 0.9s cubic-bezier(0.18, 0.85, 0.25, 1) 0.14s forwards;
    color: #ffffff;
}

@keyframes suji-heart-expand {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.95;
        filter: drop-shadow(0 0 10px var(--env-gold, #c9a24a)) blur(0px);
    }
    35% {
        opacity: 0.85;
        filter: drop-shadow(0 0 25px var(--env-gold, #c9a24a)) blur(1px);
    }
    100% {
        transform: translate(-50%, -50%) scale(6.2);
        opacity: 0;
        filter: drop-shadow(0 0 60px var(--env-gold, #c9a24a)) blur(8px);
    }
}

/* 4.4. Vòng sóng xung kích lan tỏa (Concentric shockwave ripples) */
.suji-envelope-overlay.is-opening .suji-envelope__seal-shockwave--1 {
    animation: suji-shockwave-pulse 0.85s cubic-bezier(0.15, 0.85, 0.35, 1) forwards;
}

.suji-envelope-overlay.is-opening .suji-envelope__seal-shockwave--2 {
    animation: suji-shockwave-pulse 0.85s cubic-bezier(0.15, 0.85, 0.35, 1) 0.16s forwards;
}

@keyframes suji-shockwave-pulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.9;
        box-shadow: 0 0 0 0 var(--env-gold, #c9a24a);
    }
    50% {
        opacity: 0.6;
    }
    100% {
        transform: translate(-50%, -50%) scale(4.8);
        opacity: 0;
        box-shadow: 0 0 35px 20px transparent;
    }
}

/* 4.5. Pháo hoa mini trái tim bung nở 8 hướng (Heart burst sparkles) */
.suji-envelope-overlay.is-opening .suji-envelope__burst-item {
    animation: suji-burst-fly 0.85s cubic-bezier(0.2, 0.85, 0.35, 1) var(--delay, 0s) forwards;
}

@keyframes suji-burst-fly {
    0% {
        transform: translate(-50%, -50%) rotate(var(--angle)) translateY(0) rotate(calc(-1 * var(--angle))) scale(0.4);
        opacity: 1;
    }
    60% {
        opacity: 0.95;
    }
    100% {
        transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(-1 * var(--dist))) rotate(calc(-1 * var(--angle))) scale(1.4);
        opacity: 0;
    }
}

/* 4.6. Sau khi kết thúc animation, ẩn hoàn toàn khỏi luồng hiển thị */
.suji-envelope-overlay.is-opened {
    display: none !important;
}

/* 4.7. Hiệu ứng xuất hiện mượt mà của nội dung thiệp cưới bên dưới */
body.suji-envelope-revealed .suji-invitation,
body.suji-envelope-revealed main,
body.suji-envelope-revealed #page {
    animation: sujiPageReveal 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes sujiPageReveal {
    0% {
        opacity: 0.7;
        transform: translateY(20px) scale(0.99);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

/* ============================================================
   5. RESPONSIVE CHO MÀN HÌNH NHỎ (MOBILE FIRST)
   ============================================================ */
@media (max-width: 480px) {
    .suji-envelope__card {
        padding: 50px 20px 28px;
    }
    .suji-envelope__seal-wax {
        width: 54px;
        height: 54px;
    }
    .suji-envelope__seal-icon {
        width: 24px;
        height: 24px;
    }
    .suji-envelope__names {
        font-size: 27px;
    }
    .suji-envelope__date {
        font-size: 15px;
    }
    .suji-envelope__guest {
        font-size: 16.5px;
    }
    .suji-envelope__btn {
        padding: 11px 36px;
        font-size: 14.5px;
    }
}