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

body {
    background-color: #fff5f7; 
    background-image: url(download.jpg);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: sans-serif;
    overflow: hidden;
    user-select: none; 
}
@font-face {
   font-family: "Vividly-Regular";
  /* Replace 'vividly.woff2' with your actual filename */
  src: url('vividly.woff2') format('woff2'), 
       url('Vividly-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* This helps it load faster on mobile! */
}

.container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

/* --- The Heart Box --- */
#heart-box {
    position: relative;
    width: 320px; 
    height: 280px; 
    z-index: 10;
}

/* --- Door Fix: No zoom, uses contain for perfect shapes --- */
.door {
    position: absolute;
    top: 0;
    width: 50.5%; /* Slightly over 50% to overlap */
    height: 100%;
    transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
    overflow: hidden;
    z-index: 20; 
    cursor: pointer;
    /* CRUCIAL FIX: Hides the overlapping gap perfectly */
}

.door img{
    width:100%;
    height:100%;
    object-fit:fill;
    display:block;
}


.left-door { 
    left: 0; 
    transform-origin: left center;
    /* Pulls it slightly right to hide the seam */
    margin-right: -1px; 
}

.right-door { 
    right: 0; 
    transform-origin: right center;
    /* Pulls it slightly left to hide the seam */
    margin-left: -1px; 
}

/* --- Simple Door Open (Fixed stacking) --- */
#heart-box.open .left-door {
    transform: perspective(800px) rotateY(-175deg);
}

#heart-box.open .right-door {
    transform: perspective(800px) rotateY(175deg);
}

/* --- The Inner Box --- */
#inner-box {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s ease-in-out 0.4s; 
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10; 
}

#heart-box.open #inner-box {
    opacity: 1;
    pointer-events: auto;
}

.box-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1;
    object-fit: fill; /* Keep the inner frame perfect too */
}

/* --- Inner Items (Default) --- */
.item {
    position: absolute;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 30; 
}

.item:hover {
    transform: scale(1.05); 
}

.item img {
    width: 100%; height: 100%;
    object-fit: contain;
}

/* --- 🌟 INDIVIDUAL ITEM STYLING (EDIT THIS PART) 🌟 --- */
/* Use top, left, width, height, and transform: rotate() to place them perfectly! */

.item-1 {
    top: 15%;
    left: 15%;
    width: 60px;
    height: 70px;
    transform: rotate(-5deg);
}

.item-2 {
    top: 20%;
    right: 15%;
    width: 60px;
    height: 70px;
    transform: rotate(10deg);
}

.item-3 {
    top: 25%;
    left: 35%;
    width: 70px;
    height: 80px;
    transform: rotate(0deg);
}

.item-4 {
    bottom: 42%;
    left: 50%;
    width: 70px;
    height: 70px;
    transform: rotate(-10deg);
}

.item-5 {
    bottom: 28%;
    left: 23%;
    width: 75px;
    height: 75px;
    transform: rotate(-10deg);
}

.item-6 {
    bottom: 23%;
    left: 40%;
    width: 70px;
    height: 70px;
    transform: rotate(-5deg);
}

/* --- SOFT SNOW-LIKE SPARKLE --- */
#sparkle-container {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 100;
    overflow: hidden;
}

.soft-sparkle {
    position: absolute;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(255, 182, 193, 0.3);
    animation: snowFall 2.5s ease-in forwards;
}

@keyframes snowFall {
    0% { transform: translateY(-50px) scale(0.5) rotate(0deg); opacity: 1; }
    100% { transform: translateY(400px) scale(1.2) rotate(360deg); opacity: 0; }
}

/* --- DRAGGABLE & ZOOMABLE FLOATING PREVIEW --- */
#floating-preview {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(255, 182, 193, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    z-index: 50;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s;
    opacity: 0;
    border: 1px solid rgba(255, 182, 193, 0.3);
    cursor: grab;
    touch-action: none;
}

#floating-preview.visible {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

#floating-preview:active { cursor: grabbing; }

#preview-wrapper {
    width: 150px; height: 200px;
    display: flex; justify-content: center; align-items: center;
    overflow: hidden;
}

#preview-image {
    width: 100%; height: 100%;
    object-fit: contain;
    transition: transform 0.2s ease-out;
}

/* --- CUTE MINI DOWNLOAD BUTTON --- */
.mini-download-btn {
    background: rgba(255, 153, 170, 0.2);
    color: #ffffff; border: 1px solid #ffb9db;
    padding: 6px 15px; border-radius: 30px;
    font-size: 12px; font-weight: bold;
    font-family: "Vividly-Regular";
    cursor: pointer; transition: all 0.3s;
}

.mini-download-btn:hover { background: #ffbadc; color: #ffffff; }

.close-preview {
    position: absolute; top: 10px; right: 15px;
    font-size: 14px; color: #ffb6d9;
        font-family: "Vividly-Regular";

    cursor: pointer; transition: transform 0.2s;
}
.close-preview:hover { transform: rotate(90deg); }








@media (max-width:390px){

    #heart-box{
        transform:scale(.75);
    }

}