/*==================================================
Sri Balambika
==================================================*/


body{

    font-family:Georgia,serif;
    


    justify-content:center;


}


.page{

    position:relative;

    width:100%;

    max-width:100%;
    margin:0 auto;
    

}

.background{
    position:relative;
    

    width:100%;

    height:auto;

    border-radius:20px;

    align-items: center;

}

#Goddess-feet {
    display: block;
    margin: 0 auto;
    height: 350px;   /* Try 400px or 350px */
    width: 1000px;
    background-size: cover;
    background-position: center;
}

#lotusPlateImage{
    display: flex;
    justify-content: center;
}



/*------------------------------------------------*/

@media (max-width: 768px) {

    .controls{
        display: flex;
        width:100%;
        margin-top:100px;   /* Increase if needed */
    }
    
    #Goddess-feet {
    display: block;
    margin: 0 auto;
    height: 200px;   /* Try 400px or 350px */
    width: 600px;
    background-size: cover;
    background-position: center;
}

}

@media (min-width: 1080px) {

    .controls{
        display: flex;
        width:100%;
        margin-top:100px;   /* Increase if needed */
    }
    
    #Goddess-feet {
    display: block;
    margin: 0 auto;
    height: 350px;   /* Try 400px or 350px */
    width: 1000px;
    background-size: cover;
    background-position: center;
}

}


.controls{

    text-align:center;
    top:50%;
    margin-top:30px;

}

.controlsInner{

    width:100%;

}

/*------------------------------------------------*/

.progressArea{

    margin-bottom:10px;

}

#progressText{

    font-size:clamp(2rem,4vw,2.8rem);

    color:#8b1d43;

    font-weight:bold;

    text-align: center;
    margin-bottom:15px;

}


@media (max-width: 768px) {
#progressNumber{
    position:absolute;
    left:50%;
    top:29%;
    transform:translate(-50%,-50%);
    background:#fff8ec;
    border:2px solid #dca843;
    border-radius:20px;
    padding:2px 14px;
    font-weight:bold;
    color:#8b1d43;
    font-size:18px;
} 

.progressBar{

    width:100%;

    height:16px;

    border-radius:30px;

    overflow:hidden;
    
    display: block;
    margin: 0 auto;

    background:#eadab6;

}
}


@media (min-width:  1080px) {
#progressNumber{
    position:absolute;

    top:40%;
    left:50%;
    transform:translate(-50%,-50%);
    background:#fff8ec;
    border:2px solid #dca843;
    border-radius:20px;
    
    font-weight:bold;
    color:#8b1d43;
    font-size:18px;
} 

.progressBar{

    width:53%;

    height:16px;

    border-radius:30px;

    overflow:hidden;
    
    display: block;
    margin: 0 auto;

    background:#eadab6;

}
}





#progressFill{

    width:100%;

    height:100%;

    background:linear-gradient(to right,#b61c55,#dca843);

}

/*------------------------------------------------*/

.nameCard{

    margin-bottom:40px;
    text-align: center;

}

#sanskritName{

    min-height:100px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    font-size:clamp(2rem,5vw,3.4rem);

    line-height:1.4;

}

#englishName{

    min-height:70px;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    font-size:clamp(1.4rem,3vw,2rem);

}

#meaning{

    font-size:clamp(1.2rem,2vw,1.6rem);

    color:#5b4b39;
    text-align: center;

    margin-bottom:18px;

}

#meditationText{

    font-size:clamp(1rem,2vw,1.2rem);

    color:#7b6952;
        text-align: center;

    font-style:italic;

}

/*------------------------------------------------*/

.navButtons,

.actionButtons{

    display:flex;

    gap:16px;

    justify-content:center;

    margin-bottom:20px;
    

}

button{

    flex:0;

    padding:16px;

    border-radius:15px;

    border:2px solid #d7b45d;

    background:white;

    color:#652c1b;

    cursor:pointer;

    font-size:clamp(16px,2vw,20px);
  
    transition:.25s;
    
    

}

button:hover{

    transform:translateY(-2px);

    box-shadow:0 6px 14px rgba(0,0,0,.18);

}

.primary{

    background:#96284e;

    color:white;

}

/*------------------------------------------------*/


/* FLying lotus */

/* Container must be relative so absolute flowers don't fly off-screen */

html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevents unwanted horizontal scrolling */
}

/* 2. Remove fixed width limits on your layout wrappers */
.container, .wrapper, .main-content, #page-wrapper, main {
    width: 100%;
    max-width: 100%;
    margin-left: 0 ;
    margin-right: 0;
    padding-left: 0 ;
    padding-right: 0;
}


/* The animated lotus class */
.floating-lotus {
    position: absolute;
    width: 40px;  /* Adjust based on your asset size */
    height: 40px;
    pointer-events: none; /* Prevents blocking clicks */
    z-index: 10;
    animation: offerFlower 1.5s ease-out forwards;
}


.floating-lotus{

    position:absolute;

    width:60px;

    pointer-events:none;

    z-index:9999;

    transition:
        left 1.4s ease-in-out,
        top 1.4s ease-in-out,
        transform 1.4s ease-in-out;

}

/* Container safety rule to prevent unexpected layout shifts */
body {
    position: relative;
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

/* The dynamic animated lotus flower style */
/* The dynamic animated lotus flower style */
.offered-lotus {
    position: absolute; /* Fixed ensures accurate viewport coordinate tracking */
    width: 45px;     /* Matches the approximate scale of the lotuses on your plate */
    height: 45px;
    object-fit: contain;
    pointer-events: none; /* Prevents blocking future clicks */
    z-index: 9999;        /* Ensures it flies over text elements */
    animation: flyToFeet 1.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes flyToFeet {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
        opacity: 0;
    }
    15% {
        opacity: 1; /* Quickly becomes visible as it lifts from the plate */
    }
    85% {
        opacity: 1;
    }
    100% {
        /* Uses dynamic JavaScript variables to land exactly on target */
        transform: translate(var(--dx), var(--dy)) scale(0.6) rotate(15deg);
        opacity: 1; /* Softly blends into Her feet zone */
    }
}