/* ============================ */
/* APHRODITE SHRINE PAGE */
/* ============================ */

body{
background:radial-gradient(
circle at top,
#ffd6ec,
#ffe6f3 40%,
#fff0f7 100%
);
}



/* ============================ */
/* VENUS HEADER */
/* ============================ */

.venus-header{
position:relative;
display:flex;
justify-content:center;
align-items:center;
margin-bottom:50px;
}

.venus-symbol{

position:absolute;

font-size:300px;

color:#ff6fb3;

opacity:0.35;

filter:blur(1px);

text-shadow:
0 0 20px #ff6fb3,
0 0 40px #ff9ccf,
0 0 70px #ffc0da;

pointer-events:none;

animation:venusGlow 5s ease-in-out infinite;

}

@keyframes venusGlow{

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

50%{
opacity:0.5;
transform:scale(1.07);
}

100%{
opacity:0.3;
transform:scale(1);
}

}



/* ============================ */
/* ALTAR SECTIONS */
/* ============================ */

.section{

background:rgba(255,240,248,0.9);

border:2px solid #ff9ccf;

border-radius:30px;

box-shadow:
0 20px 40px rgba(255,100,180,0.2);

position:relative;

padding:40px;

margin-bottom:60px;

}



/* decorative altar corners */

.section::before{

content:"🌹";

position:absolute;

top:10px;
left:15px;

opacity:0.25;

font-size:30px;

}

.section::after{

content:"🐚";

position:absolute;

bottom:10px;
right:15px;

opacity:0.25;

font-size:30px;

}



/* ============================ */
/* ALTAR DIVIDER */
/* ============================ */

.altar-divider{

text-align:center;

font-size:34px;

margin:50px 0;

color:#ff4fa3;

letter-spacing:10px;

}



/* ============================ */
/* IMAGES */
/* ============================ */

.altar-images{

display:flex;

gap:25px;

justify-content:center;

flex-wrap:wrap;

margin-top:20px;

}

.altar-images img{

width:220px;

border-radius:25px;

border:3px solid #ffc0da;

box-shadow:
0 15px 35px rgba(255,100,180,0.25);

}



/* ============================ */
/* HEADINGS */
/* ============================ */

h1,h2{

color:#d81b60;

}



/* ============================ */
/* SIDEBAR */
/* ============================ */

.sidebar{

background:rgba(255,240,248,0.9);

border:2px solid #ff9ccf;

}



/* ============================ */
/* CANDLE */
/* ============================ */

.candle-container{

display:flex;

justify-content:center;

margin-top:30px;

}

.candle{

width:40px;
height:80px;

background:#ff9ccf;

border-radius:6px;

position:relative;

cursor:pointer;

box-shadow:
0 0 20px rgba(255,120,190,0.5);

}



/* flame */

.flame{

position:absolute;

top:-25px;
left:50%;

transform:translateX(-50%);

width:18px;
height:25px;

background:#ff4fa3;

border-radius:50%;

opacity:0;

box-shadow:
0 0 15px #ff4fa3,
0 0 30px #ff9ccf;

transition:opacity .3s ease;

}



/* active flame */

.flame.active{

opacity:1;

animation:flicker 1.2s infinite;

}



/* flame animation */

@keyframes flicker{

0%{transform:translateX(-50%) scale(1)}
50%{transform:translateX(-50%) scale(1.15)}
100%{transform:translateX(-50%) scale(1)}

}



/* ============================ */
/* CANDLE COUNTER */
/* ============================ */

.candle-count{

text-align:center;

margin-top:20px;

color:#d81b60;

font-style:italic;

}



/* ============================ */
/* OFFERING BUTTON */
/* ============================ */

.rose-offer{

background:#ff6fb3;

border:none;

padding:12px 22px;

border-radius:30px;

font-family:'Gloria Hallelujah', cursive;

font-size:1.1rem;

color:white;

cursor:pointer;

box-shadow:
0 10px 25px rgba(255,100,180,0.35);

transition:transform .2s ease, box-shadow .2s ease;

}

.rose-offer:hover{

transform:translateY(-2px);

box-shadow:
0 15px 35px rgba(255,100,180,0.45);

}