/* ==========================================================
   Wedding Invite — Harshit & Ishita
   Design language sourced from the printed R Chandra Palace
   card: Rajasthani gold lanterns, ochre/maroon dual event
   palette, gold double-border frames, Devanagari invocation.
   ========================================================== */

:root{
  --cream: #F6F2E7;
  --cream-2: #F6EBD8;
  --paper-line: #E9DCC0;
  --maroon: #7A1B2E;
  --maroon-deep: #4A0E18;
  --burgundy: #5C1A2B;
  --burgundy-deep: #3E1120;
  --ochre: #B8791A;
  --ochre-deep: #8C5A10;
  --ochre-light: #E8B65C;
  --rose-gold: #D9A98B;
  --peach: #EEC6A9;
  --gold: #C9A15C;
  --gold-light: #E8CE8F;
  --gold-deep: #A67D3D;
  --sage: #D8E5D4;
  --mint: #EAF1E6;
  --navy: #12172A;
  --navy-2: #1B2138;
  --brown: #3B2116;
  --brown-2: #2A1710;
  --pink: #EFA3C4;
  --pink-light: #FBDCE8;
  --marigold: #F0A93B;
  --marigold-deep: #D98A1E;
  --leaf-green: #7E9A72;
  --leaf-green-deep: #5D7A52;
  --ink: #4A362F;
  --ink-soft: #7A6558;
  --white-flower: #FFFDF8;
  --shadow-soft: 0 10px 30px rgba(74, 30, 20, 0.15);
  --font-script: 'Great Vibes', cursive;
  --font-serif: 'Cormorant Garamond', serif;
  --font-display: 'Playfair Display', serif;
  --font-devanagari: 'Noto Serif Devanagari', serif;
}

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

html{ scroll-behavior: smooth; }

body{
  font-family: var(--font-serif);
  background: var(--cream);
  color: var(--ink);
  overflow-x: hidden;
  width: 100%;
}

main{ max-width: 560px; margin: 0 auto; position: relative; }

img{ max-width: 100%; display:block; }

.section{
  position: relative;
  padding: 64px 24px;
  overflow: hidden;
}

.section-title{
  text-align: center;
  color: var(--maroon);
  font-size: 2.6rem;
  font-weight: 400;
  margin-bottom: 32px;
}

.script-font{ font-family: var(--font-script); }

/* ---------- reveal-on-scroll ---------- */
.reveal-on-scroll{ opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
.reveal-on-scroll.is-visible{ opacity: 1; transform: translateY(0); }

/* ---------- staggered entrance for elements inside a revealed section ----------
   Children start offset and settle in sequence once the section is visible.
   --d is the per-item delay, assigned in JS so any list length works. */
.stagger-item{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.22,1,.36,1);
  transition-delay: var(--d, 0ms);
}
.is-visible .stagger-item{ opacity: 1; transform: translateY(0); }

/* polaroids also settle back to their scattered tilt */
.polaroid.stagger-item{ transform: translateY(24px) rotate(0deg) scale(.96); }
.is-visible .polaroid.stagger-item{ transform: translateY(0) rotate(var(--rot, 0deg)) scale(1); }

/* countdown digits pop rather than slide */
.countdown-box.stagger-item{ transform: translateY(0) scale(.85); }
.is-visible .countdown-box.stagger-item{ transform: translateY(0) scale(1); }

/* chat bubbles drift in from their own side of the thread */
.chat-row.left.stagger-item{ transform: translateX(-16px) translateY(10px); }
.chat-row.right.stagger-item{ transform: translateX(16px) translateY(10px); }
.is-visible .chat-row.stagger-item{ transform: translateX(0) translateY(0); }

/* a gentle lift on the two event cards */
.event-card.stagger-item{ transform: translateY(26px) scale(.98); }
.is-visible .event-card.stagger-item{ transform: translateY(0) scale(1); }

@media (prefers-reduced-motion: reduce){
  .reveal-on-scroll,
  .stagger-item{
    transition: none !important;
    transition-delay: 0ms !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .is-visible .polaroid.stagger-item{ transform: rotate(var(--rot, 0deg)) !important; }
  html{ scroll-behavior: auto; }
}

/* ---------- shared pill button ---------- */
.pill-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 999px;
  padding: 14px 30px;
  font-family: var(--font-serif);
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  color: var(--brown-2);
}
.gold-pill{
  background: linear-gradient(180deg, var(--gold-light), var(--gold-deep));
  box-shadow: 0 6px 18px rgba(166, 125, 61, 0.4);
}
.gold-pill:active{ transform: translateY(1px); }

/* ---------- gold double-border frame (matches card's frame) ---------- */
.gold-frame{
  border: 1.5px solid var(--gold-deep);
  box-shadow: 0 0 0 4px var(--cream), 0 0 0 5.5px var(--gold), var(--shadow-soft);
  border-radius: 8px;
}

/* ---------- Devanagari invocation ---------- */
.shloka{
  font-family: var(--font-devanagari);
  color: var(--maroon);
  text-align: center;
  line-height: 1.7;
  max-width: 320px;
  margin: 0 auto 18px;
}
.shloka .invocation{ font-size: 1rem; font-weight: 600; margin-bottom: 4px; }
.shloka .verse{ font-size: 0.8rem; color: var(--ink-soft); }
.shloka .closing-invocation{
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ochre-deep);
  margin-top: 8px;
  letter-spacing: 0.04em;
}

/* ---------- hanging gold lanterns ---------- */
.lantern-pair{
  display: flex;
  justify-content: space-between;
  padding: 0 4px;
  margin-bottom: 6px;
  pointer-events: none;
}
.lantern{ display: block; width: 46px; }
.lantern img{ width: 100%; height: auto; display: block; }
/* The source art is a right-hanging pair; mirror it for the left corner
   so the two clusters lean inward toward the centre. */
.lantern.lantern-left{ transform: scaleX(-1) translateY(-4px); }
.lantern.lantern-right{ transform: translateY(2px); }

/* ---------- lotus divider ---------- */
.lotus-divider{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px 0 6px;
}
.lotus-divider svg{ width: 18px; height: 18px; }
.lotus-divider .divider-line{ width: 32px; height: 1px; background: var(--gold-deep); opacity: 0.6; }

/* ==========================================================
   1. ENVELOPE OPENER
   ========================================================== */
#envelope-screen{
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  background: var(--cream);
  padding: 20px;
}

.envelope-shloka{ margin-bottom: 0; }
.envelope-shloka .invocation{ font-size: 0.9rem; }
.envelope-shloka .verse{ font-size: 0.7rem; }
.envelope-shloka .closing-invocation{ font-size: 0.85rem; margin-top: 6px; }

/* ---------- 3D envelope scene ---------- */
.envelope-scene{
  position: relative;
  width: min(90vw, 430px);
  aspect-ratio: 3 / 2;
  perspective: 1400px;
  --flap-tip: 44%;
}

.envelope-back{
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: linear-gradient(160deg, var(--cream) 0%, var(--cream-2) 100%);
  border: 1px solid var(--paper-line);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
/* Monogram watermark pressed into the back panel. Its own layer so the
   opacity applies to the mark alone; mostly hidden behind the flap when
   closed, and revealed as the flap folds away on open. */
.envelope-back::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../assets/logo/hi-logo.png');
  background-repeat: no-repeat;
  background-position: center 30%;
  background-size: 46% auto;
  opacity: 0.12;
  pointer-events: none;
}

/* the invitation card, tucked inside, slides upward on open */
.envelope-card{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 78%;
  transform: translate(-50%, -42%);
  z-index: 1;
  text-align: center;
  transition: transform 0.7s 0.25s cubic-bezier(.65,0,.35,1), opacity 0.5s 0.55s ease;
  opacity: 0;
}
.envelope-card-reveal{
  font-size: 2.3rem;
  color: var(--maroon);
  line-height: 1.2;
}

/* front pocket the flap tucks behind — shallow notch, leaves room for the logo */
.envelope-pocket{
  position: absolute;
  inset: 0;
  clip-path: polygon(0 100%, 100% 100%, 100% 40%, 50% 48%, 0 40%);
  background: linear-gradient(200deg, var(--cream-2) 0%, var(--paper-line) 100%);
  border-radius: 0 0 6px 6px;
  z-index: 2;
}

/* the flap — hinges open along its top edge like a real envelope */
.envelope-flap{
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 50% var(--flap-tip));
  background: linear-gradient(200deg, var(--cream) 0%, var(--paper-line) 100%);
  border-radius: 6px 6px 0 0;
  transform-origin: 50% 0%;
  transform: rotateX(0deg);
  transition: transform 0.8s 0.2s cubic-bezier(.65,0,.35,1);
  backface-visibility: hidden;
  box-shadow: 0 2px 8px rgba(74,30,20,0.12);
  z-index: 4;
}

.envelope-flower{
  position: absolute;
  pointer-events: none;
  filter: drop-shadow(0 4px 6px rgba(74,30,20,0.18));
}
.envelope-flower img{ width: 100%; height: auto; display: block; }
.envelope-flower.hibiscus{
  top: -30px; left: -26px;
  width: min(30vw, 132px);
  z-index: 6;
  transform: rotate(-6deg);
}
.envelope-flower.red-flower{
  bottom: -18px; right: -14px;
  width: min(22vw, 96px);
  z-index: 6;
  transform: scaleX(-1) rotate(-4deg);
}

/* Wax seal — sits above the flap (z-index 4) and outside its clip-path,
   pinned to the same --flap-tip seam the flap's apex uses. */
.wax-seal{
  position: absolute;
  left: 50%;
  top: var(--flap-tip);
  transform: translate(-50%, -50%);
  width: 108px; height: 108px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  /* wine wax, lit from upper-left so the disc reads as raised */
  background: radial-gradient(circle at 34% 26%, #8A3550 0%, #6B2438 52%, #481425 100%);
  box-shadow:
    0 7px 16px rgba(60,12,25,0.42),
    0 0 0 3px rgba(255,255,255,0.45),
    inset 0 -6px 12px rgba(30,6,14,0.45),
    inset 0 4px 9px rgba(255,255,255,0.20);
  transition: transform 0.35s ease, opacity 0.35s ease;
  z-index: 7;
}
.wax-seal-logo{
  display: block;
  width: 66%;
}
.wax-seal-logo img{ width: 100%; height: auto; display: block; }

/* ---------- open state ---------- */
.envelope-scene.is-open .envelope-flap{ transform: rotateX(-165deg); }
.envelope-scene.is-open .wax-seal{
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4) rotate(25deg);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.envelope-scene.is-open .envelope-card{
  /* -130% puts the card's bottom near 44%, clearing the pocket notch at 48% */
  transform: translate(-50%, -130%);
  opacity: 1;
}

#tap-to-open{ animation: pulse 2.2s ease-in-out infinite; transition: opacity 0.3s ease; }
#tap-to-open.is-hidden{ opacity: 0; pointer-events: none; }
@keyframes pulse{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.05); }
}

#flash-overlay{
  position: fixed; inset: 0; z-index: 200;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
#flash-overlay.flashing{ animation: flashwipe .7s ease forwards; }
@keyframes flashwipe{
  0%{ opacity: 0; }
  40%{ opacity: 1; }
  100%{ opacity: 0; }
}

/* ---------- page watermark ---------- */
#page-watermark{
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.07;
  /* multiply lets the mark sink into the paper instead of hazing over it */
  mix-blend-mode: multiply;
  background-image:
    url('../assets/logo/hi-logo.png'),
    url('../assets/logo/hi-logo.png');
  background-repeat: no-repeat, no-repeat;
  background-position: left -8% top 3%, right -8% bottom 3%;
  background-size: 58% auto, 58% auto;
}
@media (min-width: 700px){
  #page-watermark{ background-size: 34% auto, 34% auto; }
}

/* ---------- flower shower (phoolon ki barsaat) ---------- */
#petal-layer{
  position: fixed;
  inset: 0;
  z-index: 55;
  pointer-events: none;
  overflow: hidden;
}
.petal{
  position: absolute;
  top: -8vh;
  width: var(--size, 14px);
  height: calc(var(--size, 14px) * 0.72);
  background: var(--petal-color, #EFA3C4);
  /* asymmetric radii give a soft petal silhouette rather than an oval */
  border-radius: 60% 8% 60% 8%;
  opacity: 0;
  will-change: transform, opacity;
  animation:
    petal-fall var(--fall, 7s) linear var(--delay, 0s) forwards,
    petal-sway var(--sway, 2.6s) ease-in-out var(--delay, 0s) infinite alternate;
}
@keyframes petal-fall{
  0%   { opacity: 0; transform: translateY(0) rotate(0deg); }
  8%   { opacity: 0.95; }
  85%  { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(112vh) rotate(var(--spin, 540deg)); }
}
@keyframes petal-sway{
  from{ margin-left: calc(var(--drift, 26px) * -1); }
  to  { margin-left: var(--drift, 26px); }
}
@media (prefers-reduced-motion: reduce){
  #petal-layer{ display: none; }
}

/* ---------- music toggle ---------- */
.music-toggle{
  position: fixed;
  bottom: 18px; right: 18px;
  z-index: 60;
  width: 46px; height: 46px;
  border: 1px solid var(--gold-deep);
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-light), var(--gold-deep));
  box-shadow: 0 4px 14px rgba(74,30,20,0.3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.music-toggle[hidden]{ display: none; }
.music-toggle svg{
  width: 22px; height: 22px;
  fill: var(--brown-2);
  stroke: var(--brown-2);
}
.music-toggle .icon-sound-off{ display: none; }
/* aria-pressed=false means the music is paused */
.music-toggle[aria-pressed="false"] .icon-sound-on{ display: none; }
.music-toggle[aria-pressed="false"] .icon-sound-off{ display: block; }
.music-toggle:active{ transform: translateY(1px); }

/* gentle pulse of the sound waves while playing */
.music-toggle[aria-pressed="true"] .wave{ animation: wave-pulse 2.4s ease-in-out infinite; }
@keyframes wave-pulse{
  0%,100%{ opacity: 1; }
  50%{ opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce){
  .music-toggle[aria-pressed="true"] .wave{ animation: none; }
}

/* ==========================================================
   2. HERO
   ========================================================== */
#hero{
  padding-top: 36px;
  /* narrow side padding: the arch is the widest element on the page and
     every element inside it is sized as a % of the arch */
  padding-left: 10px;
  padding-right: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
}

.hero-lanterns{ width: 100%; max-width: 320px; margin-bottom: 8px; }

.hero-arch-wrap{
  position: relative;
  width: 100%;
  max-width: 390px;
  margin: 0 auto;
}

.hero-arch{ display: block; width: 100%; }
.hero-arch img{ width: 100%; height: auto; display: block; }

/* The arch renders ~327x378 on a phone, so the opening is a tight budget:
   names take the band y 32-48%, the couple stands below from y 52-97%.
   Type is sized to keep the names block near 16% of the arch height. */
.hero-names{
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  width: 42%;
  z-index: 2;
  text-align: center;
}
.hero-groom-name, .hero-bride-name{
  font-size: clamp(1.1rem, 5.5vw, 1.75rem);
  color: var(--maroon);
  line-height: 1.15;
}
.hero-with{
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.8rem;
  margin: 1px 0;
}

.hero-couple{
  position: absolute;
  left: 50%;
  bottom: 3%;
  transform: translateX(-50%);
  /* art is 1.505:1 (h:w), so 34% of arch width ≈ 44% of arch height,
     placing the figure at y 53–97% — clear of the names ending at 48% */
  width: 34%;
  z-index: 1;
  display: block;
}
.hero-couple img{ width: 100%; height: auto; display: block; }

.scratch-wrap{
  position: relative;
  margin-top: 34px;
  width: 280px;
  max-width: 84vw;
}
.scratch-reveal{
  border-radius: 999px;
  background: var(--mint);
  border: 1px solid var(--sage);
  height: 64px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 16px;
  text-align: center;
}
.scratch-reveal p{ color: var(--maroon); font-size: 1rem; font-style: italic; }
.scratch-date{
  font-family: var(--font-display);
  font-size: 1.15rem !important;
  font-style: normal !important;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--maroon) !important;
}

#scratch-canvas{
  position: absolute;
  top: 0; left: 0;
  border-radius: 999px;
  cursor: pointer;
  touch-action: none;
}

.scratch-hint{
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
  color: #fff;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--font-serif);
}
.scratch-hint .sparkle{ animation: sparkle-spin 2.4s linear infinite; }
.scratch-hint .pointer-finger{ animation: point-tap 1.4s ease-in-out infinite; }
@keyframes sparkle-spin{ from{ transform: rotate(0);} to{ transform: rotate(360deg);} }
@keyframes point-tap{ 0%,100%{ transform: translate(0,0);} 50%{ transform: translate(-4px,3px);} }

.scratch-wrap.is-revealed #scratch-canvas{ display: none; }
.scratch-wrap.is-revealed .scratch-hint{ display: none; }

/* ==========================================================
   2b. LINEAGE / BLESSINGS
   ========================================================== */
#lineage{
  background: var(--cream-2);
  text-align: center;
}
.lineage-inner{
  position: relative;
  padding: 32px 22px;
  background-color: var(--cream);
  overflow: hidden;              /* clips the tile to the rounded frame */
}
/* Pattern lives on its own layer so it can be faded without touching the
   text — opacity on .lineage-inner itself would dim the names too. */
.lineage-inner::before{
  content: "";
  position: absolute;
  inset: 0;
  /* plain url() first so browsers without image-set() still get the JPEG */
  background-image: url('../assets/patterns/floral-beige.jpg');
  background-image: image-set(
    url('../assets/patterns/floral-beige.webp') type('image/webp'),
    url('../assets/patterns/floral-beige.jpg') type('image/jpeg')
  );
  background-repeat: repeat;
  background-size: 300px auto;
  opacity: 0.1;                  /* 90% transparent */
  pointer-events: none;
  z-index: 0;
}
.lineage-inner > *{ position: relative; z-index: 1; }
.lineage-blessing{
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.lineage-blessing strong{
  display: block;
  color: var(--maroon);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  margin-top: 4px;
}
.grandparents-wrap{
  display: flex;
  justify-content: center;
  gap: 36px;
  flex-wrap: wrap;
  margin: 20px 0 26px;
}
/* 150px clipped the longest name ("Late Shri Surendra Kumar Arora" needs
   155px) onto two lines. 190px clears every name with headroom, and the
   columns still sit side by side on wider screens. */
.grandparents-col{ max-width: 190px; }
.gp-side{
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ochre-deep);
  margin-bottom: 8px;
  font-weight: 600;
}
.gp-pair{ margin-bottom: 10px; }
.gp-pair-label{ font-weight: 600; color: var(--maroon); font-size: 0.82rem; margin-bottom: 2px; }
.gp-pair-name{ font-size: 0.76rem; color: var(--ink-soft); line-height: 1.4; }

.lineage-vow{
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.9rem;
  max-width: 340px;
  margin: 0 auto 22px;
}
.lineage-names{ display: flex; flex-direction: column; align-items: center; }
.lineage-name{ font-family: var(--font-script); font-size: 2.3rem; color: var(--maroon); line-height: 1.2; }
.lineage-parentage{ font-size: 0.78rem; color: var(--ink-soft); margin-bottom: 10px; }
.lineage-weds{ font-family: var(--font-serif); font-style: italic; color: var(--ochre-deep); font-size: 1.05rem; margin: 2px 0 10px; }

/* ==========================================================
   3. SAVE THE DATE / COUNTDOWN
   ========================================================== */
#countdown-section{
  text-align: center;
  background: #fff;
}
.floral-strip{
  height: 14px;
  margin: -64px -24px 28px;
  background: repeating-linear-gradient(90deg,
    var(--pink) 0 10px, var(--marigold) 10px 20px, var(--leaf-green) 20px 30px, transparent 30px 34px);
  opacity: 0.85;
}
.save-date-pill{ margin-bottom: 18px; }
.wedding-date-display{
  font-size: 1.15rem;
  color: var(--maroon);
  letter-spacing: 0.04em;
  margin-bottom: 26px;
}
.countdown-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-width: 380px;
  margin: 0 auto;
}
.countdown-box{
  border: 1px solid var(--paper-line);
  border-radius: 10px;
  padding: 14px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--cream);
}
.cd-value{ font-size: 1.7rem; font-weight: 600; color: var(--maroon); font-family: var(--font-display); }
.cd-label{ font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }

/* ==========================================================
   4. MEET THE COUPLE
   ========================================================== */
#couple{ background: #fff; text-align: center; }
.couple-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.couple-card{ display: flex; flex-direction: column; align-items: center; gap: 10px; }
.couple-portrait{
  width: 140px; height: 140px;
  border-radius: 24px;
  background: linear-gradient(160deg, var(--peach), var(--rose-gold));
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.couple-portrait img{ width: 100%; height: 100%; object-fit: cover; }
.couple-portrait .initials{
  font-family: var(--font-script);
  font-size: 3rem;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.couple-name{ font-family: var(--font-display); color: var(--maroon); font-size: 1.15rem; }
.couple-quote{ font-style: italic; color: var(--ink-soft); font-size: 0.85rem; padding: 0 6px; }

/* ==========================================================
   5. OUR LOVE STORY (chat bubble UI)
   ========================================================== */
#story{ background: var(--cream); }
.chat-thread{ display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; }
.chat-row{ display: flex; flex-direction: column; max-width: 78%; }
.chat-row.left{ align-self: flex-start; align-items: flex-start; }
.chat-row.right{ align-self: flex-end; align-items: flex-end; }

.chat-milestone{
  /* flex-start keeps the icon on the first line when a label wraps */
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gold-deep); margin-bottom: 4px;
  line-height: 1.35;
}
.chat-bubble{
  border-radius: 18px;
  padding: 12px 16px;
  font-size: 0.95rem;
  line-height: 1.4;
  position: relative;
  box-shadow: 0 2px 6px rgba(74,30,20,0.08);
}
.chat-row.left .chat-bubble{
  background: var(--mint);
  border-bottom-left-radius: 4px;
  color: var(--ink);
}
.chat-row.right .chat-bubble{
  background: var(--peach);
  border-bottom-right-radius: 4px;
  color: var(--maroon-deep);
}
.chat-date{ font-size: 0.7rem; color: var(--ink-soft); margin-top: 4px; }

.story-photo-frame{
  border: 8px solid #fff;
  outline: 1px solid var(--paper-line);
  box-shadow: var(--shadow-soft);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.story-photo-inner{ width: 100%; aspect-ratio: 4/3; }
.location-tag{
  position: absolute;
  bottom: 10px; left: 10px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 0.75rem;
  padding: 5px 10px;
  border-radius: 999px;
}

/* placeholder-photo gradient (used wherever a real photo hasn't been supplied) */
.ph-photo{
  background: linear-gradient(135deg, var(--rose-gold), var(--gold-light));
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.85);
  font-family: var(--font-script);
  font-size: 1.4rem;
}

/* ==========================================================
   6. MOMENTS OF LOVE
   ========================================================== */
#moments{
  background: linear-gradient(180deg, var(--mint), var(--sage));
  text-align: center;
}
.moments-title{ color: var(--pink); text-shadow: 0 1px 0 rgba(255,255,255,0.6); }
.particles{ position: absolute; inset: 0; pointer-events: none; }
.particle-dot{
  position: absolute;
  border-radius: 50%;
  opacity: 0.75;
  animation: drift 6s ease-in-out infinite;
}
@keyframes drift{
  0%,100%{ transform: translateY(0) translateX(0); }
  50%{ transform: translateY(-14px) translateX(6px); }
}

.polaroid-scatter{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px 14px;
  padding: 10px 0 20px;
}
.polaroid{
  background: #fff;
  padding: 10px 10px 26px;
  width: 150px;
  box-shadow: 0 8px 18px rgba(74,30,20,0.2);
  border-radius: 2px;
  position: relative;
}
/* object-fit keeps real photos from being squashed into the square frame */
.polaroid img, .polaroid .ph-photo{ width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.polaroid-caption{
  position: absolute;
  bottom: 6px; left: 0; right: 0;
  text-align: center;
  font-family: var(--font-script);
  font-size: 1.05rem;
  color: var(--maroon);
}

/* ==========================================================
   7. EVENTS SCHEDULE
   ========================================================== */
#events{ background: var(--cream); }
.events-list{ display: flex; flex-direction: column; gap: 40px; }
.event-card{
  position: relative;
  background: #fff;
  border-radius: 10px;
  /* bottom padding reserves the strip the corner animals occupy
     (≈96px tall at 92px wide, offset 10px from the bottom) */
  padding: 22px 18px 122px;
  border: 1.5px solid var(--gold-deep);
}
.event-card.theme-ochre{ box-shadow: 0 0 0 4px #fff, 0 0 0 5.5px var(--ochre), var(--shadow-soft); }
.event-card.theme-maroon{ box-shadow: 0 0 0 4px #fff, 0 0 0 5.5px var(--maroon), var(--shadow-soft); }

/* ---- day heading ---- */
.event-day-label{
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ochre-deep);
  font-weight: 600;
}
.event-card.theme-maroon .event-day-label{ color: var(--maroon); }
.event-day-date{
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--maroon);
  margin-bottom: 6px;
}
/* thin rule under the day heading */
.event-day-date::after{
  content: "";
  display: block;
  width: 52px; height: 1px;
  margin: 12px auto 0;
  background: var(--gold-deep);
  opacity: 0.55;
}

/* ---- ceremonies within a day ---- */
.event-functions{
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 18px 0 16px;
  text-align: center;
}
.fn-title{
  font-size: 1.75rem;
  color: var(--maroon);
  line-height: 1.15;
}
.fn-subtitle{
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.85rem;
  margin-top: 1px;
}
.fn-time{
  color: var(--ink);
  font-size: 0.92rem;
  letter-spacing: 0.03em;
  margin-top: 4px;
}
.fn-note{
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.82rem;
  margin-top: 3px;
}
/* Full-width rows: inline-flex shrank to content, which forced the longer
   Sangeet labels and times to wrap against each other. */
.fn-schedule{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px auto 0;
  width: 100%;
  max-width: 300px;
}
.fn-row{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  text-align: left;
}
.fn-row-label{
  color: var(--maroon);
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  /* keep the ceremony name on one line — if a row must wrap, the time
     reads far better broken than the label does */
  white-space: nowrap;
}
.fn-row-time{ color: var(--ink); font-size: 0.86rem; text-align: right; }

.event-venue{ text-align: center; color: var(--ink-soft); font-size: 0.85rem; margin-bottom: 8px; }

.event-tagline{
  text-align: center;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--maroon);
}

.event-animal{
  position: absolute;
  bottom: 10px;
  width: 92px;
  height: auto;
}
.event-animal img{ width: 100%; height: auto; display: block; }
.event-animal.left{ left: 6px; }
.event-animal.right{ right: 6px; transform: scaleX(-1); }

/* ==========================================================
   8. WHERE WE CELEBRATE
   ========================================================== */
#location{ background: #fff; text-align: center; }
.venue-name{ color: var(--maroon); font-size: 1.2rem; font-weight: 600; margin-bottom: 4px; }
.venue-address{ color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 20px; }
.map-embed{
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--paper-line);
  margin-bottom: 22px;
  box-shadow: var(--shadow-soft);
}
.map-embed iframe{ width: 100%; height: 220px; border: 0; display: block; }

/* ==========================================================
   9. FOOTER
   ========================================================== */
/* ==========================================================
   8b. RSVP
   ========================================================== */
#rsvp{ background: var(--cream); text-align: center; }
.rsvp-inner{
  padding: 30px 22px;
  background-color: #fff;
}
.rsvp-eyebrow{
  font-size: 0.8rem;
  font-style: italic;
  color: var(--ochre-deep);
  margin: -22px auto 26px;
  max-width: 320px;
}
.rsvp-note{
  font-size: 0.92rem;
  color: var(--ink-soft);
  font-style: italic;
  max-width: 340px;
  margin: 0 auto 22px;
  line-height: 1.5;
}
.rsvp-buttons{
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.rsvp-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 300px;
  padding: 13px 22px;
  border-radius: 999px;
  background: #25D366;               /* WhatsApp brand green */
  color: #fff;
  text-decoration: none;
  font-size: 0.92rem;
  letter-spacing: 0.03em;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.rsvp-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 7px 20px rgba(37, 211, 102, 0.45);
}
.rsvp-btn:active{ transform: translateY(0); }
.rsvp-btn .wa-icon{ width: 20px; height: 20px; fill: #fff; flex-shrink: 0; }
.rsvp-pending{ font-size: 0.85rem; color: var(--ink-soft); }

/* ---------- embedded Google Form ---------- */
.rsvp-form{ margin-bottom: 26px; }
.rsvp-form-note{
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.rsvp-frame{
  width: 100%;
  /* Measured: the form runs ~1890px at phone width (submit ~1785px,
     footer ~1890px). Sized past that so it scrolls with the page instead
     of trapping a nested scroll area. */
  height: 1960px;
  border: 1px solid var(--paper-line);
  border-radius: 12px;
  background: #fff;
  display: block;
}
@media (min-width: 700px){
  .rsvp-frame{ height: 1520px; }
}
/* The embedded form is cramped inside the card's padding on a phone
   (~281px). Tighten the gutters here so it gets usable width. */
@media (max-width: 560px){
  #rsvp{ padding-left: 6px; padding-right: 6px; }
  .rsvp-inner{ padding-left: 8px; padding-right: 8px; }
  /* pull the frame out past the card padding — Google Forms has a minimum
     content width and will scroll sideways below roughly 350px */
  .rsvp-form{ margin-left: -6px; margin-right: -6px; }
}
.rsvp-form-fallback{
  display: inline-block;
  margin-top: 12px;
  font-size: 0.82rem;
  color: var(--gold-deep);
  text-decoration: underline;
}
.rsvp-or{
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 14px;
}

#footer{
  background: var(--brown);
  color: var(--cream);
  text-align: center;
  padding: 48px 24px 40px;
}
.footer-label{ letter-spacing: 0.3em; font-size: 0.7rem; text-transform: uppercase; color: var(--gold-light); margin-bottom: 10px; }
.footer-names{ font-size: 2.4rem; color: #fff; margin-bottom: 10px; }
.footer-flowers{ color: var(--pink-light); margin-bottom: 14px; }
.footer-date{ font-size: 0.95rem; letter-spacing: 0.06em; color: var(--cream-2); margin-bottom: 0; }

/* ==========================================================
   Floral building blocks (used by JS to compose bouquets)
   ========================================================== */

/* ==========================================================
   responsive
   ========================================================== */
@media (max-width: 380px){
  /* hero names are clamp()-sized to fit inside the arch opening — no override */
  .section-title{ font-size: 2.2rem; }
  .couple-portrait{ width: 116px; height: 116px; }
  .polaroid{ width: 130px; }
}