*{box-sizing:border-box}

body{
margin:0;
font-family:'Poppins',sans-serif;
background:#071027;
color:white;
text-align:center;
overflow-x:hidden;
}

section{padding:70px 20px}

button{
padding:12px 20px;
border:none;
border-radius:25px;
background:#ff6b81;
color:white;
font-weight:600;
cursor:pointer;
}

/* hero */

.hero{
min-height:90vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}

/* snack wheel */

.snack-subtext{
max-width:600px;
margin:10px auto 25px;
opacity:.8;
}

.wheel-wrapper{
position:relative;
width:400px;
margin:auto;
}

#wheelCanvas{
width:100%;
border-radius:50%;
transition:transform .3s;
}

.wheel-glow{
box-shadow:0 0 25px #ffd166,0 0 60px #ff6b81;
}

.pointer{
width:0;
height:0;
border-left:15px solid transparent;
border-right:15px solid transparent;
border-bottom:30px solid white;
position:absolute;
top:-10px;
left:50%;
transform:translateX(-50%);
z-index:10;
}

#snackText{
margin-top:15px;
font-size:20px;
color:#ffd166;
}

/* particles */

#wheelParticles{
position:absolute;
inset:0;
pointer-events:none;
}

.particle{
position:absolute;
width:6px;
height:6px;
background:#ffd166;
border-radius:50%;
animation:particle .9s ease-out forwards;
}

@keyframes particle{
0%{opacity:1;transform:scale(1)}
100%{opacity:0;transform:scale(3)}
}

/* food menu */

.food-menu{
display:none;
margin-top:30px;
background:white;
color:black;
padding:20px;
border-radius:12px;
max-width:400px;
margin-left:auto;
margin-right:auto;
}

.food-menu ul{
list-style:none;
padding:0;
}

.food-menu li{
font-weight:600;
margin:10px 0;
}

/* timeline */

.timeline-slideshow{
display:flex;
justify-content:center;
align-items:center;
gap:15px;
max-width:1000px;
margin:auto;
}

.timeline-frame{
position:relative;
width:80%;
max-width:900px;
height:600px;
display:flex;
align-items:center;
justify-content:center;
background:#0b1535; /* background behind smaller images */
border-radius:10px;
overflow:hidden;
}

.timeline-frame img{
max-width:100%;
max-height:100%;
width:auto;
height:auto;
object-fit:contain;
border-radius:10px;
transition:opacity .75s ease;
}

.timeline-frame img.fade-out{
opacity:0;
}

.timeline-caption{
position:absolute;
bottom:10px;
left:10px;
background:rgba(0,0,0,.6);
padding:6px 10px;
border-radius:6px;
font-size:14px;
}

.nav-btn{
font-size:30px;
background:none;
}

/* letter */

.letter{
max-width:600px;
margin:40px auto;
background:white;
color:black;
padding:30px;
border-radius:10px;
display:none;
}

/* celebration */

#celebration{
position:fixed;
inset:0;
pointer-events:none;
}

.heart{
position:absolute;
font-size:24px;
animation:floatUp 4s linear infinite;
}

@keyframes floatUp{
0%{transform:translateY(0);opacity:1}
100%{transform:translateY(-800px);opacity:0}
}

.confetti{
position:absolute;
width:8px;
height:8px;
background:#ff6b81;
animation:confettiFall 3s linear infinite;
}

@keyframes confettiFall{
0%{transform:translateY(-20px)}
100%{transform:translateY(900px)}
}

@media(max-width:768px){

.timeline-slideshow{flex-direction:column}
.nav-btn{font-size:28px}
.wheel-wrapper{width:300px}

}

/* food menu animation */

.food-menu{
display:none;
margin-top:30px;
background:white;
color:black;
padding:20px;
border-radius:12px;
max-width:400px;
margin-left:auto;
margin-right:auto;

opacity:0;
transform:translateY(30px) scale(.95);
transition:all .5s cubic-bezier(.2,.8,.2,1);
}

.food-menu.show{
opacity:1;
transform:translateY(0) scale(1);
}