/* ===== Tokens (taken from the printed card) ===== */
:root{
  --peach:#f2c6b4;
  --peach-deep:#e8ae98;
  --peach-light:#f8dccf;
  --gold:#b8913b;
  --gold-light:#e3c67a;
  --maroon:#7b1e3a;
  --maroon-deep:#5e1530;
  --cream:#fbf2e6;
  --ink:#5a2236;
  --lilac:#c9a3c8;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --script:'Great Vibes','Brush Script MT',cursive;
  --deva:'Noto Serif Devanagari','Cormorant Garamond',serif;
  --lattice:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' fill='%23f2c6b4'/%3E%3Cpath d='M32 6 L58 32 L32 58 L6 32Z' fill='%23ecd8cc' stroke='%23c98f6f' stroke-width='1.6'/%3E%3Cpath d='M32 14 L50 32 L32 50 L14 32Z' fill='none' stroke='%23d8b8a4' stroke-width='1'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--serif);color:var(--ink);font-size:18px;line-height:1.5;
  background:#4a1428 radial-gradient(circle at 50% 0,#7b1e3a 0,#4a1428 70%) fixed;
  min-height:100vh;min-height:100dvh;
}
[hidden]{display:none!important}
img{max-width:100%;height:auto}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font:600 1.05rem/1 var(--serif);letter-spacing:.03em;text-decoration:none;cursor:pointer;
  padding:.95em 1.6em;border-radius:999px;border:1.5px solid transparent;
  transition:transform .2s,box-shadow .2s,background .2s;
}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible,.music:focus-visible{outline:3px solid var(--gold-light);outline-offset:3px}
.btn-gold{background:linear-gradient(180deg,#d9b866,#b8913b);color:#4a1428;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.btn-maroon{background:var(--maroon);color:#fff3e2;border-color:var(--gold);box-shadow:0 4px 12px rgba(94,21,48,.3)}
.btn-maroon:hover{background:var(--maroon-deep)}
.btn-ghost{background:transparent;color:var(--cream);border-color:var(--gold-light)}
.btn-ghost:hover{background:rgba(255,255,255,.08)}
.ico{width:1.2em;height:1.2em;flex:none}
.ico.big{width:2rem;height:2rem;color:var(--maroon)}

/* ===== Opening stage ===== */
.stage{
  position:fixed;inset:0;z-index:50;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 30%,#8a2745 0,#4a1428 75%);
  transition:opacity .9s ease,visibility .9s;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
.stage.done{opacity:0;visibility:hidden}
.stage-inner{display:flex;flex-direction:column;align-items:center;gap:1.6rem;width:100%;padding:1rem}
.card-wrap{
  position:relative;width:min(84vw,390px);aspect-ratio:745/900;
  perspective:1600px;filter:drop-shadow(0 18px 30px rgba(0,0,0,.5));
}
.card-under{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.4rem;text-align:center;border-radius:6px}
.peek-line{font-size:1.15rem;font-weight:600;color:var(--maroon)}

.cover{
  position:absolute;inset:0;border-radius:6px;overflow:hidden;
  background:var(--lattice);background-size:44px 44px;
  transform-origin:left center;transform-style:preserve-3d;
  transition:transform 1.5s cubic-bezier(.6,.05,.25,1),box-shadow 1.5s;
  box-shadow:inset 0 0 0 2px rgba(184,145,59,.35);
}
.cover.open{transform:rotateY(-172deg)}
.arch{
  position:absolute;left:7%;right:7%;top:5%;bottom:11%;
  border:2px solid rgba(201,143,111,.7);border-radius:48% 48% 0 0 / 14% 14% 0 0;
  background:linear-gradient(180deg,rgba(242,198,180,.35),transparent);
}
.pillar{
  position:absolute;bottom:0;width:11%;height:36%;
  background:linear-gradient(90deg,#9c7424,#e3c67a 40%,#a77d2a 70%,#e3c67a);
  border-radius:4px 4px 0 0;
  box-shadow:0 -10px 0 -2px #c9a14a;
}
.pl{left:4%}.pr{right:4%}
.flower{
  position:absolute;width:30%;aspect-ratio:1;border-radius:50%;filter:blur(.5px);
  background:
    radial-gradient(circle at 38% 38%,#fbe9c8 0 18%,transparent 19%),
    radial-gradient(circle at 65% 30%,#f7e1ee 0 16%,transparent 17%),
    radial-gradient(circle at 30% 68%,#d9b3d8 0 17%,transparent 18%),
    radial-gradient(circle at 66% 66%,#fff4e6 0 19%,transparent 20%);
  opacity:.92;
}
.f-tl{top:-3%;left:-3%}.f-tr{top:-3%;right:-3%}
.f-bl{bottom:28%;left:-4%;width:24%}.f-br{bottom:28%;right:-4%;width:24%}
.ganesh{
  position:absolute;left:50%;top:21%;transform:translateX(-50%);width:31%;aspect-ratio:234/277;
}
.ganesh img{width:100%;height:100%;object-fit:cover;border-radius:50%/48%;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 88%,transparent 100%);
  mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 88%,transparent 100%)}
.nameplate{
  position:absolute;left:12%;right:12%;bottom:15%;padding:.7rem .5rem;text-align:center;
  background:var(--peach-light);border:2px solid var(--gold);border-radius:999px;
  box-shadow:0 0 0 4px var(--peach-light),0 0 0 5.5px rgba(184,145,59,.7);
  font-weight:700;font-style:italic;font-size:clamp(1.05rem,4.6vw,1.45rem);color:var(--maroon-deep);
}
.base-border{position:absolute;left:0;right:0;bottom:0;height:7%;
  background:repeating-linear-gradient(90deg,#c98f6f 0 6px,#f2c6b4 6px 12px);opacity:.6}

/* ===== Paper pages ===== */
.invite{max-width:560px;margin:0 auto;padding:1.2rem 1rem 3rem}
.paper{
  position:relative;background:
    radial-gradient(circle at 20% 10%,rgba(255,255,255,.55),transparent 55%),
    var(--cream);
  color:var(--ink);border-radius:6px;
  box-shadow:0 10px 34px rgba(0,0,0,.45),inset 0 0 0 1px rgba(184,145,59,.4);
}
.page{padding:4.2rem 1.6rem 3.6rem;text-align:center;margin-bottom:1.4rem}
.corner{position:absolute;width:62px;height:62px;color:var(--maroon)}
.tl{top:8px;left:8px}
.tr{top:8px;right:8px;transform:scaleX(-1)}
.bl{bottom:8px;left:8px;transform:scaleY(-1)}
.br{bottom:8px;right:8px;transform:scale(-1,-1)}
.card-under .corner{width:44px;height:44px}
.rule{display:block;width:210px;height:18px;margin:1.4rem auto;color:var(--maroon)}

.emblem{width:96px;margin:0 auto .8rem;border-radius:50%/48%;display:block;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 86%,transparent 100%);
  mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 86%,transparent 100%)}
.invoc{font-weight:700;font-size:1.1rem;color:var(--maroon)}
.shloka{font-family:var(--deva);font-weight:600;font-size:1rem;line-height:1.9;color:var(--maroon)}
.shloka:first-of-type{margin-top:.8rem}

.hosts{font-weight:700;font-size:1.3rem;line-height:1.35;color:var(--maroon)}
.msg{margin:.8rem auto 1.4rem;max-width:30ch;font-size:1.12rem;font-style:italic}
.role{font-weight:600;font-size:1.05rem}
.script{font-family:var(--script);font-weight:400;font-size:clamp(3.4rem,17vw,4.6rem);line-height:1.1;color:var(--maroon)}
.with{font-style:italic;font-size:1.15rem;margin:.2rem 0}
.parentage{max-width:30ch;margin:.6rem auto 0;font-size:1rem;font-weight:600}

.tag{font-weight:700;font-size:1.05rem;letter-spacing:.14em;text-transform:uppercase;color:var(--maroon)}
.muhurtham{margin:2rem auto 0;padding:1.4rem 1rem;border-top:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold)}
.when-day{font-weight:700;font-size:1.25rem;margin-top:.3rem}
.when-time{font-weight:700;font-size:1.7rem;color:var(--maroon)}
.venue{margin-top:1.6rem}
.venue-name{font-weight:700;font-size:1.5rem;color:var(--maroon);margin-top:.2rem}
.venue-addr{font-weight:600;font-style:italic;margin:.2rem 0 1.1rem}

/* ===== Countdown ===== */
.countdown{text-align:center;color:var(--cream);margin:.6rem 0 2rem}
.cd-title{font-style:italic;font-size:1.2rem;margin-bottom:.8rem;color:var(--gold-light)}
.cd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
.cd-grid div{border:1.5px solid var(--gold);border-radius:6px;padding:.8rem .2rem;background:rgba(255,255,255,.05)}
.cd-grid b{display:block;font-size:2rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.cd-grid span{font-size:.85rem;letter-spacing:.08em}

/* ===== Haldi ===== */
.haldi-title{font-size:1.5rem;letter-spacing:.06em;color:var(--maroon)}
.dia{font-size:.9rem}
.haldi-tag{font-style:italic;font-weight:600;margin:.4rem auto 1.4rem;max-width:26ch}
.haldi-grid{display:grid;gap:1rem}
.hcell{display:flex;flex-direction:column;align-items:center;gap:.3rem;font-weight:700;font-size:1.2rem;color:var(--maroon)}
/* .compliments{list-style:none;margin:.8rem auto 0;max-width:34ch} */
/* .compliments li{font-weight:600;font-size:1.02rem;line-height:1.35;padding:.45rem 0} */
.family{margin-top:.6rem;font-weight:700;font-size:1.15rem;color:var(--maroon)}
.residence{margin-top:1.6rem;padding-top:1.1rem;border-top:1.5px solid var(--gold);font-weight:600}
.mob{margin-top:.2rem}
.mob a{color:inherit}

/* ===== Actions ===== */
.actions{display:flex;flex-direction:column;gap:.8rem;align-items:stretch;padding:0 .4rem}
.foot{text-align:center;color:var(--gold-light);font-style:italic;margin-top:1rem}

/* ===== Music ===== */
.music{
  position:fixed;right:max(14px,env(safe-area-inset-right));top:max(14px,env(safe-area-inset-top));z-index:30;
  width:46px;height:46px;border-radius:50%;border:1.5px solid var(--gold);background:var(--maroon);color:#fff3e2;
  cursor:pointer;display:grid;place-items:center;box-shadow:0 4px 12px rgba(0,0,0,.4);
}
.music-ico::before{content:"\266B";font-size:1.4rem}
.music[aria-pressed="false"]::after{content:"";position:absolute;width:30px;height:2px;background:#fff3e2;transform:rotate(-45deg)}


/* Single reveal when the card opens */
.invite.reveal .page:first-of-type{animation:rise 1s ease both}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* ===== Falling flower petals ===== */
.petals{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:60}
.petal{position:absolute;top:0;left:var(--x);width:var(--s);height:calc(var(--s)*1.3);
  animation:petal-fall var(--d) linear var(--dl) var(--n,infinite);will-change:transform}
.petal i{display:block;width:100%;height:100%;border-radius:150% 0 150% 0;opacity:.88;
  background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.75),var(--c) 60%);
  box-shadow:0 1px 3px rgba(90,34,54,.25);
  animation:petal-sway var(--w) ease-in-out var(--dl) infinite}
@keyframes petal-fall{from{transform:translate3d(0,-10vh,0)}to{transform:translate3d(0,112vh,0)}}
@keyframes petal-sway{
  0%{transform:translateX(calc(var(--sx)*-1)) rotate(0) rotateY(0)}
  50%{transform:translateX(var(--sx)) rotate(160deg) rotateY(180deg)}
  100%{transform:translateX(calc(var(--sx)*-1)) rotate(340deg) rotateY(360deg)}}

@media (min-width:600px){
  body{font-size:20px}
  .page{padding:4.6rem 3rem 4rem}
  .actions{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .haldi-grid{grid-template-columns:repeat(3,1fr)}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}


/* =====================================================================
   v2 — mobile-first refinements + new opening button
   ===================================================================== */
/* Stage: card sized by BOTH width and height so it always fits the phone */
.stage{overflow-y:auto;-webkit-overflow-scrolling:touch}
.stage-inner{min-height:100%;justify-content:center;gap:1.2rem;padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom))}
.card-wrap{width:min(86vw,390px,calc((100vh - 190px) * 0.828));width:min(86vw,390px,calc((100dvh - 190px) * 0.828))}

/* Opening button */
.open-wrap{display:flex;flex-direction:column;align-items:center;gap:.7rem;width:min(86vw,390px)}
.open-btn{
  position:relative;overflow:hidden;isolation:isolate;
  width:100%;min-height:58px;padding:.9rem 1.1rem;
  display:flex;align-items:center;justify-content:center;gap:.7rem;
  font:700 clamp(1.05rem,4.8vw,1.3rem)/1.1 var(--serif);letter-spacing:.04em;color:var(--maroon-deep);
  background:linear-gradient(180deg,#f0d78f 0%,#d3ad55 48%,#b8913b 100%);
  border:0;border-radius:999px;cursor:pointer;-webkit-tap-highlight-color:transparent;
  box-shadow:
    0 0 0 2px #4a1428,
    0 0 0 4px #e3c67a,
    0 10px 24px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.65);
  animation:ob-pulse 2.6s ease-in-out infinite;
  transition:transform .15s ease,filter .2s;
}
.open-btn::before{ /* moving shine */
  content:"";position:absolute;z-index:-1;top:0;bottom:0;left:-40%;width:35%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);
  transform:skewX(-18deg);animation:ob-shine 3.4s ease-in-out infinite;
}
.open-btn:active{transform:scale(.97);filter:brightness(.95)}
.open-btn:focus-visible{outline:3px solid #fff3e2;outline-offset:6px}
.open-btn:disabled{animation:none;opacity:.7;cursor:default}
.ob-orn{font-size:1.1em;color:var(--maroon);opacity:.85}
.open-hint{font-style:italic;font-size:1rem;color:var(--gold-light);letter-spacing:.03em;animation:hint-bob 2.2s ease-in-out infinite}
.open-btn:disabled ~ .open-hint,.open-wrap.gone .open-hint{opacity:0;animation:none}
@keyframes ob-pulse{
  0%,100%{box-shadow:0 0 0 2px #4a1428,0 0 0 4px #e3c67a,0 10px 24px rgba(0,0,0,.45),0 0 0 4px rgba(227,198,122,0),inset 0 1px 0 rgba(255,255,255,.65)}
  50%{box-shadow:0 0 0 2px #4a1428,0 0 0 4px #e3c67a,0 10px 24px rgba(0,0,0,.45),0 0 0 14px rgba(227,198,122,.22),inset 0 1px 0 rgba(255,255,255,.65)}}
@keyframes ob-shine{0%,55%{left:-40%}100%{left:130%}}
@keyframes hint-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* Small phones (<=360px) */
@media (max-width:360px){
  body{font-size:16.5px}
  .page{padding:3.4rem 1.05rem 3rem}
  .corner{width:46px;height:46px}
  .hosts{font-size:1.18rem}
  .cd-grid{gap:.4rem}
  .cd-grid b{font-size:1.6rem}
  .cd-grid span{font-size:.72rem;letter-spacing:.03em}
  .ob-orn{display:none}
}
/* Phones */
@media (max-width:599px){
  .invite{padding:.8rem .7rem 2.5rem}
  .btn{width:100%;min-height:52px}
  .actions{padding:0}
  .music{width:42px;height:42px}
  .tag{letter-spacing:.1em}
  .venue .btn{width:100%;font-size:1rem}
}
/* Short landscape phones */
@media (max-height:520px) and (orientation:landscape){
  .stage-inner{flex-direction:row;gap:1.5rem}
  .card-wrap{width:min(40vw,calc((100dvh - 24px) * 0.828))}
  .open-wrap{width:min(40vw,320px)}
}
/* Tablets & desktop */
@media (min-width:900px){
  .invite{max-width:620px;padding-top:2rem}
  .page{padding:5rem 3.4rem 4.4rem}
  .corner{width:78px;height:78px}
  .card-wrap{width:min(420px,calc((100dvh - 200px) * 0.828))}
  .open-wrap{width:min(420px,100%)}
  .open-btn:hover{filter:brightness(1.06);transform:translateY(-2px)}
}