:root{
    --bg:#FFE2EA;
    --pink-1:#FFB3C6;
    --pink-2:#FA5D81;
    --pink-3:#B9164A;
    --pink-4:#FB92AB;
    --text:#B9164A;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    background:var(--bg);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* mini-love helper elements */
.mini-love{
    position:fixed;
    width:120px;
    height:auto;
    z-index:10;
    pointer-events:none;
    opacity:0;
    transform:translateY(8px) scale(.98);
    transition:opacity .45s ease, transform .45s cubic-bezier(.2,.9,.3,1);
}
.mini-love.left{ 
    left:8%; 
    top:40%; }
.mini-love.right{ 
    right:8%; 
    top:40%; }
.mini-love.show{ 
    opacity:1; 
    transform:translateY(0) scale(1);
 }

/* celebration layout when user confirms YES */
.box-container.celebrate{ 
    width:100%; 
    max-width:100vw; 
}
.box-container.celebrate .heart.xoxo{
    left:50%; 
    top:50%; 
    transform:translate(-50%,-50%); 
    width: clamp(240px, 44vw, 520px); 
    z-index:6;
}
.box-container.celebrate .heart.loveya,
.box-container.celebrate .heart.urcute{ display:none; }
.final-caption{
    position:absolute; 
    left:50%; 
    transform:translateX(-50%); 
    top:66%; 
    text-align:center;
    font-family: 'Lilita One', cursive; color:#fff;
     font-size:clamp(20px,3.4vw,42px);
    z-index:7; 
    white-space:pre-line; 
    text-shadow:0 4px 0 rgba(0,0,0,0.18);
}

/* floating decorative hearts placed around the page */
.float-heart{ 
    width:88px; 
    opacity:.95; 
    transform:translateY(6px) scale(.98); 
    transition:transform .6s ease, opacity .6s ease; 
}
.float-heart.show{ 
    transform:translateY(0) scale(1); 
    opacity:1; 
}

#top-lace, #bottom-lace{
    width:100%;
    pointer-events:none;
    display:block;
}

#top-lace{
    position:fixed;
    top:0;
    left:0;
    z-index:1;
}
#bottom-lace{
    position:fixed;
    bottom:0;
    left:0;
    z-index:1;
}

.site-header{
    z-index:2;
    text-align:center;
    position:relative;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    margin-block-end: 0;
    margin-block-start: 0px;

}
.site-header h1{
    padding-top:30px;
    font-family: 'Lilita One', cursive;
    font-size:clamp(40px,8vw,110px);
    line-height:1;
    display:inline-block;
}
.site-header h1 span{
    display:inline-block;
}

.l1{
    color:var(--pink-1);
    text-shadow:0 5px 0 rgba(0,0,0,0.1);
}
.l2{
    color:var(--pink-2);
    text-shadow:0 5px 0 rgba(0,0,0,0.1);
}
.l3{
    color:transparent;
}
.l4{
    color:var(--pink-3);
    text-shadow:0 5px 0 rgba(0,0,0,0.1);
}
.l5{
    color:var(--pink-2);
    text-shadow:0 5px 0 rgba(0,0,0,0.1);
}
.l6{
    color:var(--pink-4);
    text-shadow:0 5px 0 rgba(0,0,0,0.1);
}
.l7{
    color:var(--pink-1);
    text-shadow:0 5px 0 rgba(0,0,0,0.1);
}

.header-heart{
    width:56px;
    position:relative;
    top:-24px;
    left:12px;
    vertical-align:middle;
}

.subtitle{
    font-family: 'Hi Melody', cursive;
    color:var(--text);
    font-size:25px;
    margin: -50px;
    transition: transform .6s cubic-bezier(.2,.9,.3,1), opacity .4s ease;
}

/* subtitle visibility states */
.subtitle--hidden{
    opacity:0;
}
.subtitle--up{
    transform: translateY(170px);
    opacity:1;
}

.main-area{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:3; /* above lace (z-index:1) */
}

.box{
    display:inline-block;
    cursor:pointer;
    transition:transform .18s ease, box-shadow .18s ease;
}
.box img{
    width: clamp(220px, 48vw, 360px);
    max-width:100%;
    height:auto;
    border-radius:8px; 
    padding:12px;
    display:block;
}
.box.pressed img, .box:active img{transform:translateY(4px) scale(.99)}

/* container to position the box and the floating hearts */
.box-container{
    position:relative;
    width: min(720px, 90vw);
    max-width:100%;
    aspect-ratio: 2 / 1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 1vh 2vw;
}

.box{
    position:relative;
    display:inline-flex;
    justify-content:center;
    transform-origin:center center;
    transition:transform .7s cubic-bezier(.2,.9,.3,1), left .7s, top .7s;
    z-index:5;
}

.hearts{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:4; /* above lace */
}
.heart{
    position:absolute;
    width: clamp(56px, 14vw, 120px);
    max-width:28vw;
    transform:translateX(-10px) translateY(10px) scale(.86);
    opacity:0;
    filter:drop-shadow(0 6px 0 rgba(0,0,0,0.08));
    transition: transform .6s cubic-bezier(.2,.9,.3,1), opacity .45s ease, left .6s ease, top .6s ease, width .5s ease;
    z-index:4;
}

/* disable interaction when a heart has been crumbed */
.heart.crumbed{
    pointer-events:none;
    cursor:default;
    opacity:1;
}

/* crumb pieces that appear after a heart was opened */
.heart.crumbed{--crumb-color:#f6cbd6}
.heart.crumbed .crumb-piece{
    position:absolute;
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--crumb-color);
    box-shadow:0 2px 0 rgba(0,0,0,0.06);
    opacity:0;
    transform:scale(.6) translateY(0);
    transition:opacity .32s ease, transform .36s cubic-bezier(.2,.9,.3,1);
    pointer-events:none;
}
.heart.crumbed .crumb-piece.p1{
    left:-18px;
    top:58px;
    background:var(--bg);
    width:8px;
    height:8px;
}
.heart.crumbed .crumb-piece.p2{
    left:-8px;
    top:66px;
    background:var(--crumb-color);
    width:11px;
    height:11px;
}
.heart.crumbed .crumb-piece.p3{
    left:-26px;
    top:48px;
    background:var(--crumb-color);
    width:6px;
    height:6px;
}
.heart.crumbed .crumb-piece.show{
    opacity:1;
    transform:scale(1) translateY(-6px);
}

/* allow clicking hearts only after settled state */
.box-container.settled .hearts{
    pointer-events:auto;
}
.box-container.settled .heart{
    cursor:pointer;
}

/* modal overlay for closeups */
.modal{
    display:none;
    position:fixed;
    inset:0;
    z-index:30;
    align-items:center;
    justify-content:center;
}
.modal.open{
    display:flex;
}
.modal.no-backdrop .modal-backdrop{ 
    display:none; 
}
.modal.no-close .modal-close{ 
    display:none; 
}
.modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.35);
}
.modal-content{
    position:relative;
    background:transparent;
    border-radius:12px;
    padding:0;
    max-width:980px;
    width:92%;
    display:flex;
    align-items:center;
    justify-content:center
}
.modal-close{
    position:absolute;
    right:-20px;
    top:-20px;
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    box-shadow:0 6px 0 rgba(0,0,0,0.08);
    cursor:pointer;
    z-index:22
}
.modal-close img{
    width:20px;
    height:20px;
}
.modal-heart-wrap{
    background:transparent;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    position:relative;
}
.modal-heart-wrap img{
    width:520px;
    max-width:80vw;
    display:block;
}
.modal-close{
    position:absolute;
    right:40px;
    top:0px;
    background:#fff;
    border-radius:50%;
    width:48px;height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    box-shadow:0 6px 0 rgba(0,0,0,0.08);
    cursor:pointer;
    z-index:22;
}
.modal-close img{
    width:20px;
    height:20px;
}

/* initial stacked positions */
.heart.loveya{
    left:40%;
    top:24%
}
.heart.xoxo{
    left:46%;
    top:44%
}
.heart.urcute{
    left:54%;
    top:58%
}

/* open state: box rotates and moves to side; hearts slide out with stagger */
.box-container.open .box{ 
    transform:translate(-400px,-45px) rotate(120deg) scale(.98);
}
.box-container.open .heart{
    opacity:1; 
    transform:translateX(0) translateY(0) scale(1);
}
.box-container.open .heart.loveya{
    left:55%;
    top:40%;
    transition-delay:0.06s;
}
.box-container.open .heart.xoxo{
    left:30%;
    top:90%;
    transition-delay:0.12s;
}
.box-container.open .heart.urcute{
    left:80%; 
    top:100%; 
    transition-delay:0.18s;
}

/* after initial open animation finishes, move box away and center/enlarge hearts */
.box-container.settled{
    width:100%;
    max-width:100vw;
}
.box-container.settled .box{
    transform:translateY(-160%) scale(.7);
    opacity:0;
    transition: transform .6s ease, opacity .45s ease;
    pointer-events:none;
}
.box-container.settled .heart{
    width: clamp(100px, 36vw, 160px);
    transform:translate(-50%,-50%) scale(1.06);
    transition: transform .6s cubic-bezier(.2,.9,.3,1), left .6s ease, top .6s ease, width .5s ease;
}

.box-container.settled .heart.xoxo.enlarged{
    /* removed scaling effect to prevent the final heart from exploding */
    transform:translate(-50%,-50%) scale(1.06);
}
.box-container.settled .heart.loveya{
    left:-50%;
    top:50%;
    transition-delay:0s;
}
.box-container.settled .heart.xoxo{
    left:50%;
    top:50%;
    transition-delay:0s;
}
.box-container.settled .heart.urcute{
    left:150%;
    top:50%;
    transition-delay:0s;
}


@media (max-width:520px){
    .site-header h1{ 
        font-size: clamp(48px, 10vw, 88px); 
    }
    .header-heart{
        width:64px; 
        top:-18px; 
        left:8px;
    }
    .subtitle{
        font-size:20px;
        margin:0;
        position:relative;
        z-index:6; 
        text-align:center;
    }
    .box img{ 
        width: clamp(240px, 56vw, 320px); 
    }
    .subtitle--up{
        transform:translateY(100px);
        opacity:1;
    }

    #top-lace, #bottom-lace{ max-height:140px; width:100%; object-fit:cover; }

    /* spread hearts horizontally so they don't overlap on small screens */
    .box-container.open .heart.loveya{
         left:62%; 
         top:38%; 
        }
    .box-container.open .heart.xoxo{
        left:32%;
        top:78%;
    }
    .box-container.open .heart.urcute{
        left:82%;
        top:84%;
    }

    .box-container.settled .heart.loveya{
        left:6%;
        top:50%;
    }
    .box-container.settled .heart.xoxo{
        left:50%;
        top:50%;
    }
    .box-container.settled .heart.urcute{
        left:94%;
        top:50%;
    }
}

        
@media (max-width:900px){
    /* reduce the box shift  */
    .box-container.open .box{
        transform:translate(-24vw,-32px) rotate(100deg) scale(.95);
    }
    /* nudge heart targets so they don't overflow vertically */
    .box-container.open .heart.loveya{
        left:56%;
        top:36%;
    }
    .box-container.open .heart.xoxo{
        left:28%;
        top:82%;
    }
    .box-container.open .heart.urcute{
        left:78%;
        top:92%;
    }
    .box-container.settled .heart{ width: clamp(90px, 32vw, 140px); }
    .modal-heart-wrap img{ max-width:86vw; }
}

@media (max-width:800px){

    .box-container.settled .heart.loveya{
       left:-15%; 
        top:80%; 
    }
    .box-container.settled .heart.xoxo{  
         left:50%; 
        top:30%; 
    }
    .box-container.settled .heart.urcute{ 
        left:115%; 
        top:100%; 
    }

}

@media (max-width:500px){
    img.heart.xoxo.final{
        width: clamp(240px, 60vw, 400px);
        max-width:100%;
    }
    float-heart float-heart-1{
        left:12%;
        top:32%;
        width: 30px;
    }
     float-heart float-heart-1{
        left:12%;
        top:32%;
        width: 30px;
    }
    
    .float-heart.float-heart-2.show{
        position: fixed;
        z-index: 8;
        pointer-events: none;
        left: 0% !important;
        right: auto !important; 
        top: 36%;
    }
     .float-heart.float-heart-1.show{
        position: fixed;
        z-index: 8;
        pointer-events: none;
        left: 5% !important;
        right: auto !important; 
        top: 36%;
    }

    .float-heart.float-heart-6.show{
        position: fixed;
        z-index: 8;
        pointer-events: none;
        left: 40% !important;
        right: auto !important; 
        top: 0%;
    }

    #modalHeartImg
    {
        width: clamp(240px, 60vw, 400px);
        top: 30%;
        max-width:100%;
    }
    .site-header h1{ 
        padding-top:12px; 
    }
    .subtitle{
        margin: 0; 
    }
    .box-container{
         aspect-ratio: 1.4 / 1; 
        }
    .box-container.open .box{
        transform:translate(-18vw,-12px) rotate(90deg) scale(.92); 
    }
    .box-container.open .heart.loveya{ 
        left:56%; top:34%;
    }
    .box-container.open .heart.xoxo{ 
        left:32%;
        top:78%;
    }
    .box-container.open .heart.urcute{ 
        left:76%;
        top:86%; 
    }
    .box-container.settled .heart{ 
        width: clamp(80px, 40vw, 140px); 
    }
    .header-heart{ 
        width:36px; 
        top:-10px;
    }
    .modal-close{ 
        right:12px; 
        top:8px;
    }

    .box-container.settled .heart.loveya{
        left:50%; 
        top:0%; 
    }
    .box-container.settled .heart.xoxo{ 
        left:50%; 
        top:70%; 
    }
    .box-container.settled .heart.urcute{ 
        left:50%; 
        top:145%; 
    }
}
@media (max-width:320px){
    .box-container.settled .heart.loveya{
        left:50%; 
        top:0%; 
    }
    .box-container.settled .heart.xoxo{ 
        left:50%; 
        top:50%; 
    }
    .box-container.settled .heart.urcute{ 
        left:50%; 
        top:100%; 
    }
}