/* ============================================================
   ANN & REMMY WEDDING — STYLESHEET
   ============================================================ */

/* ── CSS Variables ── */
:root {
  --gold:         #D4AF37;
  --gold-light:   #f0d060;
  --gold-dark:    #a88a1a;
  --rose:         #8B2252;
  --rose-light:   #c45a8a;
  --blush:        #F4C2C2;
  --cream:        #FAF0E6;
  --champagne:    #F7E7CE;
  --dark:         #2D1B2E;
  --dark2:        #0D0510;
  --white:        #FFFFFF;
  --text:         #4a3040;
  --text-light:   #7a6070;
  --shadow:       0 8px 32px rgba(45,27,46,0.18);
  --shadow-lg:    0 20px 60px rgba(45,27,46,0.25);
  --radius:       16px;
  --transition:   all 0.4s cubic-bezier(0.4,0,0.2,1);

  /* Envelope colours */
  --env-back:        #E8C880;
  --env-back-deep:   #D4A84A;
  --env-face:        #F0DCA8;
  --env-face-light:  #F8EDD0;
  --env-flap-out:    #F5E6C8;
  --env-flap-in:     #FFF8F0;
  --env-gold-trim:   rgba(212,175,55,0.7);

  --font-script: 'Great Vibes', cursive;
  --font-serif:  'Playfair Display', serif;
  --font-alt:    'Cormorant Garamond', serif;
  --font-sans:   'Lato', sans-serif;
}

/* ── Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body { font-family:var(--font-sans); color:var(--text); background:var(--cream); overflow-x:hidden; line-height:1.7; }
a { text-decoration:none; color:inherit; }

.container { max-width:1200px; margin:0 auto; padding:0 2rem; }
.text-center { text-align:center; }

/* Background hearts canvas */
#heartsCanvas {
  position:fixed; top:0; left:0; width:100%; height:100%;
  pointer-events:none; z-index:0; opacity:0.12;
}

/* ============================================================
   TYPOGRAPHY HELPERS
   ============================================================ */
.section-pre {
  font-family:var(--font-script); font-size:1.7rem;
  color:var(--rose-light); text-align:center;
  margin-bottom:0.3rem; letter-spacing:1px;
}
.section-pre.light { color:var(--blush); }

.section-title {
  font-family:var(--font-serif);
  font-size:clamp(2rem,5vw,3.2rem);
  color:var(--dark); text-align:center;
  font-weight:700; letter-spacing:1px; line-height:1.2;
}
.section-title.light { color:var(--white); }

.story-divider {
  display:flex; align-items:center; justify-content:center;
  gap:1rem; margin:1.2rem auto 3rem;
}
.story-divider span {
  width:80px; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.story-divider i { color:var(--gold); font-size:1.1rem; animation:pulse-heart 2s ease-in-out infinite; }
.story-divider.light span { background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent); }
.story-divider.light i { color:var(--blush); }

@keyframes pulse-heart { 0%,100%{transform:scale(1)} 50%{transform:scale(1.25)} }

/* ============================================================
   NAVIGATION
   ============================================================ */
#navbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:1.2rem 2.5rem;
  display:flex; align-items:center; justify-content:space-between;
  transition:var(--transition);
}
#navbar.scrolled {
  background:rgba(13,5,16,0.94);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:0 2px 30px rgba(0,0,0,0.35);
  padding:0.9rem 2.5rem;
}
.nav-logo {
  font-family:var(--font-script); font-size:2rem;
  color:var(--gold); letter-spacing:3px;
  text-shadow:0 0 20px rgba(212,175,55,0.5);
}
.nav-heart { color:var(--blush); font-size:0.9rem; animation:pulse-heart 2s infinite; display:inline-block; }
.nav-links { list-style:none; display:flex; gap:2rem; }
.nav-links a {
  font-family:var(--font-alt); font-style:italic; font-size:1rem;
  color:rgba(255,255,255,0.82); letter-spacing:0.5px; position:relative;
  transition:color 0.3s;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-4px; left:0;
  width:0; height:1px; background:var(--gold); transition:width 0.3s;
}
.nav-links a:hover { color:var(--gold); }
.nav-links a:hover::after { width:100%; }
.nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; }
.nav-toggle span { display:block; width:26px; height:2px; background:var(--gold); border-radius:2px; transition:var(--transition); }

/* ============================================================
   ENVELOPE HERO — AUTO-ANIMATED OPENING
   ============================================================ */
.envelope-hero {
  position:relative;
  height:100vh;
  z-index:1;
  /* Perspective container — eye slightly above centre for dramatic lid pop */
  perspective:1000px;
  perspective-origin:50% 42%;
  overflow:hidden;
}

/* Stage fills the full hero, same as parent */
.envelope-stage {
  position:absolute;
  inset:0;
}

/* ── Backdrop ── */
.env-backdrop {
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse at 15% 25%, rgba(139,34,82,0.55) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 70%, rgba(212,175,55,0.18) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 50%, rgba(90,10,50,0.4) 0%, transparent 60%),
    linear-gradient(160deg, #080308 0%, #160C18 35%, #0D0810 65%, #100610 100%);
}

/* Bokeh circles */
.env-backdrop-bokeh { position:absolute; inset:0; pointer-events:none; }
.bokeh-dot {
  position:absolute; border-radius:50%;
  background:radial-gradient(circle, rgba(212,175,55,0.6) 0%, transparent 70%);
  animation:bokehFloat ease-in-out infinite alternate;
}
@keyframes bokehFloat {
  from { transform:translateY(0) scale(1); opacity:var(--op,0.08); }
  to   { transform:translateY(-20px) scale(1.1); opacity:calc(var(--op,0.08) * 0.4); }
}

/* Petals inside envelope sticky */
.env-petal-container { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.env-petal {
  position:absolute; top:-30px;
  animation:petalFall linear infinite;
  pointer-events:none;
}
@keyframes petalFall {
  0%  { transform:translateY(0) rotate(0deg) translateX(0); opacity:0.65; }
  100%{ transform:translateY(105vh) rotate(720deg) translateX(50px); opacity:0; }
}

/* ── Text above envelope (absolute overlay, top of screen) ── */
.env-above-text {
  position:absolute;
  top:10%;
  left:0; right:0;
  z-index:30;
  text-align:center;
  pointer-events:none;
  transition:opacity 0.1s linear;
}
.env-tagline {
  display:inline-block;
  font-family:var(--font-alt); font-style:italic;
  color:rgba(255,255,255,0.92); font-size:clamp(0.82rem,2vw,1.05rem);
  letter-spacing:3px; text-transform:uppercase;
  /* Frosted dark pill for legibility over the cream envelope surface */
  padding:0.45rem 1.8rem;
  background:rgba(8,3,8,0.58);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-radius:50px;
  border:1px solid rgba(212,175,55,0.25);
  box-shadow:0 2px 18px rgba(0,0,0,0.35);
}

/* ── Full-screen 3D Envelope Body ── */
/*
  .env-body fills the entire sticky viewport and is the 3D stage.
  perspective lives on .envelope-sticky; preserve-3d passes it through
  to #envLid so the rotation truly "pops out of the screen".
*/
.env-body {
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  /* Gentle float when sealed; stopped by JS once user starts scrolling */
  animation:envFloat 5s ease-in-out infinite;
}
@keyframes envFloat {
  0%,100% { transform:translateY(0px) rotate(-0.15deg); }
  50%     { transform:translateY(-8px) rotate(0.15deg); }
}
.env-body.env-animating { animation:none; }

/* ── Drop Shadow ── */
.env-shadow-base {
  position:absolute;
  bottom:-18px; left:5%; right:5%; height:30px;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0.6) 0%, transparent 70%);
  filter:blur(12px);
  z-index:0;
}

/* ── LAYER 1 — Back of envelope ── */
.env-back {
  position:absolute; inset:0; z-index:1; border-radius:3px;
  background:linear-gradient(160deg, var(--env-back-deep) 0%, var(--env-back) 60%, #D8B870 100%);
  box-shadow:
    inset 0 0 0 2px rgba(212,175,55,0.35),
    inset 0 0 40px rgba(0,0,0,0.15);
}
/* Diamond fold crease lines on the back */
.env-back::before,
.env-back::after {
  content:''; position:absolute; inset:0; pointer-events:none;
}
.env-back::before {
  background:
    linear-gradient(to bottom right, transparent 49.3%, rgba(180,140,40,0.25) 49.3%, rgba(180,140,40,0.25) 50.7%, transparent 50.7%),
    linear-gradient(to bottom left,  transparent 49.3%, rgba(180,140,40,0.25) 49.3%, rgba(180,140,40,0.25) 50.7%, transparent 50.7%);
}
.env-back-border {
  position:absolute; inset:4px; border:1px solid rgba(212,175,55,0.2); border-radius:2px; pointer-events:none;
}
.env-back-diamond {
  /* Decorative diamond stamp in center back */
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) rotate(45deg);
  width:30px; height:30px;
  border:1px solid rgba(212,175,55,0.2);
}

/* ── LAYER 2 — Invitation card peek ── */
.env-card-peek {
  position:absolute;
  bottom:6%;
  left:50%;
  transform:translateX(-50%);
  width:86%;
  z-index:2;
  pointer-events:none;
}
.env-card {
  background:linear-gradient(160deg, #FFFDF8 0%, #FFF8EE 100%);
  border-radius:4px;
  box-shadow:
    0 0 0 1px rgba(212,175,55,0.4),
    0 0 0 5px rgba(212,175,55,0.08),
    0 20px 60px rgba(0,0,0,0.35),
    inset 0 0 40px rgba(255,248,230,0.3);
  transform:translateY(90px) scale(0.9);
  opacity:0;
  overflow:hidden;
  pointer-events:none; /* JS enables this when open */
}
.env-card.is-open { pointer-events:auto; }

/* Inner double border */
.env-card-inner {
  padding:clamp(1.2rem,3vw,2.2rem) clamp(1rem,2.5vw,2rem);
  border:1px solid rgba(212,175,55,0.3);
  margin:8px;
  border-radius:2px;
  text-align:center;
  position:relative;
}
/* Corner flourishes on card */
.env-card-inner::before,
.env-card-inner::after {
  content:'✦'; position:absolute;
  color:rgba(212,175,55,0.4); font-size:0.7rem;
}
.env-card-inner::before { top:6px; left:8px; }
.env-card-inner::after  { bottom:6px; right:8px; }

/* Card content styles */
.card-monogram {
  display:flex; align-items:center; justify-content:center; gap:0.3rem;
  font-family:var(--font-serif); font-size:clamp(1rem,2.5vw,1.4rem);
  color:var(--gold); margin-bottom:0.6rem; font-weight:700;
}
.cm-letter { letter-spacing:2px; }
.cm-heart  { font-size:0.7em; color:var(--rose-light); animation:pulse-heart 2s infinite; }

.card-floral-top, .card-floral-bottom {
  display:flex; align-items:center; justify-content:center;
  gap:0.4rem; margin:0.5rem 0;
  color:rgba(212,175,55,0.5); font-size:clamp(0.55rem,1.2vw,0.75rem);
}
.card-floral-top i:nth-child(3),
.card-floral-bottom i:nth-child(3) { color:rgba(196,90,138,0.5); }

.card-pre {
  font-family:var(--font-alt); font-style:italic;
  font-size:clamp(0.6rem,1.4vw,0.82rem);
  color:var(--text-light); letter-spacing:2px;
  text-transform:uppercase; margin-bottom:0.3rem;
}

.card-bride, .card-groom {
  font-family:var(--font-script);
  font-size:clamp(2rem,7vw,4rem);
  line-height:1; color:var(--dark);
  text-shadow:0 2px 8px rgba(212,175,55,0.2);
}
.card-bride { color:var(--rose); }
.card-groom { color:var(--dark); }

.card-and-wrap { margin:0.1rem 0; }
.card-and {
  font-family:var(--font-serif); font-style:italic;
  font-size:clamp(1rem,2.5vw,1.4rem);
  color:var(--gold-dark); opacity:0.7;
}

.card-request {
  font-family:var(--font-alt); font-style:italic;
  font-size:clamp(0.62rem,1.5vw,0.88rem);
  color:var(--text-light); line-height:1.6;
  margin:0.6rem 0 0.8rem;
}

.card-divider {
  display:flex; align-items:center; justify-content:center; gap:0.8rem;
  margin:0.6rem 0;
}
.card-divider span { width:50px; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.card-divider i { color:var(--gold); font-size:0.85rem; }

.card-details-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:0.5rem;
  text-align:left; margin:0.8rem 0;
}
.card-detail-item {
  display:flex; align-items:flex-start; gap:0.5rem;
  font-size:clamp(0.58rem,1.3vw,0.8rem);
}
.card-detail-item i { color:var(--gold); font-size:0.85em; margin-top:2px; flex-shrink:0; }
.card-detail-item div { display:flex; flex-direction:column; gap:1px; }
.card-detail-item strong { color:var(--dark); font-weight:700; font-size:0.9em; }
.card-detail-item span  { color:var(--text-light); font-style:italic; font-family:var(--font-alt); }
.card-detail-item.full  { grid-column:span 2; }

.card-hashtag {
  font-family:var(--font-script); font-size:clamp(0.9rem,2vw,1.3rem);
  color:var(--gold); margin:0.5rem 0 0.8rem; letter-spacing:1px;
}

.card-bottom-actions {
  display:flex; align-items:center; justify-content:center;
  gap:1rem; flex-wrap:wrap; margin-top:0.3rem;
}
.card-rsvp-btn {
  display:inline-flex; align-items:center; gap:0.4rem;
  background:linear-gradient(135deg,var(--rose),var(--rose-light));
  color:var(--white);
  font-family:var(--font-serif); font-size:clamp(0.62rem,1.3vw,0.8rem);
  font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  padding:0.55rem 1.2rem; border-radius:50px;
  box-shadow:0 4px 15px rgba(139,34,82,0.3);
  transition:var(--transition); pointer-events:auto;
}
.card-rsvp-btn:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(139,34,82,0.4); }
.card-details-btn {
  font-family:var(--font-alt); font-style:italic;
  font-size:clamp(0.62rem,1.3vw,0.8rem);
  color:var(--text-light); letter-spacing:1px;
  display:flex; align-items:center; gap:0.3rem;
  border-bottom:1px solid rgba(122,96,112,0.3);
  transition:var(--transition); pointer-events:auto;
}
.card-details-btn:hover { color:var(--rose); border-color:var(--rose); gap:0.6rem; }

/* ── LAYER 3 — Front face panels (static triangles) ── */
.env-panel-left,
.env-panel-right,
.env-panel-bottom {
  position:absolute; inset:0; z-index:10;
  background:linear-gradient(160deg, var(--env-face-light) 0%, var(--env-face) 100%);
}
.env-panel-left   { clip-path:polygon(0 0, 0 100%, 50% 50%); }
.env-panel-right  { clip-path:polygon(100% 0, 50% 50%, 100% 100%); }
.env-panel-bottom { clip-path:polygon(0 100%, 50% 50%, 100% 100%); }

/* Shadow/depth on panels */
.env-panel-left::after,
.env-panel-right::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,0.07) 0%, transparent 50%);
}
.env-panel-right::after {
  background:linear-gradient(-90deg, rgba(0,0,0,0.07) 0%, transparent 50%);
}

/* Gold trim fold lines */
.env-panel-left::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom right, transparent 49%, rgba(212,175,55,0.35) 49%, rgba(212,175,55,0.35) 51%, transparent 51%);
}
.env-panel-right::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom left, transparent 49%, rgba(212,175,55,0.35) 49%, rgba(212,175,55,0.35) 51%, transparent 51%);
}
.env-panel-bottom::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top right, transparent 49%, rgba(212,175,55,0.25) 49%, rgba(212,175,55,0.25) 51%, transparent 51%);
}

/* Decorative ribbons */
.env-ribbon {
  position:absolute; z-index:11; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(212,175,55,0.25), transparent);
}
.env-ribbon-h { top:50%; left:0; right:0; height:1px; transform:translateY(-50%); }
.env-ribbon-v { left:50%; top:0; bottom:0; width:1px; transform:translateX(-50%);
  background:linear-gradient(180deg, transparent, rgba(212,175,55,0.25), transparent); }

/* Corner star flourishes */
.env-corner {
  position:absolute; z-index:12; font-size:0.6rem;
  color:rgba(212,175,55,0.4); pointer-events:none;
  animation:cornerSpin 8s linear infinite;
}
.env-corner-tl { top:8px;  left:8px;  }
.env-corner-tr { top:8px;  right:8px; animation-direction:reverse; }
.env-corner-bl { bottom:8px; left:8px;  animation-direction:reverse; }
.env-corner-br { bottom:8px; right:8px; }
@keyframes cornerSpin { from{transform:rotate(0)} to{transform:rotate(360deg)} }

/* ── LAYER 4 — Animated top lid ── */
/*
  #envLid covers the top 52% of the full-screen viewport.
  transform-origin: top center — pivots at the very top screen edge.
  With perspective:1000px on the parent and the lid apex ~52vh down,
  at rotateX(-90°) the apex appears ≈2× larger — clearly "coming out of screen".
  NO clip-path on the parent — only on children to keep 3D rendering clean.
  Dual-face: outer (backface-visibility:hidden) + inner (pre-rotated 180°).
*/
.env-lid {
  position:absolute;
  top:0; left:0; right:0;
  height:52%;                  /* apex sits at screen centre-crease */
  transform-origin:top center;
  transform-style:preserve-3d;
  transform:rotateX(0deg);     /* JS drives: 0° sealed → -180° fully open */
  z-index:20;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,0.22));
}

/* ── OUTER FACE (visible when flap is flat / closed) ── */
.env-flap-outer {
  position:absolute; inset:0;
  /* Triangle: full width at top, narrows to a point at bottom-center */
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  /* Rich envelope paper — light at top fold, slightly amber at apex */
  background:linear-gradient(165deg,
    #FBEECB 0%,
    #F5E0A0 35%,
    #EDD080 65%,
    #E5C460 100%);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
/* Gold fold-crease lines along the two diagonal edges of the flap */
.env-flap-outer::before {
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(to bottom right,
      transparent 49.2%, rgba(212,175,55,0.55) 49.2%,
      rgba(212,175,55,0.55) 50.8%, transparent 50.8%),
    linear-gradient(to bottom left,
      transparent 49.2%, rgba(212,175,55,0.55) 49.2%,
      rgba(212,175,55,0.55) 50.8%, transparent 50.8%);
  clip-path:polygon(0 0, 100% 0, 50% 100%);
}
/* Subtle paper-texture sheen on the outer face */
.env-flap-outer::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 20%,
    rgba(255,255,255,0.28) 0%, transparent 60%);
  clip-path:polygon(0 0, 100% 0, 50% 100%);
}

/* ── INNER FACE (visible after flap has rotated past 90°) ── */
.env-flap-inner {
  position:absolute; inset:0;
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  /* Lighter, cream-linen interior */
  background:linear-gradient(160deg,
    #FFFDF7 0%,
    #FAF3E0 50%,
    #F5EBD0 100%);
  /* Pre-rotated 180° so it appears when the outer face has rotated away */
  transform:rotateX(180deg);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
/* Subtle floral damask hint on the inner face */
.env-flap-inner::before {
  content:''; position:absolute; inset:0;
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  background:radial-gradient(ellipse at 50% 50%,
    rgba(212,175,55,0.08) 0%, transparent 65%);
}

/* Gold fold-crease line at the very top edge (the hinge) */
.env-flap-edge {
  position:absolute; top:0; left:0; right:0; height:4px; z-index:2;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(212,175,55,0.4) 8%,
    rgba(212,175,55,0.9) 50%,
    rgba(212,175,55,0.4) 92%,
    transparent 100%);
  pointer-events:none;
  box-shadow:0 2px 8px rgba(212,175,55,0.25);
}

/* ── WAX SEAL ── */
.wax-seal-wrap {
  position:absolute;
  left:50%;
  /*
    Centered visually within the triangular lid.
    top:55% of the lid height = 0.55 × 52vh ≈ 28.6vh from top of screen.
    This places the seal at the visual centroid of the triangle (wide base
    at top, apex at bottom) so it reads as clearly centered on the flap.
  */
  top:55%;
  transform:translate(-50%, -50%);
  z-index:25;
  cursor:default;
}

.wax-seal {
  position:relative;
  /* Scale with viewport — looks impressive on the large envelope */
  width:clamp(72px, 7.5vw, 118px);
  height:clamp(72px, 7.5vw, 118px);
  filter:drop-shadow(0 8px 28px rgba(130,8,8,0.75));
}

/* Pulsing outer glow */
.wax-glow {
  position:absolute;
  inset:-14px; border-radius:50%;
  background:radial-gradient(circle, rgba(200,30,30,0.45) 0%, transparent 65%);
  animation:sealGlow 2.4s ease-in-out infinite;
}
@keyframes sealGlow {
  0%,100%{ transform:scale(1);   opacity:0.7; }
  50%    { transform:scale(1.2); opacity:1;   }
}

/* Outer decorative ring */
.wax-outer-ring {
  position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(
    #5C1010 0deg, #8B2020 20deg, #5C1010 40deg,
    #8B2020 60deg, #5C1010 80deg, #8B2020 100deg,
    #5C1010 120deg,#8B2020 140deg,#5C1010 160deg,
    #8B2020 180deg,#5C1010 200deg,#8B2020 220deg,
    #5C1010 240deg,#8B2020 260deg,#5C1010 280deg,
    #8B2020 300deg,#5C1010 320deg,#8B2020 340deg,
    #5C1010 360deg
  );
  box-shadow:
    0 4px 20px rgba(100,8,8,0.7),
    inset 0 2px 4px rgba(255,140,140,0.2);
}

/* Gold inner ring */
.wax-mid-ring {
  position:absolute; inset:4px; border-radius:50%;
  border:1.5px solid rgba(212,175,55,0.5);
}

/* Main wax body */
.wax-body {
  position:absolute; inset:7px; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #C42828 0%, #961818 40%, #5C0A0A 100%);
  overflow:hidden;
}

/* Subtle pattern lines on wax */
.wax-pattern {
  position:absolute; inset:0; border-radius:50%;
  background:
    repeating-linear-gradient(45deg, transparent 0px, transparent 3px, rgba(0,0,0,0.06) 3px, rgba(0,0,0,0.06) 4px);
}

/* A ♥ R monogram */
.wax-monogram {
  position:absolute; inset:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  gap:2px; padding:2px;
}
.wax-a, .wax-r {
  font-family:var(--font-serif); font-weight:700;
  font-size:clamp(11px, 1.6vw, 18px);
  color:var(--gold); letter-spacing:0.5px;
  text-shadow:0 1px 4px rgba(0,0,0,0.6);
}
.wax-heart {
  color:var(--gold-light); font-size:clamp(9px, 1.2vw, 14px);
  animation:pulse-heart 1.5s infinite;
}

/* Shine highlight on wax */
.wax-shine {
  position:absolute; top:18%; left:22%;
  width:28%; height:20%; border-radius:50%;
  background:radial-gradient(circle, rgba(255,220,220,0.45) 0%, transparent 70%);
  transform:rotate(-25deg);
  pointer-events:none;
}

/* ── Couple names overlay (absolute, bottom quarter of screen) ── */
.env-below-text {
  position:absolute;
  bottom:14%;
  left:0; right:0;
  z-index:30;
  text-align:center;
  pointer-events:none;
  transition:opacity 0.1s linear;
  /* Frosted pill backdrop so text is legible over the cream envelope */
  padding:1.2rem 2.4rem;
  background:rgba(8,3,8,0.55);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  /* Pill width auto-fits content */
  width:fit-content;
  left:50%; right:auto;
  transform:translateX(-50%);
  border-radius:16px;
  border:1px solid rgba(212,175,55,0.22);
  box-shadow:0 4px 30px rgba(0,0,0,0.4);
}
.env-couple-names {
  font-family:var(--font-script);
  font-size:clamp(2.2rem,7vw,4.5rem);
  line-height:1;
  text-shadow:0 0 28px rgba(212,175,55,0.35), 0 2px 8px rgba(0,0,0,0.5);
}
.env-names-amp { color:rgba(255,255,255,0.6); font-size:0.75em; font-family:var(--font-serif); font-style:italic; }
.env-name-ann   { color:var(--blush); }
.env-name-remmy { color:var(--gold);  }

.env-wedding-label {
  font-family:var(--font-alt); font-style:italic;
  color:rgba(255,255,255,0.65);
  font-size:clamp(0.75rem,1.8vw,1rem);
  letter-spacing:3px; margin-top:0.5rem;
}

/* ── Scroll CTA ── */
.env-scroll-cta {
  position:absolute; bottom:2.5rem; left:50%; transform:translateX(-50%);
  z-index:30; text-align:center;
  transition:opacity 0.1s linear;
  background:rgba(8,3,8,0.5);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-radius:50px;
  padding:0.7rem 1.6rem;
  border:1px solid rgba(212,175,55,0.2);
}
.env-cta-inner {
  display:flex; flex-direction:column; align-items:center; gap:0.5rem;
}
.env-cta-icon {
  font-size:1.4rem; color:var(--gold); opacity:0.6;
  animation:pulse-heart 2s infinite;
}
.env-scroll-cta p {
  font-family:var(--font-alt); font-style:italic;
  color:rgba(255,255,255,0.82); font-size:0.88rem;
  letter-spacing:3px; text-transform:uppercase;
}
.env-cta-arrows {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  margin-top:0.3rem;
}
.env-cta-arrows span {
  display:block; width:12px; height:12px;
  border-right:1.5px solid rgba(212,175,55,0.5);
  border-bottom:1.5px solid rgba(212,175,55,0.5);
  transform:rotate(45deg);
  animation:arrowBounce 1.6s ease-in-out infinite;
}
.env-cta-arrows span:nth-child(2) { animation-delay:0.2s; opacity:0.7; }
.env-cta-arrows span:nth-child(3) { animation-delay:0.4s; opacity:0.4; }
@keyframes arrowBounce {
  0%,100%{ transform:rotate(45deg) translateY(0); opacity:var(--op,1); }
  50%    { transform:rotate(45deg) translateY(4px); }
}

/* ============================================================
   COUNTDOWN SECTION
   ============================================================ */
#countdown {
  position:relative; padding:6rem 0;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(139,34,82,0.7) 0%, transparent 55%),
    linear-gradient(135deg, #0D0510 0%, #1a0818 50%, #0D0510 100%);
  background-attachment:fixed; overflow:hidden;
}
.countdown-overlay {
  position:absolute; inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23D4AF37' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
}
.countdown-grid {
  display:flex; align-items:center; justify-content:center;
  gap:1rem; margin-top:3rem; flex-wrap:wrap;
}
.countdown-unit { text-align:center; min-width:110px; }
.countdown-number {
  font-family:var(--font-serif);
  font-size:clamp(3rem,8vw,5.5rem);
  font-weight:700; color:var(--gold); line-height:1;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(212,175,55,0.3); border-radius:var(--radius);
  padding:0.6rem 1rem; min-width:110px; display:block;
  text-shadow:0 0 30px rgba(212,175,55,0.5);
  transition:all 0.25s;
}
.countdown-label {
  font-family:var(--font-alt); font-style:italic;
  color:rgba(255,255,255,0.55); font-size:0.9rem;
  letter-spacing:3px; text-transform:uppercase; margin-top:0.8rem;
}
.countdown-sep { color:var(--rose-light); font-size:1.5rem; animation:pulse-heart 2s infinite; margin-bottom:2.5rem; }

/* ============================================================
   QUOTE SECTION
   ============================================================ */
#quote-section {
  position:relative; padding:5rem 0;
  background:var(--cream); overflow:hidden;
}
.love-bubbles-wrap { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.love-bubble {
  position:absolute; bottom:-60px; animation:bubbleRise linear infinite; opacity:0;
}
@keyframes bubbleRise {
  0%  { transform:translateY(0) scale(0.5) rotate(0deg);    opacity:0; }
  10% { opacity:0.5; }
  90% { opacity:0.25; }
  100%{ transform:translateY(-105vh) scale(1.2) rotate(25deg); opacity:0; }
}
.quote-icon { font-size:3rem; color:var(--gold); opacity:0.35; margin-bottom:1rem; display:block; }
.love-quote {
  font-family:var(--font-script); font-size:clamp(2rem,5vw,3.5rem);
  color:var(--rose); line-height:1.4; margin-bottom:1rem; font-style:normal;
}
.quote-attribution {
  font-family:var(--font-alt); font-style:italic; color:var(--text-light);
  font-size:1.1rem; letter-spacing:2px; margin-bottom:2.5rem;
}
.bible-verse {
  display:inline-flex; flex-direction:column; align-items:center; gap:0.6rem;
  background:linear-gradient(135deg,rgba(212,175,55,0.07),rgba(139,34,82,0.07));
  border:1px solid rgba(212,175,55,0.25); border-radius:var(--radius);
  padding:1.5rem 2.5rem; max-width:650px; font-family:var(--font-alt);
}
.bible-verse i { color:var(--gold); font-size:1.1rem; }
.bible-verse em { color:var(--dark); font-size:1.05rem; line-height:1.6; }
.bible-verse span { color:var(--text-light); font-size:0.88rem; letter-spacing:2px; }

/* ============================================================
   OUR STORY / TIMELINE
   ============================================================ */
#story {
  padding:6rem 0; background:var(--white); position:relative;
}
#story::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,var(--rose),var(--gold),var(--rose));
}
.timeline { position:relative; max-width:900px; margin:0 auto; }
.timeline::before {
  content:''; position:absolute; left:50%; transform:translateX(-50%);
  width:2px; top:0; bottom:0;
  background:linear-gradient(180deg,var(--gold),var(--rose),var(--gold));
}
.timeline-item { position:relative; width:50%; padding-bottom:3rem; }
.timeline-item.left  { left:0; padding-right:3.5rem; text-align:right; }
.timeline-item.right { left:50%; padding-left:3.5rem; text-align:left; }
.timeline-badge {
  position:absolute; right:-20px; top:10px;
  width:40px; height:40px;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--white); font-size:0.9rem;
  box-shadow:0 0 0 4px var(--white),0 0 0 6px var(--gold); z-index:1;
}
.timeline-item.right .timeline-badge { right:auto; left:-20px; }
.timeline-card {
  background:var(--cream); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); transition:var(--transition);
  border:1px solid rgba(212,175,55,0.2);
}
.timeline-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.timeline-img { height:140px; width:100%; }
.timeline-content { padding:1.2rem 1.5rem 1.5rem; }
.timeline-date {
  display:inline-block; font-family:var(--font-alt); font-style:italic;
  font-size:0.85rem; color:var(--rose-light); letter-spacing:2px; margin-bottom:0.4rem;
}
.timeline-content h3 { font-family:var(--font-serif); font-size:1.2rem; color:var(--dark); margin-bottom:0.5rem; }
.timeline-content p  { font-size:0.9rem; color:var(--text-light); line-height:1.7; }

/* ============================================================
   WEDDING DETAILS
   ============================================================ */
.details-section {
  padding:6rem 0; background:var(--champagne); position:relative; overflow:hidden;
}
.details-bg-pattern {
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(212,175,55,0.1) 0%, transparent 30%),
    radial-gradient(circle at 90% 80%, rgba(139,34,82,0.1) 0%, transparent 30%);
}
.details-grid { display:grid; grid-template-columns:1fr 1.2fr 1fr; gap:2rem; align-items:center; }
.detail-card {
  background:var(--white); border-radius:20px; padding:2.5rem 2rem; text-align:center;
  box-shadow:var(--shadow); border:1px solid rgba(212,175,55,0.2); transition:var(--transition);
  position:relative; overflow:hidden;
}
.detail-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,var(--rose),var(--gold));
  transform:scaleX(0); transition:transform 0.4s;
}
.detail-card:hover::before { transform:scaleX(1); }
.detail-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.detail-card.featured {
  background:linear-gradient(135deg,var(--dark) 0%,var(--dark2) 100%);
  border-color:var(--gold); transform:scale(1.04);
  box-shadow:0 20px 60px rgba(45,27,46,0.4),0 0 0 1px var(--gold);
}
.detail-card.featured:hover { transform:scale(1.04) translateY(-5px); }
.detail-icon-wrap {
  width:70px; height:70px; margin:0 auto 1.5rem;
  background:linear-gradient(135deg,var(--rose),var(--rose-light));
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1.8rem; color:var(--white); box-shadow:0 8px 20px rgba(139,34,82,0.3);
}
.detail-card h3 { font-family:var(--font-serif); font-size:1.5rem; color:var(--dark); margin-bottom:0.5rem; }
.detail-card.featured h3 { color:var(--gold); }
.detail-sep { width:50px; height:2px; background:linear-gradient(90deg,transparent,var(--rose),transparent); margin:0.8rem auto 1.2rem; }
.detail-sep.gold { background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.detail-label { font-family:var(--font-alt); font-size:0.95rem; color:var(--text); margin-bottom:0.5rem; display:flex; align-items:center; justify-content:center; gap:0.5rem; }
.detail-label i { color:var(--rose-light); }
.detail-sub { font-size:0.82rem; color:var(--text-light); font-style:italic; margin-bottom:1.5rem; }
.detail-rings { font-size:1.5rem; margin-bottom:1.5rem; display:flex; justify-content:center; gap:0.5rem; color:var(--gold); }
.detail-verse { font-family:var(--font-script); font-size:1.5rem; color:rgba(255,255,255,0.85); line-height:1.5; margin-bottom:0.6rem; font-style:normal; }
.detail-verse-ref { font-family:var(--font-alt); font-style:italic; color:rgba(255,255,255,0.45); font-size:0.85rem; margin-bottom:1.5rem; }
.dress-code { margin-top:1.5rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,0.1); }
.dress-label { font-family:var(--font-alt); font-style:italic; color:rgba(255,255,255,0.45); font-size:0.78rem; letter-spacing:3px; text-transform:uppercase; display:block; margin-bottom:0.8rem; }
.dress-swatches { display:flex; justify-content:center; gap:0.5rem; margin-bottom:0.5rem; }
.swatch { width:22px; height:22px; border-radius:50%; border:2px solid rgba(255,255,255,0.25); cursor:help; transition:transform 0.2s; }
.swatch:hover { transform:scale(1.3); }
.dress-code > p { color:rgba(255,255,255,0.65); font-family:var(--font-alt); font-style:italic; font-size:0.9rem; letter-spacing:2px; }
.btn-detail {
  display:inline-flex; align-items:center; gap:0.4rem;
  font-family:var(--font-alt); font-style:italic; font-size:0.95rem;
  color:var(--rose); border-bottom:1px solid var(--rose);
  padding-bottom:2px; transition:var(--transition); letter-spacing:1px; margin-top:0.5rem;
}
.btn-detail:hover { color:var(--gold); border-color:var(--gold); gap:0.8rem; }

/* ============================================================
   GALLERY
   ============================================================ */
#gallery { padding:6rem 0; background:var(--white); }
.gallery-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  grid-template-rows:200px 200px; gap:1rem; margin-bottom:2rem;
}
.gallery-item { border-radius:var(--radius); overflow:hidden; position:relative; cursor:pointer; transition:var(--transition); }
.gallery-item.g-large { grid-column:span 2; grid-row:span 2; }
.gallery-item.g-wide  { grid-column:span 2; }
.gallery-overlay {
  position:absolute; inset:0; background:rgba(45,27,46,0.5);
  display:flex; align-items:center; justify-content:center;
  font-size:2rem; color:var(--white); opacity:0; transition:var(--transition);
}
.gallery-item:hover { transform:scale(1.02); box-shadow:var(--shadow-lg); }
.gallery-item:hover .gallery-overlay { opacity:1; }
.gallery-overlay i { animation:pulse-heart 1.5s infinite; }
.gallery-note { text-align:center; font-family:var(--font-alt); font-style:italic; color:var(--text-light); font-size:1rem; letter-spacing:1px; }
.gallery-note i { color:var(--rose-light); margin-right:6px; }

/* ============================================================
   WEDDING PARTY
   ============================================================ */
#wedding-party {
  padding:6rem 0;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(212,175,55,0.15) 0%, transparent 50%),
    linear-gradient(135deg,var(--dark2),#1a0818,var(--dark2));
  background-attachment:fixed; position:relative;
}
.party-parallax .countdown-overlay {
  background:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23D4AF37' fill-opacity='0.04'%3E%3Cpath d='M20 3.5l2.5 7.6H30l-6.3 4.6 2.4 7.6L20 19l-6.1 4.3 2.4-7.6L10 11.1h7.5z'/%3E%3C/g%3E%3C/svg%3E");
}
.party-grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; }
.party-group-title { font-family:var(--font-serif); font-size:1.6rem; font-weight:600; margin-bottom:1.5rem; display:flex; align-items:center; gap:0.8rem; }
.party-group-title.light { color:var(--gold); }
.party-members { display:flex; gap:1.2rem; flex-wrap:wrap; }
.party-card { text-align:center; flex:1; min-width:90px; }
.party-avatar { width:80px; height:80px; border-radius:50%; margin:0 auto 0.8rem; display:flex; align-items:center; justify-content:center; font-size:1.6rem; color:var(--white); border:3px solid rgba(255,255,255,0.2); box-shadow:0 8px 20px rgba(0,0,0,0.3); transition:var(--transition); }
.party-card:hover .party-avatar { transform:scale(1.1); border-color:var(--gold); }
.party-name { font-family:var(--font-serif); font-size:0.9rem; color:var(--white); font-weight:600; margin-bottom:0.2rem; }
.party-role { font-family:var(--font-alt); font-style:italic; font-size:0.8rem; color:rgba(255,255,255,0.5); letter-spacing:1px; }

/* ============================================================
   RSVP SECTION
   ============================================================ */
#rsvp {
  padding:6rem 0;
  background:radial-gradient(ellipse at 50% 0%, rgba(244,194,194,0.3) 0%, transparent 50%), var(--cream);
  position:relative; overflow:hidden;
}
.rsvp-wrapper { position:relative; display:flex; align-items:flex-start; justify-content:center; max-width:850px; margin:0 auto; }
.rsvp-decoration { position:absolute; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:1.5rem; font-size:1.5rem; color:rgba(212,175,55,0.22); pointer-events:none; }
.rsvp-decoration.left  { left:-3rem; }
.rsvp-decoration.right { right:-3rem; }
.rsvp-decoration i:nth-child(2) { color:rgba(139,34,82,0.22); font-size:1.8rem; }
.rsvp-form { background:var(--white); border-radius:24px; padding:3rem 3.5rem; box-shadow:0 20px 80px rgba(139,34,82,0.1); border:1px solid rgba(212,175,55,0.18); width:100%; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-bottom:1.5rem; }
.form-group { display:flex; flex-direction:column; gap:0.4rem; }
.form-group.full-width { grid-column:span 2; margin-bottom:1.5rem; }
.form-group label { font-family:var(--font-serif); font-size:0.9rem; color:var(--dark); font-weight:600; letter-spacing:0.5px; display:flex; align-items:center; gap:0.4rem; }
.form-group label i { color:var(--rose-light); font-size:0.85rem; }
.form-group input,.form-group select,.form-group textarea {
  font-family:var(--font-sans); font-size:0.95rem; color:var(--dark);
  background:var(--cream); border:1.5px solid rgba(212,175,55,0.28);
  border-radius:10px; padding:0.75rem 1rem; outline:none; transition:var(--transition);
  appearance:none; -webkit-appearance:none;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus {
  border-color:var(--rose-light); background:var(--white);
  box-shadow:0 0 0 3px rgba(139,34,82,0.07);
}
.form-group input::placeholder,.form-group textarea::placeholder { color:#b0a0b0; }
.form-group textarea { resize:vertical; min-height:100px; }
.field-error { font-size:0.8rem; color:#e74c3c; min-height:1rem; display:block; }
.form-submit { text-align:center; margin-top:0.5rem; }
.btn-rsvp {
  display:inline-flex; align-items:center; justify-content:center; gap:0.8rem;
  background:linear-gradient(135deg,var(--rose),var(--rose-light));
  color:var(--white); font-family:var(--font-serif); font-size:1.1rem;
  font-weight:600; letter-spacing:2px; padding:1rem 3.5rem; border-radius:50px;
  border:none; cursor:pointer; box-shadow:0 8px 30px rgba(139,34,82,0.28); transition:var(--transition);
}
.btn-rsvp:hover { transform:translateY(-3px); box-shadow:0 14px 40px rgba(139,34,82,0.4); background:linear-gradient(135deg,var(--dark),var(--rose)); }
.rsvp-success { text-align:center; padding:4rem 2rem; width:100%; animation:fadeIn 0.6s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }
.success-icon { font-size:5rem; color:var(--gold); margin-bottom:1.5rem; animation:pulse-heart 1.5s infinite; display:block; }
.rsvp-success h3 { font-family:var(--font-script); font-size:3rem; color:var(--rose); margin-bottom:1rem; }
.success-msg { font-family:var(--font-alt); font-size:1.1rem; color:var(--text); line-height:1.7; max-width:450px; margin:0 auto 1rem; }
.success-sub { font-family:var(--font-script); font-size:2rem; color:var(--gold); }

/* ============================================================
   LOCATION
   ============================================================ */
#location { padding:6rem 0; background:var(--white); }
.location-wrapper { display:grid; grid-template-columns:1fr 1.3fr; gap:3rem; align-items:start; margin-top:2rem; }
.location-card { background:var(--cream); border-radius:20px; padding:2.5rem; box-shadow:var(--shadow); border:1px solid rgba(212,175,55,0.2); }
.location-icon { width:64px; height:64px; background:linear-gradient(135deg,var(--rose),var(--rose-light)); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.6rem; color:var(--white); margin-bottom:1.2rem; box-shadow:0 8px 20px rgba(139,34,82,0.3); }
.location-card h3 { font-family:var(--font-serif); font-size:1.6rem; color:var(--dark); margin-bottom:1.5rem; padding-bottom:1rem; border-bottom:1px solid rgba(212,175,55,0.28); }
.location-detail { display:flex; align-items:flex-start; gap:1rem; margin-bottom:1.2rem; font-size:0.95rem; }
.location-detail > i { color:var(--gold); font-size:1.1rem; margin-top:2px; flex-shrink:0; }
.location-detail div { display:flex; flex-direction:column; gap:0.15rem; }
.location-detail strong { color:var(--dark); font-weight:600; }
.location-detail span  { color:var(--text-light); }
.location-actions { display:flex; gap:1rem; margin-top:2rem; flex-wrap:wrap; }
.btn-directions {
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.8rem 1.5rem; border-radius:50px;
  font-family:var(--font-serif); font-size:0.9rem; font-weight:600;
  letter-spacing:1px; transition:var(--transition);
  background:linear-gradient(135deg,var(--rose),var(--rose-light));
  color:var(--white); box-shadow:0 5px 20px rgba(139,34,82,0.22);
}
.btn-directions:hover { transform:translateY(-2px); box-shadow:0 10px 30px rgba(139,34,82,0.32); }
.btn-directions.outline { background:transparent; color:var(--rose); border:1.5px solid var(--rose); box-shadow:none; }
.btn-directions.outline:hover { background:var(--rose); color:var(--white); box-shadow:0 5px 20px rgba(139,34,82,0.22); }
.map-container { height:450px; border-radius:20px; overflow:hidden; box-shadow:var(--shadow-lg); border:3px solid rgba(212,175,55,0.25); }
.map-container iframe { width:100%; height:100%; }

/* ============================================================
   FOOTER
   ============================================================ */
#footer {
  position:relative; padding:5rem 0 3rem;
  background:linear-gradient(135deg,var(--dark2) 0%,#1a0818 50%,var(--dark2) 100%);
  overflow:hidden;
}
.footer-hearts { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.footer-names { font-family:var(--font-script); font-size:clamp(3rem,8vw,5rem); color:var(--white); margin-bottom:0.5rem; text-shadow:0 0 30px rgba(212,175,55,0.35); }
.footer-heart-icon { color:var(--rose-light); animation:pulse-heart 2s infinite; font-size:0.7em; }
.footer-date { font-family:var(--font-serif); font-style:italic; color:var(--gold); font-size:1.1rem; letter-spacing:3px; margin-bottom:1.5rem; }
.footer-divider { display:flex; align-items:center; justify-content:center; gap:1rem; margin-bottom:1.5rem; }
.footer-divider span { width:60px; height:1px; background:rgba(212,175,55,0.28); }
.footer-divider i { color:var(--gold); opacity:0.55; }
.footer-verse { font-family:var(--font-alt); font-style:italic; color:rgba(255,255,255,0.45); font-size:0.9rem; max-width:500px; margin:0 auto 2rem; line-height:1.7; }
.footer-social { display:flex; justify-content:center; gap:1.2rem; margin-bottom:1.5rem; }
.footer-social a { width:44px; height:44px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:50%; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.55); font-size:1rem; transition:var(--transition); }
.footer-social a:hover { background:var(--gold); border-color:var(--gold); color:var(--dark); transform:translateY(-3px); }
.footer-hashtag { font-family:var(--font-script); font-size:1.6rem; color:var(--gold); margin-bottom:1.5rem; letter-spacing:1px; }
.footer-copy { font-size:0.8rem; color:rgba(255,255,255,0.28); letter-spacing:1px; }

/* ============================================================
   PARALLAX SECTIONS
   ============================================================ */
.parallax-section { background-attachment:fixed; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px) {
  .details-grid { grid-template-columns:1fr 1fr; }
  .detail-card.featured { grid-column:span 2; transform:none; order:-1; }
  .detail-card.featured:hover { transform:translateY(-8px); }
}

@media (max-width:768px) {
  .nav-toggle { display:flex; }
  .nav-links { position:fixed; top:0; right:-100%; width:75%; height:100vh; background:rgba(13,5,16,0.97); backdrop-filter:blur(20px); flex-direction:column; justify-content:center; align-items:center; gap:2.5rem; transition:right 0.4s cubic-bezier(0.4,0,0.2,1); z-index:999; }
  .nav-links.open { right:0; }
  .nav-links a { font-size:1.3rem; color:var(--white); }

  /* Envelope responsive */
  .envelope-scroll-zone { height:360vh; }
  .env-above-text { margin-bottom:0.8rem; }
  .env-below-text { margin-top:1rem; }

  /* Timeline */
  .timeline::before { left:20px; }
  .timeline-item { width:100%; left:0 !important; padding-left:4rem !important; padding-right:0 !important; text-align:left !important; }
  .timeline-badge { right:auto !important; left:0 !important; }

  /* Details */
  .details-grid { grid-template-columns:1fr; }
  .detail-card.featured { grid-column:1; }

  /* Gallery */
  .gallery-grid { grid-template-columns:1fr 1fr; grid-template-rows:repeat(5,160px); }
  .gallery-item.g-large { grid-column:span 2; grid-row:span 1; }
  .gallery-item.g-wide  { grid-column:span 2; }

  /* Party */
  .party-grid { grid-template-columns:1fr; }

  /* RSVP */
  .rsvp-form { padding:2rem 1.5rem; }
  .form-row { grid-template-columns:1fr; }
  .form-group.full-width { grid-column:span 1; }
  .rsvp-decoration { display:none; }

  /* Location */
  .location-wrapper { grid-template-columns:1fr; }
  .map-container { height:300px; }

  /* Parallax fallback */
  .parallax-section,#countdown,#wedding-party { background-attachment:scroll; }
}

@media (max-width:480px) {
  .container { padding:0 1.2rem; }
  section:not(.envelope-scroll-zone) { padding:4rem 0; }
  .countdown-unit { min-width:65px; }
  .countdown-number { font-size:2.5rem; min-width:65px; padding:0.4rem 0.6rem; }
  .countdown-sep { display:none; }
  .location-actions { flex-direction:column; }
  .btn-directions { justify-content:center; }
  .party-members { justify-content:center; }
  .env-below-text { display:none; }
  .env-tagline { font-size:0.7rem; letter-spacing:1px; }
}

/* ============================================================
   MUSIC TOGGLE BUTTON (fixed, bottom-right)
   ============================================================ */
.music-btn {
  position:fixed;
  bottom:1.8rem;
  right:1.8rem;
  z-index:2000;
  width:48px; height:48px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(212,175,55,0.9), rgba(168,138,26,0.9));
  color:#0D0510;
  font-size:1.1rem;
  box-shadow:0 4px 20px rgba(212,175,55,0.45), 0 2px 8px rgba(0,0,0,0.4);
  transition:transform 0.25s ease, box-shadow 0.25s ease, background 0.3s ease;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.music-btn:hover {
  transform:scale(1.12);
  box-shadow:0 6px 28px rgba(212,175,55,0.65), 0 3px 12px rgba(0,0,0,0.5);
}
.music-btn.muted {
  background:linear-gradient(135deg, rgba(80,60,80,0.85), rgba(40,30,40,0.85));
  color:rgba(255,255,255,0.5);
  box-shadow:0 4px 16px rgba(0,0,0,0.5);
}
/* Spinning music note animation when playing */
.music-btn:not(.muted) i {
  animation:musicSpin 3s linear infinite;
}
@keyframes musicSpin {
  0%   { transform:rotate(0deg) scale(1); }
  50%  { transform:rotate(180deg) scale(1.15); }
  100% { transform:rotate(360deg) scale(1); }
}