:root{
  --red:#c62828;
  --gold:#f5c16c;
  --bg:#08140e;
}

*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'Poppins',sans-serif;
  background:linear-gradient(to bottom,#0b1d13,var(--bg));
  color:#fff;
  overflow-x:hidden;
}

/* Snow Full Page */
#snow{
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  z-index:0;
  pointer-events:none;
}

/* Sections */
section{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  position:relative;
  z-index:2;
}

/* Cards */
.card{
  max-width:900px;
  width:100%;
  background:linear-gradient(145deg,#123826,#0d2218);
  border-radius:30px;
  padding:40px 50px;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  opacity:0;
  transform:translateY(50px);
  transition: all 1s ease-out;
  position:relative;
  z-index:3;
}
.card.show{
  opacity:1;
  transform:translateY(0);
}

h1,h2{color:var(--gold)}

.hero{text-align:center}
.hero h1{
  font-family:'Great Vibes',cursive;
  font-size:64px;
  animation: floatHero 2s ease-in-out infinite;
}
.hero p{margin-top:20px;font-size:20px;opacity:.9}

@keyframes floatHero {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-15px); }
  100% { transform: translateY(0px); }
}

/* Message */
.message{font-size:18px;line-height:2}

/* Timeline */
.timeline{display:grid;gap:20px;margin-top:20px}
.moment{
  padding:18px 22px;
  border-left:3px solid var(--gold);
  background:rgba(255,255,255,.04);
  border-radius:16px;
  cursor:pointer;
  transition:.4s;
}
.moment:hover{background:rgba(255,255,255,.08)}
.hidden{
  margin-top:12px;
  font-size:15px;
  line-height:1.8;
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:.6s;
}
.moment.open .hidden{
  max-height:200px;
  opacity:1;
}
.hint{opacity:0.7;margin-bottom:25px;font-style:italic;text-align:left;}

/* Slider */
.slider{position:relative;overflow:hidden;border-radius:20px;margin-top:20px}
.slides{display:flex;transition:.6s}
.slides img{width:100%;flex-shrink:0;border-radius:15px}
.nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #0b1d13;
  border: none;
  color: #fff;
  font-size: 22px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 5px 20px rgba(0,0,0,0.3);
  transition: transform 0.3s ease, background 0.3s ease;
}
.nav:hover {
  transform: translateY(-50%) scale(1.1);
  background: var(--gold);
}
.prev{left:15px}
.next{right:15px}

/* Audio */
audio{display:none}
.audio-player{text-align:center}
.play-btn{
  width:80px;
  height:80px;
  border-radius:50%;
  border:none;
  background:linear-gradient(145deg,var(--red),var(--gold));
  color:#fff;
  font-size:30px;
  cursor:pointer;
}
.audio-player h2{
  margin-bottom: 20px
}
.wave{
  display:none;
  justify-content:center;
  gap:4px;
  margin-top:15px;
  height:30px;
}
.wave span{
  width:4px;
  background:var(--gold);
  animation:wave 1s infinite;
}
@keyframes wave{
  0%,100%{height:6px}
  50%{height:28px}
}

footer{text-align:center;padding:40px;opacity:.7;z-index:2;position:relative}

@media(max-width:768px){
  .hero h1{font-size:30px}
  .card{padding:30px}
  .nav {
  width: 25px;
  height: 25px;
  
}
.Moments h2{
  font-size: 20px;
}
}