/* ==========================================================================
   LUXURY WEDDING INVITATION — CARD YARD & PARCHMENT ELEGANCE EDITION
   Groom: Md. Asif Ansari & Bride: Dr. Areeba
   ========================================================================== */

/* --------------------------------------------------------------------------
   Google Fonts Import
   -------------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Alex+Brush&family=Allura&family=Cinzel:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,600&family=Great+Vibes&family=Montserrat:wght@300;400;500;600&family=Parisienne&family=Pinyon+Script&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Scheherazade+New:wght@500;700&display=swap");

/* --------------------------------------------------------------------------
   Root Design Tokens (Parchment, Gold & Charcoal Palette)
   -------------------------------------------------------------------------- */
:root {
   /* Backgrounds */
   --bg-body: #F7F4EE;
   --bg-card: #FFFEFA;
   --bg-card-subtle: #FAF6EF;
   --bg-card-accent: #F4EFE6;

   /* Typography Colors */
   --color-charcoal: #2B2623;
   --color-charcoal-light: #4A443F;
   --color-muted: #797169;
   --color-gold: #B89047;
   --color-gold-dark: #8F6E28;
   --color-gold-light: #D9BE7D;
   --color-gold-foil: linear-gradient(135deg, #D4AF37 0%, #C5A059 35%, #F3E5AB 70%, #9B781E 100%);
   --color-border-gold: #D8C39A;
   --color-border-subtle: #E8DCC6;

   /* Fonts */
   --font-script: "Allura", cursive;
   --font-serif: "Cormorant Garamond", Georgia, serif;
   --font-title: "Cinzel", "Cormorant Garamond", Georgia, serif;
   --font-sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --font-arabic: "Scheherazade New", serif;

   /* Shadows */
   --shadow-card: 0 12px 40px rgba(54, 43, 31, 0.08), 0 2px 10px rgba(184, 144, 71, 0.08);
   --shadow-button: 0 4px 16px rgba(184, 144, 71, 0.25);
}

/* --------------------------------------------------------------------------
   Global Reset & Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

html {
   font-size: 16px;
   scroll-behavior: smooth;
   -webkit-overflow-scrolling: touch;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

body {
   background-color: #F8F5EE;
   background-image:
      radial-gradient(rgba(184, 144, 71, 0.14) 0.75px, transparent 0.75px),
      radial-gradient(rgba(184, 144, 71, 0.08) 0.75px, #F8F5EE 0.75px);
   background-size: 32px 32px;
   background-position: 0 0, 16px 16px;
   color: var(--color-charcoal);
   font-family: var(--font-sans);
   line-height: 1.6;
   overflow-x: hidden;
   position: relative;
   min-height: 100vh;
}

body.envelope-locked {
   overflow: hidden;
   height: 100vh;
}

/* --------------------------------------------------------------------------
   Petals & Sparkles Canvas
   -------------------------------------------------------------------------- */
.petals-canvas {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   z-index: 1;
}

/* --------------------------------------------------------------------------
   Celebration Fireworks Canvas (Ultra-smooth 60fps hardware accelerated)
   -------------------------------------------------------------------------- */
.fireworks-canvas {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   pointer-events: none;
   z-index: 9999;
   display: block;
   contain: strict;
   transform: translateZ(0);
   will-change: transform;
}

/* --------------------------------------------------------------------------
   Floating Audio Controls
   -------------------------------------------------------------------------- */
.music-toggle-btn {
   position: fixed;
   bottom: 24px;
   right: 20px;
   z-index: 99;
   background: var(--bg-card);
   border: 1px solid var(--color-border-gold);
   border-radius: 30px;
   padding: 8px 16px;
   display: flex;
   align-items: center;
   gap: 8px;
   cursor: pointer;
   box-shadow: 0 6px 20px rgba(54, 43, 31, 0.12);
   transition: all 0.3s ease;
   font-family: var(--font-sans);
   font-size: 0.78rem;
   letter-spacing: 1px;
   text-transform: uppercase;
   color: var(--color-gold-dark);
}

.music-toggle-btn:hover {
   transform: translateY(-2px);
   box-shadow: 0 8px 24px rgba(184, 144, 71, 0.25);
   border-color: var(--color-gold);
}

.sound-bars {
   display: flex;
   align-items: flex-end;
   gap: 2.5px;
   height: 14px;
}

.sound-bars span {
   width: 2.5px;
   height: 3px;
   background: var(--color-gold);
   border-radius: 2px;
   opacity: 0.55;
   transition: height 0.3s ease, opacity 0.3s ease;
}

.music-toggle-btn.is-playing .sound-bars span {
   height: 100%;
   opacity: 1;
   animation: barBounce 1s infinite ease-in-out alternate;
}

.music-toggle-btn.is-playing .sound-bars span:nth-child(2) {
   animation-delay: 0.2s;
}

.music-toggle-btn.is-playing .sound-bars span:nth-child(3) {
   animation-delay: 0.4s;
}

.music-toggle-btn.is-paused .sound-bars span {
   animation: none;
   height: 3px;
   opacity: 0.5;
}

@keyframes barBounce {
   0% {
      height: 3px;
   }

   100% {
      height: 14px;
   }
}

/* --------------------------------------------------------------------------
   Old Envelope Opening CSS — Replaced by Premium 3D Envelope at bottom
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Hero Section / First Screen Viewport (Matches Reference Image Exactly)
   -------------------------------------------------------------------------- */
.hero-section {
   min-height: calc(100vh - 40px);
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   padding: 10px 0 20px;
}

/* First Page is ALWAYS immediately visible without waiting for scroll */
#heroSection .hero-card {
   opacity: 1 !important;
   transform: none !important;
   filter: none !important;
   width: 100%;
}

/* Subtle Animated Scroll Cue at Bottom of 1st Page */
.hero-scroll-cue {
   margin: 20px auto 0;
   display: inline-flex;
   flex-direction: column;
   align-items: center;
   gap: 6px;
   cursor: pointer;
   user-select: none;
   animation: scrollCueBounce 2.4s infinite ease-in-out;
   transition: transform 0.25s ease;
}

.hero-scroll-cue:hover {
   transform: translateY(3px);
}

.scroll-cue-text {
   font-family: var(--font-title);
   font-size: 0.65rem;
   letter-spacing: 2.5px;
   text-transform: uppercase;
   color: var(--color-gold-dark);
   font-weight: 600;
}

.scroll-cue-chevron {
   color: var(--color-gold);
   display: flex;
   align-items: center;
   justify-content: center;
}

@keyframes scrollCueBounce {

   0%,
   100% {
      transform: translateY(0);
      opacity: 0.65;
   }

   50% {
      transform: translateY(6px);
      opacity: 1;
   }
}

/* --------------------------------------------------------------------------
   Section 2: Ceremony Details & Live Countdown (Reveals on First Scroll)
   -------------------------------------------------------------------------- */
.ceremony-details-section {
   width: 100%;
}

.details-card {
   position: relative;
   background: var(--bg-card);
   border: 1px solid var(--color-border-gold);
   outline: 1px solid rgba(216, 195, 154, 0.5);
   outline-offset: 6px;
   border-radius: 4px;
   padding: 48px 26px 40px;
   text-align: center;
   box-shadow: var(--shadow-card);
   overflow: hidden;
}

/* Old envelope wrapper — replaced by .env-scene-wrapper in 3D envelope section */

/* 3D Royal Crest Wax Seal Monogram (Centered on Flap Peak) */
.wax-seal-wrapper {
   position: relative;
   z-index: 25;
   margin: -32px auto 14px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.wax-seal-wrapper:hover {
   transform: scale(1.06) translateY(-2px);
}

.wax-seal-glow-ring {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 90px;
   height: 90px;
   border-radius: 50%;
   transform: translate(-50%, -60%);
   background: radial-gradient(circle, rgba(244, 222, 144, 0.45) 0%, rgba(212, 175, 55, 0.15) 60%, transparent 100%);
   pointer-events: none;
   animation: sealPulse 2.8s infinite ease-in-out;
}

@keyframes sealPulse {

   0%,
   100% {
      transform: translate(-50%, -60%) scale(0.95);
      opacity: 0.6;
   }

   50% {
      transform: translate(-50%, -60%) scale(1.25);
      opacity: 1;
   }
}

.wax-seal-stamp {
   position: relative;
   width: 92px;
   height: 92px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: filter 0.3s ease;
}

.wax-seal-svg {
   width: 100%;
   height: 100%;
   display: block;
   overflow: visible;
   filter: drop-shadow(0 6px 16px rgba(50, 32, 4, 0.35));
}

.wax-seal-wrapper:hover .wax-seal-svg {
   filter: drop-shadow(0 10px 24px rgba(184, 144, 71, 0.5));
}

/* Elegant Pill Badge Beneath Wax Seal */
.wax-seal-pill {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   background: rgba(255, 254, 250, 0.95);
   border: 1px solid var(--color-border-gold);
   border-radius: 20px;
   padding: 4px 14px;
   margin-top: 6px;
   box-shadow: 0 3px 10px rgba(54, 43, 31, 0.08);
   transition: all 0.25s ease;
}

.wax-seal-wrapper:hover .wax-seal-pill {
   background: #FFFFFF;
   border-color: var(--color-gold);
   box-shadow: 0 4px 14px rgba(184, 144, 71, 0.25);
}

.wax-seal-pulse-dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--color-gold);
   animation: dotPulse 1.8s infinite ease-in-out;
}

@keyframes dotPulse {

   0%,
   100% {
      transform: scale(0.85);
      opacity: 0.6;
   }

   50% {
      transform: scale(1.3);
      opacity: 1;
   }
}

.wax-seal-pill-text {
   font-family: var(--font-title);
   font-size: 0.62rem;
   letter-spacing: 2px;
   font-weight: 600;
   color: var(--color-gold-dark);
   text-transform: uppercase;
}

/* Inner Letter Card Inside Envelope */
.opening-card {
   position: relative;
   background: var(--bg-card);
   border: 1px solid var(--color-border-gold);
   outline: 1px solid rgba(216, 195, 154, 0.45);
   outline-offset: 5px;
   border-radius: 6px;
   padding: 30px 22px 28px;
   text-align: center;
   margin: 0 12px 14px;
   box-shadow: 0 4px 16px rgba(54, 43, 31, 0.06);
   overflow: hidden;
}

.invitation-badge-top {
   display: block;
   width: 100%;
   text-align: center;
   font-family: var(--font-title);
   font-size: 0.74rem;
   letter-spacing: 3.5px;
   text-transform: uppercase;
   color: var(--color-gold-dark);
   margin: 4px 0 16px;
   font-weight: 600;
}

/* Bismillah */
.bismillah-wrap {
   margin-bottom: 12px;
}

.bismillah-arabic {
   font-family: var(--font-arabic);
   font-size: 1.65rem;
   color: var(--color-gold-dark);
   line-height: 1.4;
}

.bismillah-english {
   font-family: var(--font-serif);
   font-style: italic;
   font-size: 0.82rem;
   color: var(--color-muted);
   margin-top: 2px;
}

/* Personalized Guest Sash Ribbon */
.opening-guest-sash {
   background: var(--bg-card-subtle);
   border: 1px solid var(--color-border-gold);
   outline: 1px solid rgba(216, 195, 154, 0.35);
   outline-offset: 3px;
   border-radius: 4px;
   padding: 8px 22px;
   margin: 12px auto 14px;
   display: inline-flex;
   flex-direction: column;
   align-items: center;
   gap: 3px;
   box-shadow: 0 2px 6px rgba(54, 43, 31, 0.04);
}

.opening-guest-label {
   font-family: var(--font-title);
   font-size: 0.65rem;
   letter-spacing: 2.5px;
   text-transform: uppercase;
   color: var(--color-gold-dark);
   font-weight: 600;
}

.opening-guest-name {
   font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif;
   font-size: 1.25rem;
   font-weight: 700;
   color: #1A1614;
}

/* Couple names in envelope */
.opening-couple-names {
   margin: 8px 0 6px;
}

.opening-groom-name,
.opening-bride-name {
   font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif;
   font-size: 1.7rem;
   font-weight: 700;
   color: #1A1614;
   line-height: 1.25;
   letter-spacing: 0.5px;
}

.opening-ampersand-wrap {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   margin: 2px 0;
}

.opening-ampersand {
   font-family: "Playfair Display", serif;
   font-style: italic;
   font-size: 1.4rem;
   color: var(--color-gold);
}

.opening-date-preview {
   font-family: var(--font-title);
   font-size: 0.78rem;
   letter-spacing: 3px;
   color: var(--color-gold-dark);
   margin-top: 8px;
   font-weight: 600;
}

/* Open Invitation Button */
.open-invitation-btn {
   background: #1C1816;
   color: #FFFDF9;
   border: 1.5px solid var(--color-border-gold);
   padding: 12px 30px;
   border-radius: 30px;
   font-family: var(--font-title);
   font-size: 0.8rem;
   letter-spacing: 2.5px;
   text-transform: uppercase;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   gap: 10px;
   transition: all 0.3s ease;
   box-shadow: 0 4px 16px rgba(28, 24, 22, 0.25);
   margin-top: 10px;
}

.open-invitation-btn svg {
   width: 16px;
   height: 16px;
   transition: transform 0.3s ease;
}

.open-invitation-btn:hover {
   background: #000000;
   border-color: var(--color-gold);
   transform: translateY(-2px);
   box-shadow: 0 8px 24px rgba(184, 144, 71, 0.35);
}

.open-invitation-btn:hover svg {
   transform: translateX(4px);
}

.opening-music-note {
   font-size: 0.72rem;
   color: var(--color-muted);
   margin-top: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
}

/* --------------------------------------------------------------------------
   Main Container & Card Wrapper (The Luxury Wedding Stationery Card)
   -------------------------------------------------------------------------- */
main {
   position: relative;
   z-index: 2;
   width: 100%;
   max-width: 600px;
   margin: 0 auto;
   padding: 24px 16px 60px;
   display: flex;
   flex-direction: column;
   gap: 28px;
}

.container {
   width: 100%;
}

/* --------------------------------------------------------------------------
   THE HERO WEDDING INVITATION CARD (Ultra-Luxury Royal Edition)
   -------------------------------------------------------------------------- */
.hero-card {
   position: relative;
   background: radial-gradient(ellipse at 50% 12%, #FFFFFF 0%, #FAF6ED 55%, #F4ECE0 100%);
   border: 2px solid #D4AF37;
   border-radius: 8px;
   padding: 42px 24px 34px;
   text-align: center;
   box-shadow:
      0 24px 60px rgba(45, 34, 22, 0.14),
      0 4px 18px rgba(212, 175, 55, 0.18),
      inset 0 0 0 1px rgba(255, 255, 255, 0.9),
      inset 0 0 35px rgba(240, 220, 180, 0.25);
   overflow: hidden;
}

/* Delicate Luxury Inner Fillet Frame */
.hero-inner-fillet {
   position: absolute;
   inset: 9px;
   border: 1px dashed rgba(212, 175, 55, 0.55);
   border-radius: 4px;
   pointer-events: none;
   z-index: 1;
}

/* Royal Arch Pinnacle Crest at the top */
.royal-arch-crest {
   margin: 0 auto 6px;
   width: 140px;
   height: 28px;
   position: relative;
   z-index: 2;
}

.royal-crest-svg {
   width: 100%;
   height: 100%;
   display: block;
   filter: drop-shadow(0 1px 3px rgba(184, 144, 71, 0.3));
}

/* Watercolor Floral Corners (Reference 1 & 4) */
.floral-corner-tl {
   position: absolute;
   top: 0;
   left: 0;
   width: 140px;
   height: auto;
   pointer-events: none;
   mix-blend-mode: multiply;
   opacity: 0.88;
   z-index: 0;
}

.floral-corner-br {
   position: absolute;
   bottom: 0;
   right: 0;
   width: 150px;
   height: auto;
   pointer-events: none;
   mix-blend-mode: multiply;
   opacity: 0.88;
   z-index: 0;
}

/* Corner Filigree SVGs (Rich 48x48 Arabesque) */
.corner-ornament {
   position: absolute;
   width: 44px;
   height: 44px;
   pointer-events: none;
   opacity: 0.9;
   z-index: 2;
   filter: drop-shadow(0 1px 2px rgba(184, 144, 71, 0.3));
}

.corner-top-left {
   top: 14px;
   left: 14px;
}

.corner-top-right {
   top: 14px;
   right: 14px;
   transform: rotate(90deg);
}

.corner-bottom-left {
   bottom: 14px;
   left: 14px;
   transform: rotate(-90deg);
}

.corner-bottom-right {
   bottom: 14px;
   right: 14px;
   transform: rotate(180deg);
}

/* Bismillah in Hero Card with Gold Foil Shimmer */
.hero-bismillah-wrap {
   position: relative;
   z-index: 2;
   margin-bottom: 2px;
}

.hero-bismillah {
   font-family: var(--font-arabic);
   font-size: 1.85rem;
   line-height: 1.4;
   color: #261B12;
   background: linear-gradient(115deg,
      #221B16 0%,
      #352A20 28%,
      #9A7228 44%,
      #D4AF37 48%,
      #FFF6D8 50%,
      #D4AF37 52%,
      #9A7228 56%,
      #352A20 72%,
      #221B16 100%);
   background-size: 250% 100%;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   animation: goldTextShimmer 7.5s ease-in-out infinite;
}

.hero-bismillah-sub {
   font-family: var(--font-serif);
   font-style: italic;
   font-size: 0.82rem;
   color: var(--color-muted);
   margin-bottom: 8px;
   position: relative;
   z-index: 2;
}

/* Category Badge (e.g. RECEPTION CEREMONY / WEDDING CEREMONY) */
.card-ceremony-type {
   font-family: var(--font-title);
   font-size: 0.95rem;
   letter-spacing: 4px;
   text-transform: uppercase;
   color: var(--color-charcoal);
   font-weight: 600;
   margin: 16px 0 4px;
   position: relative;
   z-index: 2;
}

/* Gold Divider with Continuous Subtle Light Reflection */
.gold-divider {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   margin: 16px auto;
   width: 100%;
   max-width: 240px;
   position: relative;
   z-index: 2;
}

.gold-divider::before,
.gold-divider::after {
   content: "";
   flex: 1;
   height: 1px;
   background: linear-gradient(90deg,
         transparent 0%,
         var(--color-border-gold) 25%,
         #FFE89E 50%,
         var(--color-border-gold) 75%,
         transparent 100%);
   background-size: 200% 100%;
   animation: dividerGleam 4.5s ease-in-out infinite;
}

.gold-divider::before {
   animation-direction: normal;
}

.gold-divider::after {
   animation-direction: reverse;
}

@keyframes dividerGleam {
   0% {
      background-position: -100% 0;
   }

   50%,
   100% {
      background-position: 100% 0;
   }
}

.gold-divider-icon {
   display: inline-block;
   color: var(--color-gold);
   font-size: 0.95rem;
   animation: goldIconPulse 3.5s ease-in-out infinite;
}

@keyframes goldIconPulse {

   0%,
   100% {
      filter: drop-shadow(0 0 1px rgba(212, 175, 55, 0.3));
      transform: scale(1);
   }

   50% {
      filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.75)) drop-shadow(0 0 10px rgba(255, 234, 167, 0.45));
      transform: scale(1.12);
   }
}

/* Request Lead & Body */
.hero-request-lead {
   font-family: var(--font-serif);
   font-size: 0.95rem;
   letter-spacing: 1px;
   color: var(--color-muted);
   text-transform: uppercase;
   margin-top: 12px;
   position: relative;
   z-index: 2;
}

.hero-request-body {
   font-family: var(--font-serif);
   font-size: 1.05rem;
   line-height: 1.55;
   color: var(--color-charcoal-light);
   margin: 6px auto 18px;
   max-width: 440px;
   position: relative;
   z-index: 2;
}

/* Couple Names Spotlight (Calligraphy Masterpiece with Gold Foil Sweep) */
.couple-spotlight {
   position: relative;
   z-index: 2;
   margin: 16px 0;
}

.person-card {
   margin: 4px 0;
}

.person-name {
   font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif;
   font-size: 2.25rem;
   font-weight: 700;
   color: #1A1614;
   line-height: 1.22;
   letter-spacing: 0.5px;
   background: linear-gradient(115deg,
         #1A1614 0%,
         #2B2420 30%,
         #9A7228 44%,
         #D4AF37 48%,
         #FFF6D8 50%,
         #D4AF37 52%,
         #9A7228 56%,
         #2B2420 70%,
         #1A1614 100%);
   background-size: 250% 100%;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   animation: goldTextShimmer 7s ease-in-out infinite;
   filter: drop-shadow(0 2px 10px rgba(184, 144, 71, 0.22));
}

@keyframes goldTextShimmer {

   0%,
   25% {
      background-position: 100% 0;
   }

   75%,
   100% {
      background-position: -100% 0;
   }
}

.person-parent {
   font-family: var(--font-serif);
   font-size: 0.96rem;
   color: #7D612B;
   font-weight: 600;
   margin-top: 4px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
}

.royal-parent-tag {
   display: inline-block;
   font-family: var(--font-title);
   font-size: 0.6rem;
   letter-spacing: 1.5px;
   background: rgba(184, 144, 71, 0.12);
   border: 0.5px solid rgba(184, 144, 71, 0.4);
   color: #8C6826;
   padding: 1px 7px;
   border-radius: 10px;
   font-weight: 600;
}

.person-address {
   font-family: var(--font-serif);
   font-size: 0.88rem;
   color: #5C5248;
   margin-top: 2px;
}

.couple-connector {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   margin: 10px 0;
}

.couple-connector span.ampersand {
   font-family: "Cormorant Garamond", Georgia, serif;
   font-style: italic;
   font-size: 1.85rem;
   color: #B8860B;
   text-shadow: 0 1px 6px rgba(212, 175, 55, 0.35);
}

.couple-connector span.connector-flourish {
   color: #D4AF37;
   font-size: 1.1rem;
   opacity: 0.85;
}

/* Dinner & Celebration script badge */
.card-script-subtitle {
   font-family: var(--font-script);
   font-size: 1.8rem;
   color: var(--color-gold-dark);
   margin: 8px 0 16px;
   position: relative;
   z-index: 2;
}

/* --------------------------------------------------------------------------
   Metadata Details Table (Exact Layout from Reference 1 & 4)
   -------------------------------------------------------------------------- */
.details-table-card {
   position: relative;
   z-index: 2;
   background: var(--bg-card-subtle);
   border: 1px solid var(--color-border-subtle);
   border-radius: 6px;
   padding: 18px 20px;
   margin: 22px auto;
   max-width: 440px;
   text-align: left;
}

.detail-row {
   display: grid;
   grid-template-columns: 24px 80px 14px 1fr;
   align-items: center;
   padding: 9px 0;
   border-bottom: 1px dashed var(--color-border-subtle);
   font-size: 0.82rem;
}

.detail-row:last-child {
   border-bottom: none;
   padding-bottom: 2px;
}

.detail-row:first-child {
   padding-top: 2px;
}

.detail-icon {
   color: var(--color-gold);
   display: flex;
   align-items: center;
   justify-content: center;
}

.detail-icon svg {
   width: 16px;
   height: 16px;
}

.detail-label {
   font-family: var(--font-title);
   font-size: 0.72rem;
   letter-spacing: 1.5px;
   font-weight: 600;
   color: var(--color-gold-dark);
   text-transform: uppercase;
}

.detail-sep {
   color: var(--color-border-gold);
   font-weight: 300;
}

.detail-value {
   font-family: var(--font-sans);
   font-size: 0.82rem;
   font-weight: 500;
   color: var(--color-charcoal);
   text-transform: uppercase;
   letter-spacing: 0.5px;
}

/* --------------------------------------------------------------------------
   Ceremony Highlights Trio (Nikah | Dinner | Celebration - Reference 4)
   -------------------------------------------------------------------------- */
.ceremony-trio-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 10px;
   margin: 18px 0;
   position: relative;
   z-index: 2;
}

.ceremony-trio-card {
   background: var(--bg-card);
   border: 1px solid var(--color-border-subtle);
   border-radius: 6px;
   padding: 12px 6px;
   text-align: center;
   transition: transform 0.2s ease;
}

.ceremony-trio-icon {
   font-size: 1.25rem;
   margin-bottom: 4px;
}

.ceremony-trio-title {
   font-family: var(--font-title);
   font-size: 0.7rem;
   letter-spacing: 1px;
   font-weight: 600;
   color: var(--color-charcoal);
   text-transform: uppercase;
}

.ceremony-trio-time {
   font-size: 0.72rem;
   color: var(--color-gold-dark);
   font-weight: 500;
   margin-top: 2px;
}

/* Presence Quote */
.card-presence-quote {
   font-family: var(--font-title);
   font-size: 0.74rem;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: var(--color-charcoal-light);
   line-height: 1.6;
   margin: 18px auto 6px;
   max-width: 360px;
   position: relative;
   z-index: 2;
}

/* --------------------------------------------------------------------------
   Countdown Timer Box
   -------------------------------------------------------------------------- */
.countdown-box {
   position: relative;
   z-index: 2;
   margin-top: 24px;
   padding-top: 20px;
   border-top: 1px solid var(--color-border-subtle);
}

.countdown-title {
   font-family: var(--font-title);
   font-size: 0.72rem;
   letter-spacing: 2.5px;
   text-transform: uppercase;
   color: var(--color-gold-dark);
   margin-bottom: 14px;
   font-weight: 600;
}

/* ── Interactive Scratch Card Wrapper ── */
.scratch-card-wrapper {
   position: relative;
   max-width: 440px;
   margin: 0 auto;
   background: var(--bg-card);
   border: 1.5px solid var(--color-border-gold);
   border-radius: 14px;
   padding: 16px 14px;
   box-shadow: 0 6px 22px rgba(54, 43, 31, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
   overflow: hidden;
   user-select: none;
   -webkit-user-select: none;
   touch-action: none;
   transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Royal Golden Ambient Aura Glow (Triggered when Scratch Card is Unveiled) ── */
.scratch-card-wrapper.has-aura-glow {
   border-color: #D4AF37;
   background: linear-gradient(135deg, rgba(255, 253, 248, 0.98), rgba(250, 242, 226, 0.96));
   box-shadow:
      0 0 24px rgba(212, 175, 55, 0.45),
      0 0 55px rgba(184, 144, 71, 0.28),
      inset 0 0 16px rgba(255, 234, 167, 0.35);
   animation: goldenAuraBreathe 3.5s ease-in-out infinite alternate;
}

@keyframes goldenAuraBreathe {
   0% {
      box-shadow:
         0 0 18px rgba(212, 175, 55, 0.35),
         0 0 40px rgba(184, 144, 71, 0.2),
         inset 0 0 12px rgba(255, 234, 167, 0.28);
      border-color: rgba(212, 175, 55, 0.7);
   }

   100% {
      box-shadow:
         0 0 32px rgba(212, 175, 55, 0.65),
         0 0 70px rgba(218, 165, 32, 0.38),
         inset 0 0 24px rgba(255, 234, 167, 0.5);
      border-color: rgba(235, 192, 85, 0.98);
   }
}

.countdown-box.has-aura-glow .countdown-title {
   color: #936B1E;
   text-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
   animation: goldTextShimmer 6s ease-in-out infinite;
}

.scratch-card-wrapper.has-aura-glow .timer-item {
   background: linear-gradient(180deg, #FFFFFF, #FAF5EB);
   border-color: rgba(212, 175, 55, 0.65);
   box-shadow: 0 4px 14px rgba(184, 144, 71, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9);
   transform: translateY(-2px);
   transition: all 0.5s ease;
}

.scratch-card-wrapper.has-aura-glow .timer-number {
   color: #1A140F;
   text-shadow: 0 0 8px rgba(212, 175, 55, 0.35);
}

/* ── Scratch Canvas Overlay ── */
.scratch-canvas {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 10;
   cursor: crosshair;
   border-radius: inherit;
   transition: opacity 0.5s ease;
}

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

/* ── Scratch Prompt Badge ── */
.scratch-badge {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 12;
   pointer-events: none;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: rgba(30, 8, 12, 0.88);
   border: 1px solid #ECC870;
   border-radius: 20px;
   padding: 6px 14px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 10px rgba(212, 175, 55, 0.4);
   backdrop-filter: blur(4px);
   animation: scratchBadgePulse 2s infinite ease-in-out;
   transition: opacity 0.35s ease;
}

.scratch-badge.is-hidden {
   opacity: 0;
}

@keyframes scratchBadgePulse {

   0%,
   100% {
      transform: translate(-50%, -50%) scale(1);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 8px rgba(212, 175, 55, 0.3);
   }

   50% {
      transform: translate(-50%, -50%) scale(1.05);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 18px rgba(212, 175, 55, 0.7);
   }
}

.scratch-badge-icon {
   font-size: 0.85rem;
}

.scratch-badge-text {
   font-family: var(--font-title);
   font-size: 0.65rem;
   letter-spacing: 2px;
   font-weight: 600;
   color: #FFF2CC;
   text-transform: uppercase;
}

/* ── Fullscreen Fireworks / Crackers Celebration Canvas ── */
.fireworks-canvas {
   position: fixed;
   inset: 0;
   width: 100vw;
   height: 100vh;
   pointer-events: none;
   z-index: 999999;
}

.timer-grid {
   display: flex;
   justify-content: center;
   gap: 12px;
}

.timer-item {
   background: linear-gradient(180deg, #FFFFFF 0%, #FAF5EB 100%);
   border: 1px solid #D4AF37;
   border-radius: 8px;
   padding: 10px 14px;
   min-width: 64px;
   display: flex;
   flex-direction: column;
   align-items: center;
   box-shadow: 0 4px 12px rgba(54, 43, 31, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}

.timer-number {
   font-family: "Playfair Display", Georgia, serif;
   font-size: 1.65rem;
   font-weight: 700;
   color: #241A12;
   line-height: 1.1;
   background: linear-gradient(135deg, #1F1710 0%, #8C6721 50%, #D4AF37 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

.timer-label {
   font-family: var(--font-title);
   font-size: 0.6rem;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   color: var(--color-gold-dark);
   margin-top: 2px;
}

.countdown-celebration-msg {
   font-family: var(--font-serif);
   font-style: italic;
   font-size: 1.15rem;
   color: var(--color-gold-dark);
   margin-top: 12px;
   display: none;
   animation: celebrationPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes celebrationPop {
   0% {
      opacity: 0;
      transform: scale(0.85);
   }

   100% {
      opacity: 1;
      transform: scale(1);
   }
}

/* --------------------------------------------------------------------------
   Generic Luxury Card Frame (For Greeting, Timeline, Venues, RSVP)
   -------------------------------------------------------------------------- */
.luxury-card {
   position: relative;
   background: var(--bg-card);
   border: 1px solid var(--color-border-gold);
   outline: 1px solid rgba(216, 195, 154, 0.4);
   outline-offset: 4px;
   border-radius: 6px;
   padding: 36px 24px;
   box-shadow: var(--shadow-card);
}

.section-header {
   text-align: center;
   margin-bottom: 22px;
}

.section-subtitle {
   font-family: var(--font-script);
   font-size: 1.6rem;
   color: var(--color-gold);
   line-height: 1.2;
}

.section-title {
   font-family: var(--font-title);
   font-size: 1.25rem;
   letter-spacing: 3px;
   text-transform: uppercase;
   color: var(--color-charcoal);
   font-weight: 600;
   margin-top: 2px;
   background: linear-gradient(115deg,
         #2B2623 0%,
         #3D3531 35%,
         #B89047 46%,
         #FFEBAC 50%,
         #B89047 54%,
         #3D3531 65%,
         #2B2623 100%);
   background-size: 250% 100%;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   animation: goldTextShimmer 7s ease-in-out infinite;
   animation-delay: 1.2s;
}

/* --------------------------------------------------------------------------
   Personalized Guest Greeting Card — Ultra-Luxury Royal Parchment Edition
   -------------------------------------------------------------------------- */
.greeting-card {
   text-align: center;
   position: relative;
   background: radial-gradient(ellipse at 50% 25%, #FFFDF9 0%, #FAF6EE 65%, #F5EFE3 100%);
   border: 1.5px solid rgba(212, 175, 55, 0.6);
   box-shadow: 
      0 12px 38px rgba(54, 43, 31, 0.08),
      0 2px 12px rgba(184, 144, 71, 0.12),
      inset 0 0 24px rgba(212, 175, 55, 0.06);
   padding: 30px 22px 26px;
   border-radius: 16px;
   overflow: hidden;
}

/* Delicate Inner Fillet Frame for Cards */
.card-inner-fillet {
   position: absolute;
   inset: 7px;
   border: 1px dashed rgba(212, 175, 55, 0.52);
   border-radius: 11px;
   pointer-events: none;
   z-index: 1;
}

/* Greeting Card Corner Ornaments */
.greeting-card .corner-ornament {
   width: 34px;
   height: 34px;
   opacity: 0.85;
   z-index: 2;
}

.greeting-card .corner-top-left {
   top: 10px;
   left: 10px;
}

.greeting-card .corner-top-right {
   top: 10px;
   right: 10px;
}

.greeting-card .corner-bottom-left {
   bottom: 10px;
   left: 10px;
}

.greeting-card .corner-bottom-right {
   bottom: 10px;
   right: 10px;
}

.greeting-content-wrap {
   position: relative;
   z-index: 2;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.guest-badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   font-family: var(--font-title);
   font-size: 0.68rem;
   letter-spacing: 2.2px;
   text-transform: uppercase;
   color: #7A5812;
   background: linear-gradient(135deg, rgba(255, 246, 224, 0.95) 0%, rgba(245, 230, 190, 0.85) 50%, rgba(255, 249, 235, 0.95) 100%);
   border: 1px solid rgba(212, 175, 55, 0.65);
   border-radius: 20px;
   padding: 5px 16px;
   margin-bottom: 10px;
   box-shadow: 0 2px 8px rgba(184, 144, 71, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9);
   font-weight: 600;
}

.guest-name-heading {
   font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
   font-size: clamp(1.85rem, 5.5vw, 2.45rem);
   font-weight: 600;
   color: #1A3022;
   line-height: 1.2;
   letter-spacing: 0.4px;
   margin: 4px 0 6px;
   text-shadow: 0 1px 2px rgba(212, 175, 55, 0.15);
}

.greeting-gold-divider {
   margin: 6px auto 10px;
   max-width: 140px;
}

.guest-greeting-sub {
   font-family: var(--font-serif);
   font-size: clamp(0.92rem, 2.7vw, 1.05rem);
   font-style: italic;
   color: #554D46;
   max-width: 440px;
   margin: 0 auto;
   line-height: 1.55;
   letter-spacing: 0.2px;
}

@media (max-width: 480px) {
   .greeting-card {
      padding: 22px 14px 18px;
   }
   .greeting-card .corner-ornament {
      width: 26px;
      height: 26px;
   }
   .greeting-card .corner-top-left {
      top: 8px;
      left: 8px;
   }
   .greeting-card .corner-top-right {
      top: 8px;
      right: 8px;
   }
   .greeting-card .corner-bottom-left {
      bottom: 8px;
      left: 8px;
   }
   .greeting-card .corner-bottom-right {
      bottom: 8px;
      right: 8px;
   }
}

/* --------------------------------------------------------------------------
   Timeline Section (Inspired by Reference 3 - Illustrated Pathway)
   -------------------------------------------------------------------------- */
.timeline-stream {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 18px;
}

.timeline-stream::before {
   content: "";
   position: absolute;
   top: 15px;
   bottom: 15px;
   left: 14px;
   width: 2px;
   background: linear-gradient(to bottom, #D4AF37, rgba(212, 175, 55, 0.35) 50%, #D4AF37);
   border-radius: 1px;
}

.timeline-item {
   position: relative;
   display: flex;
   gap: 14px;
   padding-left: 2px;
}

.timeline-node {
   position: relative;
   z-index: 2;
   width: 22px;
   height: 22px;
   border-radius: 50%;
   background: radial-gradient(circle at 35% 35%, #FFF2CC 0%, #ECC870 40%, #C59B27 80%, #9A7228 100%);
   border: 2.5px solid #FFFFFF;
   flex-shrink: 0;
   margin-top: 14px;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.55), 0 3px 8px rgba(45, 34, 22, 0.2);
}

.timeline-node::after {
   content: "";
   width: 5px;
   height: 5px;
   background: #FFFFFF;
   border-radius: 50%;
   box-shadow: 0 0 4px rgba(255, 255, 255, 0.9);
}

/* Normal Premium Timeline Card: Balanced luxury parchment with clean gold borders */
.timeline-card {
   flex: 1;
   position: relative;
   background: linear-gradient(165deg, #FFFFFF 0%, #FDFBF7 55%, #F7EFE1 100%);
   border: 1.5px solid rgba(212, 175, 55, 0.45);
   border-radius: 12px;
   padding: 16px 18px 15px;
   box-shadow: 
      0 6px 20px rgba(54, 43, 31, 0.07),
      0 1px 4px rgba(212, 175, 55, 0.12),
      inset 0 0 0 1px rgba(255, 255, 255, 0.95);
   overflow: hidden;
   transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Subtle Top Gold Foil Accent Strip */
.timeline-card::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 2.5px;
   background: linear-gradient(90deg, transparent 0%, #D4AF37 25%, #ECC870 50%, #D4AF37 75%, transparent 100%);
   opacity: 0.9;
}

.timeline-card:hover {
   border-color: rgba(212, 175, 55, 0.85);
   transform: translateY(-3px);
   box-shadow: 
      0 12px 30px rgba(54, 43, 31, 0.11),
      0 3px 12px rgba(212, 175, 55, 0.22),
      inset 0 0 0 1px #FFFFFF;
}

.event-date-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   gap: 6px;
   margin-bottom: 8px;
   padding-bottom: 6px;
   border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.event-date-badge {
   font-family: "Cinzel", "Playfair Display", Georgia, serif;
   font-size: 0.7rem;
   letter-spacing: 1.4px;
   text-transform: uppercase;
   color: #8C6514;
   font-weight: 700;
}

.event-time-badge {
   font-size: 0.72rem;
   color: #423223;
   font-weight: 600;
   display: inline-flex;
   align-items: center;
   gap: 4px;
   background: rgba(236, 200, 112, 0.18);
   border: 1px solid rgba(212, 175, 55, 0.35);
   padding: 2.5px 9px;
   border-radius: 12px;
}

.event-time-badge svg {
   color: #9C730A;
}

.event-highlight-badge {
   font-family: "Cinzel", serif;
   font-size: 0.62rem;
   font-weight: 700;
   letter-spacing: 1px;
   background: linear-gradient(135deg, #ECC870, #D4AF37);
   color: #241706;
   padding: 2.5px 8px;
   border-radius: 10px;
   box-shadow: 0 1px 4px rgba(184, 144, 71, 0.3);
   text-transform: uppercase;
}

.event-title {
   font-family: "Cinzel", "Playfair Display", Georgia, serif;
   font-size: 1.22rem;
   font-weight: 700;
   color: #1F1710;
   margin-bottom: 4px;
   line-height: 1.3;
   letter-spacing: 0.3px;
}

.event-desc {
   font-size: 0.84rem;
   color: #52473D;
   line-height: 1.48;
   margin-bottom: 10px;
}

/* Event Route for Barat */
.event-route {
   background: rgba(247, 240, 228, 0.65);
   border: 1px dashed rgba(212, 175, 55, 0.55);
   border-radius: 8px;
   padding: 8px 12px;
   margin-bottom: 10px;
   display: flex;
   flex-direction: column;
   gap: 5px;
   font-size: 0.8rem;
   color: #32251A;
}

.event-route-from,
.event-route-to {
   display: flex;
   align-items: center;
   gap: 6px;
}

.event-venue-text {
   font-size: 0.82rem;
   color: #3E3024;
   font-weight: 500;
   display: flex;
   align-items: flex-start;
   gap: 8px;
   background: rgba(255, 255, 255, 0.65);
   border: 1px solid rgba(212, 175, 55, 0.28);
   border-radius: 8px;
   padding: 7px 11px;
   margin-bottom: 11px;
   line-height: 1.35;
}

.event-venue-text svg {
   width: 15px;
   height: 15px;
   flex-shrink: 0;
   margin-top: 1px;
   color: #C59B27;
}

.event-actions {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
}

.btn-secondary-link {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: linear-gradient(135deg, #FFFFFF 0%, #FAF5EB 100%);
   border: 1px solid rgba(212, 175, 55, 0.6);
   color: #6E4909;
   padding: 6px 14px;
   border-radius: 20px;
   font-family: "Cinzel", serif;
   font-size: 0.68rem;
   font-weight: 700;
   letter-spacing: 0.8px;
   text-decoration: none;
   text-transform: uppercase;
   box-shadow: 0 2px 6px rgba(184, 144, 71, 0.1);
   transition: all 0.25s ease;
}

.btn-secondary-link svg {
   width: 12px;
   height: 12px;
   color: #C59B27;
   transition: color 0.2s ease;
}

.btn-secondary-link:hover {
   background: linear-gradient(135deg, #ECC870 0%, #D4AF37 100%);
   color: #1E1204;
   border-color: #C59B27;
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(212, 175, 55, 0.32);
}

.btn-secondary-link:hover svg {
   color: #1E1204;
}

/* --------------------------------------------------------------------------
   Venues Section (With Vintage Hand-Drawn Sketch Illustration)
   -------------------------------------------------------------------------- */
.venue-sketch-wrapper {
   margin: 0 auto 22px;
   text-align: center;
   border-radius: 6px;
   overflow: hidden;
   border: 1px solid var(--color-border-subtle);
   background: #FFFFFF;
   box-shadow: 0 4px 14px rgba(54, 43, 31, 0.06);
}

.venue-sketch-img {
   width: 100%;
   height: auto;
   max-height: 240px;
   object-fit: cover;
   display: block;
}

.venue-card-grid {
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.venue-card {
   position: relative;
   text-align: center;
   background: radial-gradient(ellipse at 50% 15%, #FFFFFF 0%, #FAF6EE 55%, #F5EDE0 100%);
   border: 1.5px solid rgba(212, 175, 55, 0.55);
   border-radius: 12px;
   padding: 14px 16px 13px;
   box-shadow: 
      0 6px 18px rgba(54, 43, 31, 0.06),
      0 1px 4px rgba(212, 175, 55, 0.12),
      inset 0 0 0 1px rgba(255, 255, 255, 0.95);
   outline: none !important;
   overflow: hidden;
   transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Subtle Top Gold Foil Shimmer Accent */
.venue-card::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 2.5px;
   background: linear-gradient(90deg, transparent 0%, #D4AF37 25%, #ECC870 50%, #D4AF37 75%, transparent 100%);
   opacity: 0.95;
}

/* Delicate Luxury Inner Fillet Dashed Gold Frame */
.venue-inner-fillet {
   position: absolute;
   inset: 5px;
   border: 1px dashed rgba(212, 175, 55, 0.38);
   border-radius: 8px;
   pointer-events: none;
   z-index: 1;
}

.venue-card:hover {
   border-color: rgba(212, 175, 55, 0.9);
   transform: translateY(-2px);
   box-shadow: 
      0 10px 26px rgba(54, 43, 31, 0.1),
      0 3px 10px rgba(212, 175, 55, 0.2),
      inset 0 0 0 1px #FFFFFF;
}

.venue-top-row {
   position: relative;
   z-index: 2;
   margin-bottom: 4px;
}

.venue-badge-pill {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   padding: 2.5px 12px;
   border-radius: 14px;
   background: linear-gradient(135deg, rgba(236, 200, 112, 0.22) 0%, rgba(255, 234, 167, 0.45) 50%, rgba(212, 175, 55, 0.22) 100%);
   border: 1px solid rgba(212, 175, 55, 0.5);
   box-shadow: 0 1px 3px rgba(184, 144, 71, 0.1);
   font-family: "Cinzel", "Playfair Display", Georgia, serif;
   font-size: 0.62rem;
   font-weight: 700;
   letter-spacing: 1.3px;
   text-transform: uppercase;
   color: #7B5207;
}

.venue-pill-pin {
   color: #B8860B;
   flex-shrink: 0;
}

.venue-title {
   position: relative;
   z-index: 2;
   font-family: "Cinzel", "Playfair Display", Georgia, serif;
   font-size: 1.18rem;
   font-weight: 700;
   color: #1B1209;
   margin: 0 0 3px;
   letter-spacing: 0.3px;
   line-height: 1.25;
}

.venue-address {
   position: relative;
   z-index: 2;
   font-size: 0.8rem;
   color: #4E3E30;
   font-weight: 500;
   margin: 0 0 5px;
   line-height: 1.35;
}

.venue-time-badge {
   position: relative;
   z-index: 2;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 5px;
   background: rgba(247, 240, 228, 0.7);
   border: 1px solid rgba(212, 175, 55, 0.35);
   border-radius: 6px;
   padding: 3px 10px;
   font-size: 0.74rem;
   color: #3A2A1A;
   font-weight: 600;
   margin: 0 0 9px;
   line-height: 1.3;
}

.venue-time-badge svg {
   color: #C59B27;
   flex-shrink: 0;
}

.venue-btn-wrap {
   position: relative;
   z-index: 2;
}

/* Royal Gold Polished Compact Get Directions Button */
.venue-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   padding: 6px 18px;
   border-radius: 20px;
   background: linear-gradient(135deg, #ECC870 0%, #D4AF37 50%, #B8860B 100%);
   color: #1A1004;
   font-family: "Cinzel", "Playfair Display", Georgia, serif;
   font-size: 0.68rem;
   font-weight: 800;
   letter-spacing: 1.3px;
   text-transform: uppercase;
   text-decoration: none;
   border: 1px solid #FFEAA7;
   box-shadow: 
      0 2px 8px rgba(212, 175, 55, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.8);
   transition: all 0.25s ease;
}

.venue-btn svg {
   width: 12px;
   height: 12px;
   color: #1A1004;
   transition: transform 0.2s ease;
}

.venue-btn:hover {
   background: linear-gradient(135deg, #FFEAA7 0%, #ECC870 50%, #D4AF37 100%);
   transform: translateY(-1px);
   box-shadow: 0 4px 14px rgba(212, 175, 55, 0.45);
   color: #0E0802;
}

.venue-btn:hover svg {
   transform: translateX(2px) translateY(-1px);
}


/* --------------------------------------------------------------------------
   RSVP Section
   -------------------------------------------------------------------------- */
.rsvp-card {
   padding: 20px 18px;
}

.rsvp-header {
   text-align: center;
   margin-bottom: 12px;
}

.rsvp-question-lead {
   font-family: var(--font-serif);
   font-size: 0.92rem;
   font-style: italic;
   color: var(--color-charcoal-light);
   margin-top: 2px;
}

.rsvp-form {
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.form-group {
   display: flex;
   flex-direction: column;
   gap: 4px;
}

.form-label {
   font-family: var(--font-title);
   font-size: 0.65rem;
   letter-spacing: 1.2px;
   text-transform: uppercase;
   color: var(--color-gold-dark);
   font-weight: 600;
   display: flex;
   align-items: center;
   gap: 5px;
}

.form-label svg {
   width: 12px;
   height: 12px;
}

.form-input,
.form-select,
.form-textarea {
   width: 100%;
   background: var(--bg-card-subtle);
   border: 1px solid var(--color-border-subtle);
   border-radius: 6px;
   padding: 8px 12px;
   font-family: var(--font-sans);
   font-size: 0.82rem;
   color: var(--color-charcoal);
   transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-textarea {
   min-height: 52px;
   resize: vertical;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
   outline: none;
   border-color: var(--color-gold);
   background: #FFFFFF;
   box-shadow: 0 0 0 2px rgba(184, 144, 71, 0.15);
}

.radio-group-cards {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 8px;
}

.radio-card {
   border: 1px solid var(--color-border-subtle);
   background: var(--bg-card-subtle);
   border-radius: 6px;
   padding: 7px 10px;
   display: flex;
   align-items: center;
   gap: 6px;
   cursor: pointer;
   font-size: 0.78rem;
   font-weight: 500;
   transition: all 0.2s ease;
}

.radio-card:has(input:checked) {
   border-color: var(--color-gold);
   background: var(--bg-card-accent);
   color: var(--color-charcoal);
}

.rsvp-submit-btn {
   background: var(--color-charcoal);
   color: #FFFDF9;
   border: 1px solid var(--color-border-gold);
   padding: 9px 24px;
   border-radius: 24px;
   font-family: var(--font-title);
   font-size: 0.75rem;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   cursor: pointer;
   transition: all 0.3s ease;
   box-shadow: 0 4px 14px rgba(43, 38, 35, 0.15);
   margin-top: 4px;
}

.rsvp-submit-btn:hover {
   background: #181514;
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(43, 38, 35, 0.25);
}

/* Success Confirmation Box */
.rsvp-success-box {
   display: none;
   background: linear-gradient(135deg, rgba(255, 253, 248, 0.98), rgba(246, 239, 226, 0.95));
   border: 1.5px solid var(--color-gold-warm);
   border-radius: 8px;
   padding: 28px 24px;
   text-align: center;
   margin-top: 14px;
   box-shadow: 0 8px 30px rgba(184, 144, 71, 0.15);
   animation: fadeInScale 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes fadeInScale {
   from {
      opacity: 0;
      transform: scale(0.96) translateY(10px);
   }

   to {
      opacity: 1;
      transform: scale(1) translateY(0);
   }
}

.rsvp-success-icon {
   width: 52px;
   height: 52px;
   border-radius: 50%;
   background: rgba(37, 211, 102, 0.12);
   border: 1.5px solid #25D366;
   color: #25D366;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 14px;
   box-shadow: 0 4px 16px rgba(37, 211, 102, 0.2);
}

.rsvp-success-title {
   font-family: var(--font-serif);
   font-size: 1.5rem;
   font-weight: 600;
   color: var(--color-charcoal);
   margin-bottom: 6px;
   letter-spacing: 0.5px;
}

.rsvp-success-desc {
   font-size: 0.88rem;
   color: var(--color-charcoal-light);
   margin-bottom: 18px;
   line-height: 1.5;
   max-width: 440px;
   margin-left: auto;
   margin-right: auto;
}

.rsvp-confirmed-badge {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: rgba(184, 144, 71, 0.12);
   border: 1px solid var(--color-gold-warm);
   color: #8C6826;
   padding: 8px 18px;
   border-radius: 20px;
   font-size: 0.82rem;
   font-weight: 600;
   letter-spacing: 0.6px;
   text-transform: uppercase;
}

.whatsapp-rsvp-btn:hover {
   background: #1EBE5D;
   transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Best Compliments & Family Contacts Section — Ultra-Luxury Royal Edition
   -------------------------------------------------------------------------- */
.compliments-card {
   text-align: center;
   position: relative;
   background: radial-gradient(ellipse at 50% 25%, #FFFDF9 0%, #FAF6EE 65%, #F5EFE3 100%);
   border: 1.5px solid rgba(212, 175, 55, 0.6);
   box-shadow: 
      0 12px 38px rgba(54, 43, 31, 0.08),
      0 2px 12px rgba(184, 144, 71, 0.12),
      inset 0 0 24px rgba(212, 175, 55, 0.06);
   padding: 28px 22px 24px;
   border-radius: 16px;
   overflow: hidden;
}

/* Compliments Card Corner Ornaments */
.compliments-card .corner-ornament {
   width: 34px;
   height: 34px;
   opacity: 0.85;
   z-index: 2;
}

.compliments-card .corner-top-left {
   top: 10px;
   left: 10px;
}

.compliments-card .corner-top-right {
   top: 10px;
   right: 10px;
}

.compliments-card .corner-bottom-left {
   bottom: 10px;
   left: 10px;
}

.compliments-card .corner-bottom-right {
   bottom: 10px;
   right: 10px;
}

.compliments-content-wrap {
   position: relative;
   z-index: 2;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.compliments-title {
   font-family: var(--font-title);
   font-size: 0.68rem;
   letter-spacing: 2.5px;
   text-transform: uppercase;
   color: #8C6A18;
   font-weight: 600;
   margin-bottom: 4px;
}

/* Clear, Dignified, High-Visibility Typography for Md. Islam */
.compliments-name {
   font-family: "Cinzel", "Cormorant Garamond", "Playfair Display", Georgia, serif;
   font-size: clamp(1.65rem, 5vw, 2.15rem);
   font-weight: 700;
   letter-spacing: 1.5px;
   color: #172D20;
   margin: 4px 0 6px;
   line-height: 1.25;
   text-shadow: 0 1px 2px rgba(212, 175, 55, 0.2);
}

.compliments-gold-divider {
   margin: 8px auto 12px;
   max-width: 150px;
}

.rsvp-contacts-block {
   margin-top: 4px;
   width: 100%;
}

.rsvp-contacts-title {
   font-family: var(--font-title);
   font-size: 0.72rem;
   letter-spacing: 3px;
   color: #8F6E28;
   font-weight: 700;
   margin-bottom: 10px;
}

.rsvp-contacts-list {
   display: flex;
   justify-content: center;
   gap: 8px;
   flex-wrap: wrap;
   margin-bottom: 8px;
}

.rsvp-contact-item {
   font-family: "Cinzel", "Cormorant Garamond", Georgia, serif;
   font-size: 0.88rem;
   font-weight: 600;
   color: #0C3325;
   background: linear-gradient(135deg, #FFFDF8 0%, #FAF4E6 100%);
   border: 1.2px solid #D4AF37;
   padding: 6px 16px;
   border-radius: 20px;
   box-shadow: 0 3px 10px rgba(184, 144, 71, 0.15);
   letter-spacing: 0.8px;
   transition: all 0.25s ease;
}

.rsvp-contact-item:hover {
   border-color: #8F6E28;
   background: #FFFFFF;
   transform: translateY(-2px);
   box-shadow: 0 6px 16px rgba(184, 144, 71, 0.28);
   color: #000000;
}

.rsvp-relatives-note {
   font-family: var(--font-serif);
   font-style: italic;
   font-size: 0.85rem;
   color: #6B6258;
   margin-top: 2px;
}

@media (max-width: 480px) {
   .compliments-card {
      padding: 22px 14px 18px;
   }
   .compliments-card .corner-ornament {
      width: 26px;
      height: 26px;
   }
   .compliments-card .corner-top-left {
      top: 8px;
      left: 8px;
   }
   .compliments-card .corner-top-right {
      top: 8px;
      right: 8px;
   }
   .compliments-card .corner-bottom-left {
      bottom: 8px;
      left: 8px;
   }
   .compliments-card .corner-bottom-right {
      bottom: 8px;
      right: 8px;
   }
   .compliments-name {
      font-size: 1.55rem;
      letter-spacing: 1px;
   }
   .rsvp-contact-item {
      font-size: 0.80rem;
      letter-spacing: 0.6px;
      padding: 5px 14px;
   }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
   text-align: center;
   padding: 20px 16px 36px;
}

.footer-quote {
   font-family: var(--font-serif);
   font-style: italic;
   font-size: 1rem;
   color: var(--color-charcoal-light);
}

/* --------------------------------------------------------------------------
   Cinema-Grade Smooth Scroll Transitions & Reveal
   -------------------------------------------------------------------------- */
.scroll-progress-bar {
   position: fixed;
   top: 0;
   left: 0;
   height: 3px;
   width: 0%;
   background: linear-gradient(90deg, #D4AF37 0%, #F5DEB3 50%, #B8860B 100%);
   z-index: 9999;
   pointer-events: none;
   transition: width 0.12s ease-out;
   box-shadow: 0 1px 8px rgba(212, 175, 55, 0.7);
}

.fade-in-scroll {
   opacity: 0;
   transform: translateY(35px) scale(0.98);
   filter: blur(4px);
   transition:
      opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
      filter 0.85s cubic-bezier(0.16, 1, 0.3, 1);
   will-change: opacity, transform, filter;
}

.fade-in-scroll.is-visible {
   opacity: 1;
   transform: translateY(0) scale(1);
   filter: blur(0);
}

.timeline-item.fade-in-scroll {
   transform: translateY(40px) scale(0.97);
}

.timeline-item.fade-in-scroll.is-visible {
   transform: translateY(0) scale(1);
}

/* --------------------------------------------------------------------------
   Mobile View Fine-Tuning (Responsive Optimization)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
   main {
      padding: 16px 12px 60px;
      gap: 22px;
   }

   .opening-card-wrapper {
      max-width: 95%;
   }

   .opening-envelope {
      padding-top: 36px;
   }

   .envelope-top-flap {
      height: 54px;
   }

   .wax-seal-wrapper {
      margin: -26px auto 10px;
   }

   .wax-seal-stamp {
      width: 82px;
      height: 82px;
   }

   .opening-card {
      padding: 24px 16px 20px;
      margin: 0 8px 10px;
   }

   .opening-groom-name,
   .opening-bride-name {
      font-size: 1.45rem;
   }

   .hero-card {
      padding: 44px 18px 36px;
      outline-offset: 4px;
   }

   .details-card {
      padding: 36px 16px 30px;
      outline-offset: 4px;
   }

   .floral-corner-tl {
      width: 105px;
   }

   .floral-corner-br {
      width: 115px;
   }

   .person-name {
      font-size: 2.05rem;
   }

   .card-ceremony-type {
      font-size: 0.85rem;
      letter-spacing: 3px;
   }

   .detail-row {
      grid-template-columns: 20px 68px 10px 1fr;
      font-size: 0.78rem;
   }

   .detail-label {
      font-size: 0.68rem;
   }

   .detail-value {
      font-size: 0.78rem;
   }

   .timer-grid {
      gap: 8px;
   }

   .timer-item {
      min-width: 52px;
      padding: 8px 10px;
   }

   .timer-number {
      font-size: 1.35rem;
   }

   .timer-label {
      font-size: 0.55rem;
   }

   .guest-name-heading {
      font-size: 2.4rem;
   }

   .ceremony-trio-grid {
      gap: 6px;
   }

   .ceremony-trio-card {
      padding: 10px 4px;
   }

   .ceremony-trio-title {
      font-size: 0.64rem;
   }

   .ceremony-trio-time {
      font-size: 0.66rem;
   }
}

/* ==========================================================================
   FULL-SCREEN ROYAL ENVELOPE — OPENING EXPERIENCE
   Features 3-Second Circular Rotating Light + 3D Top Flap Opening
   ========================================================================== */

/* ── Full-Screen Overlay ── */
.fs-envelope-overlay {
   position: fixed;
   inset: 0;
   z-index: 99999;
   display: flex;
   align-items: center;
   justify-content: center;
   background: radial-gradient(ellipse at 50% 40%, #F5F1E9 0%, #E8E2D6 50%, #D8CFC0 85%, #C7BCA9 100%);
   overflow: hidden;
   user-select: none;
   -webkit-user-select: none;
   transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0.9s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.fs-envelope-overlay.is-unveiling {
   opacity: 0;
   visibility: hidden;
   transform: scale(1.04);
   pointer-events: none;
}

.fs-envelope-overlay.is-hidden {
   display: none !important;
}

/* ── Envelope 3D Container (Sage Olive Textured Velvet Paper - Reference Image) ── */
.fs-envelope {
   position: relative;
   width: 100%;
   max-width: 440px;
   height: 100%;
   max-height: 900px;
   margin: 0 auto;
   perspective: 1400px;
   transform-style: preserve-3d;
   overflow: hidden;
   cursor: pointer;
   background: radial-gradient(circle at 50% 25%, #4C5D3D 0%, #39472B 45%, #27331C 80%, #1B2413 100%);
   box-shadow: 0 35px 95px rgba(10, 16, 8, 0.75), 0 0 35px rgba(76, 93, 61, 0.3);
   border: 1px solid rgba(212, 175, 55, 0.4);
   border-radius: 16px;
}

@media (max-width: 500px) {
   .fs-envelope {
      max-width: 100vw;
      max-height: 100vh;
      border-radius: 0;
      box-shadow: none;
   }
   .env-inner-fillet {
      inset: 7px;
   }
   .env-corner-ornament {
      width: 30px;
      height: 30px;
   }
   .env-corner-ornament.corner-top-left {
      top: 9px;
      left: 9px;
   }
   .env-corner-ornament.corner-top-right {
      top: 9px;
      right: 9px;
   }
   .env-corner-ornament.corner-bottom-left {
      bottom: 9px;
      left: 9px;
   }
   .env-corner-ornament.corner-bottom-right {
      bottom: 9px;
      right: 9px;
   }
   .fs-royal-crest {
      width: 100px;
      height: 20px;
      margin-bottom: 3px;
   }
   .fs-envelope-header {
      top: 9%;
   }
   .fs-hint-pill-btn {
      min-width: 220px;
      padding: 9px 20px;
   }
   .fs-hint-text {
      font-size: 0.74rem;
      letter-spacing: 2.2px;
   }
   .fs-bf-1 { width: 26px; height: 21px; }
   .fs-bf-2 { width: 22px; height: 18px; }
   .fs-bf-3 { width: 18px; height: 15px; }
}

/* Authentic Paper Grain & Fiber Overlay */
.fs-paper-grain {
   position: absolute;
   inset: 0;
   background-image:
      radial-gradient(#6B7752 0.75px, transparent 0.75px),
      radial-gradient(#2E3521 0.75px, transparent 0.75px);
   background-size: 16px 16px, 24px 24px;
   background-position: 0 0, 8px 8px;
   opacity: 0.16;
   pointer-events: none;
   z-index: 4;
}

/* ── Delicate Inner Gold Fillet Frame for Royal Envelope ── */
.env-inner-fillet {
   position: absolute;
   inset: 10px;
   border: 1.5px dashed rgba(236, 200, 112, 0.55);
   border-radius: 12px;
   pointer-events: none;
   z-index: 5;
   box-shadow: inset 0 0 16px rgba(212, 175, 55, 0.08);
}

/* ── Royal Filigree Corner Ornaments (Golden Jali for Envelope) ── */
.env-corner-ornament {
   position: absolute;
   width: 38px;
   height: 38px;
   pointer-events: none;
   z-index: 6;
   opacity: 0.92;
   filter: drop-shadow(0 2px 5px rgba(10, 16, 8, 0.6));
}

.env-corner-ornament.corner-top-left {
   top: 13px;
   left: 13px;
}

.env-corner-ornament.corner-top-right {
   top: 13px;
   right: 13px;
   transform: rotate(90deg);
}

.env-corner-ornament.corner-bottom-left {
   bottom: 13px;
   left: 13px;
   transform: rotate(-90deg);
}

.env-corner-ornament.corner-bottom-right {
   bottom: 13px;
   right: 13px;
   transform: rotate(180deg);
}

/* ── Upper Envelope Typography & Royal Crest ── */
.fs-envelope-header {
   position: absolute;
   top: 10%;
   left: 50%;
   transform: translateX(-50%);
   width: 90%;
   max-width: 400px;
   text-align: center;
   z-index: 25;
   pointer-events: none;
   transition: opacity 0.5s ease, transform 0.5s ease;
}

.fs-royal-crest {
   width: 120px;
   height: 24px;
   margin: 0 auto 5px;
   filter: drop-shadow(0 2px 4px rgba(10, 16, 8, 0.5));
}

.fs-crest-svg {
   width: 100%;
   height: 100%;
   display: block;
}

.fs-header-subtitle {
   font-family: var(--font-title);
   font-size: 0.72rem;
   letter-spacing: 3.5px;
   text-transform: uppercase;
   color: #F3EBD8;
   font-weight: 600;
   margin-bottom: 2px;
   text-shadow: 0 1px 4px rgba(10, 16, 8, 0.7);
}

.fs-header-couple-name {
   font-family: 'Great Vibes', 'Allura', 'Pinyon Script', cursive;
   font-size: clamp(2.9rem, 8.5vw, 3.8rem);
   font-weight: 500;
   color: #FFFFFF;
   line-height: 1.15;
   text-shadow: 
      0 2px 4px rgba(0, 0, 0, 0.95),
      0 0 1px rgba(0, 0, 0, 0.8);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
   margin: 0;
}

.fs-header-amp {
   font-family: 'Cormorant Garamond', Georgia, serif;
   font-style: italic;
   font-weight: 600;
   font-size: 0.75em;
   color: #FFDF85;
   margin: 0 4px;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95);
   -webkit-font-smoothing: antialiased;
}

.fs-gold-divider {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   max-width: 150px;
   margin: 4px auto 8px;
}

.fs-divider-line {
   flex: 1;
   height: 1px;
   background: linear-gradient(90deg, transparent, #ECC870, transparent);
   opacity: 0.75;
}

.fs-divider-icon {
   color: #ECC870;
   font-size: 0.85rem;
   text-shadow: 0 0 8px rgba(236, 200, 112, 0.7);
}

.fs-header-guest-badge {
   display: inline-block;
   text-align: center;
   font-family: var(--font-title);
   font-size: clamp(0.52rem, 1.8vw, 0.62rem);
   letter-spacing: 0.8px;
   line-height: 1.4;
   text-transform: uppercase;
   color: #FFF3D4;
   background: linear-gradient(135deg, rgba(24, 34, 18, 0.94) 0%, rgba(38, 52, 28, 0.9) 100%);
   padding: 7px 22px;
   border-radius: 20px;
   border: 1px solid rgba(236, 200, 112, 0.8);
   box-shadow: 
      0 4px 14px rgba(10, 16, 8, 0.7), 
      inset 0 0 10px rgba(236, 200, 112, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.25);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
   font-weight: 600;
   max-width: 98%;
   box-sizing: border-box;
   margin-top: 6px;
   word-break: normal;
   overflow-wrap: normal;
}

/* ──────────────────────────────────────────────────────────────────────────
   ENCHANTED FLYING GOLDEN BUTTERFLIES
   Realistic 3D Wing Flapping & Smooth Floating Motion
   ────────────────────────────────────────────────────────────────────────── */
.fs-butterflies-container {
   position: absolute;
   inset: 0;
   pointer-events: none;
   z-index: 15;
   overflow: hidden;
}

.fs-butterfly {
   position: absolute;
   pointer-events: none;
   filter: drop-shadow(0 0 8px rgba(236, 200, 112, 0.8)) drop-shadow(0 3px 6px rgba(10, 16, 8, 0.6));
   perspective: 400px;
   transform-style: preserve-3d;
   will-change: transform, top, left;
}

.fs-butterfly-svg {
   width: 100%;
   height: 100%;
   display: block;
   overflow: visible;
}

/* 3D Realistic Wing Flapping Animations */
.bf-wing {
   display: inline-block;
   transform-origin: 25px 20px;
}

.bf-wing-left {
   animation: bfWingFlapLeft 0.18s cubic-bezier(0.4, 0, 0.6, 1) infinite alternate;
}

.bf-wing-right {
   animation: bfWingFlapRight 0.18s cubic-bezier(0.4, 0, 0.6, 1) infinite alternate;
}

@keyframes bfWingFlapLeft {
   0% {
      transform: rotateY(0deg) skewY(0deg);
   }
   100% {
      transform: rotateY(-65deg) skewY(-5deg);
   }
}

@keyframes bfWingFlapRight {
   0% {
      transform: rotateY(0deg) skewY(0deg);
   }
   100% {
      transform: rotateY(65deg) skewY(5deg);
   }
}

/* Sparkle Pixie Dust Trail */
.bf-sparkle-trail {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 4px;
   height: 4px;
   border-radius: 50%;
   background: #FFEFA8;
   box-shadow: 
      0 0 8px #ECC870,
      -3px 5px 12px rgba(255, 235, 170, 0.85),
      3px 7px 10px rgba(212, 175, 55, 0.7);
   opacity: 0.8;
   animation: bfSparklePulse 1s infinite ease-in-out alternate;
}

@keyframes bfSparklePulse {
   0% {
      opacity: 0.35;
      transform: translate(-50%, -50%) scale(0.7);
   }
   100% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1.35);
   }
}

/* Butterfly 1: Graceful Golden Butterfly Hovering Near Couple's Name */
.fs-bf-1 {
   width: 32px;
   height: 26px;
   top: 12%;
   left: 82%;
   animation: bfFlightPath1 10s ease-in-out infinite alternate;
}

@keyframes bfFlightPath1 {
   0% {
      top: 12%;
      left: 82%;
      transform: rotate(-12deg) scale(0.95);
   }
   25% {
      top: 8%;
      left: 86%;
      transform: rotate(15deg) scale(1.05);
   }
   50% {
      top: 16%;
      left: 80%;
      transform: rotate(-6deg) scale(1);
   }
   75% {
      top: 10%;
      left: 85%;
      transform: rotate(-18deg) scale(0.92);
   }
   100% {
      top: 14%;
      left: 83%;
      transform: rotate(12deg) scale(1.02);
   }
}

/* Butterfly 2: Playful Butterfly Fluttering Near Wax Seal & Ribbon */
.fs-bf-2 {
   width: 26px;
   height: 21px;
   top: 56%;
   left: 17%;
   animation: bfFlightPath2 13s ease-in-out infinite alternate;
}

@keyframes bfFlightPath2 {
   0% {
      top: 56%;
      left: 17%;
      transform: rotate(20deg) scale(0.9);
   }
   25% {
      top: 49%;
      left: 27%;
      transform: rotate(-14deg) scale(1.05);
   }
   50% {
      top: 58%;
      left: 36%;
      transform: rotate(10deg) scale(0.95);
   }
   75% {
      top: 46%;
      left: 21%;
      transform: rotate(-18deg) scale(1);
   }
   100% {
      top: 56%;
      left: 17%;
      transform: rotate(20deg) scale(0.9);
   }
}

/* Butterfly 3: Delicate Tiny Glider in Upper Left */
.fs-bf-3 {
   width: 22px;
   height: 18px;
   top: 8%;
   left: 15%;
   animation: bfFlightPath3 8.5s ease-in-out infinite alternate;
}

@keyframes bfFlightPath3 {
   0% {
      top: 8%;
      left: 15%;
      transform: rotate(24deg) scale(0.85);
   }
   35% {
      top: 13%;
      left: 23%;
      transform: rotate(-12deg) scale(1);
   }
   70% {
      top: 6%;
      left: 28%;
      transform: rotate(14deg) scale(0.92);
   }
   100% {
      top: 8%;
      left: 15%;
      transform: rotate(24deg) scale(0.85);
   }
}

/* When Envelope Flap is Opened: Butterflies soar upward into the light burst */
.fs-envelope.fs-top-flap-open .fs-bf-1 {
   transition: all 1.4s cubic-bezier(0.2, 0.8, 0.2, 1);
   transform: translate(80px, -200px) rotate(45deg) scale(0.2) !important;
   opacity: 0;
}

.fs-envelope.fs-top-flap-open .fs-bf-2 {
   transition: all 1.6s cubic-bezier(0.2, 0.8, 0.2, 1);
   transform: translate(-100px, -240px) rotate(-45deg) scale(0.2) !important;
   opacity: 0;
}

.fs-envelope.fs-top-flap-open .fs-bf-3 {
   transition: all 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
   transform: translate(-60px, -180px) rotate(35deg) scale(0.2) !important;
   opacity: 0;
}

/* ==========================================================================
   LANDING PAGE CARDS: FLYING GOLDEN BUTTERFLIES
   ========================================================================== */
.card-butterflies-container {
   position: absolute;
   inset: 0;
   pointer-events: none;
   z-index: 10;
   overflow: hidden;
}

.card-butterfly {
   position: absolute;
   pointer-events: none;
   filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.75)) drop-shadow(0 2px 4px rgba(45, 34, 22, 0.35));
   perspective: 400px;
   transform-style: preserve-3d;
   will-change: transform, top, left;
}

.card-butterfly-svg {
   width: 100%;
   height: 100%;
   display: block;
   overflow: visible;
}

.card-butterfly .bf-wing {
   display: inline-block;
   transform-origin: 25px 20px;
}

.card-butterfly .bf-wing-left {
   animation: bfWingFlapLeft 0.19s cubic-bezier(0.4, 0, 0.6, 1) infinite alternate;
}

.card-butterfly .bf-wing-right {
   animation: bfWingFlapRight 0.19s cubic-bezier(0.4, 0, 0.6, 1) infinite alternate;
}

/* --- Hero Card Butterfly 1: Hovering near top Royal Arch & Bismillah --- */
.hero-bf-1 {
   width: 28px;
   height: 23px;
   top: 6%;
   left: 78%;
   animation: heroBfFlight1 11s ease-in-out infinite alternate;
}

@keyframes heroBfFlight1 {
   0% {
      top: 6%;
      left: 78%;
      transform: rotate(-8deg) scale(0.95);
   }
   25% {
      top: 10%;
      left: 84%;
      transform: rotate(18deg) scale(1.05);
   }
   50% {
      top: 15%;
      left: 73%;
      transform: rotate(-14deg) scale(1);
   }
   75% {
      top: 9%;
      left: 64%;
      transform: rotate(-22deg) scale(0.92);
   }
   100% {
      top: 6%;
      left: 78%;
      transform: rotate(-8deg) scale(0.95);
   }
}

/* --- Hero Card Butterfly 2: Fluttering near Couple Names --- */
.hero-bf-2 {
   width: 24px;
   height: 20px;
   top: 35%;
   left: 10%;
   animation: heroBfFlight2 12.5s ease-in-out infinite alternate;
}

@keyframes heroBfFlight2 {
   0% {
      top: 35%;
      left: 10%;
      transform: rotate(16deg) scale(0.9);
   }
   30% {
      top: 30%;
      left: 20%;
      transform: rotate(-12deg) scale(1.05);
   }
   60% {
      top: 40%;
      left: 15%;
      transform: rotate(20deg) scale(0.95);
   }
   85% {
      top: 36%;
      left: 7%;
      transform: rotate(-8deg) scale(1);
   }
   100% {
      top: 35%;
      left: 10%;
      transform: rotate(16deg) scale(0.9);
   }
}

/* --- Hero Card Butterfly 3: Gliding around Countdown Timer / Date --- */
.hero-bf-3 {
   width: 22px;
   height: 18px;
   top: 78%;
   left: 80%;
   animation: heroBfFlight3 9.5s ease-in-out infinite alternate;
}

@keyframes heroBfFlight3 {
   0% {
      top: 78%;
      left: 80%;
      transform: rotate(-16deg) scale(0.9);
   }
   35% {
      top: 73%;
      left: 72%;
      transform: rotate(14deg) scale(1.05);
   }
   70% {
      top: 82%;
      left: 85%;
      transform: rotate(-10deg) scale(0.95);
   }
   100% {
      top: 78%;
      left: 80%;
      transform: rotate(-16deg) scale(0.9);
   }
}

/* --- Guest Greeting Card Butterfly --- */
.greeting-bf {
   width: 26px;
   height: 21px;
   top: 10%;
   left: 82%;
   animation: greetingBfFlight 10.5s ease-in-out infinite alternate;
}

@keyframes greetingBfFlight {
   0% {
      top: 10%;
      left: 82%;
      transform: rotate(14deg) scale(0.95);
   }
   30% {
      top: 17%;
      left: 72%;
      transform: rotate(-16deg) scale(1.05);
   }
   65% {
      top: 8%;
      left: 62%;
      transform: rotate(12deg) scale(0.92);
   }
   85% {
      top: 15%;
      left: 85%;
      transform: rotate(-18deg) scale(1);
   }
   100% {
      top: 10%;
      left: 82%;
      transform: rotate(14deg) scale(0.95);
   }
}

/* --- Best Compliments Card Butterfly --- */
.compliments-bf {
   width: 25px;
   height: 20px;
   top: 12%;
   left: 14%;
   animation: complimentsBfFlight 11.5s ease-in-out infinite alternate;
}

@keyframes complimentsBfFlight {
   0% {
      top: 12%;
      left: 14%;
      transform: rotate(-15deg) scale(0.95);
   }
   35% {
      top: 7%;
      left: 25%;
      transform: rotate(18deg) scale(1.05);
   }
   70% {
      top: 19%;
      left: 19%;
      transform: rotate(-10deg) scale(0.92);
   }
   100% {
      top: 12%;
      left: 14%;
      transform: rotate(-15deg) scale(0.95);
   }
}

@media (max-width: 480px) {
   .hero-bf-1 {
      width: 24px;
      height: 20px;
      left: 74%;
   }
   .hero-bf-2 {
      width: 20px;
      height: 17px;
      left: 6%;
   }
   .hero-bf-3 {
      width: 19px;
      height: 16px;
      left: 76%;
   }
   .greeting-bf {
      width: 22px;
      height: 18px;
      left: 78%;
   }
   .compliments-bf {
      width: 21px;
      height: 17px;
      left: 10%;
   }
}


/* ── Horizontal Sage Olive Crochet Lace Ribbon (Matching Reference Image) ── */
.fs-crochet-lace-ribbon {
   position: absolute;
   top: 50%;
   left: 0;
   width: 100%;
   height: 82px;
   transform: translateY(-50%);
   z-index: 12;
   pointer-events: none;
   overflow: visible;
}

.fs-lace-svg {
   width: 100%;
   height: 100%;
   display: block;
   filter: drop-shadow(0 4px 8px rgba(18, 24, 12, 0.45));
}

/* ── Golden Light Burst (Beams shoot upward as top flap flips open) ── */
.fs-light-burst {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 100vmax;
   height: 100vmax;
   pointer-events: none;
   z-index: 5;
   opacity: 0;
   transition: opacity 0.8s ease;
}

.fs-burst-core {
   position: absolute;
   inset: 0;
   border-radius: 50%;
   background: radial-gradient(circle at center, #FFFFFF 0%, #FFF5D0 16%, #F2C958 35%, rgba(212, 175, 55, 0.7) 55%, transparent 75%);
   transform: scale(0.1);
   transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.fs-burst-rays {
   position: absolute;
   inset: -20%;
   background: radial-gradient(circle at 50% 45%, rgba(255, 235, 160, 0.85) 0%, rgba(212, 175, 55, 0.45) 35%, transparent 68%);
   transform: scale(0.15);
   transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.fs-envelope.fs-top-flap-open .fs-light-burst {
   opacity: 1;
}

.fs-envelope.fs-top-flap-open .fs-burst-core {
   transform: scale(2.4);
}

.fs-envelope.fs-top-flap-open .fs-burst-rays {
   transform: scale(3.0);
}

/* ── Ambient Floating Gold Sparkles ── */
.fs-sparkles {
   position: absolute;
   inset: 0;
   pointer-events: none;
   z-index: 18;
   overflow: hidden;
}

.fs-sparkles span {
   position: absolute;
   border-radius: 50%;
   background: radial-gradient(circle, #FFEAA7 0%, #D4AF37 50%, transparent 70%);
   box-shadow: 0 0 10px rgba(242, 201, 88, 0.85);
   animation: fsSparkleFloat 7s infinite ease-in-out;
}

.fs-sparkles span:nth-child(1) {
   width: 6px;
   height: 6px;
   top: 14%;
   left: 12%;
   animation-delay: 0s;
   animation-duration: 8s;
}

.fs-sparkles span:nth-child(2) {
   width: 4px;
   height: 4px;
   top: 28%;
   right: 14%;
   animation-delay: 1.5s;
   animation-duration: 10s;
}

.fs-sparkles span:nth-child(3) {
   width: 8px;
   height: 8px;
   top: 68%;
   left: 10%;
   animation-delay: 2.2s;
   animation-duration: 9s;
}

.fs-sparkles span:nth-child(4) {
   width: 5px;
   height: 5px;
   top: 78%;
   right: 12%;
   animation-delay: 0.8s;
   animation-duration: 11s;
}

.fs-sparkles span:nth-child(5) {
   width: 7px;
   height: 7px;
   top: 48%;
   left: 20%;
   animation-delay: 3.2s;
   animation-duration: 8.5s;
}

.fs-sparkles span:nth-child(6) {
   width: 4px;
   height: 4px;
   top: 36%;
   right: 22%;
   animation-delay: 4.5s;
   animation-duration: 12s;
}

.fs-sparkles span:nth-child(7) {
   width: 5px;
   height: 5px;
   top: 85%;
   left: 42%;
   animation-delay: 1.9s;
   animation-duration: 9.5s;
}

.fs-sparkles span:nth-child(8) {
   width: 6px;
   height: 6px;
   top: 18%;
   left: 62%;
   animation-delay: 2.8s;
   animation-duration: 10.5s;
}

.fs-sparkles span:nth-child(9) {
   width: 4px;
   height: 4px;
   top: 60%;
   right: 35%;
   animation-delay: 0.4s;
   animation-duration: 7.8s;
}

.fs-sparkles span:nth-child(10) {
   width: 7px;
   height: 7px;
   top: 88%;
   right: 20%;
   animation-delay: 3.7s;
   animation-duration: 11.2s;
}

.fs-sparkles span:nth-child(11) {
   width: 5px;
   height: 5px;
   top: 22%;
   left: 38%;
   animation-delay: 2.1s;
   animation-duration: 8.8s;
}

.fs-sparkles span:nth-child(12) {
   width: 6px;
   height: 6px;
   top: 42%;
   left: 8%;
   animation-delay: 4.0s;
   animation-duration: 10.2s;
}

@keyframes fsSparkleFloat {
   0% {
      transform: translateY(0) scale(0.6);
      opacity: 0;
   }

   25% {
      opacity: 0.95;
   }

   50% {
      transform: translateY(-40px) scale(1.15);
      opacity: 0.75;
   }

   75% {
      opacity: 0.95;
   }

   100% {
      transform: translateY(-80px) scale(0.6);
      opacity: 0;
   }
}

/* ── INNER INVITATION CARD (Nestled in pocket, glides up on opening — Ultra-Luxury Royal Edition) ── */
.fs-inner-card {
   position: absolute;
   top: 17%;
   left: 50%;
   transform: translateX(-50%) translateY(20px);
   width: 88%;
   max-width: 395px;
   background: radial-gradient(ellipse at 50% 18%, #FFFFFF 0%, #FAF6EE 55%, #F4EBE0 100%);
   border: 2px solid #D4AF37;
   border-radius: 12px;
   padding: 18px 16px 16px;
   text-align: center;
   box-shadow: 
      0 18px 45px rgba(10, 16, 8, 0.48),
      0 3px 14px rgba(212, 175, 55, 0.35),
      inset 0 0 0 1px rgba(255, 255, 255, 0.95),
      inset 0 0 30px rgba(240, 220, 180, 0.3);
   z-index: 7;
   overflow: hidden;
   transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.1s,
      box-shadow 0.8s ease 0.1s;
}

/* Delicate Luxury Inner Fillet Dashed Gold Frame */
.fs-card-inner-fillet {
   position: absolute;
   inset: 7px;
   border: 1px dashed rgba(212, 175, 55, 0.58);
   border-radius: 8px;
   pointer-events: none;
   z-index: 1;
}

/* Royal Filigree Corner Ornaments (Golden Jali) */
.fs-card-corner {
   position: absolute;
   width: 38px;
   height: 38px;
   pointer-events: none;
   z-index: 2;
   filter: drop-shadow(0 1px 2px rgba(184, 144, 71, 0.4));
}

.fs-card-corner.corner-top-left {
   top: 6px;
   left: 6px;
}

.fs-card-corner.corner-top-right {
   top: 6px;
   right: 6px;
   transform: scaleX(-1);
}

.fs-card-corner.corner-bottom-left {
   bottom: 6px;
   left: 6px;
   transform: scaleY(-1);
}

.fs-card-corner.corner-bottom-right {
   bottom: 6px;
   right: 6px;
   transform: scale(-1);
}

/* Miniature Flying Butterfly on Inner Card */
.fs-card-mini-bf {
   position: absolute;
   top: 10px;
   right: 18px;
   width: 24px;
   height: 19px;
   z-index: 8;
   pointer-events: none;
   filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.85)) drop-shadow(0 2px 4px rgba(45, 34, 22, 0.3));
   animation: fsCardBfHover 5.5s ease-in-out infinite alternate;
}

@keyframes fsCardBfHover {
   0% {
      transform: translate(0, 0) rotate(10deg) scale(0.95);
   }
   50% {
      transform: translate(-6px, -4px) rotate(-14deg) scale(1.05);
   }
   100% {
      transform: translate(-2px, 3px) rotate(8deg) scale(0.98);
   }
}

.fs-card-mini-bf .bf-wing-left {
   animation: bfWingFlapLeft 0.19s cubic-bezier(0.4, 0, 0.6, 1) infinite alternate;
}

.fs-card-mini-bf .bf-wing-right {
   animation: bfWingFlapRight 0.19s cubic-bezier(0.4, 0, 0.6, 1) infinite alternate;
}

.fs-card-arch-frame {
   position: relative;
   z-index: 3;
   padding: 10px 8px 8px;
   background: radial-gradient(ellipse at 50% 35%, rgba(255, 248, 225, 0.6) 0%, transparent 80%);
}

/* Royal Arch Crest */
.fs-card-royal-crest {
   width: 100px;
   height: 18px;
   margin: 0 auto 4px;
}

.fs-card-crest-svg {
   width: 100%;
   height: 100%;
   display: block;
   filter: drop-shadow(0 1px 2px rgba(184, 144, 71, 0.35));
}

/* Holy Bismillah */
.fs-card-bismillah {
   font-family: 'Amiri', 'Traditional Arabic', serif;
   font-size: 1.25rem;
   font-weight: 700;
   color: #886212;
   margin-bottom: 2px;
   letter-spacing: 0.8px;
   text-shadow: 0 1px 2px rgba(255, 235, 170, 0.6);
}

.fs-card-bismillah-sub {
   font-family: 'Montserrat', sans-serif;
   font-size: 0.58rem;
   color: #8C7860;
   font-style: italic;
   letter-spacing: 0.5px;
   margin-bottom: 6px;
   text-transform: uppercase;
}

/* Delicate Royal Gold Flourish Divider */
.fs-card-divider {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   margin: 4px auto 8px;
   width: 80%;
   max-width: 220px;
}

.fs-cdiv-line {
   flex: 1;
   height: 1px;
   background: linear-gradient(90deg, transparent, #D4AF37, transparent);
}

.fs-cdiv-icon {
   color: #B8860B;
   font-size: 0.72rem;
   line-height: 1;
}

/* Couple Names */
.fs-card-couple {
   font-family: 'Cinzel', 'Playfair Display', Georgia, serif;
   font-size: 1.15rem;
   font-weight: 800;
   color: #1F150E;
   letter-spacing: 1.6px;
   text-transform: uppercase;
   margin-bottom: 6px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
   gap: 4px;
   text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9), 0 0 10px rgba(212, 175, 55, 0.22);
}

.fs-card-groom, .fs-card-bride {
   white-space: nowrap;
}

.fs-card-amp {
   font-family: 'Cormorant Garamond', Georgia, serif;
   font-style: italic;
   color: #C59B27;
   font-size: 1.25rem;
   font-weight: 600;
   text-transform: none;
   margin: 0 3px;
}

/* Royal Badge Pill */
.fs-card-badge-wrap {
   margin: 6px 0 2px;
}

.fs-card-badge {
   display: inline-block;
   padding: 4px 16px;
   border-radius: 20px;
   background: linear-gradient(135deg, rgba(236, 200, 112, 0.22) 0%, rgba(255, 234, 167, 0.42) 50%, rgba(212, 175, 55, 0.22) 100%);
   border: 1px solid rgba(212, 175, 55, 0.65);
   box-shadow: 0 2px 8px rgba(184, 144, 71, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.95);
   font-family: 'Cinzel', serif;
   font-size: 0.62rem;
   font-weight: 700;
   letter-spacing: 2px;
   color: #734B07;
   text-transform: uppercase;
}


/* When flap opens, allow 3D flap and inner card to extend smoothly */
.fs-envelope.fs-top-flap-open {
   overflow: visible;
}

/* Card slides upward when top flap flips open */
.fs-envelope.fs-top-flap-open .fs-inner-card {
   transform: translateX(-50%) translateY(-110px);
   box-shadow: 0 26px 65px rgba(0, 0, 0, 0.65), 0 0 30px rgba(245, 218, 128, 0.4);
   z-index: 14;
}

/* ── ENVELOPE LOWER POCKET (SAGE OLIVE WITH FIBER TEXTURE) ── */
.fs-env-pocket {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   background: radial-gradient(ellipse at 50% 65%, #566141 0%, #4B5537 55%, #3B432A 100%);
   box-shadow: inset 0 6px 30px rgba(18, 24, 12, 0.45);
   z-index: 8;
   overflow: hidden;
}

.fs-envelope-creases-svg {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   display: block;
   pointer-events: none;
}

.fs-pocket-inner-shadow {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 40px;
   background: linear-gradient(180deg, rgba(18, 24, 12, 0.35) 0%, transparent 100%);
}

/* ── TOP TRIANGULAR FLAP (SAGE OLIVE WITH 3D FLIP) ── */
.fs-flap-top {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 50%;
   transform-origin: top center;
   transform-style: preserve-3d;
   z-index: 11;
   transition: transform 1.25s cubic-bezier(0.25, 1, 0.35, 1);
   filter: drop-shadow(0 14px 26px rgba(18, 24, 12, 0.5));
}

.fs-flap-face {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
}

.fs-top-flap-contour {
   width: 100%;
   height: 100%;
   display: block;
}

.fs-flap-front {
   transform: rotateX(0deg);
   z-index: 2;
}

.fs-flap-back {
   background: linear-gradient(180deg, #4A5436 0%, #40492E 60%, #353D25 100%);
   transform: rotateX(180deg);
   box-shadow: inset 0 0 40px rgba(18, 24, 12, 0.4);
   z-index: 1;
   clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.fs-envelope.fs-top-flap-open .fs-flap-top {
   transform: rotateX(176deg);
   filter: drop-shadow(0 -16px 32px rgba(18, 24, 12, 0.4));
}

.fs-envelope.fs-top-flap-open .fs-envelope-header {
   opacity: 0;
   transform: translateX(-50%) translateY(-20px);
}

/* ── CENTER 100% CIRCULAR IVORY WAX SEAL (REFERENCE IMAGE) ── */
.fs-seal-anchor {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 140px;
   height: 140px;
   z-index: 25;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
   transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.fs-seal-anchor:hover {
   transform: translate(-50%, -50%) scale(1.04);
}

.fs-seal-anchor:active {
   transform: translate(-50%, -50%) scale(0.97);
}

.fs-envelope.fs-charging .fs-seal-anchor {
   transform: translate(-50%, -50%) scale(1.06);
}

.fs-seal-disc.fs-seal-circular {
   position: absolute;
   inset: 0;
   width: 140px;
   height: 140px;
   border-radius: 50%;
   filter: drop-shadow(0 14px 28px rgba(18, 24, 12, 0.6)) drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35));
   transition: filter 0.35s ease;
}

.fs-seal-disc svg {
   width: 100%;
   height: 100%;
   display: block;
}

.fs-seal-anchor:hover .fs-seal-disc {
   filter: drop-shadow(0 18px 36px rgba(18, 24, 12, 0.7)) drop-shadow(0 0 20px rgba(255, 245, 220, 0.4));
}

/* Seal Ambient Breathing Aura */
.fs-seal-glow {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 165px;
   height: 165px;
   border-radius: 50%;
   background: radial-gradient(circle at center, rgba(255, 250, 235, 0.3) 0%, rgba(138, 154, 106, 0.18) 50%, transparent 75%);
   pointer-events: none;
   z-index: -2;
   animation: sealGlowBreathe 3s ease-in-out infinite alternate;
}

@keyframes sealGlowBreathe {
   0% {
      opacity: 0.5;
      transform: translate(-50%, -50%) scale(0.95);
   }

   100% {
      opacity: 0.95;
      transform: translate(-50%, -50%) scale(1.08);
   }
}

/* ── "OPEN THE INVITATION" PROMINENT ROYAL BUTTON (DECOUPLED FROM SEAL SIZE) ── */
.fs-seal-hint {
   position: absolute;
   top: calc(100% + 20px);
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   flex-direction: column;
   align-items: center;
   cursor: pointer;
   z-index: 30;
   white-space: nowrap;
   pointer-events: auto;
}

.fs-hint-pill-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   min-width: 248px;
   padding: 10px 26px;
   border-radius: 30px;
   background: linear-gradient(135deg, #1B2613 0%, #29391D 50%, #15200F 100%);
   border: 1.5px solid #ECC870;
   box-shadow: 
      0 8px 24px rgba(10, 14, 6, 0.7), 
      0 0 16px rgba(236, 200, 112, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.3),
      inset 0 0 14px rgba(236, 200, 112, 0.2);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
   animation: promptBreathe 2.4s ease-in-out infinite alternate;
   position: relative;
   overflow: hidden;
}

.fs-hint-pill-btn::before {
   content: '';
   position: absolute;
   top: -50%;
   left: -60%;
   width: 40%;
   height: 200%;
   background: linear-gradient(90deg, transparent, rgba(255, 240, 190, 0.4), transparent);
   transform: rotate(25deg);
   animation: buttonSweep 4s infinite ease-in-out;
   pointer-events: none;
}

@keyframes buttonSweep {
   0%, 70% { left: -60%; opacity: 0; }
   85% { opacity: 1; }
   100% { left: 140%; opacity: 0; }
}

.fs-seal-anchor:hover .fs-hint-pill-btn,
.fs-hint-pill-btn:hover {
   transform: scale(1.05);
   background: linear-gradient(135deg, #24331A 0%, #354926 50%, #1E2E14 100%);
   border-color: #FFF0B8;
   box-shadow: 0 10px 30px rgba(10, 14, 6, 0.8), 0 0 24px rgba(236, 200, 112, 0.6);
}

.fs-hint-sparkle {
   font-size: 0.8rem;
   color: #ECC870;
   line-height: 1;
   text-shadow: 0 0 8px rgba(236, 200, 112, 0.7);
}

.fs-hint-text {
   font-family: var(--font-title);
   font-size: 0.8rem;
   letter-spacing: 3px;
   text-transform: uppercase;
   color: #FFFDF8;
   font-weight: 600;
   text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 8px rgba(236, 200, 112, 0.4);
   white-space: nowrap;
}

@keyframes promptBreathe {
   0% {
      opacity: 0.9;
      transform: translateY(0);
   }

   100% {
      opacity: 1;
      transform: translateY(-2px);
   }
}

/* ── 3-SECOND CIRCULAR ROTATING LIGHT SPINNER ── */
.fs-circular-spinner {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) scale(0.85);
   width: 165px;
   height: 165px;
   pointer-events: none;
   opacity: 0;
   transition: opacity 0.3s ease, transform 0.4s ease;
   z-index: -1;
}

/* Activated during charging */
.fs-envelope.fs-charging .fs-circular-spinner {
   opacity: 1;
   transform: translate(-50%, -50%) scale(1);
}

/* Primary Fast-Spinning Golden Arc */
.fs-spin-beam {
   position: absolute;
   inset: -10px;
   border-radius: 50%;
   background: conic-gradient(from 0deg, transparent 0%, transparent 55%, rgba(255, 235, 140, 0.45) 75%, #FFFFFF 100%);
   mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #fff calc(100% - 5px));
   -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #fff calc(100% - 5px));
   animation: fsRotateBeam 0.75s linear infinite;
   filter: drop-shadow(0 0 12px #FFE57F) drop-shadow(0 0 24px #E5A823);
}

/* Secondary Counter-Rotating Shimmer Arc */
.fs-spin-beam-reverse {
   position: absolute;
   inset: -18px;
   border-radius: 50%;
   background: conic-gradient(from 180deg, transparent 0%, transparent 65%, rgba(255, 240, 180, 0.6) 88%, #FFFFFF 100%);
   mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #fff calc(100% - 2.5px));
   -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #fff calc(100% - 2.5px));
   animation: fsRotateBeamReverse 1.35s linear infinite;
   filter: drop-shadow(0 0 8px #FFD700);
}

/* Expanding Concentric Pulsing Light Shockwaves */
.fs-spin-pulse-wave {
   position: absolute;
   inset: -6px;
   border-radius: 50%;
   border: 2px solid rgba(245, 218, 128, 0.9);
   box-shadow: 0 0 18px rgba(245, 218, 128, 0.7), inset 0 0 14px rgba(245, 218, 128, 0.5);
   opacity: 0;
}

.fs-envelope.fs-charging .fs-wave-1 {
   animation: fsPulseWave 1.4s infinite cubic-bezier(0.2, 0.8, 0.4, 1);
}

.fs-envelope.fs-charging .fs-wave-2 {
   animation: fsPulseWave 1.4s infinite cubic-bezier(0.2, 0.8, 0.4, 1) 0.45s;
}

.fs-envelope.fs-charging .fs-wave-3 {
   animation: fsPulseWave 1.4s infinite cubic-bezier(0.2, 0.8, 0.4, 1) 0.9s;
}

@keyframes fsPulseWave {
   0% {
      transform: scale(0.9);
      opacity: 0.95;
   }

   50% {
      opacity: 0.55;
   }

   100% {
      transform: scale(1.6);
      opacity: 0;
   }
}

@keyframes fsRotateBeam {
   0% {
      transform: rotate(0deg);
   }

   100% {
      transform: rotate(360deg);
   }
}

@keyframes fsRotateBeamReverse {
   0% {
      transform: rotate(360deg);
   }

   100% {
      transform: rotate(0deg);
   }
}

/* High-Intensity Golden Flare on Seal Core during Charging */
.fs-spin-core-flare {
   position: absolute;
   inset: 15px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 230, 120, 0.6) 40%, transparent 75%);
   opacity: 0;
   transition: opacity 0.5s ease;
}

.fs-envelope.fs-charging .fs-spin-core-flare {
   opacity: 1;
   animation: fsCoreGlowPulse 1.2s infinite ease-in-out;
}

@keyframes fsCoreGlowPulse {

   0%,
   100% {
      transform: scale(0.95);
      opacity: 0.6;
   }

   50% {
      transform: scale(1.2);
      opacity: 1;
   }
}

/* ── OPENING ANIMATION: WAX SEAL DISSOLVES AS TOP FLAP FLIPS ── */
.fs-envelope.fs-top-flap-open .fs-seal-anchor {
   transform: translate(-50%, -120%) scale(1.3);
   opacity: 0;
   filter: blur(8px);
   pointer-events: none;
   transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.6s ease,
      filter 0.6s ease;
}

/* ── Mobile Optimization ── */
@media (max-width: 480px) {
   main {
      gap: 16px;
      padding: 12px 10px 40px;
   }

   /* Hero Card Mobile Elegance */
   .hero-card {
      padding: 34px 14px 26px;
      border-width: 1.5px;
   }

   .hero-inner-fillet {
      inset: 6px;
   }

   .corner-ornament {
      width: 34px;
      height: 34px;
   }

   .corner-top-left {
      top: 9px;
      left: 9px;
   }

   .corner-top-right {
      top: 9px;
      right: 9px;
   }

   .corner-bottom-left {
      bottom: 9px;
      left: 9px;
   }

   .corner-bottom-right {
      bottom: 9px;
      right: 9px;
   }

   .royal-arch-crest {
      width: 110px;
      height: 22px;
      margin-bottom: 4px;
   }

   .hero-bismillah {
      font-size: 1.7rem;
   }

   .person-name {
      font-size: 1.8rem;
   }

   .hero-request-lead {
      font-size: 0.76rem;
      margin-top: 8px;
   }

   .hero-request-body {
      font-size: 0.88rem;
      line-height: 1.45;
      margin-bottom: 12px;
   }

   .timer-grid {
      gap: 6px;
   }

   .timer-item {
      padding: 8px 8px;
      min-width: 52px;
   }

   .timer-number {
      font-size: 1.35rem;
   }

   .venue-card-grid {
      gap: 10px;
   }

   .venue-card {
      padding: 12px 12px 11px;
      border-radius: 10px;
   }

   .venue-top-row {
      margin-bottom: 3px;
   }

   .venue-badge-pill {
      font-size: 0.58rem;
      padding: 2px 10px;
      letter-spacing: 1px;
   }

   .venue-title {
      font-size: 1.08rem;
      margin-bottom: 2px;
   }

   .venue-address {
      font-size: 0.76rem;
      margin-bottom: 4px;
      line-height: 1.3;
   }

   .venue-time-badge {
      font-size: 0.7rem;
      padding: 2px 8px;
      margin-bottom: 7px;
   }

   .venue-btn {
      padding: 5px 15px;
      font-size: 0.65rem;
      gap: 5px;
   }

   .venue-btn svg {
      width: 11px;
      height: 11px;
   }



   /* RSVP Card Mobile Compactness */
   .rsvp-card {
      padding: 15px 12px;
   }

   .rsvp-header {
      margin-bottom: 8px;
   }

   .rsvp-question-lead {
      font-size: 0.84rem;
   }

   .rsvp-form {
      gap: 8px;
   }

   .form-label {
      font-size: 0.62rem;
   }

   .form-input,
   .form-select,
   .form-textarea {
      padding: 7px 10px;
      font-size: 0.8rem;
   }

   .form-textarea {
      min-height: 46px;
   }

   .radio-card {
      padding: 6px 8px;
      font-size: 0.74rem;
   }

   .rsvp-submit-btn {
      padding: 8px 20px;
      font-size: 0.72rem;
   }

   /* Compliments Card Mobile Compactness */
   .compliments-card {
      padding: 15px 12px;
   }

   .compliments-name {
      font-family: "Cinzel", "Cormorant Garamond", "Playfair Display", Georgia, serif;
      font-size: 1.55rem;
      font-weight: 700;
      letter-spacing: 1.2px;
      margin: 3px 0 6px;
   }

   .rsvp-contacts-list {
      gap: 6px;
   }

   .rsvp-contact-item {
      font-size: 0.80rem;
      letter-spacing: 0.6px;
      padding: 5px 12px;
   }

   .rsvp-relatives-note {
      font-size: 0.76rem;
   }

   /* Wedding Itinerary Mobile Sizing */
   .timeline-stream {
      gap: 16px;
   }

   .timeline-stream::before {
      left: 10px;
   }

   .timeline-item {
      gap: 8px;
      padding-left: 0;
   }

   .timeline-node {
      width: 16px;
      height: 16px;
      margin-top: 12px;
      box-shadow: 0 0 0 2px var(--bg-body);
   }

   .timeline-node::after {
      width: 5px;
      height: 5px;
   }

   .timeline-card {
      padding: 13px 12px 12px;
      border-radius: 10px;
   }

   .timeline-node {
      width: 18px;
      height: 18px;
      margin-top: 10px;
   }

   .timeline-node::after {
      width: 4px;
      height: 4px;
   }

   .event-date-badge {
      font-size: 0.65rem;
   }

   .event-time-badge {
      font-size: 0.68rem;
      padding: 2px 7px;
   }

   .event-title {
      font-size: 1.08rem;
      margin-bottom: 3px;
   }

   .event-desc {
      font-size: 0.78rem;
      margin-bottom: 7px;
      line-height: 1.4;
   }

   .event-venue-text {
      font-size: 0.76rem;
      padding: 6px 9px;
      margin-bottom: 9px;
   }

   .btn-secondary-link {
      padding: 5px 11px;
      font-size: 0.65rem;
      gap: 4px;
   }

   .btn-secondary-link svg {
      width: 11px;
      height: 11px;
   }


   /* Envelope Inner Card Mobile Responsiveness */
   .fs-inner-card {
      width: 90%;
      padding: 14px 10px 12px;
      top: 18%;
   }

   .fs-card-corner {
      width: 28px;
      height: 28px;
   }

   .fs-card-bismillah {
      font-size: 1.12rem;
   }

   .fs-card-bismillah-sub {
      font-size: 0.52rem;
   }

   .fs-card-couple {
      font-size: 0.98rem;
      letter-spacing: 1.2px;
   }

   .fs-card-amp {
      font-size: 1.1rem;
   }

   .fs-card-badge {
      font-size: 0.55rem;
      padding: 3px 12px;
      letter-spacing: 1.5px;
   }

   .fs-card-mini-bf {
      width: 20px;
      height: 16px;
      top: 8px;
      right: 12px;
   }
}