/* Зол-Баяр · урилгын нэмэлт хэсэг, хөдөлгөөнт чимэглэл.
   Бүтээгчийн урьдчилан харах (index.html) болон зочны хуудас (view.html) хоёуланд ачаалагдана.
   Өнгө нь урилгын загвараас (--i1, --i2, --ink, --gold, --soft, --line2) авна. */

/* ---------- хэсгийн гарчгийн чимэглэл ---------- */
.inv .orn{display:block;width:150px;height:16px;margin:-4px auto 14px;color:var(--gold);opacity:.85}
.inv .soft{color:var(--soft);font-size:13.5px;line-height:1.55;margin:0 0 12px}

/* ---------- ерөөл ---------- */
.inv .bless{position:relative}
.inv .poem{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:19px;line-height:1.65;margin:0;color:var(--ink);text-wrap:balance}
.inv .bl-btn{gap:8px;padding:9px 18px}
.inv .bl-btn .bl-ic{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--gold);color:var(--i2);font-size:9px}
.inv .bl-btn.on .bl-ic{animation:zbPulse 1.2s ease-in-out infinite}
.inv [data-read].reading .poem,.inv [data-read].reading .msg{animation:zbGlow 3s ease-in-out infinite}
.inv [data-read="msg"] > .bl-btn{margin:12px 0 4px}
@keyframes zbPulse{50%{transform:scale(1.25);box-shadow:0 0 0 6px color-mix(in srgb,var(--gold) 25%,transparent)}}
@keyframes zbGlow{50%{text-shadow:0 0 18px color-mix(in srgb,var(--gold) 45%,transparent)}}

/* ---------- хүндэтгэн урилга илгээсэн ---------- */
.inv .hosts .hl{display:flex;flex-direction:column;gap:12px}
.inv .hosts small{display:block;font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--soft)}
.inv .hosts b{font-family:"Cormorant Garamond",serif;font-size:23px;font-weight:600;letter-spacing:.06em;color:var(--ink)}

/* ---------- шударч үздэг цомог ---------- */
.inv .car{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 14% 10px;margin:0 -22px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.inv .car::-webkit-scrollbar{display:none}
.inv .car img{flex:0 0 72%;aspect-ratio:3/4;object-fit:cover;border-radius:14px;scroll-snap-align:center;border:1px solid var(--line2);box-shadow:0 14px 30px rgba(0,0,0,.35)}
.inv .carn{font-size:11px;font-weight:800;letter-spacing:.2em;color:var(--gold);font-variant-numeric:tabular-nums}

/* ---------- видео ---------- */
.inv .vid{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;border:1px solid var(--line2);background:#000 center/cover no-repeat;cursor:pointer;display:grid;place-items:center;align-content:center;gap:10px;color:#fff;overflow:hidden}
.inv .vid::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.55))}
.inv .vid .vplay{position:relative;width:58px;height:58px;border-radius:50%;border:1.5px solid var(--gold);display:grid;place-items:center;color:var(--gold);font-size:20px;background:rgba(0,0,0,.35);padding-left:4px}
.inv .vid small{position:relative;font-size:10px;font-weight:800;letter-spacing:.22em}
.inv .vidf{aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid var(--line2)}
.inv .vidf iframe{width:100%;height:100%;border:0;display:block}

/* ---------- бэлэг ---------- */
.inv .gift .ib.on{background:var(--gold);color:var(--i2)}
.inv .acct2{margin-top:14px;border:1px solid var(--line2);border-radius:14px;padding:6px 14px;text-align:left;background:color-mix(in srgb,var(--i2) 70%,transparent)}
.inv .acct2 > div{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;padding:9px 0;border-bottom:1px solid var(--line2)}
.inv .acct2 > div:last-child{border-bottom:0}
.inv .acct2 small{grid-column:1/-1;font-size:10px;font-weight:800;letter-spacing:.14em;color:var(--gold);text-transform:uppercase}
.inv .acct2 b{font-family:"Cormorant Garamond",serif;font-size:19px;font-weight:600;overflow-wrap:anywhere}
.inv .acct2 .cp{border:1px solid var(--line2);background:none;color:var(--gold);border-radius:999px;padding:5px 11px;font-size:11px;font-weight:800;cursor:pointer}

/* ---------- баталгаажуулах ---------- */
.inv .rsvp2{display:flex;flex-direction:column;gap:12px;text-align:left}
.inv .rsvp2 label{display:flex;flex-direction:column;gap:6px;font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.inv .rsvp2 label em{font-style:normal;letter-spacing:0;text-transform:none;color:var(--soft);font-weight:600}
.inv .rsvp2 input{background:rgba(255,255,255,.06);border:1px solid var(--line2);border-radius:10px;padding:11px 12px;color:var(--ink);font-size:15px;width:100%;font-family:inherit;letter-spacing:0;text-transform:none}
.inv .rsvp2 .opts{display:flex;flex-direction:column;gap:8px}
.inv .rsvp2 .opts button{display:flex;align-items:center;gap:12px;border:1px solid var(--line2);background:rgba(255,255,255,.04);color:var(--ink);border-radius:10px;padding:12px;font-family:"Cormorant Garamond",serif;font-size:17px;text-align:left;cursor:pointer}
.inv .rsvp2 .opts i{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--soft);flex:none;display:grid;place-items:center}
.inv .rsvp2 .opts .on{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 12%,transparent)}
.inv .rsvp2 .opts .on i{border-color:var(--gold)}
.inv .rsvp2 .opts .on i::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--gold)}
.inv .steps2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.inv .steps2 small{display:block;font-size:10px;font-weight:800;letter-spacing:.14em;color:var(--gold);margin-bottom:6px}
.inv .stp{display:grid;grid-template-columns:34px 1fr 34px;border:1px solid var(--line2);border-radius:10px;overflow:hidden}
.inv .stp button{border:0;background:rgba(255,255,255,.06);color:var(--gold);font-size:18px;cursor:pointer}
.inv .stp input{border:0;border-radius:0;text-align:center;padding:9px 0;-moz-appearance:textfield;font-variant-numeric:tabular-nums}
.inv .stp input::-webkit-inner-spin-button,.inv .stp input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.inv .rsvp2 [type=submit]{letter-spacing:.3em;padding:13px}

/* ---------- төгсгөл ---------- */
.inv .foot .closing{font-family:var(--tf);color:var(--gold);font-size:34px;line-height:1.2}
.inv .foot .closing-n{font-family:"Cormorant Garamond",serif;font-size:22px;color:var(--ink);letter-spacing:.06em;margin-top:4px}

/* ---------- шөнийн тэнгэр: туйлын туяа, одод ---------- */
.inv .cover .aur,.inv .cover .stars{position:absolute;inset:0;z-index:1;pointer-events:none}
.inv .cover .aur i{position:absolute;width:140%;height:46%;left:-20%;top:4%;border-radius:50%;filter:blur(28px);opacity:.55;mix-blend-mode:screen;
  background:linear-gradient(100deg,transparent 10%,#2bd9a0 35%,#3aa0ff 55%,#9a6bff 70%,transparent 90%);animation:zbAur 14s ease-in-out infinite alternate}
.inv .cover .aur i:nth-child(2){top:14%;height:30%;opacity:.4;animation-duration:19s;animation-direction:alternate-reverse;background:linear-gradient(80deg,transparent 15%,#5dffb8 40%,#46c4ff 60%,transparent 85%)}
.inv .cover .aur i:nth-child(3){top:-2%;height:26%;opacity:.3;animation-duration:23s;background:linear-gradient(120deg,transparent 20%,#c48bff 45%,#59e3c4 65%,transparent 88%)}
@keyframes zbAur{0%{transform:translateX(-8%) skewY(-6deg) scaleY(.9)}50%{transform:translateX(4%) skewY(3deg) scaleY(1.15)}100%{transform:translateX(9%) skewY(-2deg) scaleY(.95)}}
.inv .stars{background-image:radial-gradient(1.2px 1.2px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 32% 8%,#fff,transparent),radial-gradient(1.4px 1.4px at 58% 22%,#fff,transparent),
  radial-gradient(1px 1px at 76% 12%,#fff,transparent),radial-gradient(1.2px 1.2px at 88% 30%,#fff,transparent),radial-gradient(1px 1px at 44% 34%,#fff,transparent),radial-gradient(1px 1px at 22% 40%,#fff,transparent),radial-gradient(1.3px 1.3px at 66% 6%,#fff,transparent);
  opacity:.7;animation:zbTw 4s ease-in-out infinite alternate}
@keyframes zbTw{to{opacity:.3}}
.inv.sky-aurora .sec,.inv.sky-stars .sec{position:relative;isolation:isolate}
.inv.sky-aurora .sec::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.22;
  background:radial-gradient(70% 40% at 20% 0%,#2bd9a0,transparent 70%),radial-gradient(60% 35% at 85% 10%,#7a5cff,transparent 70%)}
.inv.sky-aurora .sec:nth-of-type(even)::before{background:radial-gradient(70% 40% at 80% 0%,#3aa0ff,transparent 70%),radial-gradient(50% 30% at 10% 20%,#2bd9a0,transparent 70%)}

/* ---------- зочны хуудасны удирдлага (view.html) ---------- */
.zbx-ctrl{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));right:max(12px,calc(50% - 248px));z-index:21;display:flex;gap:6px;align-items:center}
.zbx-ctrl button,.zbx-auto,body.zbx .mus{width:40px;height:40px;border-radius:50%;border:1px solid rgba(226,184,102,.55);background:rgba(8,14,24,.55);color:#f2e3b3;display:grid;place-items:center;cursor:pointer;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:16px;line-height:1;padding:0}
.zbx-ctrl button.on{background:#d8b46a;color:#14100a;border-color:#d8b46a}
.zbx-auto{position:fixed;left:max(12px,calc(50% - 248px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:21;width:auto;height:38px;border-radius:999px;padding:0 14px;gap:6px;display:flex;font:800 12px/1 Manrope,system-ui,sans-serif;letter-spacing:.06em}
.zbx-auto.on{background:#d8b46a;color:#14100a}
body.zbx .mus{position:fixed;top:auto;bottom:calc(16px + env(safe-area-inset-bottom,0px));right:max(12px,calc(50% - 248px));width:44px;height:44px}
body.zbx .mus-hint{position:fixed;top:auto;bottom:calc(26px + env(safe-area-inset-bottom,0px));right:max(64px,calc(50% - 196px))}
.zbx-ctrl[hidden],.zbx-auto[hidden]{display:none}

/* хөдөлгөөнт чимэглэл: эрвээхэй, дэлбээ, гялбаа */
.zbx-float{position:fixed;inset:0;pointer-events:none;z-index:15;overflow:hidden}
.zbx-float .bf{position:absolute;width:34px;height:26px;opacity:.9;animation:zbFly var(--d,18s) linear var(--dl,0s) infinite;filter:drop-shadow(0 0 6px rgba(160,200,255,.6))}
.zbx-float .bf .w{transform-origin:20px 15px;animation:zbFlap .32s ease-in-out infinite alternate}
.zbx-float .bf .w.r{animation-delay:.02s}
@keyframes zbFlap{to{transform:scaleX(.25)}}
@keyframes zbFly{0%{transform:translate(var(--x0),110vh) rotate(-8deg)}25%{transform:translate(calc(var(--x0) + 40px),75vh) rotate(6deg)}50%{transform:translate(calc(var(--x0) - 30px),45vh) rotate(-10deg)}
  75%{transform:translate(calc(var(--x0) + 50px),18vh) rotate(8deg)}100%{transform:translate(calc(var(--x0) + 10px),-15vh) rotate(-4deg)}}
.zbx-float .pt{position:absolute;top:-30px;width:14px;height:11px;border-radius:70% 0 70% 0;background:linear-gradient(135deg,#ffe4ec,#f4a9c0);opacity:.85;animation:zbFall var(--d,12s) linear var(--dl,0s) infinite}
@keyframes zbFall{0%{transform:translate(var(--x0),-5vh) rotate(0)}50%{transform:translate(calc(var(--x0) + 40px),50vh) rotate(200deg)}100%{transform:translate(calc(var(--x0) - 20px),108vh) rotate(420deg)}}
.zbx-float .sp{position:absolute;bottom:-10px;width:6px;height:6px;border-radius:50%;background:#ffe9b0;box-shadow:0 0 10px 3px rgba(255,220,140,.7);animation:zbRise var(--d,10s) ease-in var(--dl,0s) infinite}
@keyframes zbRise{0%{transform:translate(var(--x0),0);opacity:0}15%{opacity:1}100%{transform:translate(calc(var(--x0) + 30px),-105vh);opacity:0}}
.zbx-snow{position:fixed;inset:0;pointer-events:none;z-index:16}
/* ---------- нэмэлт хөдөлгөөнт чимэглэл ---------- */
.zbx-float .ht{position:absolute;bottom:-30px;color:var(--c);font-size:calc(18px * var(--s));font-style:normal;text-shadow:0 0 10px color-mix(in srgb,var(--c) 60%,transparent);animation:zbRiseSway var(--d,12s) ease-in var(--dl,0s) infinite}
.zbx-float .cf{position:absolute;top:-20px;width:calc(8px * var(--s));height:calc(13px * var(--s));background:var(--c);border-radius:2px;opacity:.95;animation:zbConf var(--d,8s) linear var(--dl,0s) infinite}
.zbx-float .bl{position:absolute;bottom:-90px;width:calc(34px * var(--s));height:calc(42px * var(--s));border-radius:50% 50% 48% 48%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.75) 0 10%,var(--c) 32%,color-mix(in srgb,var(--c) 70%,#000) 100%);opacity:.92;animation:zbRiseSway var(--d,18s) ease-in-out var(--dl,0s) infinite}
.zbx-float .bl::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:46px;background:rgba(255,255,255,.55)}
.zbx-float .ln{position:absolute;bottom:-60px;width:calc(20px * var(--s));height:calc(26px * var(--s));border-radius:40% 40% 30% 30%;background:linear-gradient(180deg,#ffd27a,#ff8c3a);box-shadow:0 0 18px 6px rgba(255,160,60,.55);opacity:.9;animation:zbRiseSway var(--d,20s) ease-in var(--dl,0s) infinite}
.zbx-float .lf{position:absolute;top:-30px;width:calc(16px * var(--s));height:calc(12px * var(--s));border-radius:0 80% 0 80%;background:var(--c);opacity:.9;animation:zbFall var(--d,13s) linear var(--dl,0s) infinite}
.zbx-float .bb{position:absolute;bottom:-40px;width:calc(22px * var(--s));height:calc(22px * var(--s));border-radius:50%;border:1.5px solid rgba(255,255,255,.65);background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.55),rgba(160,210,255,.12) 60%,transparent);animation:zbRiseSway var(--d,12s) ease-in var(--dl,0s) infinite}
.zbx-float .ff{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff6b0;box-shadow:0 0 12px 4px rgba(255,240,120,.75);animation:zbWander var(--d,6s) ease-in-out var(--dl,0s) infinite}
.zbx-float .st{position:absolute;top:-20px;color:#ffe08a;font-style:normal;font-size:calc(14px * var(--s));text-shadow:0 0 10px rgba(255,220,120,.9);animation:zbFall var(--d,10s) linear var(--dl,0s) infinite,zbTwinkle 1.4s ease-in-out infinite}
.zbx-float .gr{position:absolute;top:-20px;width:3px;height:calc(14px * var(--s));border-radius:3px;background:linear-gradient(180deg,transparent,#ffe08a);box-shadow:0 0 6px rgba(255,215,120,.8);animation:zbDrop var(--d,7s) linear var(--dl,0s) infinite}
@keyframes zbRiseSway{0%{transform:translate(var(--x0),0);opacity:0}10%{opacity:1}35%{transform:translate(calc(var(--x0) + 26px),-38vh)}70%{transform:translate(calc(var(--x0) - 22px),-78vh)}100%{transform:translate(calc(var(--x0) + 12px),-112vh);opacity:.2}}
@keyframes zbConf{0%{transform:translate(var(--x0),-5vh) rotate(0) rotateX(0)}50%{transform:translate(calc(var(--x0) - 35px),50vh) rotate(260deg) rotateX(180deg)}100%{transform:translate(calc(var(--x0) + 25px),108vh) rotate(540deg) rotateX(360deg)}}
@keyframes zbWander{0%,100%{transform:translate(var(--x0),0);opacity:.15}30%{transform:translate(calc(var(--x0) + 28px),-22px);opacity:1}65%{transform:translate(calc(var(--x0) - 18px),-40px);opacity:.6}}
@keyframes zbTwinkle{50%{opacity:.35}}
@keyframes zbDrop{0%{transform:translate(var(--x0),-5vh);opacity:0}10%{opacity:1}100%{transform:translate(calc(var(--x0) - 30px),108vh);opacity:.6}}
@media (prefers-reduced-motion:reduce){.zbx-float,.zbx-snow{display:none}.inv .cover .aur i,.inv .stars{animation:none}}