/* ============================================================
   Luxury Animated Wedding Invitation
   Card aspect: 0.6  (width : height = 1 : 1.667)

   Asset aspect ratios (naturalH / naturalW):
     Side arch   4.58   →  height% = width% × 4.58 × 0.6
     Main arch   0.799  →  height% = width% × 0.799 × 0.6  (wide crown)
     Pillar      2.685  →  height% = width% × 2.685 × 0.6  (slender column)
     Cream       1.917  →  arch-topped panel
     Bottom bdr  0.105  →  wide thin decorative strip

   Z-INDEX ORDER (bottom → top):
     1  page-bg
     2  cream          ← arch-shaped invitation panel
     4  corner-vine
     5  main-arch      ← wide decorative crown
     6  side-arch
     7  side-rose      ← pillar flowers
     8  pillar
     9  bottom-border  ← decorative strip across the bottom
    10  top-motif
    11  content
   ============================================================ */

:root {
  --maroon-deep: #33020d;
  --gold:        #c79a3e;
  --gold-soft:   #d8b465;
  --ink:         #45121b;
  --cream:       #f4e4c5;
  --card-ar:     0.6;
  --card-max:    480px;

  /* Pillar/flower column width (slender new pillar asset) */
  --pw: 12%;

  /* Side arch column width — same as the pillars */
  --aw: var(--pw);

  /* Border inset */
  --bi: 2%;

  /* Side arch forced height */
  --ah: 42%;

  /* Pillar natural height at 12% width = 12% × 2.685 × 0.6 = 19.3% (undistorted) */
  --ph: 19.3%;

  /* Arch/flower bottom anchor = border-inset + pillar-height.
     This puts image bottom edges exactly at the pillar top — no overlap, just touching. */
  --arch-bottom: calc(var(--bi) + var(--ph));
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: #5a1020; }
body {
  background: transparent;
  color: var(--ink);
  font-family: "EB Garamond", Garamond, serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* ── Full-page background (card + RSVP seamless) ─────────── */
.site-bg {
  position: fixed; inset: 0; z-index: -1;
  background: #5a1020 url("../assets/page-bg.webp") center / cover no-repeat;
}

/* ── Loader ─────────────────────────────────────────────── */
.loader {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: var(--maroon-deep);
  transition: opacity .6s ease, visibility .6s ease;
}
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__ring {
  width: 46px; height: 46px;
  border: 2px solid rgba(199,154,62,.25);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   STAGE + CARD
   ============================================================ */
.stage { display: flex; justify-content: center; background: transparent; padding: 0; }

.card {
  position: relative;
  width: 100%; max-width: var(--card-max);
  aspect-ratio: var(--card-ar);
  margin: 0 auto;
  overflow: hidden;
}

.layer {
  position: absolute; display: block;
  pointer-events: none;
  -webkit-user-select: none; user-select: none;
  will-change: transform, opacity;
}

/* ============================================================
   z=1  PAGE BACKGROUND
   ============================================================ */
.page-bg {
  left: 0; top: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 1;
}

/* ============================================================
   z=2  CREAM ARCH PANEL — arch-topped invitation body.
        Natural ratio 1.917 preserved (no crop), centered horizontally.
   ============================================================ */
.cream {
  left: 50%;
  transform: translateX(-50%);
  width: 71%; top: 16%;    /* adjusted to prevent overflow past bottom-border */
  height: auto;
  z-index: 2;
}

/* ============================================================
   z=4  CORNER VINE BOUQUETS
        Must be within border on ALL sides (no overflow exception).
        Use 4% inset so the border frame shows cleanly.
        Animation: clip-path grow from the outer corner inward.
   ============================================================ */
.corner-vine { width: 32%; z-index: 4; }
.corner-vine.left  { left: 0%;  top: 3%; width: 50%; }
.corner-vine.right { right: 2%; top: 3.8%; width: 40%; }

/* ============================================================
   z=7  MAIN ARCH — wide decorative crown at the TOP, framing the cream
        arch top. top-anchored (this asset is a crown, not full-height).
        width 79%, top 14% — lower to frame the cream within its opening.
        Legs land at ~10.5%, just overlapping side arch inner edges (12%).
        NOTE: if you resize the main arch, adjust cream top/width so its
        arch shoulders stay inside the main arch frame.
   ============================================================ */
.main-arch {
  left: 50%;
  transform: translateX(-50%);
  width: 79%;
  top: 10%;
  bottom: auto;
  height: auto;
  z-index: 7;
}

/* ============================================================
   z=6  SIDE ARCHES — bottom-anchored to pillar top (no overlap).
        bottom: --arch-bottom = border-inset + pillar-height = 18.2%.
        height: --ah (59%) so top lands at ~22.8% from card top.
   ============================================================ */
.side-arch { width: var(--aw); height: var(--ah); top: auto; bottom: var(--arch-bottom); z-index: 6; }
.side-arch.left  { left: 0; }
.side-arch.right { right: 0; }

/* ============================================================
   z=7  PILLAR FLOWER GARLANDS — slightly smaller than pillars.
        Flowers sit at pillar top. bottom: calc(var(--arch-bottom) - 0.5%) adds small overlap for seamless connection.
   ============================================================ */
.side-rose { width: 10%; z-index: 7; }
.side-rose.left  { left:  1%; bottom: calc(var(--arch-bottom) - 0.5%); }
.side-rose.right { right: 1%; bottom: calc(var(--arch-bottom) - 0.5%); }

/* ============================================================
   z=8  PILLAR PEDESTALS — within border on all sides.
        bottom: --bi keeps them inside the bottom border.
        left/right: 0 → outer edges may overlap left/right border.
   ============================================================ */
.pillar { width: var(--pw); z-index: 8; }
.pillar.left  { left:  0; bottom: var(--bi); }
.pillar.right { right: 0; bottom: var(--bi); }

/* ============================================================
   LOWER FLOWER CLUSTERS — hidden for now
   ============================================================ */
.lower-flower { display: none; }

/* ============================================================
   z=9  BOTTOM BORDER — decorative strip between the two pillar bases.
        Pillars span 0–12% and 88–100%, so the strip spans 12–88%.
   ============================================================ */
.bottom-border {
  left: var(--pw); bottom: 0; width: calc(100% - 2 * var(--pw));
  height: auto;
  z-index: 9;
}

/* ============================================================
   z=10  TOP CENTRE MOTIF — inside the cream, near its arch top
   ============================================================ */
.top-motif {
  width: 8%; left: 50%; top: 19%;
  transform: translateX(-50%);
  z-index: 10;
}

/* ============================================================
   TEXT CONTENT COLUMN  z=11
   padding-top: 43% (of card WIDTH) ≈ 26% of card height.
   Cream now starts at 20%, so content begins just inside the arch opening.
   ============================================================ */
.content {
  position: absolute; z-index: 11;
  left: 50%; top: 0;
  transform: translateX(-50%);
  width: 50%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  padding-top: 50%;   /* adjusted for tighter spacing with top-motif */
  padding-bottom: 2%;  /* kept tight to prevent cream overflow past bottom-border */
}

.text-img.basmala { width: 56%; margin: 0 auto .85em; }

.intro {
  font-family: "Cormorant Garamond", serif;
  color: var(--ink);
  font-size: clamp(5.5px, 1.6vw, 8.5px);
  letter-spacing: .13em; text-transform: uppercase;
  line-height: 1.65; margin: 0 0 .98em;
}

.text-img { display: block; height: auto; }
.text-img.groom  { width: 80%;  margin: 0 auto .24em; }
.text-img.sep    { width: 85%;  margin: .26em auto; }
.text-img.bride  { width: 80%;  margin: .18em auto; }
.text-img.motif4 {
  position: absolute;
  left: 50%;
  top: 3.5%;
  transform: translateX(-50%);
  width: 44%;
  margin: 0;
  z-index: 4;
}
.text-img.date   { width: 86%;  margin: .26em auto .16em; }

.venue { margin-top: .32em; color: var(--ink); }
.venue__name {
  font-family: "Cormorant Garamond", serif; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  font-size: clamp(8px, 2.3vw, 11px); margin: 0 0 .15em;
}
.venue__addr {
  font-family: "Cormorant Garamond", serif;
  letter-spacing: .12em; text-transform: uppercase;
  font-size: clamp(6px, 1.8vw, 9.5px); margin: 0 0 .14em;
}

.scroll-hint {
  margin-top: auto;
  margin-bottom: .8em;
  font-family: "Cormorant Garamond", serif;
  letter-spacing: .08em; text-transform: uppercase;
  font-size: clamp(13px, 3.6vw, 17px);
  font-weight: 600;
  color: #a67c2e;
  text-shadow:
    0 0 8px rgba(199, 154, 62, .5),
    0 2px 4px rgba(0, 0, 0, .3);
  display: flex; flex-direction: column; align-items: center; gap: .3em;
  animation: bob 1.8s ease-in-out infinite, shine 2.4s ease-in-out infinite;
}
.scroll-hint__arrow {
  font-size: 1.6em; line-height: .6;
  animation: bob 1.8s ease-in-out infinite;
}
@keyframes bob {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}
@keyframes shine {
  0%,100% {
    text-shadow:
      0 0 8px rgba(199, 154, 62, .45),
      0 2px 4px rgba(0, 0, 0, .3);
  }
  50% {
    text-shadow:
      0 0 14px rgba(216, 180, 101, .8),
      0 0 22px rgba(199, 154, 62, .55),
      0 2px 4px rgba(0, 0, 0, .3);
  }
}

/* ============================================================
   RSVP SECTION
   ============================================================ */
.rsvp {
  position: relative;
  background: transparent;
  color: var(--cream);
  padding: clamp(48px, 12vw, 110px) 22px clamp(60px, 14vw, 120px);
  display: flex; justify-content: center;
}
.rsvp__inner { width: 100%; max-width: 440px; text-align: center; }
.rsvp__flourish {
  display: block; width: 120px; height: 22px;
  margin: 0 auto 22px;
  background: url("../assets/motif3.webp") center / contain no-repeat;
}
.rsvp__title {
  font-family: "Cormorant Garamond", serif; font-weight: 500;
  font-size: clamp(28px, 8vw, 40px); letter-spacing: .04em;
  margin: 0 0 .25em; color: var(--gold-soft);
}
.rsvp__sub {
  font-family: "Cormorant Garamond", serif; font-style: italic;
  font-size: clamp(14px, 4vw, 18px); margin: 0 0 2em;
  color: #e9d6b0; opacity: .9;
}
.rsvp__gform {
  width: 100%;
}
.rsvp__gform iframe {
  display: block;
  width: 100%;
  height: 1200px;
  border: 0;
}
.rsvp__contact { margin-top: 30px; font-size: 14px; letter-spacing: .08em; color: #e9d6b0; opacity: .85; }
.rsvp__contact a { color: var(--gold-soft); text-decoration: none; border-bottom: 1px solid rgba(199,154,62,.4); }

/* ── GSAP initial states ────────────────────────────────── */
.js .layer, .js .reveal { opacity: 0; }

@media (min-width: 900px) {
  .stage { padding: 40px 0; }
  .card  { border-radius: 2px; }
}
/* Very small phones (≤360px): widen text column so names/intro don't clip */
@media (max-width: 360px) {
  .content { width: 58%; }
}
@media (prefers-reduced-motion: reduce) {
  .js .layer, .js .reveal { opacity: 1 !important; }
  .scroll-hint__arrow { animation: none; }
}