@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Cormorant+Infant:ital,wght@0,300..700;1,300..700&family=Cormorant+Upright:wght@300;400;500;600;700&family=Great+Vibes&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/*=========================
ROOT
=========================*/

:root{
    --bg:#07020e;
    --bg-dark:#05020a;
    --bg-title:linear-gradient(180deg,#ffffff 0%,#d55cff 100%);
    --white:#ffffff;
    --text:#ece7fb;
    --purple:#7b2dff;
    --purple-light:#d664ff;
    --pink:#ffa2ef;
    --yellow:#fac221;
    --glass:rgba(255,255,255,.08);
    --glass-border:rgba(255,255,255,.15);
    --radius:28px;
    --transition:.35s ease;
    --shadow:0 20px 60px rgba(0,0,0,.35);
    --fs-h1:clamp(60px,15vw,64px);
    --fs-h2:clamp(40px,8vw,45px);
    --fs-subtitle:13px;
    --fs-p:13px;
    --fs-btn:15px;
    --fs-small:12px;
    --ff-title:"Cormorant Garamond", serif;
    --ff-header:"Cormorant Upright", serif;
    --ff-name:"Cormorant Infant", serif;
    --ff-body:"Poppins",sans-serif;
}

@media (min-width:768px){
    :root{
        --fs-p:14px;
    }
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    background:

    radial-gradient(
        circle at top,
        #c81d4f 0%,
        #a11743 20%,
        #7b1338 45%,
        #5d0f2d 70%,
        #431021 100%
    );
    overflow:hidden;
    overflow-y: auto;
    background-attachment:fixed;
    color:white;
    font-family:"Source Serif Pro", serif;
    font-size:13px;
    text-align: center;
}

.section{
    padding:30px 20px;
    position:relative;
    width:100%;
    min-height:100vh;
    overflow:hidden;    
    z-index: 2;  
}


.background-bokeh{
    position:fixed;
    inset:0;
    z-index:1;
    pointer-events:none;
    transition:opacity 1.5s ease;
}

/*=========================
ROMANTIC BACKGROUND
=========================*/

.romantic-background{
    position:fixed;
    inset:0;
    z-index:0;
    overflow:hidden;
    pointer-events:none;
    opacity:0;
    transition:opacity 2s ease;
    background:

    radial-gradient(
        circle at top,
        #c81d4f 0%,
        #a11743 20%,
        #7b1338 45%,
        #5d0f2d 70%,
        #431021 100%
    );
}

.romantic-background.show{
    opacity:1;
}

.bg-glow{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    mix-blend-mode:screen;
    filter:blur(50px);
    transform:translate(-50%,-50%);
    will-change:left,top,transform,opacity #fff;
}

.glow-1{
    width:700px;
    height:700px;
    opacity:.0;
    background:
    radial-gradient(circle,
    rgba(255,255,255,.8),
    rgba(255,255,255,.15) 42%,
    transparent 72%);
}

.glow-2{
    width:520px;
    height:520px;
    opacity:.0;
    background:
    radial-gradient(circle,
    rgba(255,220,235,.9),
    rgba(255,150,200,.45) 35%,
    rgba(255,70,130,.22) 65%,
    transparent 100%);
}

.glow-3{
    width:360px;
    height:360px;
    opacity:.0;
    background:
    radial-gradient(circle,
    rgba(255,255,255,.8),
    rgba(255,170,210,.35) 35%,
    rgba(255,90,150,.15) 65%,
    transparent 100%);
}

.firefly{
    position:absolute;
    border-radius:50%;
    background:#fff;
    filter: blur(1px);
    pointer-events:none;
    transform:translate(-50%,-50%);
    box-shadow:
    0 0 6px rgba(255,255,255,.7),
    0 0 14px rgba(255,255,255,.45),
    0 0 24px rgba(255,255,255,.25);
}

@keyframes fireflyTwinkle{

    0%{
        opacity:.08;
    }

    20%{
        opacity:.45;
    }

    40%{
        opacity:.15;
    }

    60%{
        opacity:.75;
    }

    80%{
        opacity:.2;
    }

    100%{
        opacity:0;
    }

}

.section{
    position:relative;
    z-index:2;
}

/*=========================
SECTION 1
=========================*/

.section-1{
    display:flex;
    justify-content:center;
    align-items:center;
    background:transparent;
}

.section-1-light{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    opacity:0;
    transform:translate(-50%,-50%);
    background:
    radial-gradient(
        circle,
        rgba(255,255,255,.95) 0%,
        rgba(255,200,220,.70) 28%,
        rgba(255,110,170,.28) 58%,
        rgba(180,40,80,.12) 82%,
        transparent 100%
    );
}

.section-1-content{
    position:relative;
    z-index:10;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:24px;
}

.title,
.subtitle{
    opacity:0;
    transform:translateY(20px);
    filter:blur(10px);
    animation:section1Fade 1.3s ease forwards;
}

.title{
    font-size:var(--fs-h2);
    font-family:var(--ff-title);
    color:#ffffff;
    animation-delay:.5s;
}

.second-title{
    font-size: var(--fs-h1);
    font-style: italic;
    font-weight: 500;
    color: var(--yellow);
    animation-delay: .6s;
}

.section-1-subtitle{
    margin-top:18px;
    font-size:22px;
    color:rgba(255,255,255,.82);
    text-transform:uppercase;
    letter-spacing:6px;
    animation-delay:2s;
}

@keyframes section1Fade{

    from{
        opacity:0;
        transform:translateY(20px);
        filter:blur(10px);
    }

    to{
        opacity:1;
        transform:translateY(0);
        filter:blur(0);
    }

}

.button{
    position:relative;
    overflow:hidden;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    width:200px;
    height:52px;
    margin-top:70px;
    border:1.4px solid rgba(255,255,255,.32);
    background:rgba(255,255,255,.00);
    color:#fff;
    font-weight: 600;
    font-size: var(--fs-btn);
    cursor:pointer;
    transition:.35s;
    animation:Button 1.3s ease forwards;
    animation-delay: 1.5s;
    opacity: 0;
}

.button:hover{
    background:rgba(255,255,255,.08);
    box-shadow:0 0 18px rgba(255,180,220,.18);
}

.button-text{
    position:relative;
    z-index:2;
    color:#ffffff;
    transition:color .3s;
}

@keyframes Button{

    from{
        opacity:0;
        transform:translateY(0);
        filter:blur(3px);
    }

    to{
        opacity:1;
        transform:translateY(0);
        filter:blur(0);
    }

}

/*=========================
SECTION 2
=========================*/

.section-2{
    display:none;
    justify-content:center;
    align-items:center;
    background:transparent;
}

.section-2.show{
    display:flex;
}

.section-2-content{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    width:100%;
    max-width:360px;
    margin:auto;
    text-align:center;
}

.heart-title{
    color:#ffffff;
    font-family:var(--ff-title);
    font-size:22px;
    line-height:1.45;
    margin-bottom:24px;
    opacity:0;
    transform:translateY(20px);
    filter:blur(8px);
    animation:heartFade 1.3s ease forwards;
}

.love-status-wrapper{
    position:relative;
    width:100%;
    height:42px;
    margin-bottom:28px;
}

.love-status,
.love-warning{
    position:absolute;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
}

.love-status{
    gap:10px;
    opacity:1;
    transition:.3s;
}

.love-warning{
    color:var(--yellow);
    font-size:24px;
    font-weight:500;
    opacity:0;
    transition:.3s;
    pointer-events:none;
}

.love-percent{
    color:var(--yellow);
    font-size:22px;
    font-weight:500;
    font-family:var(--ff-body);
    transform:translateY(20px);
    filter:blur(8px);
    animation:heartFade 1.3s ease forwards;
}

.love-emoji{
    font-size:30px;
    line-height:1;
    transition:.25s;
    transform:translateY(20px);
    filter:blur(8px);
    animation:heartFade 1.3s ease forwards;
}

.heart{
    width:120px;
    height:120px;
    cursor:pointer;
    user-select:none;
    touch-action:none;
    opacity:0;
    transform:scale(.8);
    animation:heartAppear 1.3s .3s ease forwards;
}

.heart svg{
    width:100%;
    height:100%;
    overflow:visible;
}

.heart-outline{
    fill:none;
    stroke:#ffffff;
    stroke-width:15px;
    background:rgba(255,255,255, .3);
    filter:drop-shadow(0 0 18px rgba(255,255,255,.35));
}

.heart-fill{
    fill:url(#heartGradient);
    clip-path:inset(100% 0 0 0);
    transition:clip-path .08s linear;
}

.heart-instruction{
    margin-top:24px;
    color:rgba(255,255,255,.9);
    font-size:15px;
    font-family: var(--ff-body);
    opacity:0;
    transform:translateY(20px);
    filter:blur(8px);
    animation:heartFade 1.3s .45s ease forwards;
}

.heart-instruction{
    cursor:pointer;
    user-select:none;
    -webkit-user-select:none;
    touch-action:none;
}

.heart-success{
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) scale(.9);
    width:100%;
    margin-top: 40px;
    padding:0 24px;
    font-family: var(--ff-title);
    font-size:24px;
    text-align:center;
    opacity:0;
    filter:blur(8px);
    transition:.5s ease;
    z-index:1000;
    pointer-events:none;
}

.heart-success.show{
    opacity:1;
    filter:none;
    transform:translate(-50%,-50%) scale(1);
}

.heart-success.hide{
    opacity:0;
    filter:blur(10px);
    transform:translate(-50%,-50%) scale(.95);
}

#section2Button{
    margin-top:55px;
    opacity:0;
    pointer-events:none;
    transition:.6s;
}

#section2Button.show{
    opacity:1;
    pointer-events:auto;
}

.heart.pulse{
    animation:heartPulse .45s ease 3;
}

.heart-particle{
    position:fixed;
    left:0;
    top:0;
    pointer-events:none;
    font-size:18px;
    color:#ffffff;
    text-shadow:0 0 14px rgba(255,120,180,.8);
    z-index:999;
}

.fade-out{
    opacity:0;
    filter:blur(8px);
    transition:.5s;
}

.section-2-next{
    position:absolute;
    left:50%;
    bottom:100px;
    transform:translateX(-50%);
    border:none;
    background:none;
    color:var(--yellow);
    font-size:15px;
    font-family:var(--ff-body);
    font-weight:600;
    letter-spacing:2px;
    cursor:pointer;
    opacity:0;
    pointer-events:none;
    transition:.4s ease;
}

.section-2-next.show{
    opacity:1;
    pointer-events:auto;
}

.section-2-next:hover{
    transform:translateX(-50%) translateX(6px);
}

@keyframes heartFade{
    from{
        opacity:0;
        transform:translateY(20px);
        filter:blur(8px);
    }
    to{
        opacity:1;
        transform:translateY(0);
        filter:none;
    }
}

@keyframes heartAppear{
    from{
        opacity:0;
        transform:scale(.8);
        filter:blur(10px);
    }
    to{
        opacity:1;
        transform:scale(1);
        filter:none;
    }
}

@keyframes heartPulse{
    0%{
        transform:scale(1);
    }
    50%{
        transform:scale(1.08);
        filter:drop-shadow(0 0 28px rgba(255,90,160,.9));
    }
    100%{
        transform:scale(1);
    }
}

/*=========================
SECTION 3
=========================*/

.section-3{
    display:none;
    justify-content:flex-start;
    align-items:center;
    padding:80px 24px;
    background:transparent;
    display:none;
    opacity:0;
}

.section-3.show{
    display:flex;
    animation:section3Fade 1.5s ease forwards;
}

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

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

.section-3-content{
    width:100%;
    max-width:960px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.section-3-header{
    width:100%;
    max-width:420px;
    margin-bottom:48px;
    text-align:center;
}

.section-3-title{
    color:#ffffff;
    font-size:var(--fs-h2);
    font-family:var(--ff-title);
    font-weight:400;
    line-height:1.15;
}

.section-3-subtitle{
    margin-top:14px;
    color:rgba(255,255,255,.72);
    font-size:15px;
    line-height:1.7;
    font-family:var(--ff-body);
}

.section-3-header{
    transition:.45s ease;
}

.section-3-header.hide{
    opacity:0;
    transform:translateY(-20px);
    filter:blur(8px);
}

.section-3-lock{
    width:95%;
    max-width:340px;
    padding:26px;
    border:1px solid var(--glass-border);
    border-radius:28px;
    background:var(--glass);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    box-shadow:
        0 18px 45px rgba(0,0,0,.35),
        inset 0 1px rgba(255,255,255,.08);
    transition:.45s ease;
}

.section-3-lock.hide{
    opacity:0;
    transform:scale(.92);
    pointer-events:none;
}

.section-3-lock-title{
    color:rgba(255,255,255, .6);
    font-weight:400;
    text-align:center;
    font-family:var(--ff-small);
}

.section-3-unlock{
    margin-top:28px;
}

.section-3-track{
    position:relative;
    width:100%;
    height:46px;
    border-radius:999px;
}

.section-3-track::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:999px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.10);
}

.section-3-progress{
    position:absolute;
    left:0;
    top:0;
    width:0;
    height:100%;
    overflow:hidden;
    border-radius:999px;
    background:linear-gradient(
        90deg,
        rgba(250,194,33,.18),
        rgba(250,194,33,.42),
        rgba(250,194,33,.18)
    );
    z-index:1;
}

.section-3-progress::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        110deg,
        transparent 20%,
        rgba(255,255,255,.45) 50%,
        transparent 80%
    );
    background-size:180% 100%;
    animation:section3Shimmer 1.2s linear infinite;
}

@keyframes section3Shimmer{
    from{
        background-position:-180% 0;
    }
    to{
        background-position:180% 0;
    }
}

.section-3-slider{
    position:absolute;
    left:0px;
    top:2px;
    width:44px;
    height:44px;
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:grab;
    touch-action:none;
    user-select:none;
    z-index:3;
    transition:.25s;
}

.section-3-slider:hover{
    transform:scale(1.06);
}

.section-3-slider:active{
    cursor:grabbing;
    transform:scale(.96);
}

.section-3-icon{
    font-size:48px;
    line-height:1;
    filter:drop-shadow(0 6px 12px rgba(0,0,0,.35));
}

.section-3-text{
    position:absolute;
    padding-left: 30px;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    pointer-events:none;
    z-index:2;
    transition:opacity .25s;
}

.section-3-text.hide{
    opacity:0;
}

.section-3-text::before{
    content:"›› ›› ››";
    color:rgba(255,255,255,.45);
    font-size:26px;
    font-weight:300;
    letter-spacing:2px;
}

.section-3-text.animate::before{
    animation:section3ArrowFlow 1s linear infinite;
}

@keyframes section3ArrowFlow{
    0%{
        transform:translateX(-10px);
        opacity:.3;
    }
    50%{
        opacity:1;
    }
    
    100%{
        transform:translateX(10px);
        opacity:.3;
    }
}

/*=========================
SECTION 3 LOADING
=========================*/

.section-3-loading{
    display:none;
    justify-content:center;
    align-items:center;
    gap:14px;
    height:90px;
}

.section-3-loading.show{
    display:flex;
}

.section-3-loading span{
    font-size:28px;
    color:#ffffff;
    opacity:.15;
    transform:scale(.6);
}

.section-3-loading.show span:nth-child(1){
    animation:section3Loading 1s infinite;
}

.section-3-loading.show span:nth-child(2){
    animation:section3Loading 1s .25s infinite;
}

.section-3-loading.show span:nth-child(3){
    animation:section3Loading 1s .5s infinite;
}

.section-3-loading.show span:nth-child(4){
    animation:section3Loading 1s .75s infinite;
}

@keyframes section3Loading{

    0%{
        opacity:.15;
        transform:scale(.6);
    }

    35%{
        opacity:1;
        transform:scale(1.2);
    }

    70%{
        opacity:.15;
        transform:scale(.6);
    }

    100%{
        opacity:.15;
        transform:scale(.6);
    }

}

/*=========================
SECTION 3 GALLERY
=========================*/

.section-3-gallery{
    display:none;
    width:100%;
    animation:section3GalleryFade 1s ease forwards;
}

.section-3-gallery.show{
    display:block;
}

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

.section-3-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:5px;
    width:100%;
    overflow:hidden;
    border-radius:0px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.06);
}

.section-3-grid img{
    display:block;
    width:100%;
    aspect-ratio:1;
    object-fit:cover;
    cursor:pointer;
    transition:
        transform .25s ease,
        filter .25s ease,
        box-shadow .25s ease;
}

.section-3-grid img:hover{
    transform:scale(1.03);
    filter:brightness(.96);
}

.section-3-grid img:active{
    transform:scale(1.03);
}

@media (min-width:768px){

    .section-3-gallery{
        max-width:65%;
    }

    .section-3-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

}

@media (min-width:1200px){

    .section-3-gallery{
        max-width:60%;
    }

    .section-3-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

}

/*=========================
SECTION 3 PREVIEW
=========================*/

.section-3-preview{
    position:fixed;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    transition:.35s ease;
    z-index:999;
}

.section-3-preview.show{
    opacity:1;
    visibility:visible;
}

.section-3-preview-bg{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.82);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}

/* Wrapper mengikuti ukuran asli foto */
.section-3-preview-image-wrap{
    position:relative;
    display:inline-block;
    z-index:2;
    transform:scale(.82);
    transition:transform .35s ease;
}

.section-3-preview.show .section-3-preview-image-wrap{
    transform:scale(1);
}

#section3PreviewImage{
    display:block;
    width:auto;
    height:auto;
    max-width:92vw;
    max-height:75vh;
    object-fit:contain;
    box-shadow:0 24px 70px rgba(0,0,0,.45);
}

/* Caption berada DI ATAS foto */
.section-3-preview-caption{
    position:absolute;
    left:0;
    right:0;
    bottom:0;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;

    padding:90px 24px 24px;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.92) 0%,
        rgba(0,0,0,.72) 50%,
        rgba(0,0,0,.28) 70%,
        transparent 100%
    );

    pointer-events:none;
}

.section-3-preview-caption h3{
    color:#fff;
    font-size:25px;
    font-family:var(--ff-title);
    margin-bottom:8px;
    line-height:1.1;
}

.section-3-preview-caption p{
    color:rgba(255,255,255,.92);
    font-size:var(--fs-small);
    line-height:1.4;
    font-family:var(--ff-body);
}

.section-3-preview-close{
    position:absolute;
    top:22px;
    right:22px;
    width:46px;
    height:46px;
    display:flex;
    justify-content:center;
    align-items:center;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    color:#ffffff;
    font-size:22px;
    cursor:pointer;
    transition:.25s;
    z-index:5;
}

.section-3-preview-close:hover{
    background:rgba(255,255,255,.16);
    transform:scale(1.06);
}

/*=========================
SECTION 3 PREVIEW NAVIGATION
=========================*/

.section-3-preview-dots{
    position:absolute;
    left:50%;
    bottom:35px;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    gap:14px;
    z-index:5;
}

.section-3-preview-arrow{
    position:absolute;
    bottom:20px;
    border:none;
    background:none;
    padding:0 10px;
    color:rgba(255,255,255,.8);
    font-size:28px;
    font-family:var(--ff-body);
    cursor:pointer;
    transition:.25s;
    z-index:5;
}

.section-3-preview-arrow.prev{
    left:calc(50% - 135px);
}

.section-3-preview-arrow.next{
    left:calc(50% + 95px);
}

.section-3-preview-arrow:hover{
    color:#fff;
    transform:scale(1.15);
}

.section-3-dot{
    width:8px;
    height:8px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.35);
    cursor:pointer;
    transition:.25s;
}

.section-3-dot.active{
    width:24px;
    border-radius:999px;
    background:var(--yellow);
}

/*=========================
SECTION 3 NEXT
=========================*/

.section-3-next{
    margin-top:36px;
    border:none;
    background:none;
    color:var(--yellow);
    font-size:15px;
    font-family:var(--ff-body);
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
    cursor:pointer;
    opacity:0;
    transform:translateY(15px);
    pointer-events:none;
    transition:.45s ease;
}

.section-3-next.show{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
}

@media (min-width:768px){

    #section3PreviewImage{
        max-width:60vw;
        max-height:80vh;
    }

}

@media (min-width:1024px){

    #section3PreviewImage{
        max-width:45vw;
        max-height:78vh;
    }

}

/*=========================
SECTION 4
=========================*/

#section4Canvas{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:1;
}

.section-4{
    display:none;
    justify-content:center;
    align-items:center;
    position:relative;
    background:transparent;
    overflow:hidden;
    opacity:0;
}

.section-4.show{
    display:flex;
    animation:section4FadeIn .8s ease forwards;
}

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

.section-4-content{
    z-index:2;
    width:100%;
    max-width:700px;
    padding-top: 100px;
    text-align:center;
}

#section4Canvas{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:1;
}

.section-4-title{
    font-family:"Great Vibes", cursive;
    font-size:var(--fs-h2);
    font-weight:500;
    color:#ffffff;
    opacity:0;
    filter:blur(10px);
    transform:translateY(20px);
    animation:section4Title .8s ease forwards;
}

.section-4-name{
    margin:4px 0 150px 0;
    font-family:var(--ff-name);
    font-size:var(--fs-h1);
    font-weight:400;
    text-transform: uppercase;
    color:var(--yellow);
    opacity:0;
    filter:blur(10px);
    transform:translateY(20px);
    animation:section4Title .8s ease forwards;
    animation-delay:.2s;
}


.section-4-heart-wrap{
    position: absolute;
    left: 50%;
    bottom: 80px;
    transform:translateX(-50%) scale(.7);
    display:flex;
    justify-content:center;
    align-items:center;
    width:65px;
    height:65px;
    border-radius:50%;
    background: transparent;
    opacity:0;
    filter:blur(10px);
    animation: section4Heart .8s ease-out forwards;
    animation-delay:.4s;
}

.section-4-heart{
    font-size:90px;
    line-height:1;
    color:#ff5c9d;
    text-shadow:
        0 0 8px rgba(255,92,157,.7),
        0 0 20px rgba(255,92,157,.35);
    cursor:pointer;
    animation:clickHint 1.8s ease-in-out 1s infinite;
}

.section-4-heart-wrap.hide-bg{
    background:transparent;
    box-shadow:none;
    transition:none;
}

.section-4-heart-wrap.break{
    transform:scale(1.4);
    opacity:0;
    filter:blur(10px);
    transition:.45s ease;
}

.section-4-heart-particle{
    position:fixed;
    font-size:24px;
    color:#fff;
    opacity:.65;
    pointer-events:none;
    z-index:999;
    text-shadow:
        0 0 6px rgba(255,255,255,.35);
}

.section-4.hide{
    animation:section4FadeOut .8s ease forwards;
}

@keyframes clickHint{

    0%,
    100%{
        transform:scale(1);
    }

    12%{
        transform:scale(1.2);
    }

    24%{
        transform:scale(1);
    }

    36%{
        transform:scale(1.2);
    }

    48%{
        transform:scale(1);
    }
}

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

@keyframes section4Title{
    from{
        opacity:0;
        filter:blur(10px);
        transform:translateY(20px);
    }
    to{
        opacity:1;
        filter:none;
        transform:translateY(0);
    }
}

@keyframes section4Heart{

    from{
        opacity:0;
        filter:blur(10px);
        transform:translateX(-50%) scale(.7);
    }

    to{
        opacity:1;
        filter:none;
        transform:translateX(-50%) scale(1);
    }

}

.section-4-heart-wrap{
    animation:
        section4Heart .8s ease forwards,
        section4Pulse 1.8s ease-in-out 1.3s infinite;
}

/*=========================
SECTION 5
=========================*/

.section-5{
    display:none;
    justify-content:center;
    align-items:center;
    position:relative;
    padding: 0;
    background:transparent;
    overflow:hidden;
    opacity:0;
}

.section-5.show{
    display:flex;
    animation:section5Fade .8s ease forwards;
}

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

.section-5-content{
    position:relative;
    width:100%;
    min-height:100vh;
}

#section5Canvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:1;
}

/*=========================
GIFT BOX
=========================*/

.section-5-gift{
    position:absolute;
    left:50%;
    bottom:70px;
    transform:translateX(-50%);
    width:170px;
    height:170px;
    display:flex;
    justify-content:center;
    align-items:center;
    transition:.6s ease;
}

.section-5-gift.hide{
    opacity:0;
    transform:translateX(-50%) scale(.6);
    filter: blur(12px);
}

.section-5-box{
    position:relative;
    width:130px;
    height:95px;
    border-radius:10px;
    background:linear-gradient(
        180deg,
        #ff7ca8 0%,
        #ff5b93 100%
    );
    box-shadow:
    0 20px 40px rgba(0,0,0,.35),
    0 0 40px rgba(255,100,180,.22);
}

.section-5-lid{
    position:absolute;
    left:-6px;
    top:-28px;
    width:142px;
    height:32px;
    border-radius:10px;
    background:linear-gradient(
        180deg,
        #ff8bb6,
        #ff679c
    );
    transform-origin:center bottom;
}

.section-5-lid.fly{
    animation:section5Lid .9s ease forwards;
}

@keyframes section5Lid{

    0%{
        transform:translateY(0) rotate(0deg);
        opacity:1;
    }

    100%{
        transform:
        translate(-35px,-90px)
        rotate(-25deg);
        opacity:0;
    }

}

.section-5-ribbon-vertical{
    position:absolute;
    left:50%;
    top:0;
    width:18px;
    height:100%;
    transform:translateX(-50%);
    background:#ffd84c;
}

.section-5-ribbon-horizontal{
    position:absolute;
    left:0;
    top:20px;
    width:100%;
    height:18px;
    background:#ffd84c;
}

/*=========================
SHAKE
=========================*/

.section-5-gift.shake{
    animation:section5Shake 1s ease;
}

@keyframes section5Shake{

    0%{
        transform:translateX(-50%) scale(1) rotate(0deg);
    }

    10%{
        transform:translateX(-50%) scale(1.02) rotate(-2deg);
    }

    20%{
        transform:translateX(-50%) scale(1.05) rotate(2deg);
    }

    30%{
        transform:translateX(-50%) scale(.98) rotate(-3deg);
    }

    40%{
        transform:translateX(-50%) scale(1.08) rotate(3deg);
    }

    50%{
        transform:translateX(-50%) scale(.97) rotate(-4deg);
    }

    60%{
        transform:translateX(-50%) scale(1.1) rotate(4deg);
    }

    70%{
        transform:translateX(-50%) scale(1.04) rotate(-2deg);
    }

    80%{
        transform:translateX(-50%) scale(1.08) rotate(2deg);
    }

    90%{
        transform:translateX(-50%) scale(1.12) rotate(-1deg);
    }

    100%{
        transform:translateX(-50%) scale(1) rotate(0deg);
    }

}

/*=========================
MESSAGE
=========================*/

.section-5-message{
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:100%;
    max-width:520px;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    padding:70px 24px 40px;
    box-sizing:border-box;
    text-align:center;
    opacity:0;
    visibility:hidden;
    transition:.8s ease;
    overflow-y:auto;
    z-index:5;
}

.section-5-message.show{
    opacity:1;
    visibility:visible;
}

.section-5-title{
    font-family:var(--ff-title);
    font-size:30px;
    font-weight:400;
    color:#ffffff;
    margin:0 0 26px;
    opacity:0;
    filter:blur(10px);
    transform:translateY(20px);
    animation:section5Title .8s ease forwards;
}

@keyframes section5Title{

    from{
        opacity:0;
        transform:translateY(20px);
        filter:blur(10px);
    }

    to{
        opacity:1;
        transform:translateY(0);
        filter:none;
    }

}

.section-5-text{
    max-width:430px;
    color:rgba(255,255,255,.92);
    font-family:var(--ff-body);
    font-size:var(--fs-p);
    line-height:1.7;
    text-align:left;
    white-space: pre-line;
}

#section5Typing{
    display:inline;
}

#section5Typing::after{
    content:"";
    display:inline-block;
    width:2px;
    height:1em;
    margin-left:2px;
    background:#fff;
    vertical-align:-0.1em;
    animation:section5Blink .8s steps(1) infinite;
}

#section5Typing.done::after{
    display:none;
}

.section-5-cursor{
    display:inline-block;
    width:2px;
    height:.9em;
    margin-left:2px;
    vertical-align:middle;
    background:#fff;
    animation:section5Blink .8s infinite;
}

.section-5-replay{
    position:relative;
    left:auto;
    bottom:auto;
    transform:none;
    margin:40px auto;
    flex-shrink:0;
    overflow:hidden;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    width:200px;
    height:52px;
    border:1.4px solid rgba(255,255,255,.32);
    background:rgba(255,255,255,.00);
    color:#fff;
    font-weight:600;
    font-size:var(--fs-btn);
    cursor:pointer;
    opacity:0;
    pointer-events:none;
    transition:.45s ease;
}

.section-5-replay.show{
    opacity:1;
    pointer-events:auto;
}

@keyframes section5Blink{

    50%{
        opacity:0;
    }

}

.section-5-box.explode{
    animation:section5BoxExplode .8s ease forwards;
}

@keyframes section5BoxExplode{

    0%{
        transform:scale(1);
        opacity:1;
    }

    20%{
        transform:scale(1.15);
    }

    100%{
        transform:scale(.2);
        opacity:0;
        filter:blur(12px);
    }

}

.music-toggle{
    position:fixed;
    right:20px;
    bottom:20px;
    width:27px;
    height:27px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    color:#fff;
    font-size:20px;
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    z-index:9999;
    opacity:0;
    pointer-events:none;
    transition:.35s ease;
}

.music-toggle img{
    width:16px;
    height:16px;
    object-fit:contain;
    pointer-events:none;
    transition:transform .3s ease,opacity .3s ease;
}

.music-toggle.playing img{
    animation:musicRotate 4s linear infinite;
}

@keyframes musicRotate{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

.music-toggle.show{
    opacity:1;
    pointer-events:auto;
}

.music-toggle:active{
    transform:scale(.92);
}