@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Montserrat:wght@300;400;500;600&family=Great+Vibes&display=swap');

:root {
  --gold: #c9a96e;
  --gold-light: #e8d5a3;
  --gold-dark: #a68a4b;
  --cream: #faf8f4;
  --cream-dark: #f0ece4;
  --text-dark: #3a3a3a;
  --text-light: #6b6b6b;
  --white: #ffffff;
  --blush: #f5e6e0;
  --sage: #b5c4b1;
  --dusty-rose: #d4a5a5;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Montserrat', sans-serif;
  color: var(--text-dark);
  background: var(--cream);
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: 'Cormorant Garamond', serif; }

.script-font { font-family: 'Great Vibes', cursive; }

/* ===== ANIMATIONS ===== */
.reveal { opacity: 0; transform: translateY(60px); transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.reveal.active { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-80px); transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.reveal-left.active { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(80px); transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.reveal-right.active { opacity: 1; transform: translateX(0); }
.reveal-scale { opacity: 0; transform: scale(0.8); transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.reveal-scale.active { opacity: 1; transform: scale(1); }
.delay-1 { transition-delay: 0.15s !important; }
.delay-2 { transition-delay: 0.3s !important; }
.delay-3 { transition-delay: 0.45s !important; }
.delay-4 { transition-delay: 0.6s !important; }

/* ===== SECTION STYLES ===== */
.section-title { font-size: 3rem; font-weight: 300; color: var(--text-dark); margin-bottom: 0.5rem; letter-spacing: 2px; }
.section-subtitle { font-family: 'Great Vibes', cursive; font-size: 2rem; color: var(--gold); margin-bottom: 2rem; }
.section-divider { width: 80px; height: 1px; background: var(--gold); margin: 0 auto 2rem; position: relative; }
.section-divider::before { content: '♥'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--cream); padding: 0 10px; color: var(--gold); font-size: 1rem; }
.alt-bg .section-divider::before { background: var(--white); }

.alt-bg { background: var(--white); }

/* ===== 1. HERO ===== */
#hero {
  height: 100vh; min-height: 600px;
  background: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.5)), url('img/hero.png') center/cover no-repeat;
  display: flex; align-items: center; justify-content: center;
  text-align: center; color: var(--white); position: relative;
}
#hero::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 120px; background: linear-gradient(transparent, var(--cream));
}
.hero-content h3 { font-family: 'Montserrat', sans-serif; font-size: 1rem; letter-spacing: 8px; text-transform: uppercase; margin-bottom: 1rem; font-weight: 300; opacity: 0.9; }
.hero-content h1 { font-family: 'Great Vibes', cursive; font-size: 5rem; margin-bottom: 0.5rem; text-shadow: 2px 4px 10px rgba(0,0,0,0.3); }
.hero-content h2 { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 300; letter-spacing: 6px; margin-bottom: 2rem; }
.hero-date { font-size: 1.2rem; letter-spacing: 4px; border: 1px solid rgba(255,255,255,0.5); padding: 12px 30px; display: inline-block; }
.scroll-indicator { position: absolute; bottom: 140px; left: 50%; transform: translateX(-50%); z-index: 2; }
.scroll-indicator .mouse { width: 26px; height: 40px; border: 2px solid rgba(255,255,255,0.6); border-radius: 13px; position: relative; }
.scroll-indicator .mouse::before { content: ''; width: 4px; height: 8px; background: rgba(255,255,255,0.8); border-radius: 2px; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); animation: scrollAnim 2s infinite; }
@keyframes scrollAnim { 0% { opacity: 1; top: 8px; } 100% { opacity: 0; top: 24px; } }

/* ===== 2. GREETING ===== */
#greeting { padding: 100px 0; text-align: center; }
#greeting .greeting-text { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; line-height: 2; color: var(--text-light); max-width: 700px; margin: 0 auto; }
#greeting .greeting-text strong { color: var(--gold-dark); font-weight: 600; }

/* ===== 3. COUNTDOWN ===== */
#countdown { padding: 80px 0; background: linear-gradient(135deg, var(--gold-dark), var(--gold), var(--gold-light)); text-align: center; color: var(--white); }
#countdown .section-title { color: var(--white); }
#countdown .section-divider { background: rgba(255,255,255,0.5); }
#countdown .section-divider::before { background: var(--gold); color: var(--white); }
.countdown-wrapper { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; margin-top: 2rem; }
.countdown-item { background: rgba(255,255,255,0.15); backdrop-filter: blur(10px); border-radius: 16px; padding: 25px 20px; min-width: 120px; border: 1px solid rgba(255,255,255,0.2); }
.countdown-number { font-family: 'Cormorant Garamond', serif; font-size: 3.5rem; font-weight: 700; display: block; line-height: 1; }
.countdown-label { font-size: 0.8rem; letter-spacing: 3px; text-transform: uppercase; margin-top: 8px; opacity: 0.9; }

/* ===== 4. OUR STORY ===== */
#story { padding: 100px 0; }
.story-timeline { position: relative; max-width: 900px; margin: 0 auto; padding: 20px 0; }
.story-timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--gold-light); transform: translateX(-50%); }
.story-item { display: flex; align-items: center; margin-bottom: 60px; position: relative; }
.story-item::before { content: '♥'; position: absolute; left: 50%; transform: translateX(-50%); background: var(--cream); color: var(--gold); font-size: 1rem; z-index: 2; padding: 5px; }
.story-item .story-img { width: 45%; border-radius: 12px; overflow: hidden; box-shadow: 0 15px 40px rgba(0,0,0,0.1); }
.story-item .story-img img { width: 100%; height: 280px; object-fit: cover; transition: transform 0.5s; }
.story-item .story-img:hover img { transform: scale(1.05); }
.story-item .story-text { width: 45%; padding: 30px; }
.story-item .story-text h3 { font-size: 1.8rem; color: var(--gold-dark); margin-bottom: 0.3rem; }
.story-item .story-text .story-date { font-family: 'Great Vibes', cursive; font-size: 1.3rem; color: var(--dusty-rose); margin-bottom: 1rem; }
.story-item .story-text p { color: var(--text-light); line-height: 1.8; }
.story-item:nth-child(odd) { flex-direction: row; }
.story-item:nth-child(odd) .story-img { margin-right: 5%; }
.story-item:nth-child(odd) .story-text { margin-left: 5%; text-align: left; }
.story-item:nth-child(even) { flex-direction: row-reverse; }
.story-item:nth-child(even) .story-img { margin-left: 5%; }
.story-item:nth-child(even) .story-text { margin-right: 5%; text-align: right; }

/* ===== 5. GALLERY SWIPER ===== */
#gallery { padding: 100px 0; background: var(--white); }
.gallery-swiper { margin-top: 2rem; padding-bottom: 50px; }
.gallery-swiper .swiper-slide { border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.gallery-swiper .swiper-slide img { width: 100%; height: 450px; object-fit: cover; transition: transform 0.6s; }
.gallery-swiper .swiper-slide:hover img { transform: scale(1.05); }
.swiper-pagination-bullet-active { background: var(--gold) !important; }

/* ===== 6. CEREMONY ===== */
#ceremony { padding: 100px 0; position: relative; }
.ceremony-card { background: var(--white); border-radius: 16px; padding: 50px 40px; box-shadow: 0 15px 50px rgba(0,0,0,0.06); text-align: center; border: 1px solid rgba(201,169,110,0.2); position: relative; overflow: hidden; }
.ceremony-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--gold-light), var(--gold), var(--gold-light)); }
.ceremony-card .icon-circle { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, var(--gold-light), var(--gold)); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; font-size: 2rem; color: var(--white); }
.ceremony-card h3 { font-size: 2rem; color: var(--text-dark); margin-bottom: 1rem; }
.ceremony-card .detail-item { margin-bottom: 0.8rem; color: var(--text-light); font-size: 1.05rem; }
.ceremony-card .detail-item i { color: var(--gold); margin-right: 8px; width: 20px; }

/* ===== 7. DRESSCODE ===== */
#dresscode { padding: 100px 0; background: var(--white); text-align: center; }
.color-palette { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-top: 2rem; }
.color-swatch { width: 70px; height: 70px; border-radius: 50%; box-shadow: 0 5px 15px rgba(0,0,0,0.1); border: 3px solid var(--white); transition: transform 0.3s; cursor: pointer; }
.color-swatch:hover { transform: scale(1.15); }
.dresscode-text { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; color: var(--text-light); max-width: 600px; margin: 2rem auto 0; line-height: 1.8; }

/* ===== 8. SCHEDULE ===== */
#schedule { padding: 100px 0; }
.schedule-item { display: flex; align-items: center; padding: 25px 0; border-bottom: 1px solid rgba(201,169,110,0.2); }
.schedule-time { font-family: 'Cormorant Garamond', serif; font-size: 2rem; font-weight: 700; color: var(--gold); min-width: 120px; text-align: center; }
.schedule-icon { width: 50px; height: 50px; border-radius: 50%; background: var(--blush); display: flex; align-items: center; justify-content: center; margin: 0 25px; font-size: 1.2rem; color: var(--gold-dark); flex-shrink: 0; }
.schedule-info h4 { font-size: 1.3rem; margin-bottom: 0.3rem; }
.schedule-info p { color: var(--text-light); font-size: 0.95rem; }

/* ===== 9. QUOTE ===== */
#quote {
  padding: 120px 0; text-align: center;
  background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.6)), url('img/couple_walk.png') center/cover no-repeat fixed;
  color: var(--white);
}
#quote blockquote { font-family: 'Cormorant Garamond', serif; font-size: 2rem; font-style: italic; max-width: 700px; margin: 0 auto 1.5rem; line-height: 1.6; }
#quote cite { font-family: 'Great Vibes', cursive; font-size: 1.5rem; color: var(--gold-light); }

/* ===== 10. LOCATION ===== */
#location { padding: 100px 0; background: var(--white); }
.location-img { border-radius: 12px; overflow: hidden; box-shadow: 0 15px 40px rgba(0,0,0,0.1); }
.location-img img { width: 100%; height: 350px; object-fit: cover; }
.location-info { padding: 30px 0; }
.location-info h3 { font-size: 2rem; color: var(--text-dark); margin-bottom: 1rem; }
.location-info p { color: var(--text-light); line-height: 1.8; margin-bottom: 1rem; }
.location-info .btn-gold { display: inline-block; background: linear-gradient(135deg, var(--gold-dark), var(--gold)); color: var(--white); padding: 12px 30px; border-radius: 30px; text-decoration: none; font-size: 0.9rem; letter-spacing: 2px; text-transform: uppercase; transition: all 0.3s; }
.location-info .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(201,169,110,0.4); }

/* ===== 11. DETAILS SWIPER ===== */
#details { padding: 100px 0; }
.details-swiper .swiper-slide { text-align: center; padding: 40px 20px; }
.detail-card { background: var(--white); border-radius: 16px; padding: 40px 30px; box-shadow: 0 10px 40px rgba(0,0,0,0.06); border: 1px solid rgba(201,169,110,0.15); transition: transform 0.3s; }
.detail-card:hover { transform: translateY(-5px); }
.detail-card img { width: 100%; height: 200px; object-fit: cover; border-radius: 10px; margin-bottom: 1.5rem; }
.detail-card h4 { font-size: 1.4rem; margin-bottom: 0.5rem; color: var(--text-dark); }
.detail-card p { color: var(--text-light); font-size: 0.95rem; line-height: 1.6; }

/* ===== 12. RSVP ===== */
#rsvp { padding: 100px 0; background: linear-gradient(135deg, #2c2c2c, #1a1a1a); color: var(--white); }
#rsvp .section-title { color: var(--white); }
#rsvp .section-subtitle { color: var(--gold-light); }
#rsvp .section-divider { background: rgba(201,169,110,0.4); }
#rsvp .section-divider::before { background: #2c2c2c; color: var(--gold); }
.rsvp-form { max-width: 600px; margin: 0 auto; }
.rsvp-form .form-control { background: rgba(255,255,255,0.08); border: 1px solid rgba(201,169,110,0.3); color: var(--white); border-radius: 10px; padding: 14px 18px; font-family: 'Montserrat', sans-serif; font-size: 0.95rem; transition: all 0.3s; }
.rsvp-form .form-control:focus { background: rgba(255,255,255,0.12); border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,169,110,0.15); color: var(--white); }
.rsvp-form .form-control::placeholder { color: rgba(255,255,255,0.4); }
.rsvp-form label { color: var(--gold-light); font-size: 0.85rem; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px; }
.rsvp-form textarea { min-height: 120px; resize: vertical; }

.attendance-options { display: flex; gap: 15px; flex-wrap: wrap; margin-top: 0.5rem; }
.attendance-option { flex: 1; min-width: 140px; }
.attendance-option input[type="radio"] { display: none; }
.attendance-option label {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 20px 15px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(201,169,110,0.3); background: rgba(255,255,255,0.05);
  transition: all 0.3s; text-transform: none; letter-spacing: 0;
}
.attendance-option label i { font-size: 1.5rem; }
.attendance-option input[type="radio"]:checked + label {
  border-color: var(--gold); background: rgba(201,169,110,0.15);
  box-shadow: 0 0 20px rgba(201,169,110,0.2);
}
.attendance-option.yes input:checked + label { border-color: var(--sage); background: rgba(181,196,177,0.15); }
.attendance-option.no input:checked + label { border-color: var(--dusty-rose); background: rgba(212,165,165,0.15); }

.btn-submit {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  color: var(--white); border: none; padding: 16px 50px; border-radius: 30px;
  font-family: 'Montserrat', sans-serif; font-size: 1rem; letter-spacing: 3px;
  text-transform: uppercase; cursor: pointer; transition: all 0.3s; width: 100%; margin-top: 1.5rem;
}
.btn-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(201,169,110,0.4); }

.form-success { display: none; text-align: center; padding: 40px; }
.form-success i { font-size: 4rem; color: var(--gold); margin-bottom: 1rem; }
.form-success h3 { font-family: 'Cormorant Garamond', serif; font-size: 2rem; }
.form-success p { color: rgba(255,255,255,0.7); margin-top: 0.5rem; }

/* ===== FOOTER ===== */
footer { padding: 40px 0; background: #111; text-align: center; color: rgba(255,255,255,0.5); font-size: 0.85rem; }
footer .footer-names { font-family: 'Great Vibes', cursive; font-size: 2rem; color: var(--gold); margin-bottom: 0.5rem; }

/* ===== FLOATING HEARTS ===== */
.floating-hearts { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; overflow: hidden; }
.heart { position: absolute; font-size: 1rem; color: var(--dusty-rose); opacity: 0; animation: floatHeart 6s ease-in infinite; }
@keyframes floatHeart {
  0% { opacity: 0; transform: translateY(100vh) scale(0); }
  10% { opacity: 0.6; }
  90% { opacity: 0; }
  100% { opacity: 0; transform: translateY(-20vh) scale(1.5) rotate(15deg); }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .hero-content h1 { font-size: 3rem; }
  .hero-content h2 { font-size: 1.1rem; letter-spacing: 3px; }
  .section-title { font-size: 2.2rem; }
  .section-subtitle { font-size: 1.5rem; }
  .story-item, .story-item:nth-child(even) { flex-direction: column !important; }
  .story-item .story-img, .story-item .story-text { width: 100% !important; margin: 0 !important; }
  .story-item .story-text { text-align: center !important; padding: 20px 0; }
  .story-timeline::before { left: 20px; }
  .story-item::before { left: 20px; transform: none; }
  .countdown-item { min-width: 90px; padding: 18px 15px; }
  .countdown-number { font-size: 2.5rem; }
  .schedule-time { min-width: 80px; font-size: 1.5rem; }
  .schedule-icon { margin: 0 15px; }
  .gallery-swiper .swiper-slide img { height: 300px; }
  .ceremony-card { padding: 35px 25px; }
  #quote blockquote { font-size: 1.4rem; }
  .attendance-options { flex-direction: column; }
}