/* Custom Luxury Styling & Animations */
    :root {
      --gold-gradient: linear-gradient(135deg, #d4af37 0%, #fdf3b8 50%, #b89225 100%);
      --maroon-gradient: linear-gradient(135deg, #420816 0%, #5E0F24 60%, #2b040c 100%);
    }

    .gold-foil-text {
      background: linear-gradient(135deg, #ECC86A 0%, #FFF5D0 30%, #D4AF37 60%, #AA8222 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .gold-foil-border {
      border-image: linear-gradient(to right, #b89225, #f5df8b, #b89225) 1;
    }

    .gold-border-glow {
      box-shadow: 0 0 25px rgba(212, 175, 55, 0.15), inset 0 0 15px rgba(212, 175, 55, 0.08);
    }

    .regal-shadow {
      box-shadow: 0 20px 40px -15px rgba(66, 8, 22, 0.15), 0 0 20px rgba(212, 175, 55, 0.1);
    }

    .jali-pattern {
      background-color: #FAF7F2;
      background-image: radial-gradient(rgba(212, 175, 55, 0.18) 1px, transparent 0);
      background-size: 24px 24px;
    }

    .jali-dark {
      background-color: #380611;
      background-image: radial-gradient(rgba(212, 175, 55, 0.18) 1px, transparent 0);
      background-size: 28px 28px;
    }

    /* Falling Petals & Particles Canvas */
    #fx-canvas {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 40;
    }

    /* Envelope Opening Animation */
    .envelope-wrapper {
      perspective: 1200px;
      transition: transform 0.8s ease, opacity 0.6s ease;
    }
    .envelope-flap {
      transform-origin: top;
      transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .envelope-opened .envelope-flap {
      transform: rotateX(180deg);
      z-index: 1;
    }
    .envelope-letter {
      transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease;
    }
    .envelope-opened .envelope-letter {
      transform: translateY(-110px) scale(1.03);
      z-index: 10;
      box-shadow: 0 30px 60px rgba(66, 8, 22, 0.25);
    }

    /* Audio button rotation */
    @keyframes spin-slow {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    .spin-slow {
      animation: spin-slow 18s linear infinite;
    }

    /* Shimmer effect */
    @keyframes shimmer {
      0% { background-position: -200% 0; }
      100% { background-position: 200% 0; }
    }
    .shimmer-badge {
      background: linear-gradient(90deg, rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0.4) 50%, rgba(212, 175, 55, 0.1) 100%);
      background-size: 200% 100%;
      animation: shimmer 4s infinite;
    }

    /* Arch silhouette */
    .arch-card {
      border-top-left-radius: 9999px;
      border-top-right-radius: 9999px;
    }

    /* Smooth lightboxes */
    .lightbox-active {
      opacity: 1 !important;
      pointer-events: auto !important;
    }

/* Intro video gate */
.intro-gate {
  position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; padding: 28px 20px;
  text-align: center; color: #f9ebc5;
  background: radial-gradient(ellipse at 50% 35%, rgba(123,24,50,.96), rgba(43,4,12,.99) 70%), #2b040c;
  overflow: hidden;
}
.intro-gate::before, .intro-gate::after { content:""; position:absolute; width:min(82vw,620px); aspect-ratio:1; border:1px solid rgba(212,175,55,.22); border-radius:50%; pointer-events:none; }
.intro-gate::after { width:min(68vw,500px); border-style:dashed; animation:introOrbit 55s linear infinite; }
.intro-gate__ornament { color:#e5c158; letter-spacing:.5em; font-size:20px; position:relative; z-index:1; }
.intro-gate__eyebrow { font:600 11px/1.5 'Cinzel',serif; text-transform:uppercase; letter-spacing:.28em; color:#e5c158; position:relative; z-index:1; }
.intro-gate__title { font:600 clamp(30px,6vw,66px)/1.15 'Playfair Display',serif; max-width:900px; position:relative; z-index:1; text-shadow:0 5px 25px rgba(0,0,0,.25); }
.intro-gate__title span { color:#e5c158; font-family:'Great Vibes',cursive; font-weight:400; }
.intro-gate__date { font:500 11px/1.5 'Cinzel',serif; letter-spacing:.18em; color:#f2dc97; position:relative; z-index:1; }
.intro-gate__button { position:relative; z-index:1; margin-top:20px; padding:15px 30px; border:1px solid #f2dc97; border-radius:999px; color:#3b0715; background:linear-gradient(135deg,#fdf7e7,#d4af37); font:700 12px 'Cinzel',serif; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; box-shadow:0 12px 35px rgba(0,0,0,.25); transition:transform .25s, box-shadow .25s; }
.intro-gate__button:hover { transform:translateY(-3px) scale(1.025); box-shadow:0 16px 40px rgba(0,0,0,.35); }
.intro-gate__hint { font:10px 'Cinzel',serif; letter-spacing:.2em; text-transform:uppercase; color:rgba(249,235,197,.65); position:relative; z-index:1; }
.intro-video { display:none; position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#080507; z-index:3; }
.intro-gate.is-playing { background:#080507; padding:0; }
.intro-gate.is-playing .intro-gate__ornament,
.intro-gate.is-playing .intro-gate__eyebrow,
.intro-gate.is-playing .intro-gate__title,
.intro-gate.is-playing .intro-gate__date,
.intro-gate.is-playing .intro-gate__button,
.intro-gate.is-playing .intro-gate__hint { display:none; }
.intro-gate.is-playing .intro-video { display:block; }
.skip-intro { position:absolute; z-index:5; right:20px; bottom:20px; padding:10px 16px; border:1px solid rgba(255,255,255,.5); border-radius:999px; color:white; background:rgba(0,0,0,.45); font:600 11px 'Cinzel',serif; cursor:pointer; }
.video-fallback { position:relative; z-index:4; max-width:440px; padding:24px; border:1px solid rgba(242,220,151,.45); border-radius:18px; background:rgba(43,4,12,.95); color:#f9ebc5; font:14px/1.6 'Plus Jakarta Sans',sans-serif; }
.video-fallback[hidden], .skip-intro[hidden] { display:none !important; }
@keyframes introOrbit { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .intro-gate__button, .intro-gate::after { animation:none !important; transition:none !important; } }



/* Royal invitation atmosphere: floral tracery, soft light and refined motion */
body { background-image: radial-gradient(ellipse at 8% 12%, rgba(212,175,55,.09), transparent 28%), radial-gradient(ellipse at 92% 34%, rgba(123,24,50,.055), transparent 30%), linear-gradient(180deg,#fdfbf7 0%,#fbf5ed 52%,#fdfbf7 100%); }
body::before { content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.16; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23b89225' stroke-opacity='.42' stroke-width='.8'%3E%3Cpath d='M90 8c18 20 18 36 0 48-18-12-18-28 0-48Zm0 116c18-20 18-36 0-48-18 12-18 28 0 48ZM8 90c20-18 36-18 48 0-12 18-28 18-48 0Zm116 0c-20-18-36-18-48 0 12 18 28 18 48 0Z'/%3E%3Ccircle cx='90' cy='90' r='23'/%3E%3Ccircle cx='90' cy='90' r='37' stroke-dasharray='2 5'/%3E%3C/g%3E%3C/svg%3E"); }
#fx-canvas { z-index:39; }
.jali-pattern { background-image: radial-gradient(rgba(123,24,50,.045) 1px, transparent 0), radial-gradient(ellipse at 50% 0%,rgba(212,175,55,.10),transparent 65%); background-size:28px 28px,100% 100%; }
.intro-gate { background: linear-gradient(rgba(36,4,14,.60),rgba(36,4,14,.84)), url('assets/video-thumbnail.jpg') center/cover no-repeat, radial-gradient(ellipse at 50% 35%,#7b1832,#2b040c 70%); }
.intro-gate__button { min-width:190px; letter-spacing:.2em; box-shadow:0 0 0 7px rgba(212,175,55,.10),0 16px 42px rgba(0,0,0,.35); }
.intro-gate__button::before { content:""; position:absolute; inset:-7px; border:1px solid rgba(242,220,151,.48); border-radius:inherit; animation:doorPulse 2.8s ease-in-out infinite; pointer-events:none; }
@keyframes doorPulse { 0%,100%{transform:scale(1);opacity:.65} 50%{transform:scale(1.07);opacity:0} }
.intro-gate--closing { animation: gateFade .85s ease forwards; }
@keyframes gateFade { to { opacity:0; visibility:hidden; } }
.intro-gate.is-playing .intro-video { object-fit:contain; }
header, main, section, footer { position:relative; }
@media(max-width:640px){ .intro-gate__title{font-size:clamp(28px,9vw,46px)} .intro-gate__date{font-size:9px} #fx-canvas{opacity:.78} }
@media(prefers-reduced-motion:reduce){.intro-gate__button::before{animation:none}.intro-gate--closing{animation:none;opacity:0}}
/* Opening controls gently dissolve as the wedding film takes over */
.intro-video { opacity:0; transition:opacity .9s ease; }
.intro-gate.is-playing .intro-video { display:block; animation:videoReveal .9s .18s ease forwards; }
.intro-gate.is-playing .intro-gate__ornament,
.intro-gate.is-playing .intro-gate__eyebrow,
.intro-gate.is-playing .intro-gate__title,
.intro-gate.is-playing .intro-gate__date,
.intro-gate.is-playing .intro-gate__button,
.intro-gate.is-playing .intro-gate__hint { display:block; animation:openingFade .65s ease forwards; }
@keyframes openingFade { to { opacity:0; transform:translateY(-10px); visibility:hidden; } }
@keyframes videoReveal { to { opacity:1; } }

/* =========================================================
   NEW ROYAL FLORAL ATMOSPHERE — ivory, wine & antique gold
   Decorative motion only; rose petals remain the only particles.
   ========================================================= */
:root {
  --wedding-ivory: #fffaf2;
  --wedding-wine: #4a1028;
  --wedding-antique-gold: #b78b35;
}
html { scroll-behavior: smooth; }
body {
  background-color: var(--wedding-ivory);
  background-image:
    radial-gradient(ellipse at 0% 0%, rgba(207,166,91,.16), transparent 34%),
    radial-gradient(ellipse at 100% 18%, rgba(113,24,57,.10), transparent 32%),
    radial-gradient(ellipse at 50% 100%, rgba(225,193,133,.18), transparent 42%),
    linear-gradient(145deg, #fffdf8 0%, #f8f0e6 48%, #fffaf3 100%);
  background-attachment: fixed;
}
/* Intricate jaali/mandala watermark across the page */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .19;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23a98236' stroke-width='1' stroke-opacity='.65'%3E%3Ccircle cx='110' cy='110' r='76'/%3E%3Ccircle cx='110' cy='110' r='62' stroke-dasharray='2 6'/%3E%3Cpath d='M110 12c23 24 23 44 0 60-23-16-23-36 0-60Zm0 196c23-24 23-44 0-60-23 16-23 36 0 60ZM12 110c24-23 44-23 60 0-16 23-36 23-60 0Zm196 0c-24-23-44-23-60 0 16 23 36 23 60 0Z'/%3E%3Cpath d='M42 42c28 7 43 22 50 50-28-7-43-22-50-50Zm136 0c-28 7-43 22-50 50 28-7 43-22 50-50ZM42 178c28-7 43-22 50-50-28 7-43 22-50 50Zm136 0c-28-7-43-22-50-50 28 7 43 22 50 50Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 220px 220px;
  animation: jaaliDrift 100s linear infinite;
}
/* Slow, soft corner light — no dot particles */
body::after {
  content: "";
  position: fixed;
  width: min(58vw, 650px);
  height: min(58vw, 650px);
  right: -25vw;
  top: 14vh;
  z-index: 0;
  pointer-events: none;
  border: 1px solid rgba(183,139,53,.16);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(183,139,53,.025), 0 0 0 46px rgba(183,139,53,.02), inset 0 0 90px rgba(183,139,53,.045);
  animation: haloFloat 18s ease-in-out infinite alternate;
}
@keyframes jaaliDrift { from { background-position: 0 0; } to { background-position: 440px 660px; } }
@keyframes haloFloat { from { transform: translate3d(0,0,0) rotate(0deg); opacity:.55; } to { transform: translate3d(-7vw,5vh,0) rotate(18deg); opacity:1; } }
header, main, section, footer { position: relative; z-index: 1; }
#fx-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 39; pointer-events: none; }
/* Elegant animated arch accents on the main invitation and dark RSVP panel */
.jali-pattern, .jali-dark { isolation: isolate; }
.jali-pattern::before, .jali-dark::before {
  content: "";
  position: absolute;
  width: min(86vw, 820px);
  height: 88%;
  left: 50%;
  top: 5%;
  transform: translateX(-50%);
  border: 1px solid rgba(183,139,53,.19);
  border-bottom: 0;
  border-radius: 48% 48% 0 0 / 28% 28% 0 0;
  pointer-events: none;
  z-index: -1;
  animation: archBreath 8s ease-in-out infinite alternate;
}
.jali-dark::before { border-color: rgba(235,205,133,.18); }
@keyframes archBreath { from { box-shadow: 0 0 18px rgba(183,139,53,.025); } to { box-shadow: 0 0 55px rgba(183,139,53,.12), inset 0 0 35px rgba(183,139,53,.035); } }
/* Residence card */
.residence-card { box-shadow: 0 20px 48px rgba(66,8,22,.10), 0 0 24px rgba(183,139,53,.08); transition: transform .45s ease, box-shadow .45s ease; }
.residence-card:hover { transform: translateY(-5px); box-shadow: 0 26px 58px rgba(66,8,22,.16), 0 0 30px rgba(183,139,53,.16); }
.residence-card__ornament { position:absolute; right:18px; bottom:-54px; font-size:190px; line-height:1; color:rgba(183,139,53,.075); pointer-events:none; animation: flowerTurn 42s linear infinite; }
@keyframes flowerTurn { to { transform:rotate(360deg); } }
.residence-map-btn { position:relative; overflow:hidden; transition:transform .3s ease, box-shadow .3s ease; }
.residence-map-btn:hover { transform:translateY(-3px); box-shadow:0 15px 32px rgba(66,8,22,.25), 0 0 20px rgba(212,175,55,.25); }
.residence-map-btn::after { content:""; position:absolute; top:0; left:-130%; width:65%; height:100%; transform:skewX(-22deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent); transition:left .8s ease; }
.residence-map-btn:hover::after { left:150%; }
/* Scroll entrance */
.reveal-on-scroll { opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal-on-scroll.is-visible { opacity:1; transform:translateY(0); }
/* Music button state feedback */
#musicToggleBtn { cursor:pointer; -webkit-tap-highlight-color:transparent; }
#musicToggleBtn:focus-visible, .residence-map-btn:focus-visible { outline:3px solid #d4af37; outline-offset:4px; }
@media(max-width:640px) {
  body::before { background-size:165px 165px; opacity:.13; }
  body::after { width:75vw; height:75vw; right:-43vw; top:20vh; }
  .residence-card__ornament { font-size:120px; bottom:-35px; }
  .residence-map-btn { width:100%; }
}
@media(prefers-reduced-motion:reduce) {
  body::before, body::after, .jali-pattern::before, .jali-dark::before, .residence-card__ornament { animation:none !important; }
  .reveal-on-scroll { opacity:1; transform:none; transition:none; }
  html { scroll-behavior:auto; }
}