* {
    box-sizing: border-box;
}

:root {
    --bg-deep: #2a1014;
    --bg-glow: #40161c;
    --red-deep: #ff0055;
    --red-soft: #ff758c;
    --cream: #fff3ec;
    --cream-dim: #f0d9d0;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
    background: var(--bg-deep);
    font-family: 'Quicksand', sans-serif;
    scroll-behavior: smooth;
}

body {
    position: relative;
}

.bg-fixed {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 42%, var(--bg-glow) 0%, var(--bg-deep) 55%, #170a0c 100%);
}

.hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    background: transparent;
}

/* Khóa cuộn trang cho đến khi người dùng chạm vào tim */
html.scroll-locked,
body.scroll-locked {
    overflow: hidden;
    height: 100%;
}

#heart-burst {
    position: absolute;
    inset: 0;
    z-index: 4;
    overflow: hidden;
    pointer-events: none;
}

.burst-heart {
    position: absolute;
    color: var(--red-soft);
    text-shadow: 0 0 8px rgba(255, 0, 85, 0.6);
    animation-name: cascadeDown;
    /* ease-out: bat dau nhanh (boc tach ra sac net), cham dan khi xuong -> mua tim luon lam */
    animation-timing-function: cubic-bezier(0.15, 0.5, 0.4, 1);
    animation-fill-mode: both;
}

@keyframes cascadeDown {
    0% {
        transform: translate(0, 0) scale(0);
        opacity: 0;
    }
    10% {
        /* Hien ra nhanh, to deu */
        transform: translate(0, 0) scale(1.05);
        opacity: 1;
    }
    35% {
        /* Van o gan vi tri tim goc, full opacity */
        transform: translate(calc(var(--dx) * 0.04), calc(var(--dy) * -0.02)) rotate(calc(var(--rot) * 0.04)) scale(1);
        opacity: 1;
    }
    88% {
        /* Dang chay xuong gan cuoi - van con ro rang */
        transform: translate(calc(var(--dx) * 0.92), calc(var(--dy) * 0.88)) rotate(calc(var(--rot) * 0.9)) scale(0.75);
        opacity: 0.55;
    }
    100% {
        /* Tan bien nhe nhang o cuoi hanh trinh */
        transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.55);
        opacity: 0;
    }
}

/* Lam mo trai tim goc khi click */
.dissolving {
    transition: opacity 1.4s ease-out !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


.letter {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8vh 6vw;
    background: transparent;
}

.letter-card {
    max-width: 620px;
    text-align: center;
    color: var(--cream);
    /* Card tong the hien ra nhung moi element con tu an -> ko can opacity toan card */
}

/* Tat ca con cua letter-card mac dinh an */
.letter-card > * {
    opacity: 0;
}

/* Khi co class .visible -> kich hoat "ngung tu" tung phan */
.letter-card.visible > * {
    animation: condenseFromHearts 1.1s cubic-bezier(0.2, 0.6, 0.4, 1) forwards;
}

/* Stagger: moi doan van xuat hien cach nhau 0.65s
   Tim van dang roi -> cam giac chu duoc "ket tinh" tu tung nhom tim */
.letter-card.visible h1          { animation-delay: 0s;    }
.letter-card.visible p:nth-child(2) { animation-delay: 0.65s; }
.letter-card.visible p:nth-child(3) { animation-delay: 1.3s;  }
.letter-card.visible p:nth-child(4) { animation-delay: 1.95s; }
.letter-card.visible .signature  { animation-delay: 2.6s;  }

/* Hieu ung "ngung tu": bat dau la dam hong mu nhe nhu nhung hat tim tan,
   sau do tu tu keo lai thanh chu ro net */
@keyframes condenseFromHearts {
    0% {
        opacity: 0;
        filter: blur(18px);
        transform: translateY(10px) scale(1.04);
        color: #ff6688;        /* mau hong do cua nhung hat tim */
        letter-spacing: 0.12em;
    }
    35% {
        opacity: 0.6;
        filter: blur(6px);
        letter-spacing: 0.05em;
        color: #ffaabb;
    }
    100% {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0) scale(1);
        color: inherit;        /* tra ve mau chu goc */
        letter-spacing: inherit;
    }
}

.letter-card h1 {
    font-family: 'Dancing Script', cursive;
    font-weight: 700;
    font-size: clamp(2.1rem, 5.5vw, 3rem);
    color: var(--red-soft);
    text-shadow: 0 0 18px rgba(226, 98, 110, 0.45), 0 0 40px rgba(226, 98, 110, 0.2);
    margin: 0 0 1.8rem;
    letter-spacing: 0.01em;
}

.letter-card p {
    font-size: clamp(1rem, 2vw, 1.15rem);
    font-weight: 400;
    line-height: 1.9;
    letter-spacing: 0.01em;
    margin: 0 0 1.3rem;
    color: var(--cream-dim);
}

.letter-card .signature {
    display: inline-block;
    margin-top: 1.6rem;
    font-family: 'Dancing Script', cursive;
    font-size: 1.7rem;
    color: var(--red-soft);
    text-shadow: 0 0 16px rgba(226, 98, 110, 0.4);
}


#stars {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 1;
}

/* Khung tổng */
.scene {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    z-index: 2;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Khối tim */
.box {
    position: relative;
    margin-top: 8dvh;
    flex-shrink: 0;
    width: min(78vmin, 500px);
    height: min(78vmin, 500px);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    /* Transition cho ca fade-out (dissolving) va fade-in (reset) */
    transition: opacity 1.5s ease-in;
}

.box::before {
    content: "";
    position: absolute;
    inset: -25%;
    background: radial-gradient(circle, rgba(255, 117, 140, 0.35) 0%, rgba(255, 0, 85, 0.12) 45%, transparent 75%);
    filter: blur(20px);
    z-index: -1;
    pointer-events: none;
}

/* Canvas tim */
#pinkboard {
    width: 100%;
    height: 100%;
    display: block;
    animation: animate 1.3s infinite;
    filter: drop-shadow(0 0 30px rgba(255, 0, 85, 0.6));
}

/* Vùng chứa chữ, chiếm hết khoảng trống còn lại dưới tim, canh giữa */
.text-wrap {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    min-height: 0;
}

#text-container {
    position: static;
    z-index: 3;

    width: min(92vw, 900px);

    text-align: center;
    pointer-events: none;
    line-height: 1.4;
    color: var(--cream);
    text-shadow: 0 0 12px rgba(255, 0, 85, 0.55), 0 0 26px rgba(255, 0, 85, 0.3);
    font-family: 'Dancing Script', cursive;
    font-size: clamp(1.5rem, 4vw, 2.6rem);
    font-weight: 700;
    letter-spacing: 0.01em;

    opacity: 0;
    word-break: break-word;
}

#text-container.show {
    animation: floatSoft 3.2s ease-in-out infinite, fadeInSoft 1.4s ease forwards;
}

#text-container.fade-out {
    animation: fadeOutSoft 0.6s ease forwards;
}

@keyframes floatSoft {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes fadeInSoft {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOutSoft {
    from { opacity: 1; }
    to { opacity: 0; transform: translateY(-6px); }
}

/* Tim đập */
@keyframes animate {
    0% { transform: scale(1); }
    30% { transform: scale(.8); }
    60% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Tablet */
@media (max-width: 1024px) {
    .box {
        width: min(82vmin, 460px);
        height: min(82vmin, 460px);
    }

    #text-container {
        width: min(94vw, 760px);
        font-size: clamp(1.3rem, 4vw, 2.2rem);
    }
}

/* Mobile */
@media (max-width: 768px) {
    .box {
        width: min(88vw, 380px);
        height: min(88vw, 380px);
    }

    #text-container {
        width: 92vw;
        font-size: clamp(1.2rem, 5vw, 1.8rem);
    }
}

@media (max-width: 480px) {
    .box {
        width: min(90vw, 330px);
        height: min(90vw, 330px);
    }

    #text-container {
        font-size: clamp(1.1rem, 5.4vw, 1.5rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    #pinkboard {
        animation: none;
    }
    #text-container {
        animation: none !important;
        opacity: 1;
    }
    .burst-heart {
        animation: none !important;
        display: none;
    }
}
/* ========================================================
   KÍCH THƯỚC ĐỘC LẬP CHO ĐIỆN THOẠI (KHÓA UI)
======================================================== */

/* Tablet & Mobile màn hình lớn */
@media screen and (max-width: 768px) {
    #pinkboard {
        width: 300px;
        height: 300px;
    }


    #text-container {
        font-size: clamp(1.2rem, 5vw, 2rem);
    }
}

/* Mobile màn hình nhỏ (ví dụ: iPhone đời cũ) */
@media screen and (max-width: 400px) {
    #pinkboard {
        width: 250px;
        height: 250px;
    }

}

/* Nhan ngay 20/10 o dau trang */
.date-badge {
    position: absolute;
    top: calc(2.5dvh + env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-family: 'Dancing Script', cursive;
    font-size: clamp(1.3rem, 3.5vw, 1.8rem);
    color: var(--red-soft);
    text-shadow: 0 0 14px rgba(255, 0, 85, 0.45);
    pointer-events: none;
    white-space: nowrap;
}

.date-badge span {
    font-family: 'Quicksand', sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--cream-dim);
    opacity: 0.75;
    text-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    .letter-card > *,
    .letter-card.visible > * {
        animation: none;
        opacity: 1;
        filter: none;
    }
}