/* ══════════════════════════════════════════════════════════
   Цахим урилга — бүх загварт нийтлэг хэв маяг
   Өнгийг загвар бүрийн style.css дотор токеноор өгнө.
   ══════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100svh;
  font-family:var(--sans);
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
  line-height:1.65;
}

img,video{max-width:100%;display:block}

h1,h2{font-family:var(--serif);font-weight:700;letter-spacing:.02em;margin:0}

p{margin:0 0 .8em}

hr.rule{border:0;height:1px;margin:1.6rem 0;
  background:linear-gradient(90deg,transparent,var(--line-2),transparent)}

.muted{color:var(--muted);font-size:.94rem}

/* ══════════════════════════════════════════════════════
   Дугтуй — хуудас нээгдэх агшин
   ══════════════════════════════════════════════════════ */

body.locked{overflow:hidden;height:100svh}

/* JS ажиллахгүй бол дугтуй ч байхгүй, түгжээ ч байхгүй — агуулга шууд уншигдана */
html:not(.js) .gate{display:none}

html:not(.js) body.locked{overflow:auto;height:auto}

html:not(.js) .reveal{opacity:1;transform:none}

.gate{
  position:fixed;inset:0;z-index:100;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(1.6rem,6vw,2.4rem);
  padding:calc(1rem + env(safe-area-inset-top)) 1rem calc(1rem + env(safe-area-inset-bottom));
  background:var(--bg);
  transition:opacity .65s ease,visibility .65s;
}

.gate.is-gone{opacity:0;visibility:hidden;pointer-events:none}

.gate.is-opening .env{animation:none}

@keyframes envDrop{
  0%{transform:translateY(-72vh) rotate(-7deg) scale(.9);opacity:0}
  16%{opacity:1}
  62%{transform:translateY(2.5%) rotate(.9deg) scale(1)}
  80%{transform:translateY(-1.4%) rotate(-.45deg)}
  92%{transform:translateY(.5%) rotate(.15deg)}
  100%{transform:translateY(0) rotate(0deg) scale(1)}
}

@keyframes envFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.4%)}}

@keyframes sealStamp{
  0%{transform:translate(-50%,-50%) scale(2.4);opacity:0}
  55%{opacity:1}
  100%{transform:translate(-50%,-50%) scale(1);opacity:1}
}

@keyframes envShine{0%{left:-60%}52%,100%{left:132%}}

/* заавар ба алгасах */
.gate__hint{
  margin:0;position:relative;
  font-size:.9rem;letter-spacing:.16em;color:var(--accent);font-weight:var(--hint-weight,700);
  animation:fadeUp .55s ease 1.15s backwards,
            hintPulse 2.4s ease-in-out 1.7s infinite;
  transition:opacity .3s ease;
}

@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.gate.is-opening .gate__hint{opacity:0;animation:none}

   /* анимаци opacity-г дардаг тул унтраана */
@keyframes hintPulse{0%,100%{opacity:.55;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}

.gate__skip{
  position:relative;
  min-height:44px;padding:.5rem 1.2rem;
  font:inherit;font-size:.82rem;letter-spacing:.08em;
  color:var(--muted);background:none;border:0;cursor:pointer;
  text-decoration:underline;text-underline-offset:5px;
  animation:fadeUp .55s ease 1.4s backwards;
}

.gate__skip:hover{color:var(--gold)}

.gate.is-opening .gate__skip{opacity:0;pointer-events:none}

/* ── Дэвсгэр видео ────────────────────────────────────── */
.bg{position:fixed;inset:0;z-index:-2;background:var(--bg)}

.bg__video{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(1) brightness(.66);
}

.bg__scrim{
  position:absolute;inset:0;
  background:
    radial-gradient(900px 520px at 8% -6%,  var(--tint-1), transparent 62%),
    radial-gradient(760px 480px at 96% 2%,  var(--tint-2), transparent 60%),
    radial-gradient(820px 600px at 50% 110%,var(--tint-3), transparent 62%),
    var(--scrim);
}

/* ── Ерөнхий хэсэг ────────────────────────────────────── */
main{position:relative;z-index:1}

.sec{padding:clamp(2rem,7vw,4.5rem) 1rem;display:flex;justify-content:center}

.card{
  width:min(680px,100%);
  padding:clamp(1.5rem,5vw,2.8rem);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-2);
  text-align:center;
}

.card__h{
  font-size:clamp(1.35rem,5vw,1.9rem);
  color:var(--accent);
  margin-bottom:1.3rem;
  position:relative;padding-bottom:.7rem;
}

/* зураас — өлзий — зураас */
.card__h::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:118px;height:18px;
  background:
    var(--ulzii-img) center/18px 18px no-repeat,
    linear-gradient(90deg,transparent,var(--line-2)) left center/42px 1px no-repeat,
    linear-gradient(90deg,var(--line-2),transparent) right center/42px 1px no-repeat;
}

/* ── Нүүр ─────────────────────────────────────────────── */
.hero{
  min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(1.4rem,4vw,2.2rem);
  padding:clamp(4rem,12vw,6rem) 1rem clamp(4.5rem,12vw,6rem);
  text-align:center;
}

.hero__frame{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(1.8rem,6vw,3rem) clamp(1.2rem,5vw,3rem);
  border:0;
  border-radius:28px;
  background:
    radial-gradient(120% 120% at 12% 0%, rgba(255,255,255,.16), transparent 55%),
    linear-gradient(152deg,var(--hero-1) 0%,var(--hero-2) 48%,var(--hero-3) 100%);
  box-shadow:var(--shadow-2);
  max-width:min(620px,100%);
}

.hero__frame::after{                    /* доод талын зөөлөн туяа */
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(80% 60% at 50% 120%, rgba(255,255,255,.10), transparent 70%);
}

.orn{                                   /* нүүрний өлзий чимэг */
  display:block;width:24px;height:24px;margin:0 auto;font-size:0;opacity:.92;
  background:var(--ulzii-img) center/contain no-repeat;
}

.hero__kicker{
  margin:.9rem 0 .3rem;
  font-size:clamp(.78rem,3vw,.95rem);
  letter-spacing:.34em;text-transform:uppercase;font-weight:800;
  color:var(--hero-ink-2);
}

.hero__name{
  display:var(--hero-name-display,flex);flex-direction:column;align-items:center;
  font-size:var(--hero-name-size,clamp(2.4rem,12vw,4.4rem));
  line-height:1.05;
  color:var(--hero-ink);
  text-shadow:0 3px 22px rgba(0,0,0,.45);
  margin:.15em 0 .25em;
}

.hero__date{margin:0 0 .9rem;color:var(--hero-ink-2);font-weight:700;
  font-size:clamp(.9rem,3.4vw,1.05rem)}

.hero__cta{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}

/* ── Тоолуур ──────────────────────────────────────────── */
.count{display:flex;gap:clamp(.4rem,2.5vw,1rem);flex-wrap:wrap;justify-content:center}

.count__i{
  min-width:clamp(62px,18vw,84px);
  padding:.7rem .5rem;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-1);
}

.count__i b{
  display:block;font-family:var(--serif);
  font-size:clamp(1.4rem,6vw,2rem);color:var(--accent-2);
  font-variant-numeric:tabular-nums;
}

.count__i span{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

.count.is-past{display:none}

/* ── Товч ─────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:.65rem 1.5rem;
  font:inherit;font-size:.95rem;
  color:var(--ink-2);text-decoration:none;font-weight:700;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:999px;
  box-shadow:var(--shadow-1);
  cursor:pointer;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease;
}

.btn:hover{background:var(--surface-3);border-color:var(--line-2);color:var(--ink);transform:translateY(-2px)}

.btn:active{transform:translateY(0)}

.btn--gold{
  background:linear-gradient(140deg,var(--pumpkin),var(--brand-deep));
  color:#241a04;border-color:transparent;font-weight:800;
  box-shadow:0 6px 18px -6px rgba(245,146,31,.55);
}

.btn--gold:hover{background:linear-gradient(140deg,var(--amber),var(--pumpkin));color:#241a04}

.row{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center;margin-top:1.2rem}

/* ── Шүлэг / урилгын үг ───────────────────────────────── */
.poem{font-family:var(--serif);font-style:italic;
  font-size:clamp(1rem,4vw,1.16rem);line-height:1.95;color:var(--hero-ink)}

.poem p{margin:0}

.invite-text{font-size:clamp(.98rem,3.8vw,1.08rem);line-height:1.9;color:var(--ink-2)}

.invite-text .hl{color:var(--accent-2);font-weight:700;font-family:var(--serif);font-size:1.15em}

/* ── Мэдээлэл ─────────────────────────────────────────── */
.facts{margin:0;display:grid;gap:.15rem;text-align:left}

.fact{
  display:flex;flex-wrap:wrap;gap:.4rem 1rem;
  justify-content:space-between;align-items:baseline;
  padding:.85rem .2rem;
  border-bottom:1px dashed var(--line);
}

.fact:last-child{border-bottom:0}

.fact dt{color:var(--muted);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase}

.fact dd{margin:0;font-family:var(--serif);font-size:clamp(1rem,4vw,1.15rem);
  color:var(--ink);text-align:right;flex:1 1 auto}

/* ── Цомог ────────────────────────────────────────────── */
.grid{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}

.grid button{
  padding:0;border:1px solid var(--line);border-radius:14px;
  overflow:hidden;background:var(--surface-3);cursor:pointer;
  aspect-ratio:1;transition:transform .22s ease,border-color .22s ease;
}

.grid button:hover{transform:scale(1.035);border-color:var(--pumpkin)}

.grid img{width:100%;height:100%;object-fit:cover}

/* ── Холбоо барих ─────────────────────────────────────── */
.contacts{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-bottom:1rem}

.contacts a{
  display:flex;flex-direction:column;gap:.1rem;
  padding:.7rem 1.2rem;min-width:150px;
  text-decoration:none;color:var(--ink);
  border:1px solid var(--line);border-radius:14px;
  background:var(--surface-2);box-shadow:var(--shadow-1);
  transition:border-color .18s ease,transform .18s ease;
}

.contacts a:hover{border-color:var(--pumpkin);transform:translateY(-2px)}

.contacts b{font-size:.85rem;color:var(--muted);font-weight:600}

.contacts span{font-family:var(--serif);font-size:1.1rem;font-weight:700;color:var(--accent)}

/* ── Хөл ──────────────────────────────────────────────── */
.foot{
  padding:3rem 1rem calc(3rem + env(safe-area-inset-bottom));
  text-align:center;border-top:1px solid var(--line);
  background:var(--surface);
}

.foot p:first-child{font-family:var(--serif);color:var(--accent);letter-spacing:.2em;
  text-transform:uppercase;font-size:.85rem}

/* ── Хөгжмийн товч ────────────────────────────────────── */
.sound{
  position:fixed;z-index:30;
  top:calc(.9rem + env(safe-area-inset-top));right:.9rem;
  width:46px;height:46px;padding:0;
  display:grid;place-items:center;
  border:1px solid var(--line);border-radius:50%;
  background:var(--surface);box-shadow:var(--shadow-1);
  cursor:pointer;transition:border-color .2s ease,transform .2s ease;
}

.sound:hover{border-color:var(--pumpkin);transform:scale(1.06)}

.sound svg{width:22px;height:22px;fill:var(--pumpkin);stroke:var(--pumpkin);stroke-width:1.7;
  stroke-linecap:round;fill-rule:evenodd}

.sound svg .wave{fill:none;opacity:0;transition:opacity .2s ease}

.sound[aria-pressed="true"] svg .wave{opacity:1}

.sound[aria-pressed="false"] svg{opacity:.62}

/* ── Доош сум ─────────────────────────────────────────── */
.scroll{position:absolute;bottom:calc(1.6rem + env(safe-area-inset-bottom));
  left:50%;transform:translateX(-50%);width:26px;height:42px;
  border:1px solid var(--line-2);border-radius:14px}

.scroll span{position:absolute;left:50%;top:9px;width:3px;height:7px;border-radius:2px;
  background:var(--pumpkin);transform:translateX(-50%);animation:wheel 1.9s ease-in-out infinite}

@keyframes wheel{0%{opacity:0;top:8px}35%{opacity:1}100%{opacity:0;top:24px}}

/* ── Цонх ─────────────────────────────────────────────── */
.modal{
  position:fixed;inset:0;z-index:60;
  display:flex;align-items:center;justify-content:center;
  padding:1rem;
  background:var(--modal-bg);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.modal[hidden]{display:none}

.modal__v{max-width:min(460px,100%);max-height:88svh;border-radius:16px;
  border:1px solid var(--line-2);box-shadow:var(--shadow-2)}

.modal__img{max-width:100%;max-height:88svh;object-fit:contain;border-radius:14px;
  border:1px solid var(--line-2)}

.modal__x{
  position:absolute;top:calc(.8rem + env(safe-area-inset-top));right:.9rem;z-index:2;
  width:44px;height:44px;font-size:1.9rem;line-height:1;
  color:var(--amber);background:rgba(255,255,255,.09);
  border:1px solid var(--line-2);border-radius:50%;cursor:pointer;
}

.modal__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:48px;height:48px;font-size:2rem;line-height:1;
  color:var(--amber);background:rgba(255,255,255,.09);
  border:1px solid var(--line-2);border-radius:50%;cursor:pointer;
}

.modal__nav--prev{left:.8rem}

.modal__nav--next{right:.8rem}

.modal__x:hover,.modal__nav:hover{border-color:var(--pumpkin);background:rgba(255,255,255,.18)}

/* ── Слайд шоу ────────────────────────────────────────── */
.lb{margin:0;display:flex;flex-direction:column;align-items:center;gap:.8rem;max-width:100%}

.modal--lb .modal__img{max-height:calc(88svh - 72px)}

.modal__img.is-in{animation:lbIn var(--lb-dur,700ms) ease-out both}

@keyframes lbIn{
  0%{opacity:0;transform:scale(1.055)}
  14%{opacity:1}
  100%{opacity:1;transform:scale(1)}
}

.lb__bar{
  display:flex;align-items:center;gap:.75rem;
  padding:.35rem .8rem .35rem .35rem;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-1);
}

.lb__play{
  width:38px;height:38px;padding:0;display:grid;place-items:center;
  color:var(--pumpkin);background:var(--surface-2);
  border:1px solid var(--line);border-radius:50%;cursor:pointer;
  transition:border-color .18s ease,background .18s ease;
}

.lb__play:hover{border-color:var(--pumpkin);background:var(--surface-3)}

.lb__play svg{width:16px;height:16px;fill:currentColor}

.lb__play[aria-pressed="false"] .ic-pause,
.lb__play[aria-pressed="true"] .ic-play{display:none}

.lb__count{font-size:.85rem;color:var(--muted);letter-spacing:.06em;
  font-variant-numeric:tabular-nums}

.lb__prog{position:relative;width:min(34vw,140px);height:3px;border-radius:2px;
  background:var(--surface-3);overflow:hidden}

.lb__prog i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--amber),var(--brand-deep))}

@keyframes lbProg{from{width:0}to{width:100%}}

/* ── Мэдэгдэл ─────────────────────────────────────────── */
.toast{
  position:fixed;z-index:80;left:50%;transform:translate(-50%,140%);
  bottom:calc(1.6rem + env(safe-area-inset-bottom));
  padding:.7rem 1.4rem;border-radius:999px;
  background:var(--surface-3);border:1px solid var(--line-2);
  color:var(--ink);font-size:.92rem;box-shadow:var(--shadow-2);
  transition:transform .32s cubic-bezier(.2,.9,.3,1.2);
}

.toast.on{transform:translate(-50%,0)}

/* ── Илрэх анимаци ────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.3,1)}

.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .gate{display:none}
  body.locked{overflow:auto;height:auto}
}

/* ══ Төрсөн өдрийн урилгад нэмэгдсэн хэсгүүд ══════════ */

/* хос нэрийн хооронд «&» */
.hero__name .amp{
  display:block;line-height:1;margin:.04em 0 .02em;
  font-size:.42em;font-style:italic;font-weight:400;
  color:var(--hero-ink-2);opacity:.8;
}

/* ── Хөтөлбөрийн цаг хугацааны шугам ── */
.prog{list-style:none;margin:0;padding:0;text-align:left}

.prog__i{
  display:grid;grid-template-columns:58px 12px 1fr;
  gap:.6rem;align-items:baseline;padding:.5rem 0;
}

.prog__i b{
  grid-column:1;grid-row:1;text-align:right;
  font-family:var(--serif);font-size:1.02rem;color:var(--accent);
  font-variant-numeric:tabular-nums;
}

.prog__i::before{                       /* цэг + холбоос шугам */
  content:"";grid-column:2;grid-row:1;align-self:stretch;justify-self:center;
  width:11px;min-height:1.6rem;
  background-image:
    radial-gradient(circle at 50% 50%,var(--pumpkin) 0 4px,transparent 4.5px),
    linear-gradient(180deg,var(--line-2),var(--line-2));
  background-size:11px 11px,1px 100%;
  background-position:center .85em,center;      /* цэг эхний мөрийн голд */
  background-repeat:no-repeat,no-repeat;
}

.prog__i:first-child::before{
  background-image:
    radial-gradient(circle at 50% 50%,var(--pumpkin) 0 4px,transparent 4.5px),
    linear-gradient(180deg,transparent,var(--line-2) 40%);
}

.prog__i:last-child::before{
  background-image:
    radial-gradient(circle at 50% 50%,var(--pumpkin) 0 4px,transparent 4.5px),
    linear-gradient(180deg,var(--line-2) 60%,transparent);
}

.prog__i span{grid-column:3;grid-row:1;color:var(--ink-2);font-size:.98rem}

@keyframes confFall{
  0%{transform:translateY(-12vh) rotate(0deg)}
  100%{transform:translateY(112vh) rotate(680deg)}
}

/* ══════════════════════════════════════════════════════
   Нүүр хаалга — зурагтай (дугтуйны оронд)
   ══════════════════════════════════════════════════════ */

.gate--cover{padding:0;gap:0;overflow:hidden;background:var(--bg)}

.cover__bg{
  position:absolute;inset:0;
  /* зургийг нь загвар бүрийн style.css өгнө (base.css өөр хавтсанд байдаг) */
  background:center/cover no-repeat;
  transform:scale(1.06);
  transition:transform 1.8s cubic-bezier(.3,.7,.2,1),filter 1.2s ease;
  animation:coverIn 1.7s ease-out both;
}

@keyframes coverIn{from{opacity:0;transform:scale(1.13)}to{opacity:1;transform:scale(1.06)}}

.cover__veil{position:absolute;inset:0;background:var(--cover-veil)}

.cover__in{
  position:relative;z-index:2;width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:calc(2rem + env(safe-area-inset-top)) 1.4rem calc(2rem + env(safe-area-inset-bottom));
}

.cover__kicker{
  margin:0 0 .8rem;font-size:.72rem;font-weight:800;
  letter-spacing:.34em;text-transform:uppercase;color:var(--cover-kicker);
  animation:coverUp .8s ease .3s backwards;
}

.cover__names{
  display:flex;flex-direction:column;align-items:center;margin:0;
  font-family:var(--serif);font-weight:700;line-height:1.02;
  font-size:clamp(2.1rem,10vw,3.9rem);color:var(--cover-names);
  text-shadow:0 4px 26px rgba(0,0,0,.5);
  animation:coverUp .9s ease .45s backwards;
}

.cover__names .amp{
  font-size:.38em;font-style:italic;font-weight:400;
  color:var(--amber);margin:.12em 0;opacity:.9;
}

.cover__date{
  margin:1.1rem 0 0;font-size:clamp(.72rem,3.3vw,.86rem);letter-spacing:.14em;
  color:var(--cover-date);animation:coverUp .9s ease .6s backwards;
}

@keyframes coverUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ── Дарах дүрс ── */
.motif{
  position:relative;margin:2.2rem 0 1.2rem;
  padding:0;border:0;background:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  animation:coverUp .9s ease .75s backwards;
}

.motif:focus-visible{outline:2px solid var(--cover-kicker);outline-offset:14px;border-radius:14px}

.motif svg{display:block;width:100%;height:100%;overflow:visible}

.motif__burst{
  position:absolute;left:50%;top:50%;width:12px;height:12px;border-radius:50%;
  transform:translate(-50%,-50%) scale(0);pointer-events:none;
  background:radial-gradient(circle,var(--burst-1) 0 42%,var(--burst-2) 62%,transparent 72%);
}

.gate.is-opening .motif__burst{animation:burst 1.5s cubic-bezier(.35,.75,.2,1) .5s forwards}

@keyframes burst{
  0%{transform:translate(-50%,-50%) scale(0);opacity:1}
  70%{opacity:.8}
  100%{transform:translate(-50%,-50%) scale(62);opacity:0}
}

/* ── Нээгдэх агшин ── */
.gate.is-opening .cover__bg{transform:scale(1.17);filter:blur(2px)}

.gate.is-opening .cover__kicker,
.gate.is-opening .cover__names,
.gate.is-opening .cover__date{
  opacity:0;transform:translateY(-14px);animation:none;
  transition:opacity .6s ease,transform .85s ease;
}

.motif.is-lift{transform:scale(1.06);transition:transform .8s cubic-bezier(.3,1.2,.4,1)}

.motif.is-gone{opacity:0;transition:opacity .5s ease}


/* ══════════════════════════════════════════════════════
   Орчин үеийн нэмэлтүүд
   ══════════════════════════════════════════════════════ */

/* ── Гүйлтийн явцын зураас ── */
.pbar{
  position:fixed;top:0;left:0;z-index:95;
  width:100%;height:3px;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--accent-2),var(--accent));
  pointer-events:none;
}

/* ── Дараалсан илрэлт: карт доторх зүйлс ээлжлэн гарч ирнэ ── */
.card.reveal > *,
.poem.stag > *,
.invite-text.stag > *,
.prog.stag > *,
.facts.stag > *,
.contacts.stag > *,
.grid.stag > *{
  opacity:0;transform:translateY(14px);
  transition:opacity .55s ease,transform .65s cubic-bezier(.2,.8,.3,1);
  transition-delay:calc(var(--i,0) * 65ms);
}
.card.reveal.in > *,
.in .poem.stag > *,
.in .invite-text.stag > *,
.in .prog.stag > *,
.in .facts.stag > *,
.in .contacts.stag > *,
.in .grid.stag > *{opacity:1;transform:none}

/* ── Цомгийн зураг ачаалагдахад зөөлөн гарч ирнэ ──
   Анхдагчаар ХАРАГДАНА; зөвхөн ачаалж амжаагүй зурагт л бүдгэрэлт нэмнэ,
   ингэснээр load алдагдсан ч зураг нуугдахгүй. */
.grid img{transition:opacity .5s ease,transform .5s ease}
.grid img.is-fade{opacity:0;transform:scale(1.04)}
.grid img.is-fade.is-on{opacity:1;transform:none}

/* ── Тоолуурын цифр солигдоход ── */
.count__i b.tick{animation:tickIn .28s cubic-bezier(.3,1.4,.5,1)}
@keyframes tickIn{0%{transform:translateY(-24%) scale(.9);opacity:.4}100%{transform:none;opacity:1}}

/* ── Хөвөгч товчны мөр ── */
.fab{
  position:fixed;z-index:70;left:50%;
  bottom:calc(.9rem + env(safe-area-inset-bottom));
  transform:translate(-50%,140%);
  display:flex;gap:.4rem;align-items:center;
  padding:.4rem;border-radius:999px;
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  border:1px solid var(--line);box-shadow:var(--shadow-2);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:transform .42s cubic-bezier(.2,.9,.3,1.1),opacity .3s ease;
  max-width:calc(100vw - 1.6rem);
}
.fab.on{transform:translate(-50%,0)}
.fab__b{
  display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;
  min-height:42px;padding:.5rem 1rem;border-radius:999px;
  font:inherit;font-size:.88rem;font-weight:700;text-decoration:none;cursor:pointer;
  color:var(--ink-2);background:transparent;border:0;
  transition:background .18s ease,color .18s ease,transform .12s ease;
}
.fab__b:hover{background:var(--surface-2);color:var(--ink)}
.fab__b:active{transform:scale(.96)}
.fab__b--main{
  background:linear-gradient(140deg,var(--pumpkin),var(--brand-deep));
  color:#241a04;font-weight:800;
}
.fab__b--main:hover{background:linear-gradient(140deg,var(--amber),var(--pumpkin));color:#241a04}
.fab__b svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
@media (max-width:380px){.fab__b{padding:.5rem .7rem;font-size:.82rem}}

@media (prefers-reduced-motion:reduce){
  .card.reveal > *,.poem.stag > *,.invite-text.stag > *,.prog.stag > *,
  .facts.stag > *,.contacts.stag > *,.grid.stag > *{opacity:1;transform:none}
  .grid img.is-fade{opacity:1;transform:none}
  .pbar{display:none}
}

/* ══════════════════════════════════════════════════════════
   Хуанли, маягт, сэтгэлийн үг
   ══════════════════════════════════════════════════════════ */

.cal{margin:1.25rem 0 .25rem}
.cal__h{
  text-align:center;color:var(--muted);
  font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;
  margin-bottom:.85rem;
}
.cal__g{
  display:grid;grid-template-columns:repeat(7,1fr);
  gap:.2rem;text-align:center;
}
.cal__w{
  color:var(--muted);font-size:.7rem;letter-spacing:.1em;
  padding-bottom:.45rem;
}
.cal__d{
  padding:.5rem 0;border-radius:10px;
  font-variant-numeric:tabular-nums;font-size:.95rem;
  color:var(--ink-2);
}
.cal__d.is-day{
  background:linear-gradient(140deg,var(--amber),var(--pumpkin));
  color:#241a04;font-weight:800;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--amber) 22%,transparent);
}

/* ── Маягт ── */
.field{display:block;margin:0 0 1rem}
.field > span{
  display:block;margin-bottom:.4rem;
  color:var(--muted);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
}
.field input,.field textarea{
  width:100%;box-sizing:border-box;
  min-height:48px;padding:.7rem .95rem;
  font:inherit;color:var(--ink);
  background:var(--surface-2);
  border:1px solid var(--line);border-radius:14px;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.field textarea{min-height:110px;resize:vertical;line-height:1.6}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--line-2);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--amber) 18%,transparent);
}

.opts{display:grid;gap:.5rem;margin:0 0 1.1rem}
.opts label{
  display:flex;align-items:center;gap:.7rem;
  min-height:48px;padding:.55rem .95rem;
  background:var(--surface-2);
  border:1px solid var(--line);border-radius:14px;
  cursor:pointer;
  transition:border-color .18s ease,background .18s ease;
}
.opts input{accent-color:var(--pumpkin);width:20px;height:20px;flex:none}
.opts label:has(input:checked){
  border-color:var(--line-2);
  background:var(--surface-3);
}

.done{
  margin:0;padding:1rem 1.1rem;
  background:var(--surface-2);border:1px solid var(--line-2);border-radius:14px;
  font-family:var(--serif);font-size:1.05rem;
}
.done[hidden]{display:none}

/* ── Сэтгэлийн үг ── */
.wishes{display:grid;gap:.8rem;margin:0 0 1.2rem}
.wish{
  margin:0;padding:1rem 1.1rem;
  background:var(--surface-2);border:1px solid var(--line);border-radius:16px;
}
.wish blockquote{
  margin:0 0 .6rem;font-family:var(--serif);line-height:1.65;color:var(--ink);
}
.wish figcaption{
  display:flex;justify-content:space-between;align-items:baseline;gap:.75rem;
  color:var(--muted);font-size:.82rem;
}
.wish figcaption b{color:var(--ink-2);letter-spacing:.04em}