/* ==========================================================================
   STYLE.CSS — Structural Styles (all values reference variables.css)
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.6;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--color-bg);
  background-image: var(--bg-texture-paper);
  background-repeat: repeat;
  background-size: 400px auto;
  color: var(--color-text);
  overflow-x: hidden;
}

/* ===== BASE CONTAINERS ===== */
.container {
  width: 100%;
  max-width: var(--max-width-content);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--section-padding-x);
  padding-right: var(--section-padding-x);
}

.container-wide {
  width: 100%;
  max-width: var(--max-width-wide);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--section-padding-x);
  padding-right: var(--section-padding-x);
}

/* ===== TYPOGRAPHY UTILITIES ===== */
.script-title {
  font-family: var(--font-script);
  font-size: var(--fs-script-hero);
  color: var(--color-wedding-red);
  line-height: 1.2;
  text-align: center;
  font-weight: var(--fw-regular);
}

.heading-section {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  color: var(--color-primary);
  text-align: center;
  margin-bottom: var(--space-md);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
}

.tagline {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-warm-brown);
  text-align: center;
  margin-top: var(--space-sm);
  margin-bottom: var(--space-lg);
  letter-spacing: var(--ls-normal);
  text-transform: uppercase;
}

.date-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-marigold-deep);
  border-top: var(--border-thin);
  border-bottom: var(--border-thin);
  padding: var(--space-xs) var(--space-md);
  margin-top: var(--space-sm);
}

/* ==========================================================================
   REALISTIC 3D ROYAL WEDDING ENVELOPE LOADING SCREEN
   ========================================================================== */
.envelope-loader-screen {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, #271713 0%, #150A07 55%, #080302 100%);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 0.85s cubic-bezier(0.4, 0, 0.2, 1), transform 0.85s cubic-bezier(0.4, 0, 0.2, 1);
}

.envelope-loader-screen.hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(1.08);
}

/* Envelope 3D Stage */
.envelope-wrapper {
  position: relative;
  z-index: 2;
  perspective: 1400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.envelope-cordial-tag {
  font-family: var(--font-heading);
  font-size: clamp(14px, 2.2vw, 17px);
  color: #F7EFE1;
  letter-spacing: clamp(3px, 0.6vw, 5px);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  margin: 0 0 clamp(16px, 3.5vw, 26px) 0;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  opacity: 0.95;
}

.envelope-stage {
  position: relative;
  width: clamp(310px, 92vw, 540px);
  aspect-ratio: 16 / 9;
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.65));
}

.envelope-wrapper:hover .envelope-stage {
  transform: translateY(-6px) scale(1.02);
}

/* Envelope Back Background */
.envelope-real-back {
  position: absolute;
  inset: 0;
  background-color: #EDE2CE;
  background-image: var(--bg-texture-paper);
  background-repeat: repeat;
  background-size: 300px auto;
  border-radius: 4px;
  z-index: 1;
  transform: translateZ(0px);
  box-shadow: inset 0 10px 25px rgba(41, 37, 31, 0.2);
}

/* Letter Inside (Tucked neatly inside the pocket, in front of open flap) */
.envelope-letter {
  position: absolute;
  top: 14%;
  left: 9%;
  width: 82%;
  height: 76%;
  background-color: #FFFDF9;
  background-image: var(--bg-texture-paper);
  background-repeat: repeat;
  background-size: 250px auto;
  border: 1.5px solid rgba(184, 138, 50, 0.55);
  border-radius: 4px;
  z-index: 2;
  transform: translateY(0) translateZ(4px);
  padding: clamp(8px, 1.8vw, 14px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  transition: transform 1.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 1.3s ease;
}

.letter-border {
  width: 100%;
  height: 100%;
  border: 1px dashed rgba(184, 138, 50, 0.45);
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.letter-top-tag {
  font-family: var(--font-heading);
  font-size: clamp(10px, 1.4vw, 12px);
  color: var(--color-warm-brown);
  letter-spacing: 2px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  margin-bottom: 2px;
}

.letter-names {
  font-family: var(--font-script);
  font-size: clamp(1.6rem, 4.5vw, 2.3rem);
  color: var(--color-primary);
  line-height: 1.1;
  margin: 3px 0 4px 0;
}

.letter-mini-divider {
  margin-top: 2px;
}

.letter-divider-img {
  width: clamp(55px, 9vw, 75px);
  height: auto;
  opacity: 0.9;
}

/* Bottom Pocket Layer (Overlaps lower portion of letter) */
.envelope-real-bottom {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 3;
  transform: translateZ(8px);
  pointer-events: none;
  filter: drop-shadow(0 -2px 6px rgba(41, 37, 31, 0.12));
}

/* Top Flap Layer with Wax Seal (3D Openable Flap) */
.envelope-real-flap-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  transform-origin: top center;
  transform-style: preserve-3d;
  transform: rotateX(0deg) translateZ(12px);
  transition: transform 1.1s cubic-bezier(0.25, 1, 0.5, 1);
}

.envelope-real-flap {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Monogram Overlay on Red Wax Seal */
.seal-initials-overlay {
  position: absolute;
  left: 50%;
  top: 56.5%;
  transform: translate(-50%, -50%);
  font-family: var(--font-heading);
  font-size: clamp(0.78rem, 1.8vw, 0.98rem);
  font-weight: var(--fw-bold);
  color: #FFF2D6;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), 0 0 4px rgba(255, 230, 180, 0.4);
  letter-spacing: 1.5px;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Inside Paper Face of the open flap (shown when opened) */
.envelope-real-flap-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70%;
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
  background-color: #EDE2CE;
  background-image: var(--bg-texture-paper);
  background-repeat: repeat;
  background-size: 300px auto;
  border-top: 2px solid rgba(184, 138, 50, 0.6);
  box-shadow: inset 0 6px 16px rgba(41, 37, 31, 0.15);
  filter: drop-shadow(0 -4px 10px rgba(0, 0, 0, 0.35));
  transform: rotateY(180deg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
}

/* Prompt Below Envelope */
.envelope-prompt {
  margin-top: clamp(24px, 4.5vw, 36px);
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(247, 239, 225, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(212, 163, 67, 0.6);
  padding: 10px 26px;
  border-radius: var(--radius-full);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.envelope-wrapper:hover .envelope-prompt {
  transform: translateY(-2px);
  background: rgba(247, 239, 225, 0.18);
  box-shadow: 0 8px 28px rgba(212, 163, 67, 0.4);
}

.prompt-icon {
  font-size: 1.2rem;
}

.prompt-text {
  font-family: var(--font-heading);
  font-size: clamp(14px, 1.8vw, 15px);
  font-weight: var(--fw-semibold);
  letter-spacing: 2.2px;
  color: #F7EFE1;
  margin: 0;
  text-transform: uppercase;
}

/* OPENING STATE ANIMATION: Flap folds BEHIND letter card */
.envelope-stage.is-open .seal-initials-overlay {
  opacity: 0;
}

.envelope-stage.is-open .envelope-real-flap-wrapper {
  transform: rotateX(180deg) translateZ(-2px);
  z-index: 1;
}

.envelope-stage.is-open .envelope-letter {
  transform: translateY(-50%) translateZ(4px) scale(1.03);
  z-index: 2;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.4);
}

/* ===== HERO SECTION ===== */
.hero-section {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 1.5vh 1rem 2.5vh;
  box-sizing: border-box;
}

/* Decorative Top Garlands */
.hero-decor {
  position: absolute;
  z-index: var(--z-base);
  pointer-events: none;
}

.decor-garland-left {
  top: 0;
  left: 6%;
  width: clamp(38px, 10vw, 68px);
  height: auto;
}

.decor-garland-right {
  top: 0;
  right: 6%;
  width: clamp(38px, 10vw, 68px);
  height: auto;
  transform: scaleX(-1);
}

/* Mid-Side Floating Floral Sprigs (Flanking the names) */
.decor-sprig-mid-left {
  bottom: clamp(140px, 24vh, 210px);
  left: 0;
  width: clamp(35px, 4vw, 45px);
  height: auto;
  transform: rotate(25deg);
  opacity: 0.95;
}

.decor-sprig-mid-right {
  bottom: clamp(115px, 20vh, 180px);
  right: 0;
  width: clamp(35px, 4vw, 45px);
  height: auto;
  transform: scaleX(-1) rotate(25deg);
  opacity: 0.95;
}

/* Bottom Corner Banana Leaves */
.decor-leaf-left {
  bottom: 0;
  left: 0;
  width: clamp(110px, 28vw, 190px);
  height: auto;
  pointer-events: none;
}

.decor-leaf-right {
  bottom: 0;
  right: 0;
  width: clamp(110px, 28vw, 190px);
  height: auto;
  transform: scaleX(-1);
  pointer-events: none;
}

/* Main Illustration Wrapper */
.hero-illustration-wrapper {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: clamp(280px, 72vw, 420px);
  max-height: 48vh;
  margin-top: -3vh;
  margin-bottom: clamp(10px, 1.8vh, 20px);
}

.hero-illustration {
  width: 100%;
  height: auto;
  max-height: 48vh;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* Text Content Area */
.hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 0;
}

.hero-tagline {
  font-family: var(--font-heading);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 1.8px;
  font-weight: var(--fw-semibold);
  font-size: clamp(14px, 1.9vw, 17px);
  line-height: 1.4;
}

.tagline-top {
  margin-bottom: clamp(30px, 4vh, 45px);
}

.tagline-bottom {
  margin-top: clamp(30px, 4vh, 45px);
  letter-spacing: 2px;
}

/* Staggered Couple Names */
.hero-names {
  font-family: var(--font-script);
  color: var(--color-primary);
  font-weight: var(--fw-regular);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.88;
  width: 100%;
  margin: 0;
}

.name-part {
  font-size: clamp(3.4rem, 10vw, 5.2rem);
  position: relative;
}

.name-groom {
  transform: translateX(-70px);
}

.name-bride {
  transform: translateX(70px);
}

.name-and {
  font-family: var(--font-script);
  font-size: clamp(1.6rem, 4.8vw, 2.5rem);
  color: var(--color-primary);
  transform: translateX(2%);
  margin-top: 15px;
  margin-bottom: 15px;
}

/* Desktop Responsiveness */
@media (min-width: 768px) {
  .hero-section {
    padding: 4vh 2rem 3vh;
  }

  .decor-garland-left {
    left: 2%;
    top: 0;
    width: 75px;
  }

  .decor-garland-right {
    right: 2%;
    top: 0;
    width: 75px;
  }

  .decor-sprig-mid-left {
    left: 0;
    bottom: 24vh;
    width: 45px;
  }

  .decor-sprig-mid-right {
    right: 0;
    bottom: 20vh;
    width: 45px;
  }

  .decor-leaf-left {
    left: 0;
    bottom: 0;
    width: clamp(200px, 18vw, 260px);
  }

  .decor-leaf-right {
    right: 0;
    bottom: 0;
    width: clamp(200px, 18vw, 260px);
  }

  .name-groom {
    transform: translateX(-70px);
  }

  .name-bride {
    transform: translateX(70px);
  }
}

/* ===== FIXED MUSIC TOGGLE BUTTON ===== */
.music-btn {
  position: fixed;
  bottom: clamp(16px, 3.5vw, 28px);
  right: clamp(16px, 3.5vw, 28px);
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background-color: var(--color-bg);
  background-image: var(--bg-texture-paper);
  border: 1.5px solid var(--color-gold-line);
  box-shadow: var(--shadow-soft), 0 4px 14px rgba(41, 37, 31, 0.15);
  color: var(--color-marigold-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: var(--z-nav);
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  padding: 0;
  outline: none;
}

.music-btn:hover {
  transform: scale(1.08);
  border-color: var(--color-marigold);
  box-shadow: 0 6px 20px rgba(185, 120, 12, 0.25);
}

.music-btn:active {
  transform: scale(0.95);
}

.music-btn .music-icon {
  width: 22px;
  height: 22px;
  stroke: var(--color-primary);
  fill: none;
  transition: transform var(--transition-medium);
}

.music-btn.playing .music-icon {
  stroke: var(--color-wedding-red);
}

.music-btn .icon-muted {
  display: none;
}

.music-btn.paused .icon-playing {
  display: none;
}

.music-btn.paused .icon-muted {
  display: block;
  stroke: var(--color-text-muted);
}

.music-btn.playing {
  animation: pulse-gold 2.5s infinite ease-in-out;
}

@keyframes pulse-gold {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(217, 154, 22, 0.4), var(--shadow-soft);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(217, 154, 22, 0), var(--shadow-soft);
  }
}

/* Hidden YouTube Player (Kept minimally rendered so YouTube does not throttle audio) */
.yt-audio-player {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  height: 200px;
  opacity: 0.001;
  pointer-events: none;
  z-index: -10;
}

/* ==========================================================================
   SCRATCH TO REVEAL DATE SECTION
   ========================================================================== */
.scratch-section {
  position: relative;
  padding: clamp(35px, 6vh, 60px) var(--section-padding-x);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: transparent;
}

.scratch-petal-decor {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

.scratch-petal-left {
  top: 5%;
  left: -15px;
  width: clamp(50px, 10vw, 100px);
  opacity: 0.85;
}

.scratch-petal-right {
  bottom: 5%;
  right: -15px;
  width: clamp(50px, 10vw, 100px);
  transform: scaleX(-1);
  opacity: 0.85;
}

.scratch-container {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 2;
  width: 100%;
}

/* Vintage Deckle-Edge Wide Card */
.scratch-card {
  position: relative;
  width: 100%;
  max-width: 650px;
  background-color: var(--color-bg);
  background-image: var(--bg-texture-paper);
  background-repeat: repeat;
  background-size: 350px auto;
  padding: clamp(18px, 3.5vw, 26px) clamp(16px, 4vw, 36px);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(184, 138, 50, 0.45);
  box-shadow: 0 10px 30px rgba(41, 37, 31, 0.09), 0 2px 6px rgba(184, 138, 50, 0.15);
  text-align: center;
}

/* Corner Borders on Scratch Card */
.card-corner-border {
  position: absolute;
  width: clamp(45px, 6vw, 60px);
  height: auto;
  pointer-events: none;
  z-index: 3;
  opacity: 0.95;
}

.corner-border-tl {
  top: 4px;
  left: 4px;
}

.corner-border-tr {
  top: 4px;
  right: 4px;
  transform: scaleX(-1);
}

.corner-border-bl {
  bottom: 4px;
  left: 4px;
  transform: scaleY(-1);
}

.corner-border-br {
  bottom: 4px;
  right: 4px;
  transform: scale(-1);
}

/* ==========================================================================
   GLOBAL ROMANTIC FLOWER PETAL SYSTEM
   ========================================================================== */
.wedding-petal {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  border-radius: 65% 0 65% 65%;
  opacity: 0.82;
  transition: transform 0.6s ease;
}

.wedding-petal.rose {
  background: radial-gradient(circle at 30% 30%, #E34A38 0%, #B73527 65%, #7A170E 100%);
  box-shadow: 0 2px 6px rgba(183, 53, 39, 0.22);
}

.wedding-petal.marigold {
  background: radial-gradient(circle at 30% 30%, #FFCC33 0%, #E09A15 65%, #9E6B08 100%);
  box-shadow: 0 2px 6px rgba(224, 154, 21, 0.22);
}

.wedding-petal.petal-sm {
  width: clamp(8px, 1.4vw, 12px);
  height: clamp(10px, 1.8vw, 15px);
}

.wedding-petal.petal-md {
  width: clamp(11px, 2vw, 16px);
  height: clamp(14px, 2.4vw, 20px);
}

.wedding-petal.petal-lg {
  width: clamp(14px, 2.5vw, 20px);
  height: clamp(17px, 3vw, 25px);
}

/* ==========================================================================
   DYNAMIC FALLING PETALS ENGINE (Inspired by Sakura)
   ========================================================================== */
.falling-petals-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  overflow: hidden;
  z-index: 30;
}

.falling-petal {
  position: absolute;
  top: -40px;
  pointer-events: none;
  will-change: transform, opacity;
  transform-origin: center;
  opacity: 0.88;
}

/* Floral Variations (Smaller, refined petal scale) */
.falling-petal.petal-type-rose {
  width: 10px;
  height: 13px;
  background: radial-gradient(circle at 35% 35%, #E54C38 0%, #B83427 65%, #75140B 100%);
  box-shadow: 0 2px 5px rgba(184, 52, 39, 0.28);
  border-radius: 70% 15% 70% 70%;
}

.falling-petal.petal-type-marigold {
  width: 9px;
  height: 12px;
  background: radial-gradient(circle at 35% 35%, #FFD23F 0%, #E69D15 65%, #9E6A05 100%);
  box-shadow: 0 2px 5px rgba(230, 157, 21, 0.28);
  border-radius: 60% 0 60% 60%;
}

.falling-petal.petal-type-lotus {
  width: 10px;
  height: 14px;
  background: radial-gradient(circle at 35% 35%, #FFA8BA 0%, #EA5C77 65%, #A7223D 100%);
  box-shadow: 0 2px 5px rgba(234, 92, 119, 0.26);
  border-radius: 75% 20% 75% 75%;
}

.falling-petal.petal-type-jasmine {
  width: 8px;
  height: 11px;
  background: radial-gradient(circle at 35% 35%, #FFFFFF 0%, #F5ECDD 65%, #D4BE9E 100%);
  box-shadow: 0 2px 5px rgba(184, 138, 50, 0.2);
  border-radius: 50% 50% 50% 0%;
}

/* Keyframe Animations for Natural Falling, Tumbling & Swaying */
@keyframes petalFallLinear {
  0% {
    top: -40px;
    opacity: 0;
  }
  10% {
    opacity: 0.9;
  }
  90% {
    opacity: 0.85;
  }
  100% {
    top: 105vh;
    opacity: 0;
  }
}

@keyframes petalSway0 {
  0% { transform: translateX(0px) rotateZ(0deg); }
  50% { transform: translateX(60px) rotateZ(45deg); }
  100% { transform: translateX(-30px) rotateZ(-30deg); }
}

@keyframes petalSway1 {
  0% { transform: translateX(0px) rotateZ(0deg); }
  50% { transform: translateX(-50px) rotateZ(-40deg); }
  100% { transform: translateX(40px) rotateZ(35deg); }
}

@keyframes petalSway2 {
  0% { transform: translateX(0px) rotateZ(0deg); }
  50% { transform: translateX(80px) rotateZ(60deg); }
  100% { transform: translateX(-45px) rotateZ(-45deg); }
}

@keyframes petalSway3 {
  0% { transform: translateX(0px) rotateZ(0deg); }
  50% { transform: translateX(-70px) rotateZ(-55deg); }
  100% { transform: translateX(50px) rotateZ(50deg); }
}

/* Card Header */
.scratch-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: clamp(8px, 1.8vw, 14px);
}

.scratch-decor-icon {
  font-size: 0.8rem;
  opacity: 0.7;
}

.scratch-decor-icon.flip {
  transform: scaleX(-1);
}

.scratch-title {
  font-family: var(--font-heading);
  font-size: clamp(14px, 1.8vw, 17px);
  color: var(--color-warm-brown);
  letter-spacing: 3px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  margin: 0;
}

/* Interactive Scratch Stage */
.scratch-stage {
  position: relative;
  width: 100%;
  height: clamp(100px, 20vw, 145px);
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.scratch-date-underlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  pointer-events: none;
}

.scratch-revealed-date {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(2.2rem, 6vw, 3.8rem);
  font-weight: var(--fw-regular);
  color: var(--color-primary);
  letter-spacing: clamp(4px, 1.2vw, 8px);
  line-height: 1;
}

/* Canvas Scratch Overlay */
.scratch-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  touch-action: none;
  border-radius: var(--radius-sm);
  transition: opacity 0.5s ease;
}

.scratch-canvas.revealed {
  opacity: 0;
  pointer-events: none;
}

/* Card Footer */
.scratch-footer {
  margin-top: clamp(8px, 1.8vw, 14px);
}

.scratch-subtitle {
  font-family: var(--font-heading);
  font-size: clamp(14px, 1.8vw, 16px);
  color: var(--color-warm-brown);
  letter-spacing: 2.5px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
}

/* Metallic Gold Wax Seal */
.wax-seal {
  position: absolute;
  bottom: -18px;
  right: clamp(12px, 3.5vw, 26px);
  width: clamp(50px, 10vw, 68px);
  height: clamp(50px, 10vw, 68px);
  border-radius: var(--radius-full);
  background: radial-gradient(circle at 32% 32%, #ECCB85 0%, #C89C46 45%, #845B17 100%);
  box-shadow: 0 5px 15px rgba(41, 37, 31, 0.28), inset 0 2px 4px rgba(255, 255, 255, 0.5), inset 0 -2px 5px rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.wax-seal:hover {
  transform: scale(1.06) rotate(5deg);
}

.wax-seal-inner {
  width: 72%;
  height: 72%;
  border-radius: var(--radius-full);
  border: 1.5px dashed rgba(255, 245, 215, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35);
}

.wax-seal-heart {
  width: 50%;
  height: 50%;
  color: rgba(95, 60, 15, 0.75);
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.45));
}

/* ==========================================================================
   CELEBRATION CONFETTI & FLOWER PETALS
   ========================================================================== */
.celebration-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.celebration-particle {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity;
}

.celebration-particle.petal {
  width: clamp(10px, 2vw, 15px);
  height: clamp(14px, 2.8vw, 20px);
  border-radius: 60% 0 60% 60%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.celebration-particle.streamer {
  width: clamp(4px, 1vw, 7px);
  height: clamp(20px, 4vw, 32px);
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.celebration-particle.confetti {
  width: clamp(8px, 1.5vw, 11px);
  height: clamp(8px, 1.5vw, 11px);
  border-radius: 2px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* ==========================================================================
   COUNTDOWN TO OUR BIG DAY SECTION (NO GARLANDS)
   ========================================================================== */
.countdown-section {
  position: relative;
  padding: clamp(35px, 5vh, 52px) var(--section-padding-x);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(circle at center, rgba(232, 221, 203, 0.45) 0%, rgba(243, 235, 221, 0) 75%);
  border-top: 1px solid rgba(184, 138, 50, 0.25);
  border-bottom: 1px solid rgba(184, 138, 50, 0.25);
  box-sizing: border-box;
}

.countdown-side-leaf {
  position: absolute;
  pointer-events: none;
  opacity: 0.85;
  z-index: 1;
}

.countdown-side-leaf.leaf-left {
  top: 50%;
  left: -20px;
  transform: translateY(-50%) rotate(12deg);
  width: clamp(65px, 13vw, 120px);
}

.countdown-side-leaf.leaf-right {
  top: 50%;
  right: -20px;
  transform: translateY(-50%) scaleX(-1) rotate(12deg);
  width: clamp(65px, 13vw, 120px);
}

.countdown-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Countdown Header */
.countdown-header {
  margin-bottom: clamp(10px, 2vw, 16px);
  display: flex;
  flex-direction: column;
  align-items: center;
}.countdown-heading {
  font-family: var(--font-heading);
  font-size: clamp(15px, 2.4vw, 21px);
  color: var(--color-primary);
  letter-spacing: clamp(2.5px, 0.6vw, 4.5px);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  margin: 0 0 4px 0;
  line-height: 1.2;
}

.countdown-divider {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
}

.countdown-floral-divider {
  width: clamp(100px, 16vw, 140px);
  height: auto;
  display: block;
  opacity: 0.9;
  object-fit: contain;
}

/* 4 Countdown Boxes Grid */
.countdown-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 2vw, 18px);
  width: 100%;
  max-width: 660px;
  margin: 0 auto;
}

.countdown-card {
  background-color: var(--color-bg);
  background-image: var(--bg-texture-paper);
  background-repeat: repeat;
  background-size: 300px auto;
  border: 1px solid rgba(184, 138, 50, 0.5);
  border-radius: var(--radius-sm);
  padding: clamp(12px, 2.8vw, 22px) clamp(4px, 1.5vw, 14px);
  position: relative;
  box-shadow: 0 4px 16px rgba(41, 37, 31, 0.07), 0 1px 3px rgba(184, 138, 50, 0.12);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.countdown-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(184, 138, 50, 0.18);
}

.countdown-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Corner Filigree on Cards */
.corner-filigree {
  position: absolute;
  width: 5px;
  height: 5px;
  border-color: rgba(184, 138, 50, 0.75);
  border-style: solid;
  pointer-events: none;
}

.corner-filigree.top-left {
  top: -6px;
  left: -1px;
  border-width: 1px 0 0 1px;
}

.corner-filigree.top-right {
  top: -6px;
  right: -1px;
  border-width: 1px 1px 0 0;
}

.corner-filigree.bottom-left {
  bottom: -6px;
  left: -1px;
  border-width: 0 0 1px 1px;
}

.corner-filigree.bottom-right {
  bottom: -6px;
  right: -1px;
  border-width: 0 1px 1px 0;
}

/* Countdown Number & Label */
.countdown-number {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  font-weight: var(--fw-regular);
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: clamp(4px, 1vw, 8px);
}

.countdown-label {
  font-family: var(--font-heading);
  font-size: clamp(14px, 1.8vw, 16px);
  color: var(--color-warm-brown);
  letter-spacing: clamp(1.2px, 0.3vw, 2.2px);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
}

/* ==========================================================================
   COMMON SECTION HEADERS
   ========================================================================== */
.section-title-wrapper {
  text-align: center;
  margin-bottom: clamp(24px, 4.5vw, 38px);
}

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(16px, 2.5vw, 22px);
  color: var(--color-primary);
  letter-spacing: clamp(3px, 0.8vw, 5px);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.section-divider {
  display: flex;
  justify-content: center;
  align-items: center;
}

.floral-divider-img {
  width: clamp(100px, 16vw, 150px);
  height: auto;
  opacity: 0.9;
}

/* Card Corner Filigrees (Reusable across cards) */
.card-filigree {
  position: absolute;
  width: 5px;
  height: 5px;
  border-color: rgba(184, 138, 50, 0.75);
  border-style: solid;
  pointer-events: none;
}

.card-filigree.top-left {
  top: -6px;
  left: -1px;
  border-width: 1px 0 0 1px;
}

.card-filigree.top-right {
  top: -6px;
  right: -1px;
  border-width: 1px 1px 0 0;
}

.card-filigree.bottom-left {
  bottom: -6px;
  left: -1px;
  border-width: 0 0 1px 1px;
}

.card-filigree.bottom-right {
  bottom: -6px;
  right: -1px;
  border-width: 0 1px 1px 0;
}

/* Card Corner Borders for Countdown Cards */
.countdown-card .card-corner-border {
  position: absolute;
  width: clamp(18px, 3.2vw, 24px);
  height: auto;
  pointer-events: none;
  z-index: 4;
  opacity: 0.92;
}

.countdown-card .corner-border-tl {
  top: 3px;
  left: 3px;
}

.countdown-card .corner-border-tr {
  top: 3px;
  right: 3px;
  transform: scaleX(-1);
}

.countdown-card .corner-border-bl {
  bottom: 3px;
  left: 3px;
  transform: scaleY(-1);
}

.countdown-card .corner-border-br {
  bottom: 3px;
  right: 3px;
  transform: scale(-1);
}

/* Event & Location Map Card Corner Borders (Large Size) */
.event-card .card-corner-border,
.location-map-card .card-corner-border {
  position: absolute;
  width: clamp(60px, 4.8vw, 80px);
  height: auto;
  pointer-events: none;
  z-index: 4;
  opacity: 0.95;
}

.event-card .corner-border-tl,
.location-map-card .corner-border-tl {
  top: 4px;
  left: 4px;
}

.event-card .corner-border-tr,
.location-map-card .corner-border-tr {
  top: 4px;
  right: 4px;
  transform: scaleX(-1);
}

.event-card .corner-border-bl,
.location-map-card .corner-border-bl {
  bottom: 4px;
  left: 4px;
  transform: scaleY(-1);
}

.event-card .corner-border-br,
.location-map-card .corner-border-br {
  bottom: 4px;
  right: 4px;
  transform: scale(-1);
}

/* ==========================================================================
   OUR EVENTS SECTION
   ========================================================================== */
.events-section {
  position: relative;
  padding: clamp(55px, 8vh, 85px) var(--section-padding-x);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(circle at center, rgba(232, 221, 203, 0.35) 0%, rgba(243, 235, 221, 0) 75%);
}

.events-decor-sprig {
  position: absolute;
  pointer-events: none;
  opacity: 0.85;
  z-index: 1;
}

.events-decor-sprig.sprig-left {
  top: 25%;
  left: -15px;
  width: clamp(45px, 9vw, 85px);
  transform: rotate(18deg);
}

.events-decor-sprig.sprig-right {
  top: 25%;
  right: -15px;
  width: clamp(45px, 9vw, 85px);
  transform: scaleX(-1) rotate(18deg);
}

.events-decor-leaf {
  position: absolute;
  pointer-events: none;
  opacity: 0.85;
  z-index: 1;
}

.events-decor-leaf.leaf-left {
  bottom: 0;
  left: -20px;
  width: clamp(80px, 15vw, 140px);
}

.events-decor-leaf.leaf-right {
  bottom: 0;
  right: -20px;
  width: clamp(80px, 15vw, 140px);
  transform: scaleX(-1);
}

.events-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

/* Events Grid Layout */
.events-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 3vw, 28px);
  width: 100%;
}

.event-card {
  background-color: var(--color-bg);
  background-image: var(--bg-texture-paper);
  background-repeat: repeat;
  background-size: 300px auto;
  border: 1px solid rgba(184, 138, 50, 0.48);
  border-radius: var(--radius-sm);
  padding: clamp(24px, 4vw, 36px) clamp(16px, 2.5vw, 24px);
  text-align: center;
  position: relative;
  box-shadow: 0 4px 18px rgba(41, 37, 31, 0.07);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.event-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(184, 138, 50, 0.2);
}

/* Centered Reception Card */
.event-card-featured {
  grid-column: 2 / 3;
}

.event-icon-box {
  width: auto;
  height: clamp(200px, 28vw, 300px);
  margin-bottom: clamp(12px, 2.2vw, 18px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-icon-img {
  height: clamp(200px, 28vw, 300px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(41, 37, 31, 0.15));
}

.event-name {
  font-family: var(--font-heading);
  font-size: clamp(16px, 2.2vw, 20px);
  color: var(--color-primary);
  letter-spacing: 2.2px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.event-date {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.8vw, 16px);
  color: var(--color-warm-brown);
  margin-bottom: 3px;
  line-height: 1.35;
}

.event-time {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.8vw, 16px);
  color: var(--color-warm-brown);
  margin-bottom: 6px;
  line-height: 1.35;
}

.event-mini-divider {
  margin-top: 4px;
}

.event-divider-img {
  width: clamp(100px, 15vw, 130px);
  height: auto;
  opacity: 0.9;
}

/* Mobile & Tablet Events Grid */
@media (max-width: 767px) {
  .events-grid {
    grid-template-columns: 1fr;
    max-width: 380px;
    margin: 0 auto;
    gap: 16px;
  }

  .event-card-featured {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   LOCATION SECTION
   ========================================================================== */
.location-section {
  position: relative;
  padding: clamp(55px, 8vh, 85px) var(--section-padding-x);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-top: 1px solid rgba(184, 138, 50, 0.25);
  background: radial-gradient(circle at center, rgba(232, 221, 203, 0.35) 0%, rgba(243, 235, 221, 0) 75%);
}

.location-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
}

.location-layout {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: clamp(24px, 5vw, 48px);
  align-items: center;
  width: 100%;
}

/* Illustrated Map Card */
.location-map-card {
  position: relative;
  display: block;
  background-color: var(--color-bg);
  background-image: var(--bg-texture-paper);
  background-repeat: repeat;
  background-size: 300px auto;
  border: 1px solid rgba(184, 138, 50, 0.5);
  border-radius: var(--radius-sm);
  padding: clamp(10px, 2.2vw, 16px);
  box-shadow: 0 6px 20px rgba(41, 37, 31, 0.08);
  text-decoration: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.location-map-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(184, 138, 50, 0.2);
}

.map-inner-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(184, 138, 50, 0.3);
}

.map-illustration-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.map-overlay-badge {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(243, 235, 221, 0.94);
  border: 1px solid var(--color-gold-line);
  padding: 5px 12px;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: clamp(14px, 1.8vw, 16px);
  color: var(--color-primary);
  letter-spacing: 1px;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Location Text Info */
.location-info {
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.venue-name {
  font-family: var(--font-heading);
  font-size: clamp(18px, 3vw, 26px);
  color: var(--color-primary);
  letter-spacing: clamp(2.5px, 0.6vw, 4.5px);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.venue-address {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.9vw, 17px);
  color: var(--color-warm-brown);
  line-height: 1.5;
  margin-bottom: clamp(12px, 2.5vw, 18px);
}

.venue-inline-divider {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: clamp(12px, 2.5vw, 18px);
  color: var(--color-gold-line);
  opacity: 0.85;
}

.divider-line {
  height: 1px;
  width: 32px;
  background-color: var(--color-gold-line);
}

.divider-dot {
  width: 3px;
  height: 3px;
  border-radius: var(--radius-full);
  background-color: var(--color-gold-line);
}

.divider-diamond {
  font-size: 0.75rem;
  color: var(--color-gold-line);
}

.venue-quote {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(15px, 2vw, 18px);
  color: var(--color-primary);
  line-height: 1.6;
  margin-bottom: clamp(12px, 2vw, 16px);
}

.venue-bottom-divider {
  margin-top: 2px;
}

/* Mobile Location Responsive */
@media (max-width: 767px) {
  .location-layout {
    grid-template-columns: 1fr;
    max-width: 380px;
    margin: 0 auto;
    text-align: center;
  }

  .location-info {
    align-items: center;
    text-align: center;
    margin-top: var(--space-md);
  }

  .venue-inline-divider {
    justify-content: center;
  }

  .venue-bottom-divider {
    display: flex;
    justify-content: center;
  }
}

/* ==========================================================================
   GALLERY SECTION (NO GARLANDS)
   ========================================================================== */
.gallery-section {
  position: relative;
  padding: clamp(55px, 8vh, 85px) var(--section-padding-x);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-top: 1px solid rgba(184, 138, 50, 0.25);
  background: radial-gradient(circle at center, rgba(232, 221, 203, 0.35) 0%, rgba(243, 235, 221, 0) 75%);
}

.gallery-sprig {
  position: absolute;
  top: 35%;
  width: clamp(38px, 7vw, 65px);
  pointer-events: none;
  opacity: 0.85;
  z-index: 1;
}

.gallery-sprig.sprig-left {
  left: -10px;
  transform: rotate(20deg);
}

.gallery-sprig.sprig-right {
  right: -10px;
  transform: scaleX(-1) rotate(20deg);
}

.gallery-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

/* 4 Photo Cards (4 Rows, Single Column Full Size) */
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 4vw, 36px);
  width: 100%;
}

.gallery-card {
  position: relative;
  cursor: pointer;
  width: 100%;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.gallery-card:hover {
  transform: translateY(-4px);
  z-index: 5;
}

.gallery-card-deckle {
  background-color: var(--color-bg);
  background-image: var(--bg-texture-paper);
  background-repeat: repeat;
  background-size: 250px auto;
  border: 1px solid rgba(184, 138, 50, 0.45);
  border-radius: var(--radius-sm);
  padding: clamp(10px, 2vw, 16px);
  box-shadow: 0 8px 24px rgba(41, 37, 31, 0.09), inset 0 0 10px rgba(184, 138, 50, 0.08);
}

.gallery-img-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(184, 138, 50, 0.25);
  background-color: rgba(232, 221, 203, 0.5);
}

.gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.gallery-card:hover .gallery-img {
  transform: scale(1.04);
}

.gallery-zoom-overlay {
  position: absolute;
  inset: 0;
  background: rgba(41, 37, 31, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-fast);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
}

.gallery-card:hover .gallery-zoom-overlay {
  opacity: 1;
}

/* ==========================================================================
   RSVP & CLOSING SECTION
   ========================================================================== */
.rsvp-section {
  position: relative;
  padding: clamp(60px, 9vh, 95px) var(--section-padding-x) clamp(85px, 15vh, 150px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-top: 1px solid rgba(184, 138, 50, 0.25);
  background: radial-gradient(circle at center, rgba(232, 221, 203, 0.4) 0%, rgba(243, 235, 221, 0) 75%);
  text-align: center;
}

.rsvp-sprig {
  position: absolute;
  top: 12%;
  width: clamp(40px, 8vw, 75px);
  pointer-events: none;
  opacity: 0.85;
  z-index: 1;
}

.rsvp-sprig.sprig-left {
  left: -12px;
  transform: rotate(18deg);
}

.rsvp-sprig.sprig-right {
  right: -12px;
  transform: scaleX(-1) rotate(18deg);
}

.rsvp-banana-leaf {
  position: absolute;
  bottom: 0;
  width: clamp(140px, 28vw, 260px);
  pointer-events: none;
  opacity: 0.95;
  z-index: 1;
}

.rsvp-banana-leaf.leaf-bottom-left {
  left: -20px;
}

.rsvp-banana-leaf.leaf-bottom-right {
  right: -20px;
  transform: scaleX(-1);
}

/* Elegant Flower Petals Accents */
.rsvp-petal {
  position: absolute;
  pointer-events: none;
  opacity: 0.85;
  z-index: 1;
  width: clamp(12px, 2.2vw, 18px);
  height: clamp(14px, 2.6vw, 22px);
  background: radial-gradient(circle at 30% 30%, #D44234 0%, #B73527 60%, #8C1C11 100%);
  border-radius: 60% 0 60% 60%;
  box-shadow: 0 2px 6px rgba(183, 53, 39, 0.25);
}

.rsvp-petal.petal-top-left {
  top: 8%;
  left: 6%;
  transform: rotate(35deg);
}

.rsvp-petal.petal-top-right {
  top: 8%;
  right: 6%;
  transform: rotate(-45deg);
}

.rsvp-petal.petal-mid-right {
  top: 45%;
  right: 5%;
  transform: rotate(20deg);
}

.rsvp-petal.petal-bottom-left {
  bottom: 22%;
  left: 6%;
  transform: rotate(-30deg);
}

.rsvp-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

/* RSVP Form */
.rsvp-form {
  width: 100%;
  margin-bottom: clamp(34px, 5.5vw, 50px);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

@media (max-width: 640px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

.form-group {
  position: relative;
  width: 100%;
}

.form-group-full {
  margin-bottom: 16px;
}

.input-with-icon {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.form-icon {
  position: absolute;
  left: 14px;
  width: 18px;
  height: 18px;
  color: var(--color-warm-brown);
  opacity: 0.75;
  pointer-events: none;
}

.form-icon.icon-mail {
  top: 14px;
}

.form-input {
  width: 100%;
  background-color: var(--color-bg);
  background-image: var(--bg-texture-paper);
  background-repeat: repeat;
  background-size: 300px auto;
  border: 1px solid rgba(184, 138, 50, 0.45);
  border-radius: var(--radius-sm);
  padding: 12px 14px 12px 42px;
  font-family: var(--font-body);
  font-size: clamp(14px, 1.8vw, 16px);
  color: var(--color-primary);
  outline: none;
  box-shadow: inset 0 1px 3px rgba(41, 37, 31, 0.04);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus {
  border-color: var(--color-gold-line);
  box-shadow: 0 0 0 3px rgba(184, 138, 50, 0.2);
}

.form-select {
  appearance: none;
  cursor: pointer;
  padding-right: 32px;
}

.select-arrow {
  position: absolute;
  right: 14px;
  font-size: 1.1rem;
  color: var(--color-warm-brown);
  pointer-events: none;
  opacity: 0.75;
}

.form-textarea {
  padding-top: 12px;
  resize: vertical;
  min-height: 75px;
}

/* Submit Button */
.rsvp-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #385734 0%, #203A1E 100%);
  color: #F3EBDD;
  border: 1px solid rgba(184, 138, 50, 0.6);
  padding: 12px 36px;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: clamp(14px, 1.9vw, 17px);
  font-weight: var(--fw-semibold);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(32, 58, 30, 0.35);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.rsvp-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(32, 58, 30, 0.45);
}

.rsvp-feedback {
  margin-top: 12px;
  font-family: var(--font-heading);
  font-size: clamp(14px, 1.8vw, 16px);
  color: var(--color-leaf-green);
  font-weight: var(--fw-semibold);
  letter-spacing: 1px;
  min-height: 20px;
}

/* Share Our Invite Block */
.share-block {
  margin-bottom: clamp(34px, 5.5vw, 50px);
}

.share-title-wrapper {
  margin-bottom: clamp(14px, 2.5vw, 20px);
}

.share-subtitle {
  font-family: var(--font-heading);
  font-size: clamp(14px, 1.9vw, 17px);
  color: var(--color-warm-brown);
  line-height: 1.5;
  margin-bottom: clamp(14px, 2.5vw, 20px);
}

.share-invite-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: var(--color-bg);
  background-image: var(--bg-texture-paper);
  background-repeat: repeat;
  background-size: 300px auto;
  border: 1px solid rgba(184, 138, 50, 0.55);
  border-radius: var(--radius-sm);
  padding: 12px 32px;
  font-family: var(--font-heading);
  font-size: clamp(14px, 1.8vw, 16px);
  font-weight: var(--fw-semibold);
  letter-spacing: 2px;
  color: var(--color-primary);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(41, 37, 31, 0.05);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.share-invite-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(184, 138, 50, 0.18);
}

.share-corner-filigree {
  position: absolute;
  width: 4px;
  height: 4px;
  border-color: rgba(184, 138, 50, 0.75);
  border-style: solid;
}

.share-corner-filigree.top-left {
  top: -5px;
  left: -1px;
  border-width: 1px 0 0 1px;
}

.share-corner-filigree.top-right {
  top: -5px;
  right: -1px;
  border-width: 1px 1px 0 0;
}

.share-corner-filigree.bottom-left {
  bottom: -5px;
  left: -1px;
  border-width: 0 0 1px 1px;
}

.share-corner-filigree.bottom-right {
  bottom: -5px;
  right: -1px;
  border-width: 0 1px 1px 0;
}

.share-icon {
  width: 16px;
  height: 16px;
  color: var(--color-warm-brown);
}

.share-feedback {
  margin-top: 8px;
  font-family: var(--font-heading);
  font-size: clamp(14px, 1.8vw, 16px);
  color: var(--color-leaf-green);
  font-weight: var(--fw-semibold);
  letter-spacing: 1px;
  min-height: 16px;
}

/* Closing Sign-off */
.closing-signoff {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.closing-divider {
  margin-bottom: 6px;
}

.closing-tagline {
  font-family: var(--font-heading);
  font-size: clamp(14px, 1.8vw, 16px);
  color: var(--color-warm-brown);
  letter-spacing: 3px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  margin: 0 0 2px 0;
}

.closing-names {
  font-family: var(--font-script);
  font-size: clamp(2.6rem, 7vw, 4.4rem);
  color: var(--color-primary);
  font-weight: var(--fw-regular);
  line-height: 1.1;
  margin: 0;
}

/* Lightbox Modal */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(41, 37, 31, 0.85);
  backdrop-filter: blur(6px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  padding: 20px;
}

.gallery-lightbox.active {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(184, 138, 50, 0.5);
  object-fit: contain;
}

.lightbox-close {
  position: absolute;
  top: 24px;
  right: 28px;
  background: none;
  border: none;
  color: #F3EBDD;
  font-size: 2.4rem;
  cursor: pointer;
  line-height: 1;
}

/* ==========================================================================
   DESKTOP OPTIMIZATIONS (min-width: 1024px & min-width: 1440px)
   (Note: Mobile styles remain 100% untouched)
   ========================================================================== */

/* Custom Smooth Desktop Scrollbar */
@media (min-width: 1024px) {
  ::-webkit-scrollbar {
    width: 10px;
  }
  ::-webkit-scrollbar-track {
    background: #EFE7DA;
  }
  ::-webkit-scrollbar-thumb {
    background: rgba(184, 138, 50, 0.45);
    border-radius: 5px;
    border: 2px solid #EFE7DA;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(184, 138, 50, 0.75);
  }

  /* Hero Desktop Layout & Framing - Leaves in Corners */
  .hero-section {
    min-height: 100vh;
    padding: 6vh 2rem 4vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .decor-garland-left {
    left: 2%;
    top: 0;
    width: 85px;
  }

  .decor-garland-right {
    right: 2%;
    top: 0;
    width: 85px;
  }

  .decor-sprig-mid-left {
    left: 0;
    bottom: 22vh;
    width: 55px;
  }

  .decor-sprig-mid-right {
    right: 0;
    bottom: 18vh;
    width: 55px;
  }

  /* Banana Leaves Anchored to Screen Corners on PC */
  .decor-leaf-left {
    left: 0;
    bottom: 0;
    width: clamp(200px, 18vw, 280px);
  }

  .decor-leaf-right {
    right: 0;
    bottom: 0;
    width: clamp(200px, 18vw, 280px);
  }

  /* Scratch Section Desktop Elevation */
  .scratch-section {
    padding: clamp(55px, 8vh, 85px) var(--section-padding-x);
  }

  .scratch-card {
    max-width: 560px;
    box-shadow: 0 14px 40px rgba(41, 37, 31, 0.1), 0 3px 8px rgba(184, 138, 50, 0.18);
  }

  .wax-seal {
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  }

  .wax-seal:hover {
    transform: rotate(10deg) scale(1.08);
    box-shadow: 0 6px 16px rgba(184, 138, 50, 0.45);
  }

  /* Countdown Section Desktop Refinements */
  .countdown-section {
    padding: clamp(45px, 6vh, 68px) var(--section-padding-x);
  }

  .countdown-grid {
    max-width: 680px;
    gap: 20px;
  }

  .countdown-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 26px rgba(184, 138, 50, 0.22);
  }

  /* Events Section Desktop Grid: All 4 Cards in 1 Clean Row */
  .events-container {
    max-width: 1200px;
    width: 100%;
  }

  .events-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(14px, 1.6vw, 24px);
    align-items: stretch;
  }

  .event-card-featured {
    grid-column: auto;
  }

  .event-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(24px, 2.5vw, 32px) clamp(12px, 1.5vw, 20px);
  }

  .event-icon-box {
    height: clamp(180px, 16vw, 240px);
  }

  .event-icon-img {
    height: clamp(180px, 16vw, 240px);
  }

  .event-name {
    white-space: nowrap;
    font-size: clamp(14px, 1.15vw, 17px);
    letter-spacing: 1.8px;
  }

  .event-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 36px rgba(184, 138, 50, 0.24);
  }

  .event-card:hover .event-icon-img {
    transform: scale(1.04);
    transition: transform 0.4s ease;
  }

  .events-decor-sprig.sprig-left {
    left: 0;
  }

  .events-decor-sprig.sprig-right {
    right: 0;
  }

  .events-decor-leaf.leaf-left {
    left: 0;
    bottom: 0;
    width: clamp(180px, 16vw, 250px);
  }

  .events-decor-leaf.leaf-right {
    right: 0;
    bottom: 0;
    width: clamp(180px, 16vw, 250px);
  }

  /* Location Section Desktop Alignment */
  .location-container {
    max-width: 900px;
  }

  .location-layout {
    grid-template-columns: 1.15fr 1fr;
    gap: 48px;
    align-items: center;
  }

  .location-map-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(184, 138, 50, 0.22);
  }

  /* Gallery Desktop Framing */
  .gallery-container {
    max-width: 480px;
  }

  .gallery-grid {
    gap: 28px;
  }

  .gallery-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(41, 37, 31, 0.14);
  }

  .gallery-sprig.sprig-left {
    left: 0;
  }

  .gallery-sprig.sprig-right {
    right: 0;
  }

  /* RSVP Desktop Form & Corner Banana Leaves */
  .rsvp-container {
    max-width: 660px;
  }

  .form-row {
    gap: 16px;
    margin-bottom: 16px;
  }

  .form-input {
    padding: 14px 16px 14px 44px;
  }

  .rsvp-submit-btn {
    padding: 14px 44px;
    font-size: 1rem;
    letter-spacing: 3px;
  }

  .rsvp-submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(32, 58, 30, 0.5);
  }

  .share-invite-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(184, 138, 50, 0.24);
  }

  .rsvp-sprig.sprig-left {
    left: 0;
  }

  .rsvp-sprig.sprig-right {
    right: 0;
  }

  .rsvp-banana-leaf.leaf-bottom-left {
    left: 0;
    bottom: 0;
    width: clamp(200px, 18vw, 280px);
  }

  .rsvp-banana-leaf.leaf-bottom-right {
    right: 0;
    bottom: 0;
    width: clamp(200px, 18vw, 280px);
  }

  /* Floating Music Button Desktop Enhancement */
  .music-btn {
    width: 52px;
    height: 52px;
    bottom: 32px;
    right: 32px;
  }
}