/* ============================================================
   THE MOMENT BEFORE — invitation engine styles
   Per-template colour worlds · tap-to-open covers ·
   scroll-driven scenes · living illustration motion
   ============================================================ */

/* ---- container ------------------------------------------------- */
.iv{
  position:relative; width:100%; height:100%; overflow:hidden;
  font-family:var(--sans); color:var(--iv-ink);
  background:var(--iv-bg); background-image:var(--iv-bg-grad);
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.iv.iv-open{ overflow-y:auto; overflow-x:hidden; }
.iv::-webkit-scrollbar{ display:none; }
.iv *{ box-sizing:border-box; }
.iv-lang-pa{ font-family:var(--gur); }

/* ---- illustration base ---------------------------------------- */
.mb-scene, .mb-phulkari, .mb-mandala, .mb-toran, .mb-motif{ display:block; width:100%; height:auto; }
.mb-ln, .mb-ln-f{ fill:none; stroke:var(--iv-accent); stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round; }
.mb-scene .mb-ray{ stroke:var(--iv-accent); stroke-width:1; opacity:.10; }
.mb-spark path{ fill:none; stroke:var(--iv-accent); stroke-width:1.1; }
.mb-marigold circle{ fill:var(--iv-petal); stroke:none; }
.mb-marigold .mb-marigold-core{ fill:var(--iv-accent2,var(--iv-accent)); }
.mb-flame-outer{ fill:var(--iv-accent); opacity:.55; }
.mb-flame-inner{ fill:#FFF4D8; opacity:.92; }
.mb-sun-disc{ fill:var(--iv-accent); opacity:.16; }
.mb-sun-ring{ fill:none; stroke:var(--iv-accent); stroke-width:1; opacity:.4; transform-origin:160px 120px; }
.mb-hills path{ fill:var(--iv-accent); opacity:.13; stroke:none; }
.mb-diya-glow{ fill:var(--iv-accent); opacity:.16; filter:blur(3px); }

/* transform pivots (kept off inline styles so fill-box works correctly) */
.mb-flame{ transform-box:fill-box; transform-origin:bottom center; }
.mb-flag{ transform-box:fill-box; transform-origin:left center; }
.mb-marigold{ transform-box:fill-box; transform-origin:center; }
.mb-hang, .mb-toranstring, .mb-swaggrp{ transform-box:fill-box; transform-origin:center top; }
.mb-spark, .mb-driftp{ transform-box:fill-box; transform-origin:center; }
.mb-bird{ transform-box:fill-box; }
.mb-rays{ transform-box:view-box; }
.mb-sun-ring{ transform-box:view-box; }

/* ---- living motion (only while open / in view) ---------------- */
.iv-anim .mb-rays{ animation:mbspin 80s linear infinite; }
.iv-anim .mb-mandala{ animation:mbspin 90s linear infinite; }
.iv-anim .mb-flag{ animation:mbflag 2.8s ease-in-out infinite; transform-box:fill-box; }
.mb-flag{ fill:var(--iv-accent); opacity:.9; }
.iv-anim .mb-flame{ animation:mbflicker 1.5s ease-in-out infinite; transform-box:fill-box; }
.iv-anim .mb-marigold{ animation:mbbreathe 6s ease-in-out infinite; }
.iv-anim .mb-hang{ animation:mbsway 4.2s ease-in-out infinite; transform-box:fill-box; }
.iv-anim .mb-hang2{ animation-duration:4.8s; animation-delay:-1.1s; }
.iv-anim .mb-driftp{ animation:mbdriftp 6s linear infinite; }
.iv-anim .mb-bird{ animation:mbbird 7s ease-in-out infinite; transform-box:fill-box; }
.iv-anim .mb-spark{ animation:mbtwinkle 2.6s ease-in-out infinite; }
.iv-anim .mb-sun-ring{ animation:mbsunring 3.4s ease-out infinite; }
.iv-anim .mb-sun-disc{ animation:mbsunpulse 5s ease-in-out infinite; }
.iv-anim .mb-diya-glow{ animation:mbglow 1.9s ease-in-out infinite; }
.iv-anim .mb-toranstring{ animation:mbtoran 4s ease-in-out infinite; transform-box:fill-box; }
.iv-anim .mb-swaggrp{ animation:mbsway 5s ease-in-out infinite; transform-origin:center top; }
.iv-anim .mb-cloud{ animation:mbcloud 26s ease-in-out infinite; transform-box:fill-box; }
.iv-anim .mb-cloud2{ animation-duration:34s; animation-delay:-8s; }
.iv-anim .mb-scene-dusk .mb-diya{ animation:mbbob 4.6s ease-in-out infinite; transform-box:fill-box; }
.iv-anim .mb-scene-dusk .mb-diya:nth-child(2n){ animation-duration:5.4s; animation-delay:-1.3s; }
.iv-anim .mb-scene-dusk .mb-diya:nth-child(3n){ animation-duration:5s; animation-delay:-2.1s; }
.iv-anim .mb-water line{ animation:mbwater 4s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.iv-anim .mb-water line:nth-child(2){ animation-delay:-1.6s; }
.mb-smoke-p{ stroke:var(--iv-accent); stroke-width:1.1; fill:none; opacity:0; transform-box:fill-box; transform-origin:bottom center; }
.iv-anim .mb-smoke-p{ animation:mbsmoke 5s ease-in-out infinite; }
.iv-anim .mb-smoke2{ animation-duration:6.2s; animation-delay:-2.4s; }

@keyframes mbspin{ to{ transform:rotate(360deg) } }
@keyframes mbcloud{ 0%,100%{ transform:translateX(0) } 50%{ transform:translateX(14px) } }
@keyframes mbbob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-3px) } }
@keyframes mbwater{ 0%,100%{ transform:scaleX(1); opacity:.5 } 50%{ transform:scaleX(.84); opacity:.85 } }
@keyframes mbsmoke{ 0%{ opacity:0; transform:translateY(4px) scaleX(.9) } 25%{ opacity:.4 } 80%{ opacity:.12 } 100%{ opacity:0; transform:translateY(-12px) scaleX(1.1) } }
@keyframes mbflag{ 0%,100%{ transform:rotate(-1deg) skewY(0deg) } 50%{ transform:rotate(2deg) skewY(-4deg) } }
@keyframes mbflicker{ 0%,100%{ transform:scaleY(1) translateX(0) } 25%{ transform:scaleY(1.08) translateX(.5px) } 50%{ transform:scaleY(.93) translateX(-.5px) } 75%{ transform:scaleY(1.05) translateX(.3px) } }
@keyframes mbbreathe{ 0%,100%{ transform:scale(1) rotate(0deg) } 50%{ transform:scale(1.07) rotate(7deg) } }
@keyframes mbsway{ 0%,100%{ transform:rotate(-3deg) } 50%{ transform:rotate(3deg) } }
@keyframes mbtoran{ 0%,100%{ transform:rotate(-4deg) } 50%{ transform:rotate(4deg) } }
@keyframes mbdriftp{ 0%{ transform:translateY(-8px) rotate(0); opacity:0 } 18%{ opacity:.9 } 100%{ transform:translateY(46px) rotate(140deg); opacity:0 } }
@keyframes mbbird{ 0%,100%{ transform:translate(0,0) } 50%{ transform:translate(10px,-5px) } }
@keyframes mbtwinkle{ 0%,100%{ transform:scale(.55); opacity:.18 } 50%{ transform:scale(1); opacity:.95 } }
@keyframes mbsunring{ 0%{ transform:scale(.7); opacity:.45 } 100%{ transform:scale(1.35); opacity:0 } }
@keyframes mbsunpulse{ 0%,100%{ opacity:.14 } 50%{ opacity:.22 } }
@keyframes mbglow{ 0%,100%{ opacity:.12 } 50%{ opacity:.24 } }

/* thread/garland draw-on (gated to opening) */
.mb-thread{ opacity:0; transform:scale(.6); transform-box:fill-box; }
.iv-drawn .mb-thread{ animation:mbthread .7s cubic-bezier(.2,.7,.2,1) both; }
@keyframes mbthread{ to{ opacity:.9; transform:scale(1) } }

/* ============================================================
   COVERS — closed state + opening choreography
   ============================================================ */
.iv-cover{
  position:absolute; inset:0; z-index:30; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; overflow:hidden; background:var(--iv-bg); background-image:var(--iv-bg-grad);
  transition:opacity .8s ease, transform .9s cubic-bezier(.5,0,.2,1);
}
.iv-cover.cover-gone{ opacity:0; transform:translateY(-8%) scale(1.02); pointer-events:none; }
.iv-cover .cv-mono{ width:74px; height:74px; border-radius:50%; border:1px solid var(--iv-accent);
  display:flex; align-items:center; justify-content:center; font-family:var(--serif);
  font-size:24px; color:var(--iv-accent); letter-spacing:.04em; margin-bottom:22px; position:relative; z-index:4; }
.iv-cover .cv-eyebrow{ font-size:10.5px; letter-spacing:.42em; text-transform:uppercase;
  color:var(--iv-accent); font-weight:500; margin-bottom:14px; position:relative; z-index:4; }
.iv-lang-pa .iv-cover .cv-eyebrow{ letter-spacing:.16em; }
.iv-cover .cv-names{ font-family:var(--serif); font-size:34px; font-weight:500; line-height:1.05;
  color:var(--iv-ink); position:relative; z-index:4; }
.iv-lang-pa .iv-cover .cv-names{ font-family:var(--gur); font-size:27px; }
.iv-cover .cv-amp{ font-style:italic; color:var(--iv-accent); font-size:22px; display:block; margin:2px 0; }
.iv-cover .cv-hint{ position:absolute; bottom:30px; left:0; right:0; z-index:5;
  font-size:10px; letter-spacing:.34em; text-transform:uppercase; color:var(--iv-sub);
  display:flex; flex-direction:column; align-items:center; gap:9px; }
.iv-lang-pa .iv-cover .cv-hint{ letter-spacing:.14em; }
.iv-cover .cv-hint .tapdot{ width:30px; height:30px; border-radius:50%; border:1px solid var(--iv-line);
  display:flex; align-items:center; justify-content:center; animation:mbtap 2s ease-in-out infinite; }
.iv-cover .cv-hint .tapdot::after{ content:''; width:7px; height:7px; border-radius:50%; background:var(--iv-accent); }
@keyframes mbtap{ 0%,100%{ transform:scale(1); box-shadow:0 0 0 0 var(--iv-glow) } 60%{ transform:scale(.9); box-shadow:0 0 0 9px transparent } }

/* faint cover backdrop art */
.iv-cover .cv-art{ position:absolute; inset:0; opacity:.5; pointer-events:none; z-index:1; }
.iv-cover .cv-art .mb-phulkari{ height:100%; opacity:.22; }

/* ---- envelope (Phulkari) -------------------------------------- */
.cover-envelope .env{ position:relative; width:78%; max-width:230px; aspect-ratio:1.5/1; margin-bottom:18px;
  perspective:900px; z-index:3; }
.cover-envelope .env-body{ position:absolute; inset:0; border:1px solid var(--iv-line);
  border-radius:8px; background:linear-gradient(180deg,rgba(255,255,255,.05),transparent); overflow:hidden; }
.cover-envelope .env-body::before,.cover-envelope .env-body::after{ content:'';
  position:absolute; left:0; right:0; height:1px; background:var(--iv-line); opacity:.5; }
.cover-envelope .env-pocket{ position:absolute; left:0; right:0; bottom:0; top:46%;
  border-top:1px solid var(--iv-line); clip-path:polygon(0 0,50% 60%,100% 0,100% 100%,0 100%); opacity:.7; }
.cover-envelope .env-flap{ position:absolute; left:0; right:0; top:0; height:56%;
  background:linear-gradient(180deg,rgba(255,255,255,.06),transparent);
  clip-path:polygon(0 0,100% 0,50% 92%); border-bottom:1px solid var(--iv-line);
  transform-origin:top center; transition:transform .8s cubic-bezier(.6,0,.2,1); z-index:5; }
.cover-envelope .env-seal{ position:absolute; top:38%; left:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%; background:var(--iv-accent2,var(--iv-accent));
  display:flex; align-items:center; justify-content:center; color:var(--iv-bg);
  font-family:var(--serif); font-size:16px; z-index:7; box-shadow:0 4px 14px rgba(0,0,0,.28);
  transition:transform .45s ease, opacity .45s ease; }
.cover-envelope .env-seal::before{ content:''; position:absolute; inset:4px; border-radius:50%; border:1px dashed rgba(255,255,255,.5); }
.cover-envelope.opening .env-flap{ transform:rotateX(-172deg); }
.cover-envelope.opening .env-seal{ transform:translate(-50%,-50%) scale(1.5); opacity:0; }

/* ---- garland (Genda) ------------------------------------------ */
.cover-garland .cv-toran{ position:absolute; top:0; left:0; right:0; z-index:3; }
.cover-garland .mb-toran{ width:100%; }
.cover-garland.opening .cv-toran{ animation:mbtoranlift 1s cubic-bezier(.6,0,.2,1) forwards; }
@keyframes mbtoranlift{ to{ transform:translateY(-40%); opacity:0 } }
.cover-burst{ position:absolute; inset:0; z-index:6; pointer-events:none; overflow:hidden; }
.cover-burst i{ position:absolute; left:50%; top:46%; width:9px; height:9px; border-radius:60% 60% 60% 0;
  background:var(--iv-petal); opacity:0; }
.cover-garland.opening .cover-burst i{ animation:mbburst .95s ease-out forwards; }
@keyframes mbburst{ 0%{ opacity:0; transform:translate(0,0) scale(.4) } 15%{ opacity:1 }
  100%{ opacity:0; transform:translate(var(--bx),var(--by)) rotate(var(--br)) scale(1) } }

/* ---- veil (Saanjh) -------------------------------------------- */
.cover-veil .cv-diya{ position:relative; z-index:4; margin-bottom:26px; width:120px; }
.cover-veil .cv-diya .mb-flame{ opacity:0; transition:opacity .6s ease; }
.cover-veil .cv-diya .mb-diya-glow{ opacity:0; transition:opacity .9s ease; }
.cover-veil.opening .cv-diya .mb-flame{ opacity:1; }
.cover-veil.opening .cv-diya .mb-diya-glow{ opacity:.3; }
.cover-veil .cv-flash{ position:absolute; inset:0; z-index:2; opacity:0;
  background:radial-gradient(circle at 50% 56%, var(--iv-glow), transparent 60%); }
.cover-veil.opening .cv-flash{ animation:mbflash 1.1s ease-out forwards; }
@keyframes mbflash{ 0%{ opacity:0 } 30%{ opacity:1 } 100%{ opacity:0 } }

/* ============================================================
   THE INVITE BODY
   ============================================================ */
.iv-doc{ position:relative; z-index:2; }
.iv-open .iv-doc{ animation:ivsettle 1.1s cubic-bezier(.2,.7,.2,1) both; }
@keyframes ivsettle{ from{ transform:scale(.985) translateY(6px); opacity:.4 } to{ transform:none; opacity:1 } }

/* floating ambient particles over the open invite (continuous life) */
.iv-ambient{ position:absolute; inset:0; z-index:18; pointer-events:none; overflow:hidden;
  opacity:0; transition:opacity 1.2s ease; }
.iv-ambient.show{ opacity:1; }
.iv-ambient i{ position:absolute; top:-10%; opacity:0; will-change:transform; }
.iv-ambient.show i{ animation:ivfloat linear infinite; }
.iv-ambient i.p-diamond{ background:var(--iv-petal); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }
.iv-ambient i.p-flower{ background:var(--iv-petal); border-radius:62% 62% 62% 0; }
.iv-ambient i.p-spark{ background:var(--iv-petal); border-radius:50%;
  box-shadow:0 0 6px 1px var(--iv-glow); }
@keyframes ivfloat{
  0%{ transform:translateY(-10%) translateX(0) rotate(0); opacity:0 }
  10%{ opacity:.85 }
  90%{ opacity:.6 }
  100%{ transform:translateY(680px) translateX(var(--drift,12px)) rotate(300deg); opacity:0 } }
@media (prefers-reduced-motion: reduce){ .iv-ambient{ display:none; } }
.iv-rise{ opacity:0; transform:translateY(24px); }
.iv-rise.in{ opacity:1; transform:none; transition:opacity .9s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce){
  .iv-rise{ opacity:1 !important; transform:none !important; }
  .iv-anim *{ animation:none !important; }
}

/* hero panel */
.iv-hero{ position:relative; min-height:100%; padding:50px 28px 56px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; overflow:hidden; }
.iv-hero-art{ position:absolute; inset:0; z-index:0; opacity:.5; display:flex; align-items:flex-end; }
.iv-hero-art .mb-scene{ width:100%; }
.iv-hero-frame{ position:absolute; inset:16px; border:1px solid var(--iv-line); border-radius:16px; pointer-events:none; z-index:1; }
.iv-hero-frame::before{ content:''; position:absolute; inset:5px; border:1px solid var(--iv-line); border-radius:11px; opacity:.55; }
.iv-hero > *:not(.iv-hero-art):not(.iv-hero-frame){ position:relative; z-index:3; }
.iv-mono{ width:60px; height:60px; border-radius:50%; border:1px solid var(--iv-accent);
  display:flex; align-items:center; justify-content:center; margin-bottom:22px;
  font-family:var(--serif); font-size:20px; color:var(--iv-accent); }
.iv-eyebrow{ font-size:10.5px; letter-spacing:.42em; text-transform:uppercase; color:var(--iv-accent); font-weight:500; margin-bottom:18px; }
.iv-lang-pa .iv-eyebrow{ letter-spacing:.16em; }
.iv-names{ font-family:var(--serif); font-weight:500; line-height:1; letter-spacing:-.01em; }
.iv-name{ font-size:54px; display:block; }
.iv-amp{ font-size:30px; font-style:italic; color:var(--iv-accent); margin:4px 0; display:block; }
.iv-lang-pa .iv-name{ font-family:var(--gur); font-size:40px; line-height:1.22; }
.iv-lang-pa .iv-amp{ font-family:var(--gur); font-style:normal; font-size:24px; }
.iv-namesgur{ font-family:var(--gur); font-size:18px; color:var(--iv-sub); margin-top:16px; font-weight:500; }
.iv-lang-pa .iv-namesgur{ font-family:var(--serif); font-style:italic; }
.iv-daterange{ margin-top:24px; font-size:13px; letter-spacing:.16em; color:var(--iv-ink); text-transform:uppercase; }
.iv-lang-pa .iv-daterange{ letter-spacing:.05em; font-size:15px; }
.iv-city{ font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--iv-sub); margin-top:8px; }
.iv-lang-pa .iv-city{ letter-spacing:.05em; text-transform:none; font-size:13px; }
.iv-scrollcue{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:3;
  font-size:9px; letter-spacing:.3em; text-transform:uppercase; color:var(--iv-sub);
  display:flex; flex-direction:column; align-items:center; gap:7px; }
.iv-scrollcue .dot{ width:5px; height:5px; border-radius:50%; background:var(--iv-accent); animation:ivdrop 1.6s ease-in-out infinite; }
@keyframes ivdrop{ 0%,100%{ transform:translateY(0); opacity:.4 } 50%{ transform:translateY(7px); opacity:1 } }

/* message */
.iv-msg{ padding:62px 34px; text-align:center; position:relative; }
.iv-msg .lbl{ font-size:10.5px; letter-spacing:.4em; text-transform:uppercase; color:var(--iv-accent); font-weight:500; }
.iv-lang-pa .iv-msg .lbl{ letter-spacing:.14em; }
.iv-msg p{ font-family:var(--serif); font-size:23px; line-height:1.5; margin:18px 0 0; font-style:italic; color:var(--iv-ink); }
.iv-lang-pa .iv-msg p{ font-family:var(--gur); font-style:normal; font-size:19px; line-height:1.7; }

/* divider */
.iv-div{ display:flex; align-items:center; justify-content:center; gap:12px; padding:4px 30px; color:var(--iv-accent); }
.iv-div::before,.iv-div::after{ content:''; height:1px; flex:1; max-width:80px; background:linear-gradient(90deg,transparent,var(--iv-accent)); }
.iv-div::after{ background:linear-gradient(90deg,var(--iv-accent),transparent); }
.iv-div .d{ width:6px; height:6px; background:var(--iv-accent); transform:rotate(45deg); }

/* big illustrated scene block */
.iv-scene-block{ position:relative; padding:30px 22px 36px; }
.iv-scene-block .cap{ text-align:center; font-size:10.5px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--iv-accent); margin-top:18px; }
.iv-lang-pa .iv-scene-block .cap{ letter-spacing:.12em; }
.iv-scene-block .cap b{ display:block; font-family:var(--serif); font-size:22px; font-weight:500;
  letter-spacing:0; text-transform:none; color:var(--iv-ink); margin-top:6px; }
.iv-lang-pa .iv-scene-block .cap b{ font-family:var(--gur); font-size:19px; }

/* ceremonies */
.iv-cere{ padding:42px 28px 26px; }
.iv-cere-head{ text-align:center; margin-bottom:28px; }
.iv-cere-head h3{ font-family:var(--serif); font-size:30px; font-weight:500; margin:8px 0 6px; color:var(--iv-ink); }
.iv-lang-pa .iv-cere-head h3{ font-family:var(--gur); font-size:24px; }
.iv-cere-head .sub{ font-size:12.5px; color:var(--iv-sub); }
.iv-event{ position:relative; padding:22px 0 22px 46px; border-top:1px solid var(--iv-line); }
.iv-event:last-child{ border-bottom:1px solid var(--iv-line); }
.iv-event .mb-motif{ position:absolute; left:0; top:22px; width:34px; height:34px; }
.iv-event .num{ position:absolute; right:0; top:20px; font-family:var(--serif); font-size:34px; color:var(--iv-accent); opacity:.22; line-height:1; }
.iv-ename{ font-family:var(--serif); font-size:25px; font-weight:500; color:var(--iv-ink); line-height:1.05; }
.iv-lang-pa .iv-ename{ font-family:var(--gur); font-size:21px; }
.iv-egur{ font-family:var(--gur); font-size:15px; color:var(--iv-accent); margin-top:3px; font-weight:500; }
.iv-lang-pa .iv-egur{ font-family:var(--serif); font-style:italic; }
.iv-edesc{ font-size:12.5px; color:var(--iv-sub); margin-top:7px; font-style:italic; font-family:var(--serif); }
.iv-lang-pa .iv-edesc{ font-family:var(--gur); font-style:normal; }
.iv-edetails{ margin-top:14px; display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:12.5px; }
.iv-edetails dt{ color:var(--iv-accent); letter-spacing:.12em; text-transform:uppercase; font-size:10px; padding-top:2px; font-weight:500; }
.iv-lang-pa .iv-edetails dt{ letter-spacing:.04em; text-transform:none; font-size:12.5px; }
.iv-edetails dd{ margin:0; color:var(--iv-ink); }

/* closing */
.iv-close{ padding:52px 32px 84px; text-align:center; position:relative; }
.iv-close .ph{ font-family:var(--serif); font-size:25px; font-style:italic; line-height:1.45; color:var(--iv-ink); }
.iv-lang-pa .iv-close .ph{ font-family:var(--gur); font-style:normal; font-size:20px; }
.iv-close .lv{ font-size:10.5px; letter-spacing:.34em; text-transform:uppercase; color:var(--iv-accent); margin-top:28px; }
.iv-lang-pa .iv-close .lv{ letter-spacing:.12em; }
.iv-close .sig{ font-family:var(--serif); font-size:32px; margin-top:8px; color:var(--iv-ink); }
.iv-lang-pa .iv-close .sig{ font-family:var(--gur); font-size:25px; }
.iv-close .mb-mandala{ width:64px; margin:26px auto 0; opacity:.5; }
/* RSVP */
.iv-rsvp{ margin-top:34px; }
.iv-rsvp .by{ font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--iv-sub); margin-bottom:14px; }
.iv-lang-pa .iv-rsvp .by{ letter-spacing:.1em; font-family:var(--gur); }
.iv-rsvp-btn{ font-family:var(--sans); font-weight:600; font-size:13.5px; letter-spacing:.18em; padding:13px 40px; border-radius:999px; border:none; cursor:pointer;
  background:var(--iv-accent); color:var(--iv-bg); box-shadow:0 8px 22px -8px color-mix(in srgb,var(--iv-accent) 70%, black); transition:transform .2s, box-shadow .2s; }
.iv-rsvp-btn:hover{ transform:translateY(-1px); box-shadow:0 12px 26px -8px color-mix(in srgb,var(--iv-accent) 75%, black); }
.ivr-modal{ position:absolute; inset:0; z-index:30; display:flex; align-items:center; justify-content:center; padding:24px;
  background:color-mix(in srgb,var(--iv-ink) 42%, transparent); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity .28s; }
.ivr-modal.open{ opacity:1; pointer-events:auto; }
.ivr-card{ position:relative; width:100%; max-width:340px; background:var(--iv-bg); border:1px solid var(--iv-line); border-radius:18px; padding:26px 24px 24px; text-align:center;
  transform:translateY(14px); transition:transform .28s; box-shadow:0 30px 60px -20px rgba(0,0,0,.4); }
.ivr-modal.open .ivr-card{ transform:none; }
.ivr-x{ position:absolute; top:10px; right:14px; border:none; background:none; font-size:24px; color:var(--iv-sub); cursor:pointer; line-height:1; }
.ivr-t{ font-family:var(--serif); font-size:26px; color:var(--iv-ink); }
.ivr-s{ font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--iv-accent); margin:5px 0 18px; }
.ivr-form{ display:flex; flex-direction:column; gap:14px; text-align:left; }
.ivr-l{ display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--iv-sub); font-weight:500; }
.ivr-in{ display:block; width:100%; margin-top:7px; padding:11px 13px; border:1px solid var(--iv-line); border-radius:10px; background:transparent; color:var(--iv-ink); font-size:15px; font-family:var(--sans); }
.ivr-in:focus{ outline:none; border-color:var(--iv-accent); }
.ivr-pills{ display:flex; gap:8px; margin-top:7px; }
.ivr-pill{ flex:1; padding:10px 6px; border-radius:999px; border:1px solid var(--iv-line); background:transparent; color:var(--iv-ink); font-size:13px; font-family:var(--sans); cursor:pointer; transition:.18s; }
.ivr-pill.on{ background:var(--iv-accent); border-color:var(--iv-accent); color:var(--iv-bg); }
.ivr-send{ margin-top:4px; padding:13px; border-radius:999px; border:none; background:var(--iv-accent); color:var(--iv-bg); font-weight:600; font-size:13.5px; letter-spacing:.14em; cursor:pointer; }
.ivr-send:disabled{ opacity:.45; cursor:default; }
.ivr-done{ display:none; padding:18px 4px 6px; }
.ivr-card.sent .ivr-form,.ivr-card.sent .ivr-s{ display:none; }
.ivr-card.sent .ivr-done{ display:block; }
.ivr-dmsg{ font-size:14.5px; line-height:1.55; color:var(--iv-sub); margin:10px 0 0; }

/* ---- in-phone control bars (top: lang + music · bottom: replay) ---- */
.iv-topbar, .iv-botbar{ position:absolute; left:0; right:0; z-index:26; display:flex; align-items:center; gap:8px;
  padding:11px 12px; opacity:0; pointer-events:none; transition:opacity .5s ease, transform .5s ease; }
.iv-topbar{ top:0; justify-content:space-between; transform:translateY(-8px);
  background:linear-gradient(180deg,var(--iv-bg),transparent); }
.iv-botbar{ bottom:0; justify-content:center; transform:translateY(8px);
  background:linear-gradient(0deg,var(--iv-bg),transparent); }
.iv-topbar.show, .iv-botbar.show{ opacity:1; transform:none; pointer-events:auto; }
.iv-langtog{ display:inline-flex; background:color-mix(in srgb,var(--iv-bg) 70%, #fff 6%);
  border:1px solid var(--iv-line); border-radius:999px; padding:3px; }
.iv-langtog button{ border:none; background:transparent; padding:5px 13px; border-radius:999px;
  font-size:11px; font-weight:500; color:var(--iv-sub); transition:.2s; font-family:var(--sans); cursor:pointer; }
.iv-langtog button.gur{ font-family:var(--gur); }
.iv-langtog button.on{ background:var(--iv-accent); color:var(--iv-bg); }
.iv-ico{ width:30px; height:30px; border-radius:50%; border:1px solid var(--iv-line); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb,var(--iv-bg) 60%, transparent); color:var(--iv-accent); }
.iv-ico svg{ width:14px; height:14px; }
.iv-ico.on{ background:var(--iv-accent); color:var(--iv-bg); }