.heart-container {
    background-color: ivory;
    background-image: url('../background/floral.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    border-radius: 15px;

    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;

}

.heart-card {
    /*background-color: lightcoral;*/
    color: lightcoral;
    font-size: 50px;
    width: 300px;
    height: 300px;
    display: flex;
    overflow: hidden;
    font-family: Arial, sans-serif;
    justify-content: center;
    align-items: center;
    text-align: center;
    -webkit-mask-image: url('../img/svg/heart-svgrepo-com.svg'); /* Required for Chrome/Safari */
     mask-image: url('../img/svg/heart-svgrepo-com.svg');
     mask-repeat: no-repeat;
     mask-size: contain;
     mask-position: center;
     outline: 2px solid black;
     -webkit-mask-mode: alpha; /* Force alpha masking */
    mask-mode: alpha;
    transition: transform 0.3s ease-in-out, -webkit-mask-size 0.3s ease-in-out;
    cursor: pointer;

     -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%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-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%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");

     background: radial-gradient(circle at center,
                                    darkred 0%,     /* Outer edge color */
                                    deeppink 80%,      /* Transition color */
                                    lightpink 100%);      /* Inner color (the glow center) */
     /*-webkit-mask-mode: luminance;
     mask-mode: luminance;*/

}

.heart-card:hover {
    /* 2. Scale the entire div */
    transform: scale(1.1);

    /* 3. Optional: Make the mask shape itself grow inside the div */
    -webkit-mask-size: 110%;
    mask-size: 110%;
    color: white;
}


/* 4. Extra Credit: A continuous beating pulse animation */
@keyframes heartBeat {
    0% { transform: scale(1); }
    14% { transform: scale(1.1); }
    28% { transform: scale(1); }
    42% { transform: scale(1.1); }
    70% { transform: scale(1); }
}

.heart-card:active {
    animation: heartBeat 0.8s infinite;

}

.card-text {
    margin-bottom: 40%; /* Pushes text up by 20% of the div's height */
}

.heart-card p {
    color: transparent; /* Or opacity: 0; */
    transition: color 0.5s ease-in-out; /* Smoothly fades the color */

    /* Centering/Positioning from previous step */
    /*margin-bottom: 20%;*/

    opacity: 0;
       transform: translateY(40px);

       /* 2. Transition both opacity and transform */
       transition: opacity 0.4s ease-out, transform 0.4s ease-out;

       /* Keep your existing positioning nudge */
       margin-bottom: 40%;
}

.heart-card:hover p {
    color: white; /* Fades from transparent to white */
    opacity: 1;
     transform: translateY(0); /* Slides up to original position */
}