/* ============================================================
   DEEPDREAMS WEDDING — South Indian Hindu invitation
   Palette: kanjivaram maroon, temple gold, kumkum red,
            turmeric cream, sacred leaf green
   Type:    Great Vibes (names) · Cormorant Garamond (display)
            Jost (details)
   ============================================================ */
:root{
  --maroon:#5C0F1C;
  --maroon-deep:#3E0812;
  --kumkum:#C1121F;
  --gold:#D4A937;
  --gold-bright:#F2CC6B;
  --gold-pale:#F7E7B8;
  --cream:#FFF6E8;
  --cream-2:#FBEED7;
  --leaf:#2E5D34;
  --ink:#3A1010;
  --body:#6E4A3A;
  --serif:'Cormorant Garamond',Georgia,serif;
  --script:'Great Vibes',cursive;
  --sans:'Jost',system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* Authoritative: a `hidden` element stays hidden even when a class sets display.
   Without this, .expired/.panel/.dock (which set display:grid/flex) would paint
   over the whole page and the invitation would look blank. */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(120% 60% at 50% 0%,#7A1626 0%,var(--maroon) 42%,var(--maroon-deep) 100%);
  color:var(--cream);
  font-family:var(--sans);
  font-size:16px;line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* silk sheen */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    repeating-linear-gradient(115deg,transparent 0 14px,rgba(255,215,140,.016) 14px 15px),
    radial-gradient(70% 40% at 50% 0%,rgba(242,204,107,.1),transparent 70%);
}
#invitation{position:relative;z-index:1}
img{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--gold);color:var(--maroon-deep)}

.w-container{max-width:1040px;margin:0 auto;padding:0 24px}
.w-section{padding:72px 0;position:relative}
@media(min-width:768px){.w-section{padding:96px 0}}

/* ============================================================
   THORANAM — mango-leaf garland across the top
   ============================================================ */
.thoranam{
  height:44px;position:relative;overflow:hidden;
  background:
    radial-gradient(18px 26px at 10px -4px,var(--leaf) 68%,transparent 70%),
    radial-gradient(18px 26px at 42px -4px,#3B7443 68%,transparent 70%),
    radial-gradient(18px 26px at 74px -4px,var(--leaf) 68%,transparent 70%),
    radial-gradient(18px 26px at 106px -4px,#3B7443 68%,transparent 70%);
  background-size:128px 44px;background-repeat:repeat-x;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.35));
}
.thoranam::after{
  content:"";position:absolute;top:0;left:0;right:0;height:6px;
  background:linear-gradient(90deg,var(--gold),var(--gold-bright) 30%,var(--gold) 60%,var(--gold-bright));
}
.thoranam.flip{transform:scaleY(-1);margin-top:0}

/* ============================================================
   HERO
   ============================================================ */
.w-hero{text-align:center;padding:64px 24px 72px;position:relative}
.invoke{
  font-family:'Noto Serif Telugu',var(--serif);font-size:clamp(19px,4.5vw,26px);color:var(--gold-bright);
  letter-spacing:.04em;font-weight:600;
  text-shadow:0 2px 10px rgba(242,204,107,.35);
}
.invoke-sub{font-size:12px;color:var(--gold-pale);opacity:.75;letter-spacing:.14em;text-transform:uppercase;margin-top:6px}

.mandala{
  position:relative;width:150px;height:150px;margin:38px auto 30px;
  display:grid;place-items:center;
}
.mandala-ring{
  position:absolute;inset:0;border-radius:50%;
  border:1.5px solid rgba(212,169,55,.55);
}
.mandala-ring.r1{
  background:
    repeating-conic-gradient(from 0deg,rgba(212,169,55,.5) 0deg 2deg,transparent 2deg 12deg);
  -webkit-mask:radial-gradient(circle,transparent 58%,#000 60%,#000 72%,transparent 74%);
  mask:radial-gradient(circle,transparent 58%,#000 60%,#000 72%,transparent 74%);
  border:0;animation:spin 60s linear infinite;
}
.mandala-ring.r2{
  inset:18px;
  background:
    repeating-conic-gradient(from 6deg,rgba(242,204,107,.6) 0deg 1.5deg,transparent 1.5deg 9deg);
  -webkit-mask:radial-gradient(circle,transparent 62%,#000 64%,#000 78%,transparent 80%);
  mask:radial-gradient(circle,transparent 62%,#000 64%,#000 78%,transparent 80%);
  border:0;animation:spin 80s linear infinite reverse;
}
@keyframes spin{to{transform:rotate(360deg)}}
.om-center{
  font-size:44px;color:var(--gold-bright);
  text-shadow:0 0 24px rgba(242,204,107,.5);
}

.hero-eyebrow{
  font-size:12.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold-pale);opacity:.85;
}
.couple{margin:18px 0 20px;line-height:1.05}
.couple .name{
  display:block;font-family:var(--script);font-weight:400;
  font-size:clamp(52px,11vw,96px);color:var(--cream);
  text-shadow:0 2px 30px rgba(242,204,107,.25);
}
.couple .amp{
  display:block;font-family:var(--serif);font-style:italic;
  font-size:clamp(22px,4vw,32px);color:var(--gold);margin:2px 0;
}
.hero-invite{font-family:var(--serif);font-size:19px;font-style:italic;color:var(--gold-pale)}

.hero-date-card{
  max-width:430px;margin:34px auto 0;padding:26px 30px;
  background:linear-gradient(180deg,rgba(255,246,232,.07),rgba(255,246,232,.03));
  border:1px solid rgba(212,169,55,.4);border-radius:16px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.hdc-line{display:block;height:1px;margin:0 auto 16px;width:70%;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.hero-date-card .hdc-line:last-child{margin:16px auto 0}
.hdc-date{font-family:var(--serif);font-size:23px;font-weight:600;color:var(--cream)}
.hdc-muhurtham{font-size:14px;color:var(--gold-bright);margin-top:4px}
.hdc-muhurtham em{font-family:var(--serif)}
.hdc-venue{font-size:13.5px;color:var(--gold-pale);opacity:.85;margin-top:8px}

.countdown{display:flex;gap:14px;justify-content:center;margin-top:34px;flex-wrap:wrap}
.cd{
  min-width:74px;padding:14px 10px;border-radius:12px;
  background:rgba(62,8,18,.55);border:1px solid rgba(212,169,55,.35);
}
.cd b{display:block;font-family:var(--serif);font-size:30px;font-weight:700;color:var(--gold-bright);line-height:1;font-variant-numeric:tabular-nums}
.cd span{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-pale);opacity:.8}

/* ============================================================
   FAMILIES
   ============================================================ */
.fam-grid{
  display:grid;grid-template-columns:1fr;gap:26px;align-items:center;text-align:center;
}
@media(min-width:760px){.fam-grid{grid-template-columns:1fr auto 1fr}}
.fam{
  padding:36px 26px;border-radius:18px;
  background:linear-gradient(180deg,rgba(255,246,232,.06),rgba(255,246,232,.02));
  border:1px solid rgba(212,169,55,.3);
}
.fam-flower{color:var(--kumkum);font-size:20px;text-shadow:0 0 14px rgba(193,18,31,.6)}
.fam-name{font-family:var(--script);font-weight:400;font-size:42px;color:var(--cream);margin:8px 0 2px}
.fam-daughter{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-pale);opacity:.7}
.fam-parents{font-family:var(--serif);font-size:18px;color:var(--gold-bright);margin-top:8px}
.fam-city{font-size:13px;color:var(--gold-pale);opacity:.75;margin-top:4px}
.fam-knot{display:grid;place-items:center}
.knot-ring{
  display:block;width:52px;height:52px;border-radius:50%;
  border:2px solid var(--gold);position:relative;
  box-shadow:0 0 24px rgba(212,169,55,.35),inset 0 0 12px rgba(212,169,55,.25);
}
.knot-ring::after{
  content:"";position:absolute;inset:8px;border-radius:50%;
  border:1.5px solid rgba(212,169,55,.5);
}

/* ============================================================
   SECTION HEADS
   ============================================================ */
.w-head{text-align:center;margin-bottom:44px}
.w-orn{display:block;color:var(--gold);font-size:13px;letter-spacing:.6em;margin-bottom:14px;opacity:.9}
.w-title{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(30px,5vw,44px);color:var(--cream);letter-spacing:.01em;
}
.w-sub{font-size:15px;color:var(--gold-pale);opacity:.8;margin-top:10px}

/* ============================================================
   GALLERY — editable photo mosaic
   ============================================================ */
.gal{
  display:grid;gap:14px;
  grid-template-columns:repeat(2,1fr);
  grid-auto-rows:150px;
}
@media(min-width:760px){
  .gal{grid-template-columns:repeat(4,1fr);grid-auto-rows:190px}
  .g-a{grid-column:span 2;grid-row:span 2}
  .g-d{grid-column:span 2}
}
.gal-item{
  position:relative;border-radius:14px;overflow:hidden;cursor:pointer;
  border:1px solid rgba(212,169,55,.4);
  background:
    linear-gradient(150deg,rgba(255,246,232,.08),rgba(255,246,232,.02));
}
.gal-item img{width:100%;height:100%;object-fit:cover;display:none}
.gal-item.has-photo img{display:block}
.gal-item.has-photo .gal-add{display:none}
.gal-add{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:14px;color:var(--gold-pale);letter-spacing:.06em;
  background:
    repeating-linear-gradient(45deg,transparent 0 10px,rgba(212,169,55,.05) 10px 20px);
}
.gal-item::after{
  content:"";position:absolute;inset:0;border-radius:14px;
  box-shadow:inset 0 0 0 1px rgba(255,246,232,.08);pointer-events:none;
}
.gal-item.has-photo:hover img{transform:scale(1.04);transition:transform .8s var(--ease)}
/* view mode: hide empty slots entirely */
body.viewing .gal-item:not(.has-photo){display:none}

/* ============================================================
   EVENTS — garland timeline
   ============================================================ */
.events{position:relative;max-width:660px;margin:0 auto}
.events::before{
  content:"";position:absolute;top:6px;bottom:6px;left:19px;width:2px;
  background:linear-gradient(180deg,transparent,var(--gold) 8%,var(--gold) 92%,transparent);
  opacity:.5;
}
.event{
  position:relative;padding:0 0 34px 58px;
}
.event:last-child{padding-bottom:0}
.event-dot{
  position:absolute;left:8px;top:2px;width:24px;height:24px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--gold-bright),var(--gold) 60%,#9A7420);
  box-shadow:0 0 16px rgba(212,169,55,.5);
  display:grid;place-items:center;font-size:11px;color:var(--maroon-deep);
}
.event-name{font-family:var(--serif);font-weight:600;font-size:23px;color:var(--cream)}
.event-when{font-size:13.5px;color:var(--gold-bright);margin-top:2px}
.event-where{font-size:13px;color:var(--gold-pale);opacity:.8;margin-top:2px}
.event-note{font-size:13.5px;color:var(--gold-pale);opacity:.7;margin-top:6px;font-style:italic;font-family:var(--serif);font-size:15px}

/* ============================================================
   STORY · VENUE · BLESSING
   ============================================================ */
.story-card{
  text-align:center;max-width:720px;margin:0 auto;padding:44px 34px;
  background:linear-gradient(180deg,rgba(255,246,232,.06),rgba(255,246,232,.02));
  border:1px solid rgba(212,169,55,.3);border-radius:20px;
}
.story-card .w-orn{margin-bottom:10px}
.story-text{font-family:var(--serif);font-size:19px;font-style:italic;color:var(--gold-pale);margin-top:14px;line-height:1.85}

.venue-card{
  text-align:center;max-width:560px;margin:0 auto;padding:40px 30px;
  background:linear-gradient(180deg,rgba(255,246,232,.07),rgba(255,246,232,.03));
  border:1px solid rgba(212,169,55,.4);border-radius:20px;
}
.venue-name{font-family:var(--serif);font-weight:600;font-size:26px;color:var(--cream)}
.venue-addr{font-size:14.5px;color:var(--gold-pale);opacity:.85;margin:8px 0 22px}

.bless{text-align:center;max-width:640px;margin:0 auto}
.bless-verse{font-family:'Noto Serif Telugu',var(--serif);font-size:clamp(19px,4.2vw,24px);color:var(--gold-bright);letter-spacing:.04em;font-weight:600}
.bless-text{font-size:15.5px;color:var(--gold-pale);opacity:.9;margin:16px 0 26px}

/* ============================================================
   BUTTONS
   ============================================================ */
.wbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-size:15px;font-weight:500;letter-spacing:.04em;
  padding:14px 30px;border-radius:999px;text-decoration:none;cursor:pointer;border:0;
  transition:transform .35s var(--ease),box-shadow .35s;
}
.wbtn svg{width:17px;height:17px;fill:currentColor}
.wbtn:active{transform:scale(.97)}
.wbtn-gold{
  background:linear-gradient(115deg,#B98F2C,var(--gold) 40%,var(--gold-bright) 60%,#B98F2C);
  color:var(--maroon-deep);
  box-shadow:0 10px 28px -10px rgba(212,169,55,.6);
}
.wbtn-gold:hover{transform:translateY(-2px);box-shadow:0 14px 34px -10px rgba(212,169,55,.7)}
.wbtn-maroon{
  background:linear-gradient(115deg,#8C1626,var(--kumkum));
  color:#FFF3F0;
  box-shadow:0 10px 28px -10px rgba(193,18,31,.55);
}
.wbtn-maroon:hover{transform:translateY(-2px);box-shadow:0 14px 34px -10px rgba(193,18,31,.65)}
.wbtn-maroon svg{fill:#25D366}

/* ============================================================
   FOOTER
   ============================================================ */
.w-foot{text-align:center;padding:0 0 44px}
.w-foot .thoranam{margin-bottom:38px}
.foot-names{font-size:30px;color:var(--cream)}
.foot-names .script{font-family:var(--script)}
.foot-made{font-size:12.5px;color:var(--gold-pale);opacity:.65;margin-top:10px}
.foot-made a{color:var(--gold-bright);text-decoration:none}

/* ============================================================
   EDITOR DOCK + PANEL + SHARE
   ============================================================ */
.dock{
  position:fixed;bottom:calc(14px + env(safe-area-inset-bottom, 0px));left:50%;transform:translateX(-50%);z-index:999;
  display:inline-flex;align-items:center;gap:8px;padding:6px 8px;border-radius:999px;
  background:rgba(28,4,9,.88);border:1px solid rgba(212,169,55,.45);
  backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  box-shadow:0 10px 32px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06) inset;
  max-width:calc(100vw - 24px);width:auto;
  transition:transform .3s cubic-bezier(.16,1,.3,1), opacity .3s ease;
}
.dock-btn{
  font-family:var(--sans);font-size:clamp(12px,3vw,13.5px);font-weight:500;color:#F8EDD9;
  background:rgba(255,255,255,.07);border:1px solid rgba(212,169,55,.28);border-radius:999px;
  padding:9px clamp(13px,3.5vw,18px);cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  transition:all .22s cubic-bezier(.16,1,.3,1);letter-spacing:.04em;
  -webkit-tap-highlight-color:transparent;
}
.dock-btn:hover,.dock-btn:active{background:rgba(212,169,55,.2);border-color:rgba(212,169,55,.6);color:#FFF;transform:translateY(-1px)}
.dock-share{
  background:linear-gradient(135deg,#D4A937 0%,#F5E298 50%,#B88928 100%);
  color:#38060E;font-weight:600;border:1px solid rgba(255,255,255,.6);
  box-shadow:0 4px 16px rgba(212,169,55,.32);
}
.dock-share:hover,.dock-share:active{
  background:linear-gradient(135deg,#DFB442 0%,#FAF0BA 50%,#C49533 100%);
  color:#240207;box-shadow:0 6px 20px rgba(212,169,55,.45);transform:translateY(-1px);
}

.panel-veil{position:fixed;inset:0;z-index:90;background:rgba(20,3,7,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.panel{
  position:fixed;top:0;right:0;bottom:0;z-index:95;width:min(430px,100vw);
  background:linear-gradient(180deg,#FFF9EF,#FBEED7);color:var(--ink);
  display:flex;flex-direction:column;
  box-shadow:-24px 0 60px rgba(0,0,0,.45);
}
.panel-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 24px;border-bottom:1px solid rgba(92,15,28,.15);
}
.panel-head h2{font-family:var(--serif);font-size:22px;color:var(--maroon)}
.panel-x{
  width:38px;height:38px;border-radius:50%;border:1px solid rgba(92,15,28,.2);
  background:transparent;color:var(--maroon);font-size:15px;cursor:pointer;
}
.panel-body{flex:1;overflow-y:auto;padding:22px 24px}
.panel-foot{padding:16px 24px;border-top:1px solid rgba(92,15,28,.15)}
.panel-foot .wbtn{width:100%}

.fgroup{margin-bottom:22px}
.fgroup>label{display:block;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--maroon);margin-bottom:8px}
.fgroup input,.fgroup textarea,.fgroup select{
  width:100%;font-family:var(--sans);font-size:15px;color:var(--ink);
  background:#fff;border:1px solid rgba(92,15,28,.22);border-radius:10px;
  padding:11px 14px;outline:none;transition:border-color .25s,box-shadow .25s;
}
.fgroup input:focus,.fgroup textarea:focus{border-color:var(--kumkum);box-shadow:0 0 0 3px rgba(193,18,31,.12)}
.fgroup textarea{resize:vertical;min-height:84px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fhint{font-size:12px;color:#9B6C55;margin-top:6px}

/* Side Selector Pills in Sample 1 */
.side-pills{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:6px}
.side-pill{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 12px;border:1px solid rgba(92,15,28,.25);border-radius:10px;
  background:#FFF;cursor:pointer;font-family:var(--sans);font-size:13.5px;font-weight:500;
  color:var(--ink);transition:all .2s ease;
}
.side-pill input{display:none}
.side-pill.is-active{
  background:linear-gradient(135deg,rgba(193,18,31,.12),rgba(212,169,55,.18));
  border-color:var(--kumkum);color:var(--maroon);font-weight:600;
  box-shadow:0 2px 8px rgba(193,18,31,.1);
}
.fsection{
  font-family:var(--serif);font-size:18px;font-weight:600;color:var(--maroon);
  border-bottom:1.5px solid rgba(212,169,55,.6);padding-bottom:6px;margin:26px 0 16px;
}
.event-editor{border:1px dashed rgba(92,15,28,.25);border-radius:12px;padding:14px;margin-bottom:14px;position:relative}
.event-editor .frow{margin-top:10px}
.ev-del{
  position:absolute;top:8px;right:8px;border:0;background:transparent;
  color:var(--kumkum);font-size:13px;cursor:pointer;font-weight:600;
}
.add-event{
  width:100%;border:1.5px dashed rgba(92,15,28,.3);background:transparent;
  color:var(--maroon);font-family:var(--sans);font-size:14px;font-weight:500;
  border-radius:12px;padding:12px;cursor:pointer;
}

.share-sheet{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:95;
  width:min(440px,calc(100vw - 32px));
  background:linear-gradient(180deg,#FFF9EF,#FBEED7);color:var(--ink);
  border-radius:22px;padding:34px 28px;text-align:center;
  box-shadow:0 40px 100px -20px rgba(0,0,0,.6);
}
.share-sheet h2{font-family:var(--serif);font-size:24px;color:var(--maroon);margin-bottom:8px}
.share-sheet .panel-x{position:absolute;top:14px;right:14px}
.share-note{font-size:13.5px;color:#7A5240;margin-bottom:18px}
.share-linkbox{display:flex;gap:8px;margin-bottom:14px}
.share-linkbox input{
  flex:1;min-width:0;font-size:12.5px;color:var(--ink);background:#fff;
  border:1px solid rgba(92,15,28,.22);border-radius:10px;padding:11px 12px;
}
.share-linkbox button{
  font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--maroon);
  background:rgba(212,169,55,.2);border:1px solid rgba(212,169,55,.5);
  border-radius:10px;padding:0 18px;cursor:pointer;
}
.share-sheet .wbtn{width:100%}
.share-upsell{font-size:12.5px;color:#7A5240;margin-top:16px}
.share-upsell a{color:var(--kumkum);font-weight:600;text-decoration:none;cursor:pointer}

/* ---------- publish sheet ---------- */
.publish-label{
  display:block;text-align:left;font-family:var(--sans);font-size:11.5px;
  font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:#7A5240;margin-bottom:7px;
}
/* Monospaced and letter-spaced because the code is read off a phone screen
   and typed into another one. "0" against "O" is the whole difference between
   a published wedding website and a customer who thinks we cheated them. */
.publish-input{
  width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* 16px is deliberate — anything smaller makes iOS Safari zoom the page in
     the moment the code is tapped. The letter-spacing is what gives, not the
     size: twenty monospaced characters plus .06em no longer fit inside the
     sheet on a 360 px phone, and a clipped placeholder hides the very format
     the customer is being asked to copy. */
  font-size:16px;letter-spacing:.01em;text-align:center;text-transform:uppercase;
  color:var(--ink);background:#fff;border:1px solid rgba(92,15,28,.22);
  border-radius:12px;padding:13px 8px;margin-bottom:14px;
}
.publish-input:focus{outline:none;border-color:var(--kumkum);box-shadow:0 0 0 3px rgba(212,169,55,.22)}
.publish-status{
  font-size:13px;line-height:1.6;margin-top:12px;min-height:1.2em;color:#7A5240;
}
.publish-status.is-error{color:var(--kumkum)}
.publish-status.is-warn{color:#8A5A12}
.publish-ghost{
  display:block;width:100%;margin-top:12px;font-family:var(--sans);font-size:13px;
  color:var(--maroon);background:none;border:none;text-decoration:underline;cursor:pointer;
}
.wbtn[disabled],.publish-ghost[disabled]{opacity:.55;cursor:default}

/* ============================================================
   EXPIRED
   ============================================================ */
.expired{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;
  background:radial-gradient(120% 60% at 50% 0%,#7A1626 0%,var(--maroon) 42%,var(--maroon-deep) 100%);
}
.expired-card{text-align:center;max-width:520px}
.expired .om{font-size:40px;color:var(--gold-bright);display:block;margin-bottom:18px;text-shadow:0 0 24px rgba(242,204,107,.5)}
.expired-names{font-family:var(--script);font-weight:400;font-size:52px;color:var(--cream);margin-bottom:16px}
.expired-note{font-family:var(--serif);font-size:18px;font-style:italic;color:var(--gold-pale);line-height:1.8}
.expired-blessing{font-size:14px;color:var(--gold-pale);opacity:.8;margin:16px 0 28px}

/* ============================================================
   FESTIVITIES — sealed cards on the timeline
   ============================================================ */
.fest-row{display:flex;gap:16px;align-items:flex-start;justify-content:space-between}
.fest-info{flex:1;min-width:0}
.fest-card{
  flex:0 0 auto;position:relative;width:96px;height:128px;border-radius:12px;
  overflow:hidden;cursor:pointer;padding:0;border:2px solid var(--fa,#C8A253);
  background:#2A0A0A;box-shadow:0 10px 26px -10px rgba(0,0,0,.55);
  transition:transform .35s var(--ease),box-shadow .35s;
  -webkit-user-select:none;user-select:none;
}
.fest-card:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 16px 34px -10px rgba(0,0,0,.6)}
.fest-card:active{transform:scale(.97)}
.fest-art{position:absolute;inset:0}
.fest-art svg{width:100%;height:100%;display:block}
.fest-card::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:46%;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.62));pointer-events:none;
}
.fest-hint{
  position:absolute;left:4px;right:4px;bottom:7px;z-index:2;
  font-size:8.5px;font-weight:600;letter-spacing:.16em;color:#FFF3DA;
  text-shadow:0 1px 4px rgba(0,0,0,.7);animation:hint-pulse 2.2s ease-in-out infinite;
}
@keyframes hint-pulse{0%,100%{opacity:.85}50%{opacity:.45}}

/* ============================================================
   FESTIVITY MODAL — the sealed invitation card
   ============================================================ */
.fest-modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:14px}
.fest-veil{
  position:absolute;inset:0;background:rgba(18,3,7,.74);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.fest-dialog{
  position:relative;width:min(400px,100%);max-height:94vh;overflow-y:auto;
  border-radius:22px;padding:10px 10px 16px;
  background:linear-gradient(180deg,var(--fc,#7D2727),var(--fa,#C8A253));
  box-shadow:0 44px 110px -20px rgba(0,0,0,.7);
}
.fest-x{
  position:absolute;top:12px;right:12px;z-index:30;width:36px;height:36px;border-radius:50%;
  border:0;background:rgba(0,0,0,.45);color:#fff;font-size:14px;cursor:pointer;
}
.fest-x:hover{background:rgba(0,0,0,.65)}
.fest-chip{
  position:absolute;top:15px;left:14px;z-index:30;padding:6px 14px;border-radius:999px;
  background:rgba(0,0,0,.42);color:var(--gold-pale);font-size:10.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
}
.fest-paper{
  position:relative;background:#FDF6E3;border:2px solid var(--fa,#C8A253);
  border-radius:14px;padding:34px 22px 28px;text-align:center;color:#7D2727;
  min-height:440px;display:flex;flex-direction:column;justify-content:center;overflow:hidden;
}
.fp-dot{position:absolute;top:10px;width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--fc,#7D2727),var(--fa,#C8A253))}
.fp-dot.l{left:10px}.fp-dot.r{right:10px}
.fp-pre{font-family:var(--serif);font-style:italic;font-size:15px;color:#7D2727}
.fp-name{font-family:var(--script);font-weight:400;font-size:clamp(40px,11vw,56px);color:var(--fa,#C8A253);line-height:1.15;margin:6px 0 2px}
.fp-tag{font-size:11px;letter-spacing:.3em;text-transform:uppercase;font-weight:600;margin-bottom:4px}
.fp-rule{display:flex;align-items:center;justify-content:center;gap:8px;margin:14px 0}
.fp-rule i{display:block;height:1px;width:58px;background:#C8A253}
.fp-rule b{display:block;width:7px;height:7px;background:#C8A253;transform:rotate(45deg)}
.fp-sub{font-family:var(--serif);font-style:italic;font-size:16.5px;line-height:1.6;color:#8A3B2A}
.fp-facts{margin-top:18px}
.fp-when{font-family:var(--serif);font-size:21px;font-weight:600}
.fp-where{font-size:13.5px;color:#8A5B3A;margin-top:4px}
.fp-dress{font-size:12.5px;color:#8A5B3A;margin-top:12px;letter-spacing:.04em}
.fp-dress b{color:#7D2727}
.fp-bless{font-family:var(--serif);font-style:italic;font-size:14.5px;color:#A06A3C;margin-top:20px}

/* ---------- interaction overlays ---------- */
.fest-overlay{
  position:absolute;inset:0;z-index:20;border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity .6s var(--ease);
}
.fest-overlay.gone{opacity:0;pointer-events:none}
.ov-hint{
  position:absolute;left:12px;right:12px;bottom:14px;text-align:center;pointer-events:none;
  font-size:10.5px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  animation:hint-pulse 2s ease-in-out infinite;
}
.ov-rub{cursor:grab}
.ov-rub:active{cursor:grabbing}
.ov-rub canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.ov-rub .ov-hint{color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.35)}
.ov-rub.rubbed .ov-hint{opacity:0;animation:none;transition:opacity .4s}
.ov-trace{background:#FDF6E3}
.ov-trace svg{width:min(240px,72%);aspect-ratio:1;touch-action:none;cursor:crosshair}
.ov-trace .ov-hint{color:rgba(125,39,39,.72)}
.ov-tap{background:linear-gradient(180deg,#C73030 0%,#8B0000 100%)}
.ov-tap .ov-hint{color:#FFE2B8}
.dhol-btn{background:transparent;border:0;cursor:pointer;transition:transform .14s ease;padding:0}
.dhol-btn.hit{transform:scale(.93)}
.beat-dots{display:flex;gap:9px;margin-top:10px}
.beat-dots i{width:10px;height:10px;border-radius:50%;border:1.5px solid #FFD9A0;transition:background .2s}
.beat-dots i.on{background:#FFD9A0;box-shadow:0 0 8px rgba(255,217,160,.8)}
.ov-light{background:linear-gradient(180deg,#4A1010 0%,#1A0505 100%)}
.ov-light .ov-hint{color:#F7C97E}
.diya-btn{background:transparent;border:0;cursor:pointer;padding:0;transition:transform .3s var(--ease)}
.diya-btn:hover{transform:scale(1.05)}
.diya-flame,.diya-glow{opacity:0;transition:opacity .55s ease}
.diya-flame{transform-box:fill-box;transform-origin:50% 92%;transform:scale(.2)}
.ov-light.lit .diya-flame{opacity:1;transform:scale(1);animation:flame-flick .3s ease-in-out infinite alternate}
.ov-light.lit .diya-glow{opacity:1}
@keyframes flame-flick{from{transform:scale(1)}to{transform:scale(1.07) translateY(-2px)}}

/* petal burst inside the modal */
.petal-burst{
  position:absolute;left:50%;top:44%;z-index:25;pointer-events:none;
  border-radius:62% 38% 58% 42%/68% 32% 66% 34%;
}

/* ============================================================
   TEMPLE BELL
   ============================================================ */
.bell{
  background:transparent;border:0;cursor:pointer;padding:6px;margin-bottom:2px;
  transform-origin:50% 4px;display:inline-block;
}
.bell svg{width:64px;height:auto;display:block;filter:drop-shadow(0 6px 16px rgba(212,169,55,.35))}
.bell-body{fill:#D4A937}
.bell-loop{fill:#9A7420}
.bell-lip{fill:#B98F2C}
.bell-clapper{fill:#F2CC6B}
.bell.ringing{animation:bell-swing 1.5s var(--ease)}
@keyframes bell-swing{
  0%{transform:rotate(0)}14%{transform:rotate(16deg)}32%{transform:rotate(-12deg)}
  52%{transform:rotate(8deg)}72%{transform:rotate(-4deg)}100%{transform:rotate(0)}
}
.bell-cap{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-pale);opacity:.75;margin-bottom:22px}

/* ============================================================
   VENUE ACTIONS + OUTLINE BUTTON
   ============================================================ */
.venue-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.wbtn-line{
  background:transparent;border:1.5px solid rgba(212,169,55,.55);color:var(--gold-pale);
}
.wbtn-line:hover{transform:translateY(-2px);border-color:var(--gold-bright);color:var(--gold-bright)}

/* ============================================================
   AMBIENT FLOATING PETALS
   ============================================================ */
.petal-layer{position:fixed;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.petal{
  position:absolute;top:-6vh;left:var(--l);width:var(--s);height:calc(var(--s)*1.3);
  background:linear-gradient(135deg,#FFB100,#FF8A2E 55%,#E07000);
  border-radius:62% 38% 58% 42%/68% 32% 66% 34%;
  opacity:var(--o);will-change:transform;
  animation:petal-fall var(--d) linear var(--del) infinite;
}
@keyframes petal-fall{
  0%{transform:translate3d(0,-8vh,0) rotate(0deg)}
  100%{transform:translate3d(var(--sway),112vh,0) rotate(var(--spin))}
}

/* ============================================================
   LANDING — the DeepDreams Weddings dashboard
   ============================================================ */
body.landing #invitation{display:none}
.landing{position:relative;z-index:5;min-height:100vh;display:flex;flex-direction:column}
.ld-nav{display:flex;align-items:center;justify-content:space-between;padding:20px min(5vw,34px)}
.ld-brand{font-family:var(--serif);font-weight:600;font-size:20px;color:var(--cream)}
.ld-brand em{font-family:var(--script);font-style:normal;color:var(--gold-bright);font-size:25px;font-weight:400}
.ld-cta{font-size:13.5px;color:var(--maroon-deep);background:linear-gradient(115deg,#B98F2C,var(--gold-bright));padding:9px 20px;border-radius:999px;text-decoration:none;font-weight:600}
.ld-hero{flex:1;text-align:center;padding:44px 22px 70px;max-width:1000px;margin:0 auto;width:100%}
.ld-eyebrow{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-pale);opacity:.85}
.ld-title{font-family:var(--serif);font-weight:600;font-size:clamp(38px,7vw,64px);color:var(--cream);margin:16px 0 14px;line-height:1.12}
.ld-title em{font-family:var(--script);font-style:normal;font-weight:400;color:var(--gold-bright);font-size:1.1em}
.ld-sub{max-width:600px;margin:0 auto 30px;font-size:16.5px;color:var(--gold-pale);opacity:.9}
.ld-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.ld-note{margin-top:16px;font-size:12.5px;color:var(--gold-pale);opacity:.65;letter-spacing:.06em}
.ld-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:56px;text-align:left}
.ld-card{padding:22px;border-radius:16px;background:linear-gradient(180deg,rgba(255,246,232,.06),rgba(255,246,232,.02));border:1px solid rgba(212,169,55,.3)}
.ld-card span{font-size:24px}
.ld-card h3{font-family:var(--serif);font-size:19px;color:var(--cream);margin:8px 0 4px}
.ld-card p{font-size:13.5px;color:var(--gold-pale);opacity:.85;line-height:1.6}
.ld-foot{text-align:center;padding:26px;font-size:12.5px;color:var(--gold-pale);opacity:.6}

/* ============================================================
   TAP-TO-OPEN COVER — golden temple doors
   ============================================================ */
.cover{
  position:fixed;inset:0;z-index:150;display:flex;
  perspective:1400px;perspective-origin:50% 50%;overflow:hidden;
  background:#1A0306;
}
.cover[hidden]{display:none}
.cover.opening{pointer-events:none}

.cover-door{
  position:relative;flex:1;height:100%;overflow:hidden;
  transform-style:preserve-3d;backface-visibility:hidden;
  background:
    linear-gradient(180deg,rgba(90,20,30,.15) 0%,transparent 30%,transparent 70%,rgba(90,20,30,.15) 100%),
    radial-gradient(ellipse at 60% 40%,#6E1222 0%,#481018 45%,#280810 100%);
  box-shadow:inset 0 0 60px rgba(0,0,0,.7);
}
.cover-door.l{
  transform-origin:left center;
  border-right:5px solid #C9A23A;
  box-shadow:inset -30px 0 50px rgba(0,0,0,.85),inset 0 0 60px rgba(212,169,55,.2);
}
.cover-door.r{
  transform-origin:right center;
  border-left:5px solid #C9A23A;
  box-shadow:inset 30px 0 50px rgba(0,0,0,.85),inset 0 0 60px rgba(212,169,55,.2);
}
/* Wood grain pattern */
.cover-door::before{
  content:"";position:absolute;inset:0;opacity:.35;
  background-image:
    repeating-linear-gradient(90deg,rgba(212,169,55,.08) 0px,transparent 2px,transparent 18px),
    repeating-linear-gradient(0deg,rgba(0,0,0,.05) 0px,transparent 1px,transparent 8px);
  background-size:20px 20px, 10px 10px;
}
/* Inset panel frame */
.door-panel{
  position:absolute;inset:clamp(18px,4.5vw,32px);border:3px double rgba(212,169,55,.5);
  border-radius:10px;box-shadow:inset 0 0 40px rgba(0,0,0,.6),0 0 8px rgba(212,169,55,.15);
}
/* Brass ring handles — scaled and repositioned for phone proportions */
.door-handle{
  position:absolute;top:50%;transform:translateY(-50%);z-index:10;
  width:clamp(38px,10vw,56px);height:clamp(38px,10vw,56px);border-radius:50%;
  background:radial-gradient(circle at 38% 35%,#F7D96B 0%,#C9A23A 55%,#7A5C14 100%);
  box-shadow:0 6px 20px rgba(0,0,0,.65),inset 0 2px 6px rgba(255,255,255,.5);
  display:grid;place-items:center;
}
.cover-door.l .door-handle{right:clamp(12px,3vw,20px)}
.cover-door.r .door-handle{left:clamp(12px,3vw,20px)}
.handle-ring{
  width:60%;height:60%;border-radius:50%;
  border:clamp(2.5px,0.65vw,3.5px) solid #F7D96B;
  box-shadow:0 3px 8px rgba(0,0,0,.5),inset 0 1px 3px rgba(255,255,255,.3);
}
/* Gold seam between doors */
.door-seam{
  position:absolute;top:0;bottom:0;width:5px;
  background:linear-gradient(180deg,transparent 5%,rgba(212,169,55,.85) 15%,rgba(242,204,107,.95) 50%,rgba(212,169,55,.85) 85%,transparent 95%);
}
.cover-door.l .door-seam{right:0}
.cover-door.r .door-seam{left:0}

/* ---- 3D door swing animation ---- */
/* Shadow sweep as doors open */
.cover-door::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent 10%,rgba(8,1,3,.92));
}
.cover-door.r::after{background:linear-gradient(270deg,transparent 10%,rgba(8,1,3,.92))}

/* Trigger animations */
.cover.opening .cover-door.l{animation:doorSwingL 2.8s cubic-bezier(.22,.95,.35,1) forwards}
.cover.opening .cover-door.r{animation:doorSwingR 2.8s cubic-bezier(.22,.95,.35,1) forwards}
.cover.opening .cover-door::after{animation:doorShadow 2.8s cubic-bezier(.22,.95,.35,1) forwards}

/* Left door: slight pull-back (unlatch), then full swing open with recoil bounce */
@keyframes doorSwingL{
  0%  {transform:rotateY(0deg)}
  6%  {transform:rotateY(3deg)}       /* door pulls inward slightly — unlatch */
  12% {transform:rotateY(-12deg)}     /* starts swinging outward */
  55% {transform:rotateY(-115deg)}    /* main swing */
  72% {transform:rotateY(-105deg)}    /* bounce back (heavy door recoil) */
  85% {transform:rotateY(-112deg)}    /* settles */
  100%{transform:rotateY(-112deg);opacity:0}
}
/* Right door mirrors left */
@keyframes doorSwingR{
  0%  {transform:rotateY(0deg)}
  6%  {transform:rotateY(-3deg)}
  12% {transform:rotateY(12deg)}
  55% {transform:rotateY(115deg)}
  72% {transform:rotateY(105deg)}
  85% {transform:rotateY(112deg)}
  100%{transform:rotateY(112deg);opacity:0}
}
/* Shadow sweep during opening */
@keyframes doorShadow{
  0%{opacity:0}
  12%{opacity:.1}
  55%{opacity:.65}
  100%{opacity:.9}
}

/* ---- knock shudder: the doors vibrate as if struck, before opening ---- */
.cover.knocked .cover-door.l{animation:doorKnockL .42s cubic-bezier(.36,.07,.19,.97)}
.cover.knocked .cover-door.r{animation:doorKnockR .42s cubic-bezier(.36,.07,.19,.97)}
.cover.knocked .cover-center{animation:sealKnock .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes doorKnockL{
  0%{transform:rotateY(0)}
  18%{transform:rotateY(2.4deg) translateX(2px)}
  38%{transform:rotateY(-1.6deg) translateX(-1px)}
  58%{transform:rotateY(1deg)}
  78%{transform:rotateY(-.5deg)}
  100%{transform:rotateY(0)}
}
@keyframes doorKnockR{
  0%{transform:rotateY(0)}
  18%{transform:rotateY(-2.4deg) translateX(-2px)}
  38%{transform:rotateY(1.6deg) translateX(1px)}
  58%{transform:rotateY(-1deg)}
  78%{transform:rotateY(.5deg)}
  100%{transform:rotateY(0)}
}
@keyframes sealKnock{
  0%{transform:translate(0,0)}
  20%{transform:translate(1px,2px)}
  40%{transform:translate(-1px,-1px)}
  60%{transform:translate(1px,1px)}
  100%{transform:translate(0,0)}
}

/* Poster card container & live overlay styling */
.poster-card-container{
  position:relative;border-radius:20px;overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,0.65);border:3px solid #D4A937;
  background:#2E070D;margin:16px auto 0;max-width:880px;
}
.poster-card-img{width:100%;display:block}
.poster-img-wrap{position:relative;container-type:inline-size}

/* ============================================================
   PER-POSTER OVERLAYS — pixel-precise to each reference image
   All positions are percentages relative to the poster image.
   ============================================================ */

/* --- Shared overlay base --- */
.poster-overlay{position:absolute;inset:0;pointer-events:none}

/* === WELCOME POSTER ===
   Clean image: garlands y:0-14%, couple on LEFT (x:0-44%), empty parchment on RIGHT (x:45-98%).
   Top intro heading: centered horizontally across width (y:14.5-24%).
   Names & Details block: right side (x:45-97%), y:29-69%.
   ========================================= */
.ov-welcome .ov-together,
.ov-welcome .ov-lovefam,
.ov-welcome .ov-request {
  position:absolute;left:10%;width:80%;text-align:center;line-height:1.15;
}

.ov-welcome .ov-together{
  top:14.5%;font-family:var(--script);font-size:clamp(16px,4.2cqi,28px);color:#5C3A1A;
}
.ov-welcome .ov-lovefam{
  top:18.0%;font-family:var(--script);font-size:clamp(22px,6.0cqi,44px);font-weight:700;color:#7D1D1D;
}
.ov-welcome .ov-request{
  top:23.5%;font-family:var(--serif);font-size:clamp(11px,2.8cqi,18px);color:#5C3A1A;font-style:italic;
}

.ov-welcome .ov-bride-parents,
.ov-welcome .ov-amp,
.ov-welcome .ov-groom-parents,
.ov-welcome .ov-celebration,
.ov-welcome .ov-time,
.ov-welcome .ov-date,
.ov-welcome .ov-venue,
.ov-welcome .ov-city {
  position:absolute;left:43%;width:55%;text-align:center;line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.ov-welcome .ov-bride,
.ov-welcome .ov-groom {
  position:absolute;left:42%;width:57%;text-align:center;
  line-height:1.35;overflow:visible;white-space:nowrap;
  padding-top:4px;
}

.ov-welcome .ov-bride{
  top:28.0%;font-family:var(--script);
  font-size:clamp(20px, min(8.2cqi, calc(96cqi / var(--name-len, 8))), 58px);
  color:#7D1D1D;
}
.ov-welcome .ov-bride-parents{
  top:35.2%;font-family:var(--serif);
  font-size:clamp(7.5px, min(2.1cqi, calc(48cqi / var(--parent-len, 25))), 13.5px);
  color:#4A2810;
}
.ov-welcome .ov-amp{
  top:39.5%;font-family:var(--script);font-size:clamp(18px,5cqi,38px);color:#7D1D1D;font-weight:700;
}
.ov-welcome .ov-groom{
  top:43.2%;font-family:var(--script);
  font-size:clamp(20px, min(8.2cqi, calc(96cqi / var(--name-len, 8))), 58px);
  color:#7D1D1D;
}
.ov-welcome .ov-groom-parents{
  top:50.4%;font-family:var(--serif);
  font-size:clamp(7.5px, min(2.1cqi, calc(48cqi / var(--parent-len, 25))), 13.5px);
  color:#4A2810;
}
.ov-welcome .ov-celebration{
  top:55.4%;font-family:var(--serif);font-style:italic;font-size:clamp(9px,2.2cqi,15px);color:#5C3A1A;
}
.ov-welcome .ov-time{
  top:60.2%;font-family:var(--sans);font-weight:600;font-size:clamp(8.5px,2.2cqi,15px);color:#3A1010;
}
.ov-welcome .ov-date{
  top:63.0%;font-family:var(--sans);font-weight:600;font-size:clamp(8.5px,2.2cqi,15px);color:#3A1010;
}
.ov-welcome .ov-venue{
  top:65.8%;font-family:var(--sans);font-weight:600;
  font-size:clamp(7.5px, min(2.2cqi, calc(48cqi / var(--venue-len, 25))), 15px);
  color:#3A1010;
}
.ov-welcome .ov-city{
  top:68.6%;font-family:var(--serif);font-size:clamp(8.5px,2cqi,13px);color:#4A2810;
}
.ov-welcome .ov-banner{
  position:absolute;bottom:0;left:0;right:0;height:4%;
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(7.5px,1.8cqi,11px);font-weight:700;letter-spacing:.22em;
  color:#5C3A1A;
}

/* Floating demo CTA chip */
.demo-chip {
  position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%);
  z-index: 75; display: inline-flex; align-items: center; justify-content: center;
  padding: 7px 18px; border-radius: 999px; text-decoration: none;
  background: linear-gradient(135deg, rgba(62, 8, 18, 0.94), rgba(30, 4, 9, 0.96));
  border: 1.5px solid rgba(212, 169, 55, 0.55);
  color: var(--gold-pale); font-family: var(--sans); font-size: 12px; font-weight: 500;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  white-space: nowrap; transition: transform .3s var(--ease), border-color .3s;
}
.demo-chip:hover {
  transform: translateX(-50%) translateY(-2px);
  border-color: var(--gold-bright); color: #fff;
}
.demo-chip b {
  font-weight: 500; color: var(--gold-bright);
}

/* === NICHAYATHARTHAM POSTER ===
   Clean image: garlands y:0-16.9%, family y:28-78%, ornate bottom y:82-92%.
   Title centered in cream zone (16.9+28)/2 = 22.4%.
   Bar centered in ornate zone (82+92)/2 = 87%.
   ========================================= */
.ov-nichayathartham .ov-line{position:absolute;left:10%;width:80%;text-align:center;line-height:1.15}

.ov-nichayathartham .ov-title{
  top:18.5%;font-family:var(--script);font-size:clamp(26px,7cqi,48px);color:#7D1D1D;
  overflow:visible;line-height:1.3;
}
.ov-nichayathartham .ov-desc1{
  top:24.0%;font-family:var(--serif);font-size:clamp(8.5px,2.1cqi,13.5px);color:#4A2810;
}
.ov-nichayathartham .ov-desc2{
  top:26.3%;font-family:var(--serif);font-size:clamp(8.5px,2.1cqi,13.5px);color:#4A2810;font-weight:600;
}
.ov-nichayathartham .ov-bar{
  position:absolute;top:85.5%;left:5%;right:5%;
  display:flex;justify-content:space-around;align-items:center;text-align:center;
}
.ov-nichayathartham .ov-bar-col{width:30%}
.ov-nichayathartham .ov-bar-label{
  font-family:var(--sans);font-size:clamp(6.5px,1.4cqi,9px);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#5C3A1A;margin-bottom:1px;
}
.ov-nichayathartham .ov-bar-val{
  font-family:var(--serif);font-size:clamp(9.5px,2.3cqi,15px);font-weight:700;color:#3A1010;
}

/* === HALDI POSTER ===
   Clean image: arch garlands y:0-7.5%, gold arch peak at 11%,
   open cream space y:11.5-44%, kids' hair start at 45.6%.
   ========================================= */
.ov-haldi .ov-line{position:absolute;left:15%;width:70%;text-align:center;line-height:1.15}

.ov-haldi .ov-invite-text{
  top:13.0%;font-family:var(--script);font-size:clamp(11px,2.8cqi,18px);color:#5C6B2A;font-style:italic;
}
.ov-haldi .ov-title{
  top:16.8%;font-family:var(--script);font-size:clamp(28px,7.5cqi,52px);color:#B8860B;
  overflow:visible;line-height:1.3;
}
.ov-haldi .ov-ceremony{
  top:23.5%;font-family:var(--sans);font-size:clamp(9px,2.4cqi,16px);font-weight:700;
  letter-spacing:.25em;text-transform:uppercase;color:#5C6B2A;
}
.ov-haldi .ov-divider{
  top:26.5%;left:25%;width:50%;height:0;
  border-top:1.5px solid #B8860B;opacity:.5;
}
.ov-haldi .ov-person{
  top:28.5%;font-family:var(--script);
  font-size:clamp(14px, min(4.6cqi, calc(72cqi / var(--person-len, 15))), 32px);
  color:#5C3A1A;white-space:nowrap;overflow:visible;line-height:1.3;
}
.ov-haldi .ov-time{
  top:33.5%;font-family:var(--sans);font-weight:700;font-size:clamp(8.5px,2.0cqi,13px);
  letter-spacing:.12em;text-transform:uppercase;color:#5C3A1A;
}
.ov-haldi .ov-day{
  top:36.2%;font-family:var(--serif);font-weight:700;font-size:clamp(13px,3.2cqi,22px);color:#B8860B;
}
.ov-haldi .ov-venue{
  top:40.0%;font-family:var(--serif);
  font-size:clamp(7.5px, min(2.0cqi, calc(50cqi / var(--venue-len, 25))), 13px);
  color:#5C3A1A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ov-haldi .ov-banner{
  position:absolute;bottom:0;left:0;right:0;height:4%;
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(7.5px,1.8cqi,11px);font-weight:700;letter-spacing:.2em;
  color:#5C3A1A;
}

/* === MUHURTHAM POSTER ===
   Clean image: garlands y:0-14.3%, cream y:14.3-24%, couple y:24-69%,
   scroll parchment box y:70-88%, offerings y:88-100%.
   Title: top cream space y:17.0% (large script).
   Scroll box contents: desc-pre y:71.5%, desc-sub y:75.5%, bar y:81.2%.
   ========================================= */
.ov-muhurtham .ov-line{position:absolute;left:8%;width:84%;text-align:center;line-height:1.15}

.ov-muhurtham .ov-title{
  top:17.0%;font-family:var(--script);font-size:clamp(32px,8.5cqi,60px);color:#7D1D1D;line-height:1.1;
}
.ov-muhurtham .ov-desc-pre{
  top:71.5%;font-family:var(--serif);font-size:clamp(12px,3.2cqi,22px);color:#5C3A1A;
}
.ov-muhurtham .ov-desc-sub{
  top:75.5%;font-family:var(--serif);font-style:italic;font-size:clamp(12px,3.2cqi,22px);color:#5C3A1A;
}
.ov-muhurtham .ov-bar{
  position:absolute;top:81.2%;left:5%;right:5%;
  display:flex;justify-content:space-around;align-items:center;text-align:center;
}
.ov-muhurtham .ov-bar-col{width:30%}
.ov-muhurtham .ov-bar-label{
  font-family:var(--sans);font-size:clamp(6.5px,1.4cqi,9px);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#5C3A1A;margin-bottom:1px;
}
.ov-muhurtham .ov-bar-val{
  font-family:var(--serif);font-size:clamp(9.5px,2.3cqi,15px);font-weight:700;color:#3A1010;
}

/* === RECEPTION POSTER ===
   Clean image: garlands y:0-15.0%, cream y:15.0-26.7%, couple+musicians y:26.7-78.1%,
   lower cream scroll area y:78.1-87.9%, offerings y:87.9-100%.
   Title centered in cream zone (15+26.7)/2 = 20.8%.
   Bar centered in scroll zone (78.1+87.9)/2 = 83%.
   ========================================= */
.ov-reception .ov-line{position:absolute;left:8%;width:84%;text-align:center;line-height:1.15}

.ov-reception .ov-title{
  top:19.0%;font-family:var(--script);font-size:clamp(26px,7cqi,48px);color:#7D1D1D;line-height:1.1;
}
.ov-reception .ov-desc1{
  top:24.5%;font-family:var(--serif);font-style:italic;font-size:clamp(8.5px,2.1cqi,13.5px);color:#5C3A1A;
}
.ov-reception .ov-desc2{
  top:27.0%;font-family:var(--serif);font-style:italic;font-weight:700;font-size:clamp(8.5px,2.1cqi,13.5px);color:#5C3A1A;
}
.ov-reception .ov-bar{
  position:absolute;top:82.0%;left:5%;right:5%;
  display:flex;justify-content:space-around;align-items:center;text-align:center;
}
.ov-reception .ov-bar-col{width:30%}
.ov-reception .ov-bar-label{
  font-family:var(--sans);font-size:clamp(6.5px,1.4cqi,9px);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#5C3A1A;margin-bottom:1px;
}
.ov-reception .ov-bar-val{
  font-family:var(--serif);font-size:clamp(9.5px,2.3cqi,15px);font-weight:700;color:#3A1010;
}
.ov-reception .ov-banner{
  position:absolute;bottom:0;left:0;right:0;height:3.5%;
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(7px,1.6cqi,10.5px);font-weight:700;letter-spacing:.2em;
  color:#5C3A1A;
}

.poster-card-actions{
  display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:14px;
  background:rgba(20,3,6,0.95);border-top:1px solid rgba(212,169,55,0.4);
}
.pca-btn{
  background:rgba(255,246,232,0.12);border:1.5px solid rgba(212,169,55,0.6);
  color:var(--gold-pale);font-family:var(--sans);font-size:12.5px;font-weight:600;
  padding:8px 18px;border-radius:999px;cursor:pointer;transition:all .25s var(--ease);
  display:inline-flex;align-items:center;gap:6px;
}
.pca-btn:hover{background:var(--gold);color:var(--maroon-deep);border-color:var(--gold-bright);transform:translateY(-2px)}
.pca-btn.primary{background:linear-gradient(115deg,#B98F2C,var(--gold-bright));color:var(--maroon-deep);border-color:transparent}

/* AI Prompt Generator Modal */
.prompt-modal{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:300;
  width:min(92vw,600px);max-height:90vh;overflow-y:auto;
  background:radial-gradient(circle at 50% 0%,#4D0E19 0%,#2E070D 100%);
  border:2px solid var(--gold);border-radius:20px;padding:28px 24px;
  box-shadow:0 24px 80px rgba(0,0,0,0.85);color:var(--cream);
}
.prompt-badge{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gold-bright);background:rgba(212,169,55,0.15);
  padding:4px 12px;border-radius:999px;border:1px solid rgba(212,169,55,0.3);margin-bottom:8px;
}
.prompt-modal-header h2{font-family:var(--serif);font-size:24px;color:var(--gold-bright);margin-bottom:6px}
.prompt-modal-header p{font-size:13px;color:var(--gold-pale);opacity:.85;line-height:1.5;margin-bottom:20px}
.prompt-field-group{margin-bottom:16px;text-align:left}
.prompt-field-group label{display:block;font-size:12.5px;font-weight:600;color:var(--gold-pale);margin-bottom:6px}
.prompt-select,.prompt-input{
  width:100%;padding:10px 14px;border-radius:10px;background:rgba(10,2,4,0.6);
  border:1px solid rgba(212,169,55,0.4);color:var(--cream);font-family:var(--sans);font-size:13.5px;
}
.prompt-select option{background:#2E070D;color:var(--cream)}
.prompt-output-box{margin-top:20px;background:rgba(0,0,0,0.4);border:1px solid rgba(212,169,55,0.3);border-radius:12px;padding:14px;text-align:left}
.prompt-output-box label{display:block;font-size:12px;font-weight:700;color:var(--gold-bright);margin-bottom:8px}
.prompt-textarea{
  width:100%;height:130px;background:rgba(15,3,6,0.8);border:1px solid rgba(212,169,55,0.3);
  border-radius:8px;color:#FFF;font-family:var(--sans);font-size:13px;line-height:1.5;padding:10px 12px;resize:vertical;
}
.prompt-actions-row{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.prompt-guide-box{margin-top:20px;background:rgba(212,169,55,0.08);border:1px dashed rgba(212,169,55,0.35);border-radius:12px;padding:14px 16px;text-align:left}
.prompt-guide-box h4{font-size:13px;color:var(--gold-bright);margin-bottom:8px}
.prompt-guide-box ol{font-size:12.5px;color:var(--gold-pale);padding-left:18px;line-height:1.6}
.cover-garland{
  position:absolute;top:0;left:0;right:0;height:46px;z-index:45;pointer-events:none;
  background:
    radial-gradient(10px 10px at 14px 30px,#F5A623 62%,transparent 68%),
    radial-gradient(12px 12px at 46px 36px,#E8890C 62%,transparent 68%),
    radial-gradient(9px 9px at 78px 27px,#F5A623 62%,transparent 68%),
    radial-gradient(11px 11px at 110px 34px,#E8890C 62%,transparent 68%);
  background-size:128px 46px;background-repeat:repeat-x;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.3));
}
.cover-garland::before{
  content:"";position:absolute;top:0;left:0;right:0;height:26px;
  background:repeating-linear-gradient(90deg,transparent 0 15px,rgba(60,20,0,.4) 15px 16px,transparent 16px 32px);
}

/* Realistic Envelope Flap (Top Triangular Fold) */
/* Decorative arch header — painted arch with gold trim sits at the top of the
   doors like a carved Mughal torana. On small phones the old CSS-triangle
   "envelope flap" ate a third of the viewport and dominated the seal. */
.cover::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: clamp(14px, 4.5vw, 28px);
  background: linear-gradient(180deg, rgba(200,160,40,.22) 0%, transparent 100%);
  z-index: 46; pointer-events: none;
}

.cover.opening::before {
  opacity: 0;
  transition: opacity .5s;
}

.cover-center{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:40;
  text-align:center;cursor:pointer;-webkit-user-select:none;user-select:none;
  /* Give the seal and names breathing room on narrow screens so they don't
     feel cramped against the door edges. */
  max-width:min(320px,82vw);
}
.seal{
  display:grid;place-items:center;
  width:clamp(108px,28vw,148px);height:clamp(108px,28vw,148px);
  margin:0 auto;border-radius:50%;
  overflow:hidden;border:clamp(3px,0.8vw,5px) solid #E8C46C;
  background:radial-gradient(circle at 35% 30%,#D4A937 0%,#B88A22 45%,#7D5710 100%);
  box-shadow:
    0 14px 44px rgba(0,0,0,.65),
    inset 0 2px 10px rgba(255,255,255,.6),
    inset 0 -6px 14px rgba(0,0,0,.5),
    0 0 0 clamp(6px,1.8vw,10px) rgba(212,169,55,.25);
  animation:seal-pulse 2.4s ease-in-out infinite;
  position:relative;
}
.seal::before {
  content: ""; position: absolute; inset: clamp(4px,1.2vw,8px); border-radius: 50%;
  border: 1.5px dashed rgba(255,245,200,.6);
  pointer-events: none;
}
.seal img{width:100%;height:100%;object-fit:cover;display:block}
.seal-mono{font-family:var(--serif);font-weight:700;font-size:clamp(28px,7.5vw,40px);color:#FFF6E8;text-shadow:0 2px 8px rgba(0,0,0,.7)}
@keyframes seal-pulse{
  0%,100%{transform:scale(1);box-shadow:0 14px 44px rgba(0,0,0,.65),0 0 0 0 rgba(232,196,108,.5)}
  50%{transform:scale(1.05);box-shadow:0 16px 50px rgba(0,0,0,.75),0 0 0 20px rgba(232,196,108,0)}
}
.seal-edit{
  margin-top:12px;border:0;border-radius:999px;padding:8px 16px;cursor:pointer;
  background:rgba(74,15,15,.8);color:#F2D98A;
  font-family:var(--sans);font-size:11.5px;letter-spacing:.08em;font-weight:500;
}
.cover-names{margin-top:clamp(14px,3.5vw,20px);font-family:var(--script);font-size:clamp(28px,7.5vw,48px);color:#F2D98A;line-height:1.2;text-shadow:0 2px 10px rgba(0,0,0,.7)}
.cover-names em{font-family:var(--serif);font-style:italic;font-size:.5em;color:#E8C46C}
.cover-open{margin-top:clamp(10px,2.5vw,14px);color:#F2D98A;font-size:clamp(11px,2.8vw,13px);font-weight:600;letter-spacing:.35em;animation:hint-pulse 2s ease-in-out infinite;text-shadow:0 2px 6px rgba(0,0,0,.7)}
.cover-invited{
  position:absolute;bottom:clamp(18px,4.5vh,28px);left:0;right:0;text-align:center;z-index:30;
  color:rgba(242,217,138,.85);font-size:clamp(10px,2.5vw,12px);letter-spacing:.35em;text-transform:uppercase;
  text-shadow:0 1px 4px rgba(0,0,0,.5);
}
.cover.opening .cover-center,.cover.opening .cover-invited,.cover.opening .cover-garland{opacity:0;transition:opacity .5s}

/* ============================================================
   AI STUDIO (editor panel)
   ============================================================ */
.ai-btn{
  display:inline-block;margin-top:10px;border:0;border-radius:999px;padding:10px 18px;cursor:pointer;
  font-family:var(--sans);font-size:13.5px;font-weight:600;color:#FFF6E8;
  background:linear-gradient(115deg,#8C1626,var(--kumkum));
}
.ai-btn:disabled{opacity:.6;cursor:wait}
.ai-btn.ghost{background:transparent;border:1.5px dashed rgba(92,15,28,.35);color:var(--maroon)}
.ai-msg{min-height:15px;margin-top:8px}
.ai-out{
  width:100%;margin-top:10px;font-family:var(--sans);font-size:13.5px;color:var(--ink);
  background:#fff;border:1px solid rgba(92,15,28,.22);border-radius:10px;
  padding:11px 14px;min-height:110px;resize:vertical;
}

/* ============================================================
   CEREMONY POSTERS — uploaded art revealed by the rituals
   ============================================================ */
.fest-paper.has-art{padding:0;min-height:0;display:block;background:transparent;border:none;border-radius:14px;overflow:hidden}
.fest-paper.has-art .poster-card-container{border-radius:0;border:none;margin:0;box-shadow:none;background:transparent;max-width:none;width:100%}
.fest-paper.has-art .poster-img-wrap{border-radius:0}
.fest-paper.has-art .fest-overlay{border-radius:0}
.fp-art{width:100%;display:block;border-radius:0}
.hero-poster-art{
  max-width:440px;margin:32px auto 0;border-radius:18px;overflow:hidden;
  border:1px solid rgba(212,169,55,.5);
  box-shadow:0 34px 80px -30px rgba(0,0,0,.65);
}
.hero-poster-art img{width:100%;display:block}
.poster-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.poster-row .ai-btn{margin-top:0}
.ai-btn.tiny{padding:8px 14px;font-size:12.5px}

/* ============================================================
   FESTIVITY MODAL FOOTER — hint before, blessing after
   ============================================================ */
.fest-foot{padding:14px 6px 4px;text-align:center;min-height:34px}
.fest-foot-hint{
  color:#FFF3DA;font-size:12px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  text-shadow:0 1px 4px rgba(0,0,0,.4);animation:hint-pulse 2s ease-in-out infinite;
}
.fest-bless p{
  color:#FFF3DA;font-size:12.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  text-shadow:0 1px 4px rgba(0,0,0,.4);
}
.fest-close-btn{
  margin-top:12px;border:0;border-radius:999px;background:#FFF6E8;color:#5C0F1C;
  font-family:var(--sans);font-weight:600;font-size:14px;padding:10px 28px;cursor:pointer;
  transition:transform .3s var(--ease);
}
.fest-close-btn:hover{transform:translateY(-2px)}

/* ============================================================
   PICK YOUR SIDE — Team Bride vs Team Groom
   ============================================================ */
.side-pick{margin:6px 0 30px}
.side-q{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--gold-pale);margin-bottom:14px}
.side-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.side-btn{
  font-family:var(--sans);font-size:14px;font-weight:500;color:var(--gold-pale);
  background:transparent;border:1.5px solid rgba(212,169,55,.45);border-radius:999px;
  padding:11px 22px;cursor:pointer;transition:all .35s var(--ease);
}
.side-btn b{font-weight:600}
.side-btn:hover{border-color:var(--gold-bright);color:var(--gold-bright);transform:translateY(-2px)}
.side-btn.on{
  background:linear-gradient(115deg,#B98F2C,var(--gold-bright));color:var(--maroon-deep);
  border-color:transparent;box-shadow:0 10px 26px -10px rgba(212,169,55,.6);
}

/* ============================================================
   HERO ENTRANCE — glides in as the temple doors part
   ============================================================ */
body.opened .w-hero > *{opacity:0;animation:hero-in 1s var(--ease) forwards}
body.opened .w-hero > :nth-child(1){animation-delay:.5s}
body.opened .w-hero > :nth-child(2){animation-delay:.62s}
body.opened .w-hero > :nth-child(3){animation-delay:.74s}
body.opened .w-hero > :nth-child(4){animation-delay:.86s}
body.opened .w-hero > :nth-child(5){animation-delay:.98s}
body.opened .w-hero > :nth-child(6){animation-delay:1.1s}
body.opened .w-hero > :nth-child(7){animation-delay:1.22s}
body.opened .w-hero > :nth-child(8){animation-delay:1.34s}
@keyframes hero-in{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  body.opened .w-hero > *{opacity:1;animation:none}
}

/* ============================================================
   REVEALS + REDUCED MOTION
   ============================================================ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
/* Safety net: if JS never runs (old browser, blocked script, error),
   the IntersectionObserver never fires — so reveal everything after a
   short delay via pure CSS. The page can never stay blank. */
@media(prefers-reduced-motion:no-preference){
  .reveal{animation:reveal-fallback 0s linear 2.2s forwards}
}
@keyframes reveal-fallback{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}