:root{
  --bg: #f0f9ff;
  --bg-gradient: linear-gradient(180deg, #e0f2fe 0%, #ffffff 100%);
  --card: #ffffff;
  --text: #1e293b;
  --accent: #3b82f6;
  --accent-glow: rgba(59, 130, 246, 0.4);
  --muted: #64748b;
  --glass: rgba(255,255,255,0.8);
  --line-color: rgba(59, 130, 246, 0.3);
}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial}
body{background:#f0f9ff;color:var(--text);}

.hero{
  position: relative;
  padding: 100px 20px;
  text-align: center;
  background-size: cover;
  background-position: center;
  color: #fff;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1;
}
.hero h1, .hero .sub, .hero .start-hint {
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.hero h1{font-size:2.5rem;margin:0;color:#fff}
.hero .sub{color:rgba(255,255,255,0.9);margin-top:10px;font-size: 1.2rem;}
.start-hint{margin-top:20px;font-size:0.9rem;color:rgba(255,255,255,0.8)}

/* Music toggle */
.music-toggle{position:fixed;right:18px;top:18px;z-index:60;background:var(--glass);border:1px solid rgba(255,255,255,0.5);color:var(--accent);padding:10px 12px;border-radius:999px;backdrop-filter: blur(6px);cursor:pointer;box-shadow:0 4px 12px rgba(59,130,246,0.15)}
.music-toggle.playing{background:var(--accent);color:#fff}

/* Global Section Styling */
section {
  width: 100%;
  padding: 60px 20px;
  margin: 0;
}

/* Alternating Backgrounds */
.carousel-section { background-color: #ffffff; }
.timeline-section { background-color: #f0f9ff; }
.timer-section { background-color: #ffffff; }
.map-section { background-color: #f0f9ff; }

/* Centering Content */
.carousel-section > *,
.timeline-section > *,
.timer-section > *,
.map-section > * {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* Carousel */
.carousel-section{
  position:relative;
  /* padding/margin handled by global section rule */
}
.carousel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:12px;scroll-behavior:smooth;scrollbar-width:none;}
.carousel::-webkit-scrollbar{display:none;}

.slide{
  min-width:85vw;
  height:52vh;
  flex:0 0 85vw;
  scroll-snap-align:center;
  position:relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Image styling inside slide */
.slide img {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(59,130,246,0.15);
  object-fit: cover;
}

/* Desktop adjustment */
@media (min-width: 768px) {
  .slide {
    min-width: 600px;
    flex: 0 0 600px;
  }
}

.nav{position:absolute;top:50%;transform:translateY(-50%);background:var(--glass);border:0;color:var(--accent);padding:10px 14px;border-radius:50%;cursor:pointer;z-index:50;box-shadow:0 4px 12px rgba(0,0,0,0.05)}
.nav:hover{background:#fff}
.nav.prev{left:40px}
.nav.next{right:40px}
.carousel-caption{text-align:center;margin-top:12px;color:var(--text);font-weight:600;font-size:1.1rem;min-height:1.5em}

/* Timeline */
.timeline-section h2{text-align:center;margin-bottom:24px;color:var(--text)}
.timeline{display:flex;flex-direction:column;gap:24px;position:relative;padding-left:32px; max-width: 700px;}
/* The vertical line */
.timeline::before{content:'';position:absolute;left:7px;top:10px;bottom:10px;width:2px;background:var(--line-color);border-radius:2px}

.timeline-item{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;background:var(--card);padding:20px;border-radius:16px;opacity:0;transform:translateY(24px) scale(0.995);transition:all .6s cubic-bezier(.2,.9,.2,1);box-shadow:0 4px 20px rgba(148, 163, 184, 0.15);position:relative;border:1px solid rgba(255,255,255,0.8)}
.timeline-item.visible{opacity:1;transform:none}
.timeline-item:hover{transform:translateY(-5px) scale(1.01);box-shadow:0 12px 30px rgba(59,130,246,0.2);border-color:var(--accent-glow);z-index:10}

/* The glowing dot */
.timeline-item::before{
  content:'';position:absolute;left:-31px;top:24px;
  width:12px;height:12px;border-radius:50%;
  background:var(--accent);
  border:2px solid #fff;
  box-shadow:0 0 0 2px var(--accent-glow), 0 0 10px var(--accent);
  z-index:2;
}

/* Special Birthday Item */
/* Removed static yellow style, now handled by .future class */
.gift-container{display:flex;justify-content:space-between;align-items:center}
.gift-box{font-size:2rem;cursor:pointer;transition:transform 0.3s;animation:shake 3s infinite}
.gift-box:hover{transform:scale(1.2) rotate(10deg)}
@keyframes shake{0%,100%{transform:rotate(0)} 10%,30%,50%,70%,90%{transform:rotate(-5deg)} 20%,40%,60%,80%{transform:rotate(5deg)}}

.timeline-item time{display:block;color:var(--accent);font-weight:600;font-size:0.85rem;margin-bottom:6px}
.timeline-item h3{margin:0 0 6px 0;color:var(--text)}
.timeline-item p{margin:0;color:var(--muted);line-height:1.5}

/* Timer */
.timer-section h2{color:var(--text);margin-bottom:24px;text-align:center;}
.timer-grid{display:flex;justify-content:center;gap:12px;flex-wrap:wrap; max-width: 600px; margin: 0 auto;}
.timer-box{background:var(--card);padding:16px;border-radius:12px;min-width:80px;box-shadow:0 4px 16px rgba(59,130,246,0.15);border:1px solid rgba(255,255,255,0.8);flex:1}
.timer-val{display:block;font-size:1.8rem;font-weight:700;color:var(--accent);line-height:1.2}
.timer-label{font-size:0.85rem;color:var(--muted)}

/* Footer */
.page-footer{text-align:center;padding:40px 20px;color:var(--muted);font-size:0.9rem;margin-top:0;border-top:1px solid rgba(59,130,246,0.1); background: #ffffff;}
.end-mark{font-size:1.5rem;color:var(--accent);margin-top:12px;opacity:0.6}

/* Modal & Postcard */
.modal{position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:1000;display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity 0.3s}
.modal.hidden{opacity:0;pointer-events:none}
.modal-content{background:#fff;width:90%;max-width:500px;padding:40px;border-radius:8px;box-shadow:0 20px 50px rgba(0,0,0,0.5);position:relative;transform:scale(1);transition:transform 0.3s}
.modal.hidden .modal-content{transform:scale(0.9)}

.postcard{background:#fff url('https://www.transparenttextures.com/patterns/paper.png');color:#333;font-family:'Georgia', serif;line-height:1.8}
.postcard h2{margin-top:0;color:var(--accent)}
.postcard .sign{text-align:right;margin-top:30px;font-style:italic;color:var(--muted)}

.flip-btn{position:absolute;bottom:20px;right:20px;background:var(--accent);color:#fff;border:0;padding:8px 16px;border-radius:4px;cursor:pointer;font-size:0.9rem;transition:background 0.2s}
.flip-btn:hover{background:#2563eb}

.close-modal{position:absolute;top:20px;right:20px;background:transparent;border:0;color:#fff;font-size:2rem;cursor:pointer;z-index:1002}

/* Fireworks Canvas */
.fireworks{position:absolute;inset:0;width:100%;height:100%;z-index:1001;pointer-events:none}
.fireworks.hidden{display:none}

/* Dynamic Birthday Dot */
#birthday-item.future::before{
  background: #facc15; /* Yellow */
  box-shadow:0 0 0 2px rgba(250, 204, 21, 0.4), 0 0 10px #facc15;
}
/* Reset to default blue if not future */
#birthday-item:not(.future)::before{
  background:var(--accent);
  box-shadow:0 0 0 2px var(--accent-glow), 0 0 10px var(--accent);
}

/* small screens adjustments */
@media(min-width:900px){
  .slide{min-width:65vw;height:60vh}
}

/* hearts */
.heart{position:absolute;pointer-events:none;transform:translate(-50%,-50%) scale(.9);animation:pop 900ms ease-out forwards}
@keyframes pop{0%{opacity:1;transform:translate(-50%,-50%) scale(.9)}100%{opacity:0;transform:translate(-50%,-300%) scale(1.6)}}

/* accessibility focus */
.nav:focus,.music-toggle:focus{outline:2px solid rgba(255,255,255,0.12);outline-offset:2px}

/* Map Section */
.map-section{max-width:900px;margin:40px auto;padding:0 20px}
.map-section h2{text-align:center;color:var(--text);margin-bottom:24px}
#map{height:500px;width:100%;border-radius:16px;box-shadow:0 8px 30px rgba(59,130,246,0.15);z-index:1}

/* Custom Map Markers */
.custom-pin{background:transparent;border:none}
.pin-inner{width:100%;height:100%;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,0.2);display:flex;align-items:center;justify-content:center;font-size:12px}
.pin-visited{background:var(--accent);color:#fff}
.pin-birth{background:#facc15;color:#fff} /* Yellow for birth */
.pin-pulse{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;border-radius:50%;animation:pin-pulse 2s infinite;z-index:-1}
.pin-visited .pin-pulse{background:rgba(59,130,246,0.4)}
.pin-birth .pin-pulse{background:rgba(250,204,21,0.4)}

/* Timeline Gallery Button */
.timeline-item{display:block;position:relative;overflow:visible} /* Reset flex and ensure overflow visible for button */
.timeline-content{width:100%}

.gallery-btn{
  position:absolute;
  right:0; /* Start flush with edge */
  top:50%;
  width:32px;
  height:auto;
  min-height:80px;
  padding:12px 0;
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:0 8px 8px 0;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
  font-weight:600;
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 4px;
  box-shadow:4px 0 10px rgba(0,0,0,0.1);
  transition:all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-origin:left center;
  transform:translateY(-50%) perspective(600px) rotateY(-90deg); /* Folded behind */
  z-index:-1;
  opacity:0;
}

.timeline-item:hover .gallery-btn{
  transform:translateY(-50%) perspective(600px) rotateY(0deg); /* Unfold */
  right:-32px; /* Move out */
  opacity:1;
  box-shadow:6px 0 15px rgba(59,130,246,0.3);
}

.gallery-btn:hover{
  background:#2563eb;
}

/* Gallery Modal */
.gallery-container{position:relative;width:90%;max-width:800px;height:70vh;background:#000;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 50px rgba(0,0,0,0.5)}
.gallery-slide{flex:1;display:flex;align-items:center;justify-content:center;background:#000;overflow:hidden}
.gallery-media{max-width:100%;max-height:100%;object-fit:contain}
.gallery-caption{background:rgba(0,0,0,0.7);color:#fff;padding:12px;text-align:center;font-size:1rem}
#gallery-prev, #gallery-next{background:rgba(255,255,255,0.2);padding:16px;font-size:1.5rem}
#gallery-prev:hover, #gallery-next:hover{background:rgba(255,255,255,0.4)}
#close-gallery{color:#fff;top:10px;right:10px;background:rgba(0,0,0,0.5);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem}