/* ============================================================
   Swadha & Sumat — Wedding Invitation
   Palette: ivory / gold / sage-olive — Indian, elegant, neutral
   ============================================================ */

:root{
  --cream:      #fbf6ec;
  --cream-2:    #f4ead4;
  --cream-3:    #ecdfc4;
  --ivory:      #fdfbf5;
  --paper:      #f8f1e2;
  --gold:       #b1853a;
  --gold-light: #ddc07d;
  --gold-soft:  #e7d4a4;
  --gold-deep:  #8c6a2c;
  --olive:      #828a5e;
  --olive-deep: #6c7350;
  --ink:        #6b5a41;
  --ink-soft:   #8c7a5e;
  --ink-deep:   #4f4231;
  --maroon:     #7a4a3a;

  --cinzel: "Cinzel", "Cormorant Garamond", serif;
  --serif: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --serif-2: "Cormorant Garamond", Georgia, serif;
  --script: "Allura", "Pinyon Script", cursive;
  --script-2: "Tangerine", cursive;
  --script-3: "Pinyon Script", cursive;
  --script-mono: "Great Vibes", "Allura", cursive;

  --maxw: 1080px;
  --gold-grad: linear-gradient(120deg, #cBA864 0%, #b1853a 38%, #e4cd8e 60%, #9c7430 100%);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--serif);
  color:var(--ink);
  background:var(--cream);
  overflow-x:hidden;
  line-height:1.6;
}
body.is-locked{ overflow:hidden; height:100vh; }

img,iframe{ max-width:100%; }
sup{ font-size:0.58em; }

/* gold text helper */
.gold-text{
  background:var(--gold-grad);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

/* calligraphic S&S monogram (real web-font text so it stays a true script) */
.mono{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--script-mono); font-weight:400; line-height:1; white-space:nowrap;
  filter:drop-shadow(0 1px 1px rgba(120,85,25,0.22));
}
.mono > span{
  display:inline-block;
  background:linear-gradient(120deg,#b38a3e 0%,#8c6a2c 40%,#cfa957 64%,#7d5c22 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  padding:0.16em 0.2em;
}
.mono-s{ transform:translateY(-0.12em); }
.mono-s.s2{ transform:translateY(0.16em); }
.mono-amp{
  font-family:var(--script); font-size:0.52em;
  margin:0 -0.5em; transform:translateY(0.12em);
  background:linear-gradient(120deg,#8c6a2c,#b1853a) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
}

/* ======================= SHARED SCRIPTS / HEADINGS ======================= */
.eyebrow{
  font-family:var(--cinzel);
  text-transform:uppercase;
  letter-spacing:0.32em;
  font-weight:500;
  font-size:clamp(0.72rem,2.3vw,0.95rem);
  color:var(--ink-soft);
  margin:0.5em 0;
}
.script-xl{
  font-family:var(--script-2);
  font-size:clamp(3.4rem,13vw,7rem);
  line-height:0.8;
  font-weight:700;
  margin:0.1em 0;
  background:var(--gold-grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.script-xxl{
  font-family:var(--script);
  font-size:clamp(3.2rem,12vw,6rem);
  line-height:1;
  margin:0.05em 0 0.2em;
  background:var(--gold-grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lh-small{
  display:block;
  font-family:var(--script-3);
  font-size:0.42em;
  margin-bottom:-0.15em;
  color:var(--gold-deep);
  -webkit-text-fill-color:var(--gold-deep);
}

/* ornamental divider */
.divider{
  display:flex; align-items:center; justify-content:center;
  gap:12px; margin:1.1em auto; width:min(320px,80%);
}
.divider::before,.divider::after{
  content:""; height:1px; flex:1;
  background:linear-gradient(90deg,transparent,var(--gold-soft),transparent);
}
.d-dot{ position:relative; width:26px; height:26px; flex:none; }
.d-dot::before{
  content:""; position:absolute; inset:0; margin:auto;
  width:9px; height:9px; background:var(--gold-grad);
  transform:rotate(45deg);
}
.d-dot::after{
  content:""; position:absolute; inset:0; margin:auto;
  width:20px; height:20px; border:1px solid var(--gold-soft);
  border-radius:50%;
}

/* ======================= ABSTRACT SILK BACKGROUND ======================= */
.drape-bg,
.section::before{
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(125% 90% at 50% -18%, rgba(255,252,245,0.92), rgba(255,252,245,0) 58%),
    radial-gradient(80% 65% at 84% 8%, rgba(233,208,152,0.2), transparent 60%),
    radial-gradient(80% 65% at 12% 96%, rgba(206,186,146,0.16), transparent 60%),
    repeating-linear-gradient(118deg, rgba(255,255,255,0.035) 0 3px, transparent 3px 82px),
    linear-gradient(158deg, #fbf5ea 0%, #f6eddb 48%, #f1e6cf 100%);
}
/* a soft drifting sheen that keeps the backdrop alive without heavy cost */
.drape-bg::after{
  content:""; position:absolute; inset:-20%;
  background:radial-gradient(40% 32% at 30% 30%, rgba(255,246,225,0.5), transparent 70%),
             radial-gradient(36% 28% at 72% 64%, rgba(248,232,196,0.4), transparent 70%);
  opacity:0.7; filter:blur(10px);
  animation:sheenDrift 16s ease-in-out infinite alternate;
}
@keyframes sheenDrift{ 0%{ transform:translate3d(-2%, -1%, 0) scale(1); } 100%{ transform:translate3d(2%, 2%, 0) scale(1.06); } }

/* ============================================================
   ENVELOPE LANDING OVERLAY
   ============================================================ */
.envelope-screen{
  position:fixed; inset:0; z-index:900;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  transition:opacity 1s ease, visibility 1s ease, transform 1s cubic-bezier(.4,0,.2,1);
}
.envelope-screen .drape-bg{ z-index:0; }
.envelope-screen.is-gone{ opacity:0; visibility:hidden; transform:scale(1.16); }

.env-inner{
  position:relative; z-index:3;
  text-align:center;
  padding:40px 32px;
  perspective:1600px;
  width:100%; max-width:720px;
  display:flex; flex-direction:column; align-items:center;
}
.env-crest{
  width:clamp(74px,13vw,104px); aspect-ratio:1; margin-bottom:0.85em;
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(21px,3.7vw,29px);
  background:url("assets/monogram.svg") center/contain no-repeat;
  filter:drop-shadow(0 3px 5px rgba(150,110,40,0.2));
  animation:crestIn 1.2s ease both;
}
@keyframes crestIn{ from{ opacity:0; transform:translateY(-10px) scale(0.9); } to{ opacity:1; transform:none; } }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
.env-kicker{
  font-family:var(--cinzel);
  text-transform:uppercase; letter-spacing:0.34em;
  font-size:clamp(0.68rem,2.3vw,0.92rem);
  color:var(--ink-soft); margin:0 0 0.35em;
  animation:fadeUp .9s ease 0.2s both;
}
.env-names{
  font-family:var(--script);
  font-weight:400;
  font-size:clamp(2.9rem,10vw,5.1rem);
  line-height:1.22; margin:0.1em 0 0.7em; padding:0 0.5em;
  letter-spacing:0.015em;
  background:var(--gold-grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 3px rgba(150,110,40,0.2));
  overflow:visible;
  animation:fadeUp 1s ease 0.34s both;
}
.env-names .amp{ font-family:var(--script-3); font-size:0.66em; padding:0 0.08em; }

/* stage holds the envelope + side florals */
.env-stage{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:min(620px,94vw);
  margin-top:0.4em;
  padding:0 0 40px;
}
.hang-floral{
  position:absolute; top:-18%; z-index:1;
  width:clamp(54px,12vw,88px); height:clamp(210px,42vw,350px);
  background:url("assets/hanging-floral.svg") top center/contain no-repeat;
  opacity:0; pointer-events:none;
  transform-origin:top center;
  animation:floralDrop 1.4s cubic-bezier(.2,.8,.3,1) 0.3s both, sway 5.5s ease-in-out 1.7s infinite;
}
.hf-left{ left:-5%; }
.hf-right{ right:-5%; transform:scaleX(-1); }
.hf-right{ animation:floralDrop 1.4s cubic-bezier(.2,.8,.3,1) 0.45s both, swayR 6s ease-in-out 1.85s infinite; }
@keyframes floralDrop{ from{ opacity:0; transform:translateY(-24px) scaleY(0.82); } to{ opacity:0.96; transform:none; } }
@keyframes sway{ 0%,100%{ transform:rotate(-1.6deg); } 50%{ transform:rotate(1.6deg); } }
@keyframes swayR{ 0%,100%{ transform:scaleX(-1) rotate(-1.6deg); } 50%{ transform:scaleX(-1) rotate(1.6deg); } }

/* --- the envelope --- */
.envelope{
  position:relative;
  width:clamp(258px,66vw,412px);
  aspect-ratio:10/6.6;
  border:0; padding:0; background:none; cursor:pointer;
  transform-style:preserve-3d;
  transition:transform 0.7s cubic-bezier(.3,.7,.2,1);
  z-index:2;
  /* keep the whole envelope on one GPU layer so the seal & text glide smoothly */
  will-change:transform;
  -webkit-font-smoothing:antialiased;
  animation:envIn 1.1s cubic-bezier(.2,.8,.3,1) 0.15s both, envFloat 6.5s ease-in-out 2.1s infinite;
}
.envelope:focus-visible{ outline:2px dashed var(--gold); outline-offset:16px; }
@keyframes envIn{ from{ opacity:0; transform:translate3d(0,26px,0) scale(0.9); } to{ opacity:1; transform:translate3d(0,0,0); } }
@keyframes envFloat{ 0%,100%{ transform:translate3d(0,0,0); } 50%{ transform:translate3d(0,-7px,0); } }
.envelope.is-opening{ animation:none; transform:translate3d(0,-3px,0); }

/* soft golden bloom behind the envelope */
.env-glow{
  position:absolute; inset:-30% -18%; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 46%, rgba(255,226,150,0.55), rgba(255,226,150,0) 62%);
  opacity:0.75; transition:opacity .8s ease;
  filter:blur(4px);
}
.envelope.is-opening .env-glow{ opacity:1; animation:bloom 2s ease forwards; }
@keyframes bloom{ 0%{ transform:scale(1); opacity:1; } 100%{ transform:scale(1.5); opacity:0; } }

.env-shadow{
  position:absolute; left:6%; right:6%; bottom:-8%; height:18%;
  background:radial-gradient(ellipse at center, rgba(90,40,20,0.34), transparent 70%);
  filter:blur(7px); z-index:0;
  transition:opacity .6s ease, transform .6s ease;
}

/* back panel — maroon lining with gold jaal, seen once the flap lifts */
.env-pocket{
  position:absolute; inset:0; z-index:1;
  border-radius:7px;
  background:
    linear-gradient(180deg, rgba(40,8,6,0.35), rgba(40,8,6,0) 45%),
    url("assets/env-lining.svg") center top/32px 32px repeat,
    #8e4a40;
  box-shadow:inset 0 0 0 3px #5b1b17, inset 0 0 0 4.5px #d6b464, inset 0 0 26px rgba(30,6,4,0.45);
}
/* the card inside */
.env-letter{
  position:absolute; left:7%; right:7%; bottom:6%;
  height:88%; z-index:2;
  border-radius:6px 6px 4px 4px;
  background:linear-gradient(170deg,#fffdf8,#f7eedb);
  box-shadow:0 -4px 18px rgba(80,30,10,0.22), inset 0 0 0 1px rgba(177,133,58,0.28);
  transform:translateY(0); transform-origin:bottom center;
  transition:transform 1.05s cubic-bezier(.26,.8,.28,1) 0.55s;
  display:flex; align-items:flex-start; justify-content:center;
  padding-top:8%;
  overflow:hidden;
}
.env-letter::before{ /* inner gold border on the card */
  content:""; position:absolute; inset:7px; border:1px solid rgba(177,133,58,0.45); border-radius:4px; pointer-events:none;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,0.6), inset 0 0 0 4px rgba(177,133,58,0.22);
}
.env-letter-inner{ text-align:center; opacity:0; transition:opacity .7s ease 1.25s; }
.ll-crest{
  display:flex; align-items:center; justify-content:center;
  width:clamp(42px,10vw,60px); aspect-ratio:1; margin:0 auto 0.25em;
  font-size:clamp(17px,4.2vw,25px);
  background:url("assets/monogram.svg") center/contain no-repeat;
}
.ll-mono{
  display:block; font-family:var(--script); font-size:clamp(1.5rem,6vw,2.4rem);
  line-height:1.15; padding:0 0.2em;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ll-sub{
  display:block; font-family:var(--cinzel); text-transform:uppercase; letter-spacing:0.26em;
  font-size:clamp(0.52rem,2vw,0.72rem); color:var(--ink-soft); margin-top:0.4em;
}

/* front — ivory pocket with side & bottom folds, maroon zari edge, buti print.
   The top is notched open so the lining & letter show once the flap lifts. */
.env-front{
  position:absolute; inset:0; z-index:4;
  border-radius:7px;
  clip-path:polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 66' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L47 37 L0 66Z' fill='%23d9c296' fill-opacity='0.32'/%3E%3Cpath d='M100 0 L53 37 L100 66Z' fill='%23d9c296' fill-opacity='0.32'/%3E%3Cpath d='M0 66 L50 38 L100 66Z' fill='%23fffaf0' fill-opacity='0.55'/%3E%3Cpath d='M0 66 L50 38 L100 66' fill='none' stroke='%23946b2c' stroke-opacity='0.55' stroke-width='1.2' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 0 L47 37 M100 0 L53 37' fill='none' stroke='%23946b2c' stroke-opacity='0.3' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat,
    url("assets/env-buti.svg") center/30px 30px repeat,
    linear-gradient(200deg,#fbf4e3 0%,#f1e4c8 55%,#e7d6b3 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(150,92,78,0.75),
    inset 0 0 0 3px #e6cf96,
    inset 0 0 0 4px rgba(150,92,78,0.5),
    inset 0 0 36px rgba(120,70,20,0.12);
}
.env-border{ /* fine dotted gold frame inside the zari edge */
  position:absolute; inset:10px; border-radius:4px; pointer-events:none;
  border:1px dashed rgba(150,105,40,0.55);
}
.env-front::after{ /* gold filigree bottom corners */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23b1853a' stroke-width='1.1' stroke-opacity='0.6'%3E%3Cpath d='M10 90 C10 72 18 62 34 60 M10 82 C17 77 24 77 30 81'/%3E%3C/g%3E%3Ccircle cx='10' cy='90' r='2.2' fill='%23a8736a'/%3E%3C/svg%3E") left bottom/30% auto no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23b1853a' stroke-width='1.1' stroke-opacity='0.6'%3E%3Cpath d='M90 90 C90 72 82 62 66 60 M90 82 C83 77 76 77 70 81'/%3E%3C/g%3E%3Ccircle cx='90' cy='90' r='2.2' fill='%23a8736a'/%3E%3C/svg%3E") right bottom/30% auto no-repeat;
}

/* top flap — maroon edged, ivory face with lotus & buti; lining on the back */
.env-flap{
  position:absolute; left:0; right:0; top:0; height:72%; z-index:5;
  background:linear-gradient(180deg,#b9857a,#a2705f);
  clip-path:polygon(0 0,100% 0,50% 100%);
  border-radius:7px 7px 0 0;
  transform-origin:top center;
  transform:rotateX(0deg);
  transition:transform 1s cubic-bezier(.56,.16,.24,1), filter 1s ease, z-index 0s linear .5s;
}
.flap-inner{
  position:absolute; inset:0;
  clip-path:polygon(1.1% 1.6%, 98.9% 1.6%, 50% 96.5%);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M4 6 L50 88 L96 6' fill='none' stroke='%23b1853a' stroke-opacity='0.75' stroke-width='1' stroke-dasharray='3 3' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M3 7.5 H97' fill='none' stroke='%23b1853a' stroke-opacity='0.5' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat,
    linear-gradient(180deg, rgba(120,70,20,0) 55%, rgba(120,70,20,0.12) 100%),
    url("assets/env-buti.svg") center top/30px 30px repeat,
    linear-gradient(180deg,#fdf7ea,#efe3c8);
}
.flap-inner::after{ /* lining revealed on the back of the flap as it swings past 90° */
  content:""; position:absolute; inset:0;
  background:url("assets/env-lining.svg") center top/32px 32px repeat, #8e4a40;
  opacity:0; transition:opacity 0s linear .42s;
}
.flap-motif{
  position:absolute; left:50%; top:36%; width:42%; aspect-ratio:160/90;
  transform:translate(-50%,-50%);
  background:url("assets/env-lotus.svg") center/contain no-repeat;
  transition:opacity 0s linear .42s;
}
/* Indian floral vines painted on the envelope front */
.env-vine{
  position:absolute; right:2%; bottom:1%; z-index:5;
  width:58%; aspect-ratio:300/230;
  background:url("assets/env-vine.svg") right bottom/contain no-repeat;
  opacity:0.96; pointer-events:none;
  transform-origin:bottom right;
  animation:vineIn 1.3s cubic-bezier(.2,.8,.3,1) 0.5s both;
}
.env-vine.v-left{
  right:auto; left:2%; width:40%;
  background-position:right bottom;
  transform-origin:50% 100%;
  animation:vineInL 1.3s cubic-bezier(.2,.8,.3,1) 0.7s both;
}
@keyframes vineIn{ from{ opacity:0; transform:scale(0.7) rotate(-4deg); } to{ opacity:0.96; transform:none; } }
@keyframes vineInL{ from{ opacity:0; transform:scaleX(-1) scale(0.7) rotate(-4deg); } to{ opacity:0.9; transform:scaleX(-1); } }

/* hanging tassel under the seal (Indian invite detail) */
.env-tassel{
  position:absolute; left:50%; top:79%; z-index:5;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center;
  transition:opacity .45s ease;
}
.tz-knot{ width:10px; height:7px; border-radius:50% 50% 40% 40%; background:linear-gradient(#d3ac57,#8c6a2c); box-shadow:0 1px 1px rgba(0,0,0,0.25); }
.tz-bead{ width:11px; height:13px; margin-top:-1px; border-radius:50%;
  background:radial-gradient(circle at 40% 34%,#eacf8f,#b1853a 60%,#86641f); box-shadow:0 1px 2px rgba(0,0,0,0.3); }
.tz-skirt{
  position:relative; width:17px; height:26px; margin-top:-1px;
  border-radius:3px 3px 5px 5px;
  background:
    repeating-linear-gradient(90deg, rgba(255,230,210,0.22) 0 1px, transparent 1px 2.4px),
    linear-gradient(180deg,#9c4138,#722a24);
  clip-path:polygon(14% 0,86% 0,100% 86%,50% 100%,0 86%);
  box-shadow:0 4px 7px rgba(80,30,25,0.35);
}
.tz-skirt::after{ content:""; position:absolute; left:0; right:0; bottom:-3px; height:6px;
  background:repeating-linear-gradient(90deg,#722a24 0 1.5px, transparent 1.5px 3px); }

/* poured-wax gold seal (inline SVG — embossed calligraphic S&S) */
.env-seal{
  position:absolute; left:50%; top:66%; z-index:6;
  width:24%; aspect-ratio:1;
  transform:translate3d(-50%,-50%,0);
  will-change:transform;
  backface-visibility:hidden;
  filter:drop-shadow(0 4px 5px rgba(70,35,10,0.42)) drop-shadow(0 1px 1px rgba(70,35,10,0.3));
  transition:transform .55s cubic-bezier(.3,.7,.2,1), opacity .5s ease;
}
.env-seal::before{ /* warm halo that breathes in step with the floating envelope */
  content:""; position:absolute; inset:-14%; border-radius:50%; z-index:-1;
  background:radial-gradient(circle, rgba(255,222,140,0.55), rgba(255,222,140,0) 66%);
  opacity:0.5;
  animation:sealBreathe 6.5s ease-in-out 2.1s infinite;
}
.seal-svg{ display:block; width:100%; height:100%; overflow:visible; text-rendering:geometricPrecision; shape-rendering:geometricPrecision; }
.seal-shine{ animation:sealShine 6.5s ease-in-out 2.1s infinite; }
@keyframes sealBreathe{ 0%,100%{ opacity:0.35; transform:scale(0.96); } 50%{ opacity:0.85; transform:scale(1.06); } }
@keyframes sealShine{ 0%,30%{ transform:translateX(0); } 62%,100%{ transform:translateX(150px); } }

/* OPENING STATE */
.envelope.is-opening .env-flap{
  transform:rotateX(-172deg); z-index:1; filter:brightness(0.95);
}
.envelope.is-opening .flap-inner::after{ opacity:1; }
.envelope.is-opening .flap-motif{ opacity:0; }
.envelope.is-opening .env-seal{
  transform:translate3d(-50%,-180%,0) scale(0.4) rotate(14deg); opacity:0;
}
.envelope.is-opening .env-tassel{ opacity:0; }
.envelope.is-opening .env-vine{ opacity:0; transition:opacity .5s ease; }
.envelope.is-opening .env-letter{
  transform:translateY(-82%) scale(1.05);
}
.envelope.is-opening .env-letter-inner{ opacity:1; }
.envelope.is-opening .env-shadow{ opacity:0.45; transform:scale(1.1); }

.env-cta{
  margin-top:1.5em;
  display:flex; align-items:center; justify-content:center; gap:14px;
  font-family:var(--cinzel); font-weight:500;
  text-transform:uppercase; letter-spacing:0.32em;
  font-size:clamp(0.76rem,2.4vw,0.95rem);
  color:var(--gold-deep);
  animation:ctaPulse 2.6s ease-in-out infinite;
}
.cta-line{ display:inline-block; width:clamp(22px,8vw,46px); height:1px; background:linear-gradient(90deg,transparent,var(--gold-soft)); }
.cta-line:last-child{ background:linear-gradient(90deg,var(--gold-soft),transparent); }
@keyframes ctaPulse{ 0%,100%{opacity:.6} 50%{opacity:1} }
.env-cta.is-hidden{ opacity:0; transition:opacity .4s; }

/* ======================= LUMINOUS REVEAL BLOOM ======================= */
.gold-wipe{
  position:fixed; inset:0; z-index:950; pointer-events:none;
  background:
    radial-gradient(circle at 50% 46%, rgba(255,252,244,0.96) 0%, rgba(243,222,170,0.72) 30%, rgba(225,190,120,0.3) 55%, rgba(210,175,110,0) 74%);
  clip-path:circle(0% at 50% 46%);
  opacity:0;
}
.gold-wipe::after{ /* a soft second ring for depth */
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 46%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 26%);
  mix-blend-mode:screen;
}
.gold-wipe.expand{
  animation:goldExpand 1.7s cubic-bezier(.45,0,.2,1) forwards;
}
@keyframes goldExpand{
  0%{ clip-path:circle(0% at 50% 46%); opacity:0; }
  18%{ opacity:1; }
  60%{ clip-path:circle(80% at 50% 46%); opacity:1; }
  100%{ clip-path:circle(160% at 50% 46%); opacity:0; }
}

/* ============================================================
   INDIAN WEDDING DECORATIONS — lights · sparkles · toran garland
   ============================================================ */

/* draped twinkling fairy lights (bulbs + wire built in JS) */
.fairy-lights,
.section > .fairy-lights{
  position:absolute; left:0; right:0; top:0; height:78px;
  z-index:2; pointer-events:none; overflow:visible;
}
.fairy-lights .fl-wire{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.fairy-lights .fl-wire path{ fill:none; stroke:rgba(140,106,44,0.55); stroke-width:1; }
.bulb{
  position:absolute; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #fff7db, #ffd980 55%, #e0a93f);
  box-shadow:0 0 6px 2px rgba(255,201,110,0.8), 0 0 15px 5px rgba(255,188,88,0.4);
  animation:twinkle 2.6s ease-in-out infinite;
}
.bulb::before{ content:""; position:absolute; left:50%; top:-4px; width:2px; height:4px; transform:translateX(-50%); background:var(--gold-deep); border-radius:1px; }
.bulb.warm{ background:radial-gradient(circle at 38% 32%, #fffaf0, #ffe6ae 55%, #e8c173); box-shadow:0 0 6px 2px rgba(255,224,160,0.8), 0 0 16px 5px rgba(255,210,140,0.4); }
@keyframes twinkle{ 0%,100%{ opacity:0.45; } 50%{ opacity:1; } }

/* floating sparkles (built in JS) */
.sparkles{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.sparkle{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle, #fff7e0 0%, rgba(255,218,150,0.7) 40%, rgba(255,218,150,0) 72%);
  animation:floatUp linear infinite;
}
@keyframes floatUp{
  0%{ transform:translateY(24px) scale(0.5); opacity:0; }
  18%{ opacity:1; }
  82%{ opacity:0.8; }
  100%{ transform:translateY(-72px) scale(1); opacity:0; }
}

/* toran — hanging garland across the top of a section */
.toran,
.section > .toran{
  position:absolute; top:0; left:0; width:100%; aspect-ratio:1200/150;
  background:url("assets/toran.svg") top center/100% auto no-repeat;
  z-index:4; pointer-events:none;
  transform-origin:top center;
  animation:toranSway 7s ease-in-out infinite;
}
@keyframes toranSway{ 0%,100%{ transform:rotate(-0.5deg); } 50%{ transform:rotate(0.5deg); } }

/* small hanging floral strands with twinkling lights, tied along the toran cord
   (miniatures of the envelope-page strands; positioned & built in JS) */
.hero-strands,
.section > .hero-strands{
  position:absolute; top:0; left:0; width:100%; aspect-ratio:1200/150;
  z-index:3; pointer-events:none;
}
.strand{
  --w:clamp(32px,4.4vw,58px);
  position:absolute; left:var(--x); top:var(--y);
  width:calc(var(--w) * var(--s,1)); aspect-ratio:120/372;
  margin-left:calc(var(--w) * var(--s,1) / -2);
  background:url("assets/hanging-floral.svg") top center/100% auto no-repeat;
  transform-origin:50% 0;
  opacity:0;
  animation:strandDrop 1.3s cubic-bezier(.2,.8,.3,1) var(--in,0s) forwards,
            strandSway var(--dur,5.5s) ease-in-out var(--d,0s) infinite;
  filter:drop-shadow(0 3px 3px rgba(120,90,40,0.12));
}
.strand i{ /* twinkling light nestled in the strand */
  position:absolute; width:22%; aspect-ratio:1; border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, #fffbe8 0 18%, #ffe39a 34%, rgba(255,205,110,0.55) 52%, rgba(255,205,110,0) 72%);
  animation:twinkle 2.4s ease-in-out infinite;
}
@keyframes strandDrop{ from{ opacity:0; translate:0 -18px; } to{ opacity:0.97; translate:0 0; } }
@keyframes strandSway{ 0%,100%{ transform:rotate(calc(var(--amp,2.4deg) * -1)); } 50%{ transform:rotate(var(--amp,2.4deg)); } }

/* opening celebration — confetti, petals & glowing lights */
.celebrate{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:960; pointer-events:none; display:none;
}
.celebrate.on{ display:block; }

/* ============================================================
   SECTIONS (base)
   ============================================================ */
.section{
  position:relative;
  padding:clamp(64px,11vh,130px) clamp(18px,5vw,48px);
  overflow:hidden;
  isolation:isolate;
}
.section > *{ position:relative; z-index:2; }
.section::before{ z-index:0; }

/* faint mandala watermark on alternating sections */
.hero::after,.order::after,.married::after{
  content:""; position:absolute; z-index:1; pointer-events:none;
  width:min(620px,90vw); aspect-ratio:1; left:50%; top:50%;
  transform:translate(-50%,-50%);
  background:url("assets/mandala.svg") center/contain no-repeat;
  opacity:0.06;
}

/* floral corners */
.corner{
  position:absolute; width:clamp(120px,22vw,240px); aspect-ratio:1;
  background:url("assets/corner-spray.svg") no-repeat center/contain;
  z-index:3; pointer-events:none; opacity:0.92;
}
.corner.tl{ top:0; left:0; transform:scaleY(-1); }
.corner.tr{ top:0; right:0; transform:scale(-1,-1); }
.corner.bl{ bottom:0; left:0; }
.corner.br{ bottom:0; right:0; transform:scaleX(-1); }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.reveal.in-view{ opacity:1; transform:none; }
.hero .hero-card.reveal{ transform:translateY(26px) scale(0.98); transition:opacity 1.1s ease, transform 1.2s cubic-bezier(.2,.7,.2,1); }
.hero .hero-card.reveal.in-view{ transform:none; }

/* ============================================================
   1. HERO / INVITATION
   ============================================================ */
.hero{ min-height:100svh; display:flex; align-items:center; justify-content:center; text-align:center; padding-top:clamp(116px,16.5vw,250px); }
.hero-card{
  position:relative;
  width:min(680px,92%);
  padding:clamp(34px,6vw,70px) clamp(24px,5vw,60px);
  /* card-stock: fine paper grain + faint laid lines over warm ivory */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.52 0 0 0 0 0.42 0 0 0 0 0.26 0 0 0 0.11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.09' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.6 0 0 0 0 0.5 0 0 0 0 0.32 0 0 0 0.12 -0.02'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,252,0.9), rgba(255,255,252,0) 60%),
    linear-gradient(170deg, #fffcf4 0%, #fbf4e4 55%, #f6ecd7 100%);
  background-size:240px 240px, 100% 100%, auto, auto;
  background-repeat:repeat, no-repeat, no-repeat, no-repeat;
  border:1px solid rgba(177,133,58,0.38);
  border-radius:6px;
  /* layered shadow so the card reads as lifted slightly off the page */
  box-shadow:
    0 1px 1px rgba(95,68,28,0.08),
    0 6px 14px -4px rgba(95,68,28,0.12),
    0 26px 50px -14px rgba(95,68,28,0.24),
    0 54px 90px -30px rgba(95,68,28,0.22),
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 0 40px rgba(214,186,128,0.14);
}
/* thin double gold frame printed inside the card */
.hero-card::before{
  content:""; position:absolute; inset:clamp(9px,1.6vw,14px); pointer-events:none;
  border:1px solid rgba(177,133,58,0.42);
  outline:1px solid rgba(177,133,58,0.2); outline-offset:3px;
  border-radius:3px;
}
.hero-card > *{ position:relative; }
.section > .paint-spots{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:1; pointer-events:none; overflow:visible;
  mix-blend-mode:multiply; opacity:0.8;
}
.couple{
  margin:0.1em 0; line-height:1;
  display:flex; flex-direction:column; align-items:center; gap:0.02em;
}
.c-name{
  font-family:var(--script);
  letter-spacing:0.01em;
  font-size:clamp(3.6rem,15vw,7rem); font-weight:400;
  line-height:0.92;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 2px rgba(150,110,40,0.14));
}
.c-and{
  font-family:var(--serif); font-style:italic; font-size:clamp(1.2rem,4.4vw,1.9rem);
  text-transform:lowercase; letter-spacing:0.12em;
  color:var(--olive-deep); font-weight:500; margin:-0.18em 0;
}
.date-band{
  display:flex; align-items:center; justify-content:center; gap:clamp(12px,4vw,30px);
  text-transform:uppercase; letter-spacing:0.14em; color:var(--ink);
  font-size:clamp(0.8rem,2.6vw,1.05rem);
}
.db-side{ flex:1; max-width:160px; }
.db-core{ display:flex; flex-direction:column; align-items:center; line-height:1; }
.db-month{ font-size:0.82em; color:var(--gold-deep); }
.db-day{ font-size:clamp(2.4rem,9vw,3.6rem); font-weight:600; color:var(--ink-deep); letter-spacing:0; }
.db-year{ font-size:0.82em; letter-spacing:0.2em; color:var(--gold-deep); }
.hero-venue{
  margin:0.4em 0 0; font-family:var(--serif); font-style:italic;
  font-size:clamp(0.95rem,3vw,1.2rem); color:var(--ink-soft); letter-spacing:0.04em;
}

.scroll-hint{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
  z-index:4; text-decoration:none; color:var(--gold-deep);
  text-transform:uppercase; letter-spacing:0.3em; font-size:0.7rem;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  animation:bob 2.2s ease-in-out infinite;
}
.scroll-hint .chev{ width:11px; height:11px; border-right:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold); transform:rotate(45deg); }
@keyframes bob{ 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,8px)} }

/* ============================================================
   SHARED — photo fill + vinyl spin
   ============================================================ */
.photo{
  width:100%; height:100%; border-radius:3px;
  background-image:var(--img),var(--ph,url("assets/placeholder-couple.svg"));
  background-size:cover,cover; background-position:center,center; background-repeat:no-repeat;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---- "Our Song" player in the hero card ---- */
.song-player{
  display:inline-flex; align-items:center; gap:13px;
  margin-top:1.5em; padding:8px 22px 8px 9px;
  background:linear-gradient(180deg, rgba(255,253,247,0.92), rgba(248,240,224,0.86));
  border:1px solid rgba(177,133,58,0.42);
  border-radius:50px;
  box-shadow:0 10px 24px rgba(120,90,40,0.14), inset 0 0 0 1px rgba(255,255,255,0.5);
  transition:transform .3s, box-shadow .3s;
}
.song-player:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(120,90,40,0.2); }
.song-btn{
  position:relative; flex:none; width:48px; height:48px; border-radius:50%;
  border:0; padding:0; cursor:pointer; background:none;
}
.song-btn:focus-visible{ outline:2px dashed var(--gold); outline-offset:4px; }
.song-vinyl{
  position:absolute; inset:0; border-radius:50%;
  background:
    repeating-radial-gradient(circle at center,#17130e 0 1px,#28231c 1px 3px),
    radial-gradient(circle,#2a251f 0 58%,#0e0b08 100%);
  box-shadow:0 3px 8px rgba(0,0,0,0.3), inset 0 0 10px rgba(0,0,0,0.55);
}
.song-vinyl::after{ content:""; position:absolute; inset:35%; border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#e7cd8e,#b1853a 60%,#86641f);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,0.25); }
.song-arm{
  position:absolute; top:3px; right:2px; width:54%; height:3px; border-radius:2px;
  background:linear-gradient(90deg,#cbb37c,#8c6a2c); z-index:2;
  transform-origin:right center; transform:rotate(-30deg);
  transition:transform .5s cubic-bezier(.3,.7,.2,1);
  box-shadow:0 1px 2px rgba(0,0,0,0.25);
}
.song-arm::before{ content:""; position:absolute; left:-2px; top:-2.5px; width:7px; height:7px; border-radius:2px; background:#6c5326; }
.song-ico{
  position:absolute; left:50%; top:50%; z-index:3;
  transform:translate(-50%,-50%) translateX(1px);
  width:0; height:0; border-style:solid; border-width:7px 0 7px 11px;
  border-color:transparent transparent transparent #fff7e6;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,0.45)); transition:opacity .25s;
}
.playing .song-vinyl{ animation:spin 3.4s linear infinite; }
.playing .song-arm{ transform:rotate(-7deg); }
.playing .song-ico,.loading .song-ico{ opacity:0; }
.song-spin,.mp-spin{
  position:absolute; inset:-3px; border-radius:50%; z-index:4; pointer-events:none;
  border:2px solid rgba(177,133,58,0.18); border-top-color:var(--gold);
  opacity:0; transition:opacity .25s;
}
.loading .song-spin,.loading .mp-spin{ opacity:1; animation:spin .9s linear infinite; }
.song-meta{ display:flex; flex-direction:column; text-align:left; line-height:1.2; }
.song-status{ font-family:var(--cinzel); text-transform:uppercase; letter-spacing:0.22em; font-size:clamp(0.56rem,1.6vw,0.66rem); color:var(--olive-deep); }
.song-title{ font-family:var(--serif); font-style:italic; font-weight:600; font-size:clamp(1rem,2.8vw,1.18rem); color:var(--gold-deep); letter-spacing:0.02em; }
.song-sub{ font-family:var(--cinzel); text-transform:uppercase; letter-spacing:0.16em; font-size:clamp(0.56rem,1.6vw,0.66rem); color:var(--ink-soft); }
.song-player.has-error .song-status{ color:var(--maroon); }

/* ============================================================
   3. PHOTO ALBUM
   ============================================================ */
.album{ text-align:center; }
.album-wrap{ display:flex; justify-content:center; }

/* open album book: linen cover → stacked page edges → two textured pages */
.album-book{
  --paper-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.4 0 0 0 0 0.24 0 0 0 0.1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  position:relative;
  width:min(1000px,97%);
  padding:clamp(14px,2vw,22px);
  border-radius:12px;
  /* maroon silk-bound cover with a faint gold buti print */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cg fill='%23e2c27c' fill-opacity='0.16'%3E%3Cpath d='M22 13c2 3 2 6 0 9-2-3-2-6 0-9z'/%3E%3Ccircle cx='22' cy='24' r='1.1'/%3E%3Cpath d='M0 35c2 3 2 6 0 9-2-3-2-6 0-9zM44 35c2 3 2 6 0 9-2-3-2-6 0-9z'/%3E%3C/g%3E%3C/svg%3E"),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.06) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 30% 10%, rgba(190,92,82,0.35), transparent 60%),
    linear-gradient(160deg, #8a2f2c 0%, #72211f 55%, #5a1818 100%);
  box-shadow:
    0 34px 64px -18px rgba(70,30,20,0.5),
    0 12px 22px -10px rgba(70,30,20,0.32),
    inset 0 0 0 1px rgba(255,220,180,0.18),
    inset 0 0 0 5px rgba(90,24,24,0.6),
    inset 0 0 0 6px rgba(222,186,110,0.75),
    inset 0 0 18px rgba(30,5,5,0.45);
}
/* gilded metal corner protectors */
.album-book::before,.album-book::after,
.book-pages::before,.book-pages::after{
  content:""; position:absolute; z-index:4; pointer-events:none;
  width:clamp(38px,5.4vw,58px); aspect-ratio:1;
  background:url("assets/album-corner.svg") center/contain no-repeat;
  filter:drop-shadow(0 2px 2px rgba(40,10,5,0.4));
}
.album-book::before{ top:-3px; left:-3px; }
.album-book::after{ top:-3px; right:-3px; transform:scaleX(-1); }
.book-pages::before{ bottom:calc(-3px - clamp(14px,2vw,22px)); left:calc(-3px - clamp(14px,2vw,22px)); transform:scaleY(-1); }
.book-pages::after{ bottom:calc(-3px - clamp(14px,2vw,22px)); right:calc(-3px - clamp(14px,2vw,22px)); transform:scale(-1,-1); }
.book-ribbon{ /* satin bookmark peeking out under the pages */
  position:absolute; right:22%; top:calc(100% - 16px); z-index:-1;
  width:16px; height:clamp(40px,6vw,56px);
  background:linear-gradient(90deg,#b98d3e,#ecd59a 45%,#b98d3e);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%);
  box-shadow:inset 0 0 4px rgba(0,0,0,0.15);
}
.book-pages{
  position:relative;
  display:grid; grid-template-columns:1fr 1fr;
  border-radius:4px;
  /* thin stacked page edges visible under the top sheet */
  box-shadow:
    0 1px 0 #f3ebd9, 0 2px 0 #ded0b2, 0 3px 0 #f1e8d4, 0 4px 0 #d8c9a8, 0 5px 0 #eee3cc,
    0 6px 3px rgba(40,30,10,0.25);
}
.album-page{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  padding:clamp(30px,4.4vw,48px) clamp(16px,3vw,30px) clamp(18px,2.6vw,26px);
  background-color:#fbf6ea;
  background-size:220px 220px, 100% 100%, 100% 100%;
}
.page-l{
  border-radius:4px 0 0 4px;
  background-image:
    var(--paper-grain),
    linear-gradient(90deg, rgba(255,255,255,0.5) 0%, transparent 18%, transparent 78%, rgba(150,115,60,0.12) 93%, rgba(90,62,24,0.26) 100%),
    linear-gradient(180deg, #fdf9ef, #f6eedc);
}
.page-r{
  border-radius:0 4px 4px 0;
  background-image:
    var(--paper-grain),
    linear-gradient(270deg, rgba(255,255,255,0.5) 0%, transparent 18%, transparent 78%, rgba(150,115,60,0.12) 93%, rgba(90,62,24,0.26) 100%),
    linear-gradient(180deg, #fdf9ef, #f6eedc);
}
.page-stage{ flex:1; width:100%; display:flex; align-items:center; justify-content:center; padding:6px 0 10px; }

/* photo prints held by gold corner mounts */
.polaroid{
  position:relative; margin:0; padding:9px 9px 0;
  background:#fffdf8; border-radius:2px;
  box-shadow:0 1px 1px rgba(90,60,20,0.12), 0 10px 22px -6px rgba(90,60,20,0.32);
}
.polaroid .photo{ height:auto; border-radius:1px; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.06); }
.pol-1{ width:min(78%,380px); transform:rotate(-2.5deg); }
.pol-1 .photo{ aspect-ratio:1/1; }
.pol-2{ width:min(64%,300px); transform:rotate(2deg); }
.pol-2 .photo{ aspect-ratio:2/3; background-position:center top,center; }
.polaroid figcaption{
  display:block; padding:0.12em 0 0.2em;
  font-family:var(--script); font-weight:400; text-transform:none; letter-spacing:0.01em;
  font-size:clamp(1.55rem,3.6vw,2.05rem); line-height:1.25;
  color:#7c5d26;
}
.pol-1 figcaption{ transform:rotate(-1.5deg); }
.pol-2 figcaption{ transform:rotate(1deg); }
.mount{
  position:absolute; z-index:2; width:clamp(18px,2.6vw,24px); aspect-ratio:1;
  background:linear-gradient(135deg, #d9bd7d 0%, #b1853a 48%, transparent 49%);
  filter:drop-shadow(0 1px 1px rgba(80,55,15,0.35));
}
.m-tl{ top:-5px; left:-5px; }
.m-tr{ top:-5px; right:-5px; transform:scaleX(-1); }
.m-bl{ bottom:-5px; left:-5px; transform:scaleY(-1); }
.m-br{ bottom:-5px; right:-5px; transform:scale(-1,-1); }

/* 2019 ········ S&S ········ 2026 across the spread */
.page-year{
  width:100%; margin:0;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; column-gap:12px;
  font-family:var(--cinzel); font-size:clamp(0.72rem,1.6vw,0.86rem);
  letter-spacing:0.34em; color:var(--gold-deep); line-height:24px;
}
.py-num{ padding-left:0.34em; }
.py-line{
  height:2px;
  background:radial-gradient(circle, rgba(177,133,58,0.55) 0 0.9px, transparent 1.2px) left center/7px 2px repeat-x;
}
.page-l .py-line{ margin-right:clamp(22px,3.4vw,34px); }
.page-r .py-line{ margin-left:clamp(22px,3.4vw,34px); }
.album-mono{
  position:absolute; left:50%; z-index:3;
  bottom:calc(clamp(18px,2.6vw,26px) + 12px);
  transform:translate(-50%,50%);
  font-size:clamp(1.05rem,2.2vw,1.35rem);
  opacity:0.92;
}

/* ============================================================
   4. LOVE STORY TEXT
   ============================================================ */
.story{ text-align:center; }
.story-wrap{
  max-width:720px; margin:0 auto;
  font-family:var(--serif); color:var(--ink-soft);
  font-size:clamp(1.05rem,3.1vw,1.4rem); line-height:1.9; letter-spacing:0.02em;
}
.story-wrap p{ margin:1.1em 0; }
.story-lead{ color:var(--ink); }
.drop{
  font-family:var(--script); font-size:2.6em; line-height:0.4;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-right:0.04em;
}
.story-em{
  font-family:var(--script-2); font-size:1.9em; line-height:1.1;
  color:var(--gold-deep); margin:0.3em 0 0.6em;
}

/* ============================================================
   5. VENUE + MAP
   ============================================================ */
.venue{ text-align:center; }
.venue-wrap{ max-width:760px; margin:0 auto; }
.details-banner{
  display:inline-flex; flex-direction:column; align-items:center;
  padding:14px 48px; margin-bottom:0.6em;
  background:linear-gradient(180deg,#6c5a3f,#574832);
  color:#f3e6cb; border-radius:6px;
  box-shadow:0 10px 26px rgba(80,60,30,0.3);
}
.db-script{ font-family:var(--script-2); font-size:1.7rem; color:var(--gold-soft); line-height:0.7; margin-top:6px; }
.db-title{ font-family:var(--serif); text-transform:uppercase; letter-spacing:0.34em; font-size:clamp(1.1rem,4vw,1.7rem); }
.venue-title{
  font-family:var(--script-2); font-size:clamp(3rem,11vw,5.2rem); line-height:0.8; margin:0.2em 0 0.1em;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.venue-name{
  font-family:var(--serif); text-transform:uppercase; letter-spacing:0.2em;
  font-size:clamp(1.3rem,4.6vw,2rem); color:var(--ink-deep); margin:0.2em 0 0.1em; font-weight:500;
}
.venue-addr{ font-style:italic; color:var(--ink-soft); font-size:clamp(0.95rem,3vw,1.2rem); margin:0 0 1.4em; }
.map-frame{
  position:relative;
  width:100%; aspect-ratio:16/9; border-radius:8px; overflow:hidden;
  border:1px solid rgba(177,133,58,0.4);
  box-shadow:0 18px 44px rgba(120,90,40,0.2);
  background:linear-gradient(160deg,#f3ead7,#e8dcc0);
}
.map-canvas{
  position:absolute; inset:0; z-index:1;
  background:transparent; font-family:var(--serif);
  opacity:0; transition:opacity .8s ease;
}
.map-frame.map-ready .map-canvas{ opacity:1; }
/* soften the basemap colours to sit with the ivory & gold palette */
.map-canvas .leaflet-tile-pane{ filter:sepia(0.22) saturate(0.85) brightness(1.02); }
.map-canvas .leaflet-control-zoom a{ color:var(--gold-deep); }
.map-canvas .leaflet-control-attribution{ font-size:10px; background:rgba(255,250,240,0.8); }

/* custom wedding-venue marker */
.venue-marker{ background:none; border:0; }
.vm-badge{
  position:absolute; left:0; top:0; width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 38%, #fffdf6, #f5e8cc);
  border:2.5px solid #b1853a;
  box-shadow:0 0 0 3px rgba(255,250,238,0.9), 0 8px 18px rgba(90,60,20,0.35);
  animation:vmBob 3.2s ease-in-out infinite;
}
.vm-badge::after{ /* pointer tip */
  content:""; position:absolute; left:50%; bottom:-11px; transform:translateX(-50%);
  border:7px solid transparent; border-top:9px solid #b1853a; border-bottom:0;
}
.vm-badge img{ width:38px; height:38px; display:block; }
.vm-pulse{
  position:absolute; left:50%; bottom:0; width:22px; height:9px; margin-left:-11px;
  border-radius:50%; background:rgba(177,133,58,0.45);
  animation:vmPulse 2.4s ease-out infinite;
}
@keyframes vmBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
@keyframes vmPulse{ 0%{ transform:scale(0.6); opacity:0.9; } 100%{ transform:scale(2.6); opacity:0; } }
.leaflet-tooltip.vm-label{
  font-family:var(--cinzel); font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--gold-deep); background:rgba(255,252,244,0.95);
  border:1px solid rgba(177,133,58,0.55); border-radius:20px; padding:4px 10px;
  box-shadow:0 4px 12px rgba(120,90,40,0.2);
}
.leaflet-tooltip.vm-label::before{ display:none; }
.vm-pop{ display:flex; flex-direction:column; gap:3px; font-family:var(--serif); font-size:15px; color:var(--ink-deep); }
.vm-pop strong{ font-family:var(--cinzel); font-weight:500; letter-spacing:0.06em; }
.vm-pop span{ font-style:italic; color:var(--ink-soft); }
.vm-pop a{ color:var(--gold-deep); }

/* static fallback card, used when map tiles can't be loaded */
.map-fallback{
  position:absolute; inset:0; z-index:2; display:none;
  flex-direction:column; align-items:center; justify-content:center; gap:8px;
  text-align:center; text-decoration:none; padding:24px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,252,245,0.6), transparent 60%),
    repeating-linear-gradient(90deg, rgba(177,133,58,0.06) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(0deg, rgba(177,133,58,0.06) 0 1px, transparent 1px 42px),
    linear-gradient(160deg,#f3ead7,#e8dcc0);
  color:var(--ink-deep);
}
.mf-icon{
  width:64px; height:64px; border-radius:50%; margin-bottom:4px;
  background:url("assets/venue-icon.svg") center/40px no-repeat, radial-gradient(circle at 50% 38%, #fffdf6, #f5e8cc);
  border:2.5px solid #b1853a; box-shadow:0 6px 16px rgba(120,80,30,0.3);
}
.mf-name{ font-family:var(--serif); text-transform:uppercase; letter-spacing:0.16em; font-weight:600; font-size:clamp(1rem,3vw,1.3rem); }
.mf-addr{ font-style:italic; color:var(--ink-soft); font-size:clamp(0.85rem,2.5vw,1.05rem); }
.mf-btn{ margin-top:10px; font-family:var(--cinzel); text-transform:uppercase; letter-spacing:0.18em;
  font-size:0.78rem; color:#fff; background:linear-gradient(180deg,#b89350,#8c6a2c);
  padding:9px 18px; border-radius:40px; box-shadow:0 6px 16px rgba(120,90,40,0.3); }
.map-frame.no-map .map-canvas{ display:none; }
.map-frame.no-map .map-fallback{ display:flex; }

.map-link{
  display:inline-block; margin-top:1em; text-decoration:none;
  font-family:var(--serif); text-transform:uppercase; letter-spacing:0.22em;
  font-size:0.85rem; color:var(--gold-deep);
  border-bottom:1px solid var(--gold-soft); padding-bottom:3px;
  transition:color .3s;
}
.map-link:hover{ color:var(--olive-deep); }

/* ============================================================
   6. ORDER OF THE DAY
   ============================================================ */
.order{ text-align:center; }
.order-wrap{ max-width:620px; margin:0 auto; }
.order-heading{ margin-bottom:0.4em; }
.day-group{ margin:2.2em 0; }
.day-date{
  font-family:var(--script-2); font-weight:700;
  font-size:clamp(1.9rem,6vw,2.8rem); color:var(--gold-deep); margin:0 0 0.5em;
}
.timeline{ list-style:none; margin:0; padding:0; }
.timeline li{
  display:grid; grid-template-columns:96px 28px 1fr; align-items:center;
  gap:10px; padding:16px 0;
  border-bottom:1px solid rgba(177,133,58,0.28);
  text-align:left;
}
.timeline li:first-child{ border-top:1px solid rgba(177,133,58,0.28); }
.t-time{
  font-family:var(--serif); font-size:clamp(1.4rem,5vw,1.9rem); font-weight:500;
  color:var(--ink); text-align:right; line-height:1;
}
.t-time em{ font-family:var(--script-2); font-style:normal; font-size:0.7em; color:var(--gold-deep); display:inline-block; margin-left:2px; }
.t-dot{ width:18px; height:18px; justify-self:center; border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#e7cd8e,#b1853a 60%,#80601f);
  box-shadow:0 0 0 4px rgba(177,133,58,0.14); }
.t-body{ display:flex; flex-direction:column; }
.t-name{ font-family:var(--serif); text-transform:uppercase; letter-spacing:0.14em; font-size:clamp(1rem,3.4vw,1.3rem); color:var(--ink-deep); font-weight:500; }
.t-note{
  display:inline-block; margin-left:0.6em;
  font-size:clamp(0.75rem,2.4vw,0.9rem); font-style:italic; font-weight:400;
  text-transform:none; letter-spacing:0.02em; color:var(--ink-soft);
}
.t-venue{ font-style:italic; color:var(--ink-soft); font-size:clamp(0.85rem,2.6vw,1.02rem); }

/* ============================================================
   7. GETTING MARRIED + COUNTDOWN
   ============================================================ */
.married{ text-align:center; }
.married-wrap{ max-width:720px; margin:0 auto; }
.married-text{
  font-family:var(--serif); color:var(--ink-soft);
  font-size:clamp(1.05rem,3.1vw,1.35rem); line-height:1.9; margin:1.1em auto; max-width:40ch;
}
.countdown{
  display:flex; align-items:flex-start; justify-content:center; gap:clamp(6px,2vw,18px);
  margin:1.6em 0 0.4em;
}
.cd-unit{ display:flex; flex-direction:column; align-items:center; min-width:clamp(52px,16vw,96px); }
.cd-num{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(2.4rem,11vw,4.6rem); line-height:1; color:var(--ink-deep);
  font-variant-numeric:tabular-nums;
}
.cd-num.accent{ background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cd-lab{
  text-transform:uppercase; letter-spacing:0.22em; font-size:clamp(0.6rem,2vw,0.8rem);
  color:var(--ink-soft); margin-top:0.6em;
}
.cd-sep{ font-family:var(--serif); font-size:clamp(2rem,9vw,3.6rem); color:var(--gold-soft); line-height:1.1; }
.divider.end{ margin-top:2em; }
.foot-names{
  font-family:var(--script); font-size:clamp(2.4rem,9vw,4rem); line-height:1; margin:0.2em 0 0;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.foot-names span{ font-family:var(--script-2); }
.foot-tag{ font-style:italic; letter-spacing:0.14em; color:var(--ink-soft); margin:0.4em 0 0; }

/* ======================= FLOATING MUSIC DOCK (record player) ======================= */
.music-dock{
  position:fixed; right:18px; bottom:18px; z-index:700;
  display:flex; align-items:center; gap:0;
  animation:dockIn .9s cubic-bezier(.2,.8,.3,1) both;
}
.music-dock[hidden]{ display:none; }
@keyframes dockIn{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

.mini-player{
  position:relative;
  width:64px; height:64px; border-radius:50%; cursor:pointer; flex:none;
  border:1px solid rgba(177,133,58,0.5);
  background:radial-gradient(circle at 50% 42%, #fffaf0, #f2e6ce);
  box-shadow:0 10px 24px rgba(120,90,40,0.3);
  display:flex; align-items:center; justify-content:center;
  transition:transform .3s, opacity .4s;
  overflow:visible; padding:0;
}
.mini-player:hover{ transform:scale(1.07); }
.mini-player:focus-visible{ outline:2px dashed var(--gold); outline-offset:4px; }
.mp-vinyl{
  position:absolute; inset:9px; border-radius:50%;
  background:
    repeating-radial-gradient(circle at center,#17130e 0 1px,#28231c 1px 3px),
    radial-gradient(circle,#2a251f 0 58%,#0e0b08 100%);
  box-shadow:inset 0 0 8px rgba(0,0,0,0.6);
}
.mp-label{
  position:absolute; inset:36%; border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#e7cd8e,#b1853a 60%,#86641f);
}
.mp-label::after{ content:""; position:absolute; inset:0; margin:auto; width:3px; height:3px; border-radius:50%; background:#15110c; }
.mp-arm{
  position:absolute; top:7px; right:6px; width:34px; height:3px; border-radius:2px;
  background:linear-gradient(90deg,#cbb37c,#8c6a2c); z-index:3;
  transform-origin:right center; transform:rotate(-36deg);
  transition:transform .5s cubic-bezier(.3,.7,.2,1);
  box-shadow:0 1px 2px rgba(0,0,0,0.3);
}
.mp-arm::before{ content:""; position:absolute; left:-3px; top:-2.5px; width:8px; height:8px; border-radius:2px; background:#6c5326; }
.mp-arm::after{ content:""; position:absolute; right:-4px; top:-3px; width:9px; height:9px; border-radius:50%; background:radial-gradient(circle at 40% 35%,#eacf8f,#9c7430); box-shadow:0 1px 2px rgba(0,0,0,0.3); }
.mp-ico{
  position:absolute; left:50%; top:50%; z-index:4;
  transform:translate(-50%,-50%) translateX(1px);
  width:0; height:0; border-style:solid; border-width:5px 0 5px 8px;
  border-color:transparent transparent transparent #fff7e6;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,0.5)); transition:opacity .25s;
}
.mp-ripple{
  position:absolute; inset:0; border-radius:50%;
  border:1.5px solid rgba(177,133,58,0.5); opacity:0;
}
.mini-player.playing .mp-vinyl{ animation:spin 3.4s linear infinite; }
.mini-player.playing .mp-arm{ transform:rotate(-9deg); }
.mini-player.playing .mp-ico{ opacity:0; }
.mini-player.playing .mp-ripple{ animation:ripple 1.9s ease-out infinite; }
.mini-player.loading .mp-ico{ opacity:0; }
@keyframes ripple{ 0%{ transform:scale(1); opacity:0.55; } 100%{ transform:scale(1.55); opacity:0; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Laptops & monitors: scale the design up slightly so it doesn't look
   small and far away — envelope +10%, website +10%. Phones stay as is. */
:root{ --env-zoom:1; --site-zoom:1; }
@media (min-width:1024px){
  :root{ --site-zoom:1.1; }
}
@media (min-width:1024px) and (max-height:760px){
  :root{ --site-zoom:1.02; } /* short laptop screens */
}
/* --env-zoom is set by script.js: up to 1.1, but never taller than the window */
.env-inner{ zoom:var(--env-zoom); }
#site{ zoom:var(--site-zoom); }
.hero{ min-height:calc(100svh / var(--site-zoom)); }

@media (max-width:640px){
  .date-band{ flex-direction:column; gap:6px; }
  .db-side{ max-width:none; }
  .timeline li{ grid-template-columns:78px 20px 1fr; gap:8px; }
  .book-pages{ grid-template-columns:1fr; grid-template-rows:1fr 1fr; }
  .page-l{
    border-radius:4px 4px 0 0;
    background-image:var(--paper-grain),
      linear-gradient(180deg, rgba(255,255,255,0.5) 0%, transparent 18%, transparent 80%, rgba(150,115,60,0.12) 94%, rgba(90,62,24,0.24) 100%),
      linear-gradient(180deg, #fdf9ef, #f6eedc);
  }
  .page-r{
    border-radius:0 0 4px 4px;
    background-image:var(--paper-grain),
      linear-gradient(0deg, rgba(255,255,255,0.5) 0%, transparent 18%, transparent 80%, rgba(150,115,60,0.12) 94%, rgba(90,62,24,0.24) 100%),
      linear-gradient(180deg, #fdf9ef, #f6eedc);
  }
  .page-l .page-year{ margin-bottom:14px; }
  .page-r .page-stage{ padding-top:20px; }
  .pol-1{ width:min(80%,320px); }
  .pol-2{ width:min(68%,270px); }
  .album-mono{ top:50%; bottom:auto; transform:translate(-50%,-50%); }
  .py-line{ visibility:hidden; }
  .countdown{ flex-wrap:wrap; }
  .cd-sep{ display:none; }
  .cd-unit{ min-width:22%; }
  .hang-floral{ width:46px; top:-12%; opacity:0.9; }
  .song-player{ margin-top:1.2em; }
  .strand{ --w:28px; }
  .section > .hero-strands{ z-index:1; }
  .strand.wide-only{ display:none; }
  .music-dock{ right:12px; bottom:12px; }
  .mini-player{ width:56px; height:56px; }
}
@media (max-width:420px){
  .corner{ width:110px; }
  .hero-card{ padding:28px 18px; }
  .hang-floral{ display:none; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.15s !important; scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
  .playing .song-vinyl,.mini-player.playing .mp-vinyl{ animation:spin 6s linear infinite !important; }
  .strand{ opacity:0.97; }
}