:root{
  --ink:#25060F;
  --maroon:#4B0E22;
  --maroon-lt:#6A1730;
  --gold:#E8C271;
  --gold-deep:#B0883C;
  --leaf:#7C9A52;
  --cream:#F8EEDC;
  --rose:#E0708C;
  --radius:24px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Noto Sans Sinhala",system-ui,sans-serif;
  color:var(--cream);
  background:
    radial-gradient(120% 80% at 50% -10%, #7A1B36 0%, var(--maroon) 42%, var(--ink) 100%);
  min-height:100dvh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:12vh 18px 24px;
  position:relative;
  overflow-x:hidden;
}
/* faint gold dot grid, like foil print on an invitation card */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background-image:radial-gradient(rgba(232,194,113,.16) 1px, transparent 1.2px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 78%);
  mask-image:radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 78%);
  pointer-events:none;
}

.card{
  position:relative;
  width:min(430px,100%);
  margin-bottom:0;
  background:linear-gradient(180deg, rgba(106,23,48,.72), rgba(37,6,15,.82));
  border:1px solid rgba(232,194,113,.42);
  border-radius:170px 170px var(--radius) var(--radius);
  padding:100px 34px 26px;
  text-align:center;
  box-shadow:0 30px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(2px);
  animation:rise .7s cubic-bezier(.2,.7,.3,1) both;
}
/* inner hairline, the double rule you get on a printed wedding card */
.card::after{
  content:"";
  position:absolute;
  inset:9px;
  border:1px solid rgba(232,194,113,.22);
  border-radius:162px 162px 16px 16px;
  pointer-events:none;
}

h1{
  font-family:"Abhaya Libre",serif;
  font-weight:700;
  font-size:clamp(25px,7vw,31px);
  line-height:1.55;
  max-width:17ch;
  margin:0 auto;
  color:var(--cream);
  text-shadow:0 2px 14px rgba(0,0,0,.4);
}
.rule{
  width:110px;height:1px;margin:18px auto 30px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  position:relative;
}
.rule::after{
  content:"";
  position:absolute;left:50%;top:-3px;
  width:7px;height:7px;margin-left:-3.5px;
  background:var(--gold);
  transform:rotate(45deg);
}

.cta{
  position:relative;
  display:block;
  width:100%;
  padding:17px 22px;
  border:none;
  border-radius:999px;
  font-family:"Abhaya Libre",serif;
  font-size:28px;
  font-weight:700;
  color:#FFFFFF;
  text-shadow:0 1px 3px rgba(0,0,0,.35);
  text-decoration:none;
  background:linear-gradient(90deg,#1E9E4A,#2FBF5E,#D6332F,#F0544F,#1E9E4A);
  background-size:300% 100%;
  box-shadow:0 12px 26px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.35);
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
  animation:rise .7s .12s cubic-bezier(.2,.7,.3,1) both, hue 6s linear infinite;
}
.cta span{position:relative;z-index:1}
.cta::before{
  content:"";
  position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);
  animation:sheen 3.6s ease-in-out infinite;
}
.cta:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.4)}
.cta:active{transform:translateY(1px)}
.cta:focus-visible{outline:3px solid var(--rose);outline-offset:3px}

.note{margin-top:14px;font-size:12.5px;line-height:1.7;color:rgba(248,238,220,.55)}

footer{
  position:relative;
  margin-top:22px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  font-size:12.5px;
}
footer button{
  background:none;border:none;cursor:pointer;
  font-family:inherit;font-size:12.5px;
  color:rgba(248,238,220,.62);
  padding:6px 10px;border-radius:8px;
  transition:color .15s ease,background .15s ease;
}
footer button:hover{color:var(--gold);background:rgba(232,194,113,.08)}
footer button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.dot{display:none}

/* ---- modal ---- */
.veil{
  position:fixed;inset:0;z-index:40;
  background:rgba(15,3,8,.72);
  backdrop-filter:blur(3px);
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.veil.open{display:flex}
.sheet{
  width:min(340px,100%);
  max-height:70dvh;
  overflow:auto;
  background:linear-gradient(180deg,#5A1229,#2C0813);
  border:1px solid rgba(232,194,113,.35);
  border-radius:18px;
  padding:20px 18px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  animation:pop .24s cubic-bezier(.2,.8,.3,1);
}

.sheet h2{
  font-family:"Abhaya Libre",serif;
  font-size:21px;font-weight:700;color:var(--gold);
  margin-bottom:10px;
}
.sheet p{font-size:12.5px;line-height:1.75;color:rgba(248,238,220,.86);margin-bottom:10px}
.close{
  width:100%;margin-top:4px;padding:10px;
  border:1px solid rgba(232,194,113,.45);
  background:transparent;color:var(--gold);
  font-family:inherit;font-size:13.5px;border-radius:999px;cursor:pointer;
}
.close:hover{background:rgba(232,194,113,.1)}

@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes pop{from{transform:scale(.92);opacity:0}to{transform:none;opacity:1}}
@keyframes sheen{0%,62%{left:-60%}88%,100%{left:120%}}
@keyframes hue{from{background-position:0% 50%}to{background-position:-300% 50%}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}