/* ============================================================
   Custom CSS cho Web Thiệp Cưới — Việt Hưng & Ngọc Quỳnh
   Theme: Rose Gold + Champagne + White
   Mobile-first, Tailwind CDN bổ sung
   ============================================================ */

/* ===== Scroll Behavior ===== */
html {
  scroll-behavior: smooth;
}

/* ===== Animations ===== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(183, 110, 121, 0.4); }
  50%      { box-shadow: 0 0 0 15px rgba(183, 110, 121, 0); }
}

@keyframes count-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%      { transform: translateY(-10px); }
}

/* ===== Scroll Reveal ===== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Countdown Card ===== */
.countdown-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.countdown-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(183, 110, 121, 0.15);
}

.countdown-number {
  animation: count-pulse 2s ease-in-out infinite;
}

/* Thay đổi animation cho từng ô lệch pha */
.countdown-card:nth-child(2) .countdown-number {
  animation-delay: 0.5s;
}

.countdown-card:nth-child(3) .countdown-number {
  animation-delay: 1s;
}

.countdown-card:nth-child(4) .countdown-number {
  animation-delay: 1.5s;
}

/* ===== Navbar Scrolled ===== */
#navbar.scrolled {
  box-shadow: 0 2px 20px rgba(0,0,0,0.1);
}

/* ===== Gallery ===== */
.gallery-item img {
  transition: transform 0.5s ease;
}

.gallery-item:hover img {
  transform: scale(1.1);
}

/* ===== Lightbox ===== */
#lightbox.show {
  display: flex;
}

#lightbox.fade-in {
  animation: fadeIn 0.3s ease;
}

/* ===== RSVP Form ===== */
#rsvp-form input:focus,
#rsvp-form select:focus,
#rsvp-form textarea:focus {
  box-shadow: 0 0 0 3px rgba(183, 110, 121, 0.15);
}

/* Trạng thái validation */
#rsvp-form input.invalid,
#rsvp-form textarea.invalid {
  border-color: #ef4444;
}

#rsvp-status.success {
  color: #10b981;
}

#rsvp-status.error {
  color: #ef4444;
}

/* ===== Parallax (disabled trên mobile để tránh giật) ===== */
@media (max-width: 768px) {
  #hero .bg-fixed {
    background-attachment: scroll;
  }
}

/* ===== Decorative Elements ===== */
.wedding-flower {
  animation: float 3s ease-in-out infinite;
}

/* ===== Custom Scrollbar ===== */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #fdf6f0;
}

::-webkit-scrollbar-thumb {
  background: #d4a574;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #b76e79;
}

/* ===== Selection Color ===== */
::selection {
  background: rgba(183, 110, 121, 0.2);
  color: #b76e79;
}

/* ===== Responsive Typography ===== */
@media (max-width: 375px) {
  h1 {
    font-size: 2.5rem;
  }

  .countdown-card {
    padding: 0.75rem 0.5rem;
  }

  .countdown-card .countdown-number {
    font-size: 2rem;
  }
}

/* ===== Loading Lazy Fade-in cho ảnh gallery ===== */
.gallery-item img {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.gallery-item img.loaded {
  opacity: 1;
}

/* ===== Mobile Menu Link ===== */
.mobile-link {
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.mobile-link:active {
  padding-left: 8px;
}