html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* 3D Envelope & Card Animation Styles */
.perspective-1000 {
  perspective: 1000px;
}

.preserve-3d {
  transform-style: preserve-3d;
}

.backface-hidden {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Envelope transitions */
#envelope {
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.8s;
}

/* On hover (only when closed) */
#envelope:not(.is-open):hover {
  transform: translateY(-8px);
}

/* Envelope open state translations to prevent mobile viewport overflow */
#envelope.is-open {
  transform: translateY(45px);
}
@media (min-width: 640px) {
  #envelope.is-open {
    transform: translateY(0);
  }
}

/* Flap container transitions */
#envelope-flap-container {
  transform-origin: top;
  transform-style: preserve-3d;
  z-index: 30;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), z-index 0s 0.4s;
}

#envelope.is-open #envelope-flap-container {
  transform: rotateX(180deg);
  z-index: 10;
}

/* Invitation card transitions */
#invitation-card {
  z-index: 15;
  opacity: 0.9;
  transform: translateY(0) translateZ(-2px) scale(0.98);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, z-index 0s 0.45s, opacity 0.8s;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}

#envelope.is-open #invitation-card {
  transform: translateY(-65%) translateZ(15px) scale(1.01);
  z-index: 40;
  opacity: 1;
  box-shadow: 0 20px 35px rgba(0,0,0,0.18), 0 10px 15px rgba(110,29,46,0.12);
  transition: transform 0.8s cubic-bezier(0.34, 1.45, 0.64, 1) 0.35s, z-index 0s 0.35s, opacity 0.8s 0.35s;
}

/* Desktop sizing adjustments for card pull out height */
@media (min-width: 640px) {
  #envelope.is-open #invitation-card {
    transform: translateY(-56%) translateZ(15px) scale(1.04);
  }
}

/* Custom scrollbar for the invitation card details */
.card-scrollbar::-webkit-scrollbar {
  width: 4px;
}
.card-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.card-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(189, 47, 75, 0.2);
  border-radius: 2px;
}
.card-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(189, 47, 75, 0.4);
}

/* Soft edge masking for Unsplash floral images to look like organic watercolor paintings */
.watercolor-mask-left {
  mask-image: radial-gradient(circle at 20% 20%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 45%, rgba(0,0,0,0) 72%);
  -webkit-mask-image: radial-gradient(circle at 20% 20%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 45%, rgba(0,0,0,0) 72%);
}

.watercolor-mask-right {
  mask-image: radial-gradient(circle at 80% 80%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 45%, rgba(0,0,0,0) 72%);
  -webkit-mask-image: radial-gradient(circle at 80% 80%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 45%, rgba(0,0,0,0) 72%);
}

/* Custom slider no-scrollbar rules */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Elegant gold shimmer styling */
.gold-shimmer {
  background: linear-gradient(
    135deg,
    #a76d28 0%,
    #dec282 50%,
    #a76d28 100%
  );
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: shimmer 4s linear infinite;
}

@keyframes shimmer {
  to {
    background-position: 200% center;
  }
}

@keyframes spin-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin-slow {
  animation: spin-slow 8s linear infinite;
}

/* Scroll Reveal Animation CSS styles */
.reveal {
  opacity: 0;
  transform: translateY(60px) scale(0.97);
  transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

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

/* ==========================================
   RSVP Modal Custom Premium Styles
   ========================================== */

/* Elegant spring-bounce transition for modal */
#rsvp-modal {
  transition: opacity 0.35s ease;
}

#rsvp-modal.hidden {
  display: none !important;
}

#rsvp-modal:not(.hidden) {
  display: flex !important;
}

#rsvp-modal .relative {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
}

#rsvp-modal.opacity-0 .relative {
  transform: translateY(20px) scale(0.96);
  opacity: 0;
}

#rsvp-modal.opacity-100 .relative {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Custom scrollbar for scrollable modal content on Windows/Chrome */
.card-scrollbar::-webkit-scrollbar {
  width: 5px;
}
.card-scrollbar::-webkit-scrollbar-track {
  background: rgba(120, 24, 40, 0.02);
  border-radius: 8px;
}
.card-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(197, 160, 89, 0.3);
  border-radius: 8px;
}
.card-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(197, 160, 89, 0.6);
}

/* Style for selected attendance option cards and indicator */
.rsvp-opt-card {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.rsvp-opt-card.selected-yes {
  border-color: #781828 !important; /* Burgundy */
  background-color: rgba(120, 24, 40, 0.04) !important;
}
.rsvp-opt-card.selected-yes .rsvp-circle-indicator {
  border-color: #781828 !important;
  background-color: #781828 !important;
}
.rsvp-opt-card.selected-yes .rsvp-circle-indicator svg {
  transform: scale(1) !important;
  opacity: 1 !important;
}
.rsvp-opt-card.selected-yes .option-label-text {
  color: #781828 !important;
  font-weight: 600 !important;
}

.rsvp-opt-card.selected-no {
  border-color: #781828 !important; /* Burgundy */
  background-color: rgba(120, 24, 40, 0.04) !important;
}
.rsvp-opt-card.selected-no .rsvp-circle-indicator {
  border-color: #781828 !important;
  background-color: #781828 !important;
}
.rsvp-opt-card.selected-no .rsvp-circle-indicator svg {
  transform: scale(1) !important;
  opacity: 1 !important;
}
.rsvp-opt-card.selected-no .option-label-text {
  color: #781828 !important;
  font-weight: 600 !important;
}

.rsvp-opt-card.unselected {
  border-color: #e2e8f0 !important; /* slate-200 */
  background-color: #ffffff !important;
  opacity: 0.75;
}
.rsvp-opt-card.unselected .rsvp-circle-indicator {
  border-color: #cbd5e1 !important; /* slate-300 */
  background-color: #ffffff !important;
}
.rsvp-opt-card.unselected .rsvp-circle-indicator svg {
  transform: scale(0) !important;
  opacity: 0 !important;
}
.rsvp-opt-card.unselected .option-label-text {
  color: #334155 !important; /* slate-700 */
  font-weight: 500 !important;
}

/* Elegant slow pulsing glow and floating effect for floating RSVP button */
@keyframes rsvp-float-glow {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 10px 30px -5px rgba(197, 160, 89, 0.5), 0 0 0 0 rgba(197, 160, 89, 0.25);
  }
  50% {
    transform: translateY(-8px);
    box-shadow: 0 18px 30px -5px rgba(197, 160, 89, 0.7), 0 0 0 6px rgba(197, 160, 89, 0);
  }
}

.rsvp-pulse-button {
  animation: rsvp-float-glow 3s ease-in-out infinite;
  will-change: transform, box-shadow;
}

/* Pause the animation on hover and apply scale for interaction feedback */
.rsvp-pulse-button:hover {
  animation-play-state: paused;
  transform: translateY(-4px) scale(1.02) !important;
}

.rsvp-pulse-button:active {
  transform: translateY(-2px) scale(0.97) !important;
}

/* Elegant slow float for footer RSVP button */
@keyframes footer-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

.footer-btn-float {
  animation: footer-float 3.5s ease-in-out infinite;
  will-change: transform;
}

.footer-btn-float:hover {
  animation-play-state: paused;
  transform: translateY(-3px) scale(1.02) !important;
}

.footer-btn-float:active {
  transform: translateY(-1px) scale(0.97) !important;
}

.header-bg-custom {
  background-image: url('https://res.cloudinary.com/dei5euvmf/image/upload/f_auto,q_auto/thiep_xafk5k');
  background-size: cover;
  background-position: center center; /* Centered on all screens */
  background-repeat: no-repeat;
}

@media (min-width: 640px) {
  .header-bg-custom {
    background-position: center center;
  }
}

@media (min-width: 768px) {
  .header-bg-custom {
    background-position: center center;
  }
}

@media (min-width: 1024px) {
  .header-bg-custom {
    background-position: 25% center;
  }
}

@media (min-width: 1280px) {
  .header-bg-custom {
    background-position: 20% center;
  }
}

/* Custom gallery background with textured pattern */
.gallery-bg-custom {
  background-image: url('https://res.cloudinary.com/dei5euvmf/image/upload/f_auto,q_auto/N%E1%BB%81n_c%C3%B3_h%E1%BB%8Da_ti%E1%BA%BFt_wnesn4');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Custom 3D Coverflow gallery styling */
#gallery-container {
  perspective: 1200px;
  transform-style: preserve-3d;
}

.gallery-card-3d {
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease, filter 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Gentle Breathing Animation for Cover Invitation Card */
@keyframes breathing {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.025);
  }
}

.animate-breathing {
  animation: breathing 4.5s ease-in-out infinite;
  will-change: transform;
}