@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');

/* ═══════════════════════════════════════════
   ТОКЕН
   ═══════════════════════════════════════════ */
:root{
  --ink:#4b333d;
  --soft:#7d5b68;
  --pink:#e9a9b9;
  --deep:#d87f99;
  --rose:#c2647f;
  --cream:#fffaf5;
  --paper:#fffdf9;
  --line:#edcad3;
  --sage:#b8cbb9;
  --gold:#f0c987;
  --ease:cubic-bezier(.22,.72,.24,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#f4e4ec;color:var(--ink);font-family:Manrope,sans-serif}
body{overflow:hidden;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
img{display:block}

#app{
  position:relative;width:100%;height:100dvh;min-height:600px;max-width:520px;
  margin:auto;overflow:hidden;isolation:isolate;
  box-shadow:0 0 90px rgba(120,70,90,.13);
}

/* ═══════════════════════════════════════════
   ДЭВСГЭР — олон давхаргат gradient + аurora
   ═══════════════════════════════════════════ */
.bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bg-base{
  position:absolute;inset:-10%;
  background:
    radial-gradient(120% 80% at 12% 4%,#ffeccd 0%,transparent 55%),
    radial-gradient(110% 75% at 88% 8%,#ffd0e3 0%,transparent 52%),
    radial-gradient(120% 90% at 50% 108%,#d9c4ee 0%,transparent 58%),
    linear-gradient(158deg,#fde6ee 0%,#f9d9e6 30%,#f2cfe4 55%,#e8cbe8 78%,#dcc5e6 100%);
  background-size:200% 200%,200% 200%,200% 200%,180% 180%;
  animation:gradientDrift 26s var(--ease-soft) infinite alternate;
}
.aurora{
  position:absolute;border-radius:50%;filter:blur(48px);mix-blend-mode:multiply;
  opacity:.62;will-change:transform;
}
.a1{width:70vw;height:70vw;max-width:340px;max-height:340px;background:radial-gradient(circle,#f7b7cd 0%,#f7b7cd55 55%,transparent 72%);top:-14%;left:-22%;animation:blobA 19s ease-in-out infinite alternate}
.a2{width:64vw;height:64vw;max-width:320px;max-height:320px;background:radial-gradient(circle,#ffdda6 0%,#ffdda655 55%,transparent 72%);top:8%;right:-24%;animation:blobB 23s ease-in-out infinite alternate}
.a3{width:76vw;height:76vw;max-width:360px;max-height:360px;background:radial-gradient(circle,#c9b7ea 0%,#c9b7ea4d 55%,transparent 72%);bottom:-20%;left:-18%;animation:blobC 27s ease-in-out infinite alternate}
.a4{width:58vw;height:58vw;max-width:290px;max-height:290px;background:radial-gradient(circle,#a8d6c8 0%,#a8d6c84d 55%,transparent 72%);bottom:-8%;right:-20%;animation:blobD 21s ease-in-out infinite alternate}
.bg-shine{
  position:absolute;inset:-40%;opacity:.5;
  background:conic-gradient(from 0deg at 50% 50%,transparent 0deg,rgba(255,255,255,.5) 42deg,transparent 96deg,transparent 260deg,rgba(255,246,236,.42) 310deg,transparent 360deg);
  animation:shineSpin 42s linear infinite;
}
.grain{
  position:absolute;inset:0;opacity:.15;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E");
}
.vignette{position:absolute;inset:0;background:radial-gradient(115% 85% at 50% 42%,transparent 52%,rgba(126,80,98,.16) 100%)}

/* зөөлөн bokeh бөмбөлгүүд ба зүрхнүүд — gif урсгахгүй */
.bokeh{position:absolute;inset:0;overflow:hidden}
.bokeh s{
  position:absolute;width:var(--size,40px);height:var(--size,40px);border-radius:50%;
  text-decoration:none;opacity:0;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.9),var(--tint,rgba(244,182,206,.55)) 62%,transparent 72%);
  filter:blur(.5px);
  animation:bokehDrift var(--dur,22s) ease-in-out var(--delay,0s) infinite;
  will-change:transform,opacity;
}
.bokeh b{
  position:absolute;font-size:var(--size,16px);color:#e08fac;opacity:0;font-style:normal;
  animation:floatUp var(--dur,20s) linear var(--delay,0s) infinite;
}

/* ═══════════════════════════════════════════
   ДҮР ЗУРАГ / шилжилт
   ═══════════════════════════════════════════ */
.scene{
  position:absolute;inset:0;
  padding:calc(26px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  opacity:0;visibility:hidden;transform:scale(.97) translateY(16px);filter:blur(6px);
  transition:opacity .9s var(--ease-soft),transform 1.05s var(--ease),filter .9s var(--ease-soft),visibility 0s 1.05s;
  z-index:1;
}
.scene.is-active{opacity:1;visibility:visible;transform:none;filter:none;transition-delay:0s}

/* зөөлөн гарах хөшиг — хэсэг хооронд шилжихэд */
/* Дэвсгэртэйгээ ижил жигд өнгө — дунд нь толбо гарахгүй */
.veil{
  position:absolute;inset:0;z-index:30;pointer-events:none;opacity:0;
  background:linear-gradient(158deg,#fde6ee 0%,#f9d9e6 30%,#f2cfe4 55%,#e8cbe8 78%,#dcc5e6 100%);
  transition:opacity .62s var(--ease-soft);
}
.veil.on{opacity:1}

.sparkles{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden}

/* ── Эхлэлийн дэлгэц ── */
.gate{
  position:absolute;inset:0;z-index:45;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:26px;
  background:linear-gradient(158deg,#fde6ee 0%,#f9d9e6 30%,#f2cfe4 55%,#e8cbe8 78%,#dcc5e6 100%);
  transition:opacity .8s var(--ease-soft),visibility 0s .8s;
}
.gate.gone{opacity:0;visibility:hidden;pointer-events:none}
.gate-heart{font-size:56px;color:#dd8ba6;margin-bottom:22px;animation:heartPulse 1.7s ease-in-out infinite}
.gate h2{margin-bottom:30px}
.gate-hint{font:11px 'DM Mono',monospace;color:#a77b87;margin:20px 0 0;letter-spacing:.06em}

/* ═══════════════════════════════════════════
   ТИПОГРАФ
   ═══════════════════════════════════════════ */
.eyebrow{text-transform:uppercase;letter-spacing:.19em;font:500 9px 'DM Mono',monospace;color:#a77b87;margin:0 0 16px}
h1,h2,h3,p{margin-top:0}
h2{font:500 clamp(28px,7.6vw,39px)/1.2 'Playfair Display',serif;letter-spacing:-.035em;margin:0}
h2 em{color:var(--deep);font-style:italic}
h2 span{font-family:Manrope;font-size:.7em;letter-spacing:0}

.pill-button{
  position:relative;background:rgba(255,255,255,.72);backdrop-filter:blur(6px);
  border:1px solid rgba(211,140,160,.3);border-radius:99px;padding:15px 24px;
  font-weight:600;font-size:13px;box-shadow:0 10px 26px rgba(147,84,103,.13);
  transition:transform .32s var(--ease),background .3s,box-shadow .3s;
}
.pill-button:active{transform:scale(.94)}
.primary{
  background:linear-gradient(140deg,#e59ab1,#cf7291);color:#fff;border-color:transparent;
  box-shadow:0 14px 30px rgba(190,90,120,.34);
}
.primary:hover{box-shadow:0 18px 38px rgba(190,90,120,.42)}
.ghost{background:rgba(255,255,255,.5);box-shadow:0 6px 16px rgba(147,84,103,.1);color:#a57c87}
.text-button{font-size:12px;background:transparent;text-decoration:underline;text-underline-offset:4px;color:#9f7480}

/* ═══════════════════════════════════════════
   1. ОРШИЛ — бичиж буй текст + зүрх
   ═══════════════════════════════════════════ */
.intro-text{
  font:500 clamp(30px,8.6vw,44px)/1.24 'Playfair Display',serif;letter-spacing:-.045em;margin:0;
  text-wrap:balance;animation:breathe 3.8s ease-in-out infinite;
}
.intro-text>span:not(.typed-line){font-family:Manrope;font-size:.54em;letter-spacing:-.16em}
.intro-text.intro-leave{opacity:0;transform:translateY(-14px) scale(.985);filter:blur(4px);transition:opacity .74s var(--ease-soft),transform .74s var(--ease-soft),filter .74s var(--ease-soft)}
.intro-text .typed-line,.typing-title .typed-line{
  display:table;margin:0 auto;width:max-content;max-width:100%;overflow:hidden;white-space:nowrap;
  font-family:'Playfair Display',serif;font-size:inherit;font-weight:inherit;line-height:inherit;
  letter-spacing:inherit;clip-path:inset(0 100% 0 0);
  animation:typeLine 1.05s steps(var(--characters),end) var(--line-delay) forwards;
}
.typing-title .typed-accent{color:var(--deep);font-style:italic}

/* — шинэ зүрх — */
.intro-heart{position:relative;width:150px;height:150px;margin-top:30px;display:grid;place-items:center}
.heart-core{
  position:relative;width:78px;height:71px;overflow:visible;
  filter:drop-shadow(0 14px 20px rgba(190,86,120,.36));
  animation:heartBeat 1.9s var(--ease) infinite;
}
.intro-heart .ring{
  position:absolute;width:70px;height:70px;border:1.5px solid rgba(219,138,163,.55);border-radius:50%;
  animation:ripple 3.2s var(--ease-soft) infinite;
}
.intro-heart .ring-2{animation-delay:1.06s}
.intro-heart .ring-3{animation-delay:2.12s}
.intro-heart .orbit{
  position:absolute;font-size:15px;color:#e6a0b6;font-style:normal;
  animation:orbit 7s linear infinite;transform-origin:center;
}
.intro-heart .o1{animation-duration:7s}
.intro-heart .o2{animation-duration:9.5s;animation-direction:reverse;font-size:12px;color:#e8c087}
.intro-heart .o3{animation-duration:11.5s;font-size:11px;color:#c9a7e0}

/* ═══════════════════════════════════════════
   2. ЦОМОГ — карт бүр өөрийн хүрээтэй
   ═══════════════════════════════════════════ */
.scene-memories{justify-content:center;gap:0}
.album{
  position:relative;width:100%;max-width:404px;height:min(46vh,372px);
  margin:18px 0 6px;
}
.album-track{position:absolute;inset:0}
/* Зурагнууд дээрээс нэг нэгээрээ унаж, бие биенээ бага зэрэг дарж тавигдана */
.album-card{
  position:absolute;left:50%;top:50%;width:112px;height:146px;
  margin-left:-56px;margin-top:-73px;
  border-radius:5px;padding:6px 6px 22px;
  background:var(--frame,#fffdf9);
  box-shadow:0 16px 30px rgba(112,66,84,.24),0 2px 0 rgba(255,255,255,.8) inset;
  transform:translate(var(--x,0px),-120vh) rotate(var(--spin,-40deg)) scale(.86);
  opacity:0;z-index:var(--z,1);
  animation:pourIn .62s cubic-bezier(.2,.86,.3,1.12) var(--drop,0s) forwards;
  will-change:transform,opacity;
}
.album-card.lift{
  animation:cardLift 1.15s var(--ease) forwards;
}
.album-card img{width:100%;height:100%;object-fit:cover;border-radius:2px;background:#f3e3e8}
.album-card figcaption{
  position:absolute;left:0;right:0;bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font:500 8px/1.3 'Playfair Display',serif;color:#8b6472;letter-spacing:.01em;padding:0 6px;
}
.album-card .tape{
  position:absolute;top:-8px;left:50%;width:44px;height:16px;margin-left:-22px;
  background:var(--tape,rgba(247,214,190,.72));border-radius:2px;
  box-shadow:0 2px 5px rgba(120,80,90,.14);transform:rotate(-3deg);
}
.album-card .pin{
  position:absolute;top:-6px;right:9px;width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff,var(--pinc,#e08fa6));
  box-shadow:0 4px 8px rgba(120,70,90,.3);
}
/* хүрээний хувилбарууд */
.album-card.f1{--frame:#fffdf9;--tape:rgba(246,212,192,.75);--pinc:#e08fa6}
.album-card.f2{--frame:#fff6ee;--tape:rgba(214,231,215,.8);--pinc:#8fbfa4}
.album-card.f3{--frame:#fdf4f8;--tape:rgba(240,214,236,.78);--pinc:#c49ae0}
.album-card.f4{--frame:#fffaf0;--tape:rgba(247,226,178,.8);--pinc:#e8bb6c}
.album-card.f5{--frame:#f7f6fb;--tape:rgba(207,219,244,.8);--pinc:#8fa8dd}
.album-card.f2{border-radius:12px}
.album-card.f3{padding:8px 8px 24px;border:1px solid rgba(214,160,186,.35)}
.album-card.f5{border-radius:76px 76px 6px 6px;padding-top:11px}
.album-card.f5 img{border-radius:70px 70px 2px 2px}


.memories-next{
  position:absolute;bottom:calc(26px + env(safe-area-inset-bottom));z-index:6;
  opacity:0;pointer-events:none;transform:translateY(14px);
  transition:opacity .8s var(--ease-soft),transform .8s var(--ease);
}
.memories-next.ready{opacity:1;pointer-events:auto;transform:none}

/* ═══════════════════════════════════════════
   3. ХҮСЭЛ
   ═══════════════════════════════════════════ */
.scene-wish{justify-content:space-between;padding-top:22vh;padding-bottom:16vh}
.scene-wish .wish-copy{animation:riseIn 1.2s .25s both}
.tiny-heart{display:block;color:#d7849c;font-size:25px;margin-bottom:18px;animation:heartPulse 1.5s infinite}
.choice-buttons{display:flex;gap:12px;align-items:center;justify-content:center;min-height:56px;animation:riseIn 1.1s .7s both}
/* зугтдаг товч — баруун тийш хол зугтана, давхцахгүй */
#no-button.runaway{
  position:absolute;margin:0;z-index:25;
  transition:left .55s var(--ease),top .55s var(--ease),transform .55s var(--ease),opacity .5s var(--ease-soft);
}
#app:not([data-scene="wish"]) #no-button.runaway{opacity:0;pointer-events:none}

/* ═══════════════════════════════════════════
   4. БЯЛУУ — шинэ 3 давхар загвар
   ═══════════════════════════════════════════ */
.countdown{font:500 92px/1 'Playfair Display';color:#d77e98;min-height:110px;transition:color .6s ease}
.countdown.blow-prompt{font-size:32px;line-height:1.25;color:#c8738d;animation:promptBreathe 2.1s ease-in-out infinite}
.cake-stage{width:270px;height:296px;position:relative;display:grid;place-items:end center;margin-top:6px}
.cake{
  position:relative;width:250px;height:236px;
  filter:drop-shadow(0 20px 16px rgba(147,71,92,.18));
  animation:cakeFloat 4.4s ease-in-out infinite;
}
.tier{position:absolute;left:50%;border-radius:9px 9px 12px 12px;background:linear-gradient(180deg,#f2b4c6 0%,#eda3ba 55%,#e493ad 100%)}
.tier .icing{
  position:absolute;left:-2px;right:-2px;top:-8px;height:20px;border-radius:11px 11px 4px 4px;
  background:linear-gradient(180deg,#fffaf2,#fdeee2);
  box-shadow:0 3px 6px rgba(160,100,120,.1);
}
.tier .icing:after{
  content:"";position:absolute;left:0;right:0;top:100%;height:17px;
  background:radial-gradient(circle at 11px 0,#fdeee2 10.5px,transparent 11px) repeat-x;
  background-size:22px 17px;
}
.tier .sprinkles{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
.tier .sprinkles s{position:absolute;width:3px;height:8px;border-radius:2px;text-decoration:none;opacity:.9}
.tier-bot{width:214px;height:74px;margin-left:-107px;bottom:26px}
.tier-mid{width:168px;height:62px;margin-left:-84px;bottom:96px;background:linear-gradient(180deg,#f7c9d3 0%,#f2b6c6 55%,#eda6ba 100%)}
.tier-top{width:122px;height:52px;margin-left:-61px;bottom:154px;background:linear-gradient(180deg,#fbdbdd 0%,#f6c7d1 55%,#f1b5c4 100%)}
.plate{position:absolute;left:50%;bottom:6px;width:246px;height:26px;margin-left:-123px;border-radius:50%;background:linear-gradient(180deg,#fdf1f2,#efd2d8)}
.plate span{position:absolute;left:12px;right:12px;top:5px;height:10px;border-radius:50%;background:rgba(255,255,255,.6)}
.candles{position:absolute;left:50%;bottom:200px;width:104px;margin-left:-52px;height:36px;display:flex;justify-content:space-between;z-index:2}
.candles i{width:7px;height:36px;border-radius:4px;background:repeating-linear-gradient(46deg,#f3d6a2 0 5px,#fff5da 5px 10px);box-shadow:inset -2px 0 3px rgba(160,120,80,.22)}
.flames{position:absolute;left:50%;bottom:236px;width:104px;margin-left:-52px;display:flex;justify-content:space-between;z-index:3}
.flames i{
  width:13px;height:20px;margin-left:-3px;border-radius:50% 50% 46% 46%;
  background:radial-gradient(ellipse at 50% 72%,#fff6d0 0%,#ffcf6b 42%,#ff9d4d 78%,#ff8a3d 100%);
  box-shadow:0 0 16px 5px rgba(255,196,105,.6),0 0 34px 12px rgba(255,170,90,.26);
  transform-origin:50% 100%;animation:flicker .62s ease-in-out infinite alternate;
}
.flames i:nth-child(even){animation-delay:.19s}
.flames i:nth-child(3n){animation-delay:.33s}
.flames.out i{animation:blow .95s var(--ease-soft) forwards}
.smokes{position:absolute;left:50%;bottom:250px;width:104px;margin-left:-52px;display:flex;justify-content:space-between;z-index:2}
.smokes i{width:6px;height:6px;border-radius:50%;background:rgba(170,150,155,.5);opacity:0}
.smokes.on i{animation:smoke 2.4s ease-out forwards}
.smokes.on i:nth-child(2){animation-delay:.12s}
.smokes.on i:nth-child(3){animation-delay:.24s}
.smokes.on i:nth-child(4){animation-delay:.36s}
.smokes.on i:nth-child(5){animation-delay:.48s}
.cake-message{font:500 15px 'Playfair Display';color:#a97885;margin:14px 0 0}

.scene-cake.celebrating .cake{animation:cakeLift 2.8s var(--ease) forwards}
.scene-cake.celebrating .countdown{animation:celebrationText 1s .3s both}
.scene-cake.celebrating .cake-message{animation:celebrationText 1s .5s both}
/* Хүслийн үгс дээшээ хөвнө */
.wish-words{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:5}
/* Үг бүр хөөрхөн бөмбөлөг дотор хөвнө */
.wish-words span{
  position:absolute;left:50%;right:auto;bottom:-56px;transform:translateX(-50%);
  width:max-content;max-width:82%;text-align:center;opacity:0;
  padding:10px 18px;border-radius:99px;
  font:500 clamp(12px,3.3vw,15px)/1.35 'Playfair Display',serif;
  color:var(--wc,#c8718c);
  background:linear-gradient(158deg,rgba(255,255,255,.96),rgba(255,240,247,.9));
  border:1px solid rgba(228,170,192,.55);
  box-shadow:0 10px 22px rgba(150,90,115,.18),inset 0 1px 0 rgba(255,255,255,.95);
  animation:wordRise var(--wdur,7s) cubic-bezier(.3,.5,.3,1) forwards;
}
.wish-words span:before,.wish-words span:after{
  content:"";position:absolute;left:24%;border-radius:50%;
  background:rgba(255,246,250,.94);border:1px solid rgba(228,170,192,.5);
}
.wish-words span:before{bottom:-9px;width:9px;height:9px}
.wish-words span:after{bottom:-18px;left:19%;width:5px;height:5px}

/* Ашиглагдаагүй gif-үүд баярын хуудсанд */
/* opacity биш visibility ашиглана — эс тэгвэл mix-blend-mode ажиллахгүй */
.party-gifs{position:absolute;inset:0;pointer-events:none;visibility:hidden;overflow:hidden;z-index:3}
.scene-cake.celebrating .party-gifs{visibility:visible}
/* Бөөрөнхий наалт хэлбэрээр — захидал, төгсгөлийн дугуй хүрээтэй эв нэгдэлтэй */
.party-gifs img{
  position:absolute;width:64px;height:64px;object-fit:cover;opacity:0;
  border-radius:50%;background:#fffaf4;
  box-shadow:0 8px 16px rgba(130,76,98,.22),0 0 0 4px rgba(255,255,255,.85),0 0 0 5px rgba(232,178,198,.5);
}
.scene-cake.celebrating .party-gifs img{
  animation:dancerIn 1s var(--party-delay,1.4s) both,partyBob 3.4s calc(var(--party-delay,1.4s) + 1s) ease-in-out infinite;
}
.party-gifs img:nth-child(1){left:1%;top:44%;--party-delay:1.45s}
.party-gifs img:nth-child(2){right:1%;top:41%;--party-delay:1.7s}
.party-gifs img:nth-child(3){left:3%;top:64%;--party-delay:1.95s}
.party-gifs img:nth-child(4){right:2%;top:67%;--party-delay:2.2s}
.party-gifs img:nth-child(5){left:7%;top:87%;--party-delay:2.45s}
.celebration-gifs{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .9s var(--ease-soft);overflow:hidden;z-index:4}
.scene-cake.celebrating .celebration-gifs{opacity:1}
.celebration-gifs img{position:absolute;width:84px;max-height:98px;object-fit:contain;border-radius:14px;filter:drop-shadow(0 8px 10px rgba(115,65,78,.18));opacity:0}
.scene-cake.celebrating .celebration-gifs img{animation:dancerIn 1.1s var(--dance-delay,.3s) both,dancerMove 2.6s calc(var(--dance-delay,.3s) + 1.1s) ease-in-out infinite}
.celebration-gifs img:nth-child(1){left:3%;bottom:16%;--dance-delay:.18s}
.celebration-gifs img:nth-child(2){right:2%;bottom:15%;--dance-delay:.43s}
.celebration-gifs img:nth-child(3){left:9%;top:20%;--dance-delay:.68s}
.celebration-gifs img:nth-child(4){right:7%;top:21%;--dance-delay:.93s}
.celebration-gifs img:nth-child(5){left:calc(50% - 42px);bottom:4%;--dance-delay:1.18s}

/* ═══════════════════════════════════════════
   5. ЗАХИДАЛ
   ═══════════════════════════════════════════ */
/* Захидлын хажуугийн бөөрөнхий gif хүрээ */
.capybara{
  width:132px;height:132px;position:relative;z-index:3;display:grid;place-items:center;
  margin-bottom:10px;transform:translateX(-170%) rotate(-12deg);
  animation:capyRun 2.5s .45s var(--ease) forwards;
}
.capybara img{
  width:100%;height:100%;object-fit:cover;border-radius:50%;background:#fff8f1;
  box-shadow:0 14px 28px rgba(130,76,98,.28),0 0 0 6px rgba(255,255,255,.8);
  animation:orbBreathe 4.4s ease-in-out infinite;
}
.capy-halo{
  position:absolute;inset:-10px;border-radius:50%;z-index:-1;
  background:conic-gradient(from 0deg,#f6bcd0,#f9dfae,#cfc0ec,#b6ddcf,#f6bcd0);
  filter:blur(8px);opacity:.75;animation:shineSpin 13s linear infinite;
}
.letter-mini{
  position:absolute;bottom:2px;right:-10px;width:52px;height:36px;display:grid;place-items:center;
  border-radius:4px;background:#fff8ea;color:#df8ea6;font-size:15px;
  transform:rotate(-14deg);z-index:4;box-shadow:0 5px 10px rgba(122,74,84,.24);
}
.scene-letter{justify-content:center}
.letter-stage{width:min(100%,350px);margin-top:-7px;position:relative}
.envelope{height:190px;width:100%;position:relative;border-radius:6px;background:linear-gradient(160deg,#f7d3d9,#f2c4ce);box-shadow:0 18px 32px rgba(136,80,100,.22);overflow:hidden;transition:transform .5s var(--ease)}
.envelope:hover{transform:translateY(-3px)}
.envelope:active{transform:scale(.97)}
.envelope:before,.envelope:after{content:"";position:absolute;width:78%;height:135%;background:#f9dfe1;top:55px}
.envelope:before{left:-45px;transform:rotate(35deg)}
.envelope:after{right:-45px;transform:rotate(-35deg)}
.flap{position:absolute;left:0;right:0;top:-30px;height:140px;background:#f6d3d7;clip-path:polygon(0 0,100% 0,50% 90%);transform-origin:top;transition:transform 1.05s var(--ease);z-index:2}
.envelope-heart{position:absolute;z-index:3;left:calc(50% - 15px);top:88px;color:#db879d;font-size:29px;animation:heartPulse 1.8s infinite}
.envelope-hint{position:absolute;z-index:3;left:0;right:0;bottom:16px;font:500 10px 'DM Mono';letter-spacing:.14em;text-transform:uppercase;color:#b57e8e}
.envelope.open .flap{transform:rotateX(180deg)}
.envelope.open .envelope-hint{opacity:0;transition:opacity .4s}
.letter-paper{position:absolute;width:92%;left:4%;top:15px;padding:29px 22px 25px;background:var(--paper);border-radius:4px;box-shadow:0 14px 32px rgba(105,65,77,.18);z-index:4;transform:scale(.2) translateY(170px);opacity:0;visibility:hidden;transition:all 1.25s var(--ease)}
.letter-paper.open{position:relative;top:auto;transform:none;opacity:1;visibility:visible;animation:paperSettle 1.25s var(--ease)}
.letter-content{max-height:38vh;overflow-y:auto;text-align:left;font:500 16px/1.75 'Playfair Display';color:#76535d;padding-right:4px}
.letter-content p{margin:0 0 13px}
.letter-content{scrollbar-width:thin;scrollbar-color:#e7bfcb transparent}
.letter-content::-webkit-scrollbar{width:5px}
.letter-content::-webkit-scrollbar-track{background:transparent}
.letter-content::-webkit-scrollbar-thumb{background:#e7bfcb;border-radius:99px}
.letter-next{margin-top:13px;font-size:11px;padding:13px 18px}

/* ═══════════════════════════════════════════
   6. БЭЛЭГ — шинэ 3D хайрцаг
   ═══════════════════════════════════════════ */
.scene-gifts{justify-content:flex-start;overflow-y:auto;padding-top:calc(30px + env(safe-area-inset-top))}
.gift-heading p:last-child{font-size:12px;color:#a47d87;margin:10px 0 16px}
.gifts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;width:100%;max-width:334px;padding-bottom:18px}
.gift{
  position:relative;aspect-ratio:1/1.1;background:none;padding:0;
  transform:translateY(18px) scale(.86);opacity:0;
  animation:giftIn .8s var(--ease) var(--delay) forwards;
  transition:transform .4s var(--ease);
}
.gift:hover{transform:translateY(-4px)}
.gift:active{transform:scale(.94)}
.gift-box{position:absolute;inset:0;display:block}
.gift-body{
  position:absolute;left:7%;right:7%;bottom:0;height:62%;border-radius:3px 3px 7px 7px;
  background:linear-gradient(158deg,var(--g1) 0%,var(--g2) 58%,var(--g3) 100%);
  box-shadow:0 10px 18px rgba(126,72,85,.22),inset 0 -10px 16px rgba(90,40,60,.1),inset 0 2px 0 rgba(255,255,255,.25);
  overflow:hidden;
}
.gift-body:after{
  content:"";position:absolute;left:42%;top:0;bottom:0;width:16%;
  background:linear-gradient(90deg,rgba(160,110,125,.18),#fffaf0 22%,#fff7ea 78%,rgba(160,110,125,.18));
}
.gift-lid{
  position:absolute;left:0;right:0;top:22%;height:19%;border-radius:5px;
  background:linear-gradient(170deg,var(--g2) 0%,var(--g3) 100%);
  box-shadow:0 7px 12px rgba(126,72,85,.26),inset 0 2px 0 rgba(255,255,255,.45);
  transform-origin:50% 100%;transition:transform .55s var(--ease);z-index:3;
}
.gift-lid:after{
  content:"";position:absolute;left:42%;top:0;bottom:0;width:16%;
  background:linear-gradient(90deg,rgba(160,110,125,.2),#fffaf0 24%,#fff7ea 76%,rgba(160,110,125,.2));
}
.gift-bow{position:absolute;left:50%;top:22%;width:60%;height:26%;margin-left:-30%;z-index:4;transform:translateY(-78%);transition:transform .6s var(--ease),opacity .5s}
.gift-bow i,.gift-bow b{
  position:absolute;top:6%;width:48%;height:88%;
  background:linear-gradient(160deg,#fffdf7 0%,#fff2e2 55%,var(--g3) 130%);
  box-shadow:0 3px 6px rgba(120,70,90,.22);
}
.gift-bow i{left:0;border-radius:70% 26% 66% 20%;transform:rotate(-12deg)}
.gift-bow b{right:0;border-radius:26% 70% 20% 66%;transform:rotate(12deg)}
.gift-bow s{
  position:absolute;left:50%;top:26%;width:24%;height:48%;margin-left:-12%;
  border-radius:50%;background:radial-gradient(circle at 36% 30%,#fff,#fdeedd);
  text-decoration:none;box-shadow:0 2px 5px rgba(120,70,90,.26);z-index:2;
}
.gift-shine{position:absolute;inset:0;overflow:hidden;border-radius:8px;z-index:5;pointer-events:none}
.gift-shine:after{
  content:"";position:absolute;top:-60%;left:-120%;width:60%;height:220%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);transform:rotate(18deg);
  animation:sheen 4.6s var(--ease-soft) var(--delay) infinite;
}
.gift-num{position:absolute;bottom:-3px;left:0;right:0;font:500 10px 'DM Mono';color:#87616b;z-index:6}
.gift.open .gift-lid{transform:translateY(-130%) rotate(-14deg)}
.gift.open .gift-bow{transform:translateY(-200%) rotate(-18deg);opacity:0}
.gift.open{animation:giftPop .7s var(--ease) forwards}

.voucher{position:fixed;inset:0;background:rgba(105,65,77,.42);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;padding:27px;opacity:0;visibility:hidden;transition:.45s var(--ease-soft);z-index:40}
.voucher.show{opacity:1;visibility:visible}
.voucher-card{position:relative;width:100%;max-width:318px;padding:42px 28px 28px;background:#fffaf1;border:1px solid #e8c0ca;border-radius:6px;box-shadow:0 26px 60px rgba(75,42,54,.4);text-align:left;transform:translateY(24px) scale(.94) rotate(2deg);transition:.75s var(--ease)}
.voucher.show .voucher-card{transform:none}
.voucher-card>span{font:10px 'DM Mono';letter-spacing:.12em;text-transform:uppercase;color:#bd8294}
.voucher-card h3{font:600 32px/1.1 'Playfair Display';color:#ce7690;margin:14px 0}
.voucher-card p{font:14px/1.6 Manrope;margin-bottom:22px}
.voucher-image{
  width:100%;max-width:230px;margin:0 auto 20px;display:block;border-radius:8px;
  background:#fff;padding:8px;border:1px solid #eed3da;box-shadow:0 8px 18px rgba(120,70,90,.14);
}
.voucher-image[hidden]{display:none}
.finish-button{margin:2px 0 20px;font-size:12px;padding:14px 26px}
.voucher-footer{border-top:1px dashed #e2b8c0;padding-top:13px;font:9px 'DM Mono';color:#a47783}
.close-voucher{position:absolute;right:13px;top:10px;background:transparent;font-size:25px;color:#a27780}

/* ═══════════════════════════════════════════
   7. ТӨГСГӨЛ — бөөрөнхий end.gif
   ═══════════════════════════════════════════ */
.end-orb{
  position:relative;width:min(64vw,248px);aspect-ratio:1;margin-bottom:26px;
  display:grid;place-items:center;animation:endingRise 1.6s var(--ease) both;
}
.end-orb img{
  width:100%;height:100%;object-fit:cover;border-radius:50%;
  box-shadow:0 22px 46px rgba(130,72,96,.34),0 0 0 7px rgba(255,255,255,.72);
  animation:orbBreathe 5s ease-in-out infinite;
}
.end-orb .orb-ring{
  position:absolute;inset:-14px;border-radius:50%;
  background:conic-gradient(from 0deg,#f3a9c0,#f7d79b,#c6b3e8,#a9d6c6,#f3a9c0);
  filter:blur(7px);opacity:.65;animation:shineSpin 11s linear infinite;z-index:-1;
}
.end-orb .orb-glow{
  position:absolute;inset:-34px;border-radius:50%;
  background:radial-gradient(circle,rgba(243,169,192,.34) 0%,transparent 68%);
  animation:ripple 3.6s var(--ease-soft) infinite;z-index:-2;
}
.ending-note{font:13px Manrope;color:#a17885;margin:14px 0 26px}
.restart{margin-top:10px}

/* ═══════════════════════════════════════════
   KEYFRAMES
   ═══════════════════════════════════════════ */
@keyframes gradientDrift{0%{background-position:0% 0%,100% 0%,50% 100%,0% 50%}100%{background-position:30% 25%,70% 20%,40% 80%,100% 50%}}
@keyframes blobA{0%{transform:translate(0,0) scale(1)}100%{transform:translate(38px,44px) scale(1.16)}}
@keyframes blobB{0%{transform:translate(0,0) scale(1.08)}100%{transform:translate(-44px,52px) scale(.94)}}
@keyframes blobC{0%{transform:translate(0,0) scale(.96)}100%{transform:translate(52px,-40px) scale(1.14)}}
@keyframes blobD{0%{transform:translate(0,0) scale(1.1)}100%{transform:translate(-36px,-46px) scale(.92)}}
@keyframes shineSpin{to{transform:rotate(360deg)}}
@keyframes bokehDrift{
  0%{opacity:0;transform:translate(0,26px) scale(.72)}
  18%{opacity:var(--peak,.5)}
  50%{transform:translate(var(--dx,18px),-28vh) scale(1.06)}
  82%{opacity:var(--peak,.5)}
  100%{opacity:0;transform:translate(0,-58vh) scale(.8)}
}
@keyframes floatUp{
  0%{opacity:0;transform:translateY(28px) scale(.86) rotate(-6deg)}
  12%{opacity:var(--peak,.3)}
  50%{transform:translateY(-42vh) scale(1) rotate(6deg)}
  88%{opacity:var(--peak,.3)}
  100%{opacity:0;transform:translateY(-88vh) scale(.9) rotate(-4deg)}
}
@keyframes breathe{50%{transform:translateY(-5px) rotate(-.4deg)}}
@keyframes heartPulse{50%{transform:scale(1.13)}}
@keyframes heartBeat{0%,100%{transform:scale(1)}18%{transform:scale(1.14)}30%{transform:scale(1.02)}46%{transform:scale(1.1)}}
@keyframes ripple{0%{transform:scale(.75);opacity:.7}100%{transform:scale(2.1);opacity:0}}
@keyframes orbit{
  0%{transform:rotate(0deg) translateX(62px) rotate(0deg);opacity:.35}
  50%{opacity:.95}
  100%{transform:rotate(360deg) translateX(62px) rotate(-360deg);opacity:.35}
}
@keyframes typeLine{0%{clip-path:inset(0 100% 0 0);transform:translateY(7px);filter:blur(2px)}75%{transform:translateY(-1px)}100%{clip-path:inset(0 0 0 0);transform:none;filter:none}}
@keyframes riseIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes pourIn{
  0%{opacity:0;transform:translate(var(--x,0px),-120vh) rotate(var(--spin,-40deg)) scale(.86)}
  8%{opacity:1}
  72%{transform:translate(var(--x,0px),calc(var(--y,0px) + 12px)) rotate(calc(var(--r,0deg) * 1.25)) scale(1.05)}
  100%{opacity:1;transform:translate(var(--x,0px),var(--y,0px)) rotate(var(--r,0deg)) scale(1)}
}
@keyframes cardLift{
  0%{transform:translate(var(--x,0px),var(--y,0px)) rotate(var(--r,0deg)) scale(1)}
  38%{transform:translate(calc(var(--x,0px) + 4px),calc(var(--y,0px) - 26px)) rotate(calc(var(--r,0deg) + 5deg)) scale(1.07)}
  100%{transform:translate(var(--x,0px),var(--y,0px)) rotate(var(--r,0deg)) scale(1)}
}
@keyframes promptBreathe{50%{transform:scale(1.07);letter-spacing:.03em}}
@keyframes cakeFloat{50%{transform:translateY(-9px) rotate(.5deg)}}
@keyframes cakeLift{0%{transform:translateY(0) scale(1)}38%{transform:translateY(-20vh) scale(1.07)}100%{transform:translateY(-27vh) scale(.88)}}
@keyframes celebrationText{to{opacity:0;transform:translateY(-16px)}}
@keyframes flicker{0%{transform:scale(1) rotate(-2deg)}100%{transform:scale(.9,1.08) rotate(3deg)}}
@keyframes blow{to{opacity:0;transform:translate(22px,-38px) scale(2.1)}}
@keyframes smoke{0%{opacity:.6;transform:translateY(0) scale(.6)}100%{opacity:0;transform:translateY(-70px) scale(2.6)}}
@keyframes dancerIn{from{opacity:0;transform:translateY(42px) scale(.5) rotate(-12deg)}to{opacity:1;transform:translateY(0) scale(1) rotate(0)}}
@keyframes dancerMove{0%,100%{margin-top:0;transform:rotate(-5deg) scale(1)}50%{margin-top:-17px;transform:rotate(6deg) scale(1.08)}}
@keyframes partyBob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-13px) rotate(5deg)}}
@keyframes capyRun{70%{transform:translateX(5%) rotate(3deg)}100%{transform:translateX(0) rotate(0)}}
@keyframes paperSettle{0%{transform:scale(.88) translateY(60px);opacity:0}65%{transform:scale(1.025) translateY(-5px)}100%{transform:none;opacity:1}}
@keyframes giftIn{to{opacity:1;transform:none}}
@keyframes giftPop{35%{transform:scale(1.12) rotate(4deg)}100%{transform:scale(.94);opacity:.55}}
@keyframes sheen{0%,72%{left:-120%}100%{left:170%}}
@keyframes endingRise{from{opacity:0;transform:translateY(38px) scale(.88)}to{opacity:1;transform:none}}
@keyframes orbBreathe{50%{transform:scale(1.035)}}
@keyframes wordRise{
  0%{opacity:0;transform:translateX(-50%) translateY(0) scale(.82)}
  16%{opacity:1;transform:translateX(-50%) translateY(-9vh) scale(1)}
  62%{opacity:.9}
  100%{opacity:0;transform:translateX(calc(-50% + var(--sway,16px))) translateY(-52vh) scale(1.04)}
}
@keyframes confetti{to{transform:translateY(150px) rotate(420deg);opacity:0}}

/* ═══════════════════════════════════════════
   ХАРИУ ҮЙЛДЭЛ
   ═══════════════════════════════════════════ */
@media (max-height:760px){
  .album{height:min(44vh,320px);margin:12px 0 4px}
  .album-track{transform:scale(.85)}
}
@media (max-height:720px){
  .scene-wish{padding-top:15vh;padding-bottom:11vh}
  .capybara{transform:scale(.76) translateX(-170%);margin-bottom:-20px}
  .countdown{font-size:66px;min-height:78px}
  .cake-stage{transform:scale(.82);margin:-24px 0}
  .letter-content{max-height:31vh}
  .intro-heart{margin-top:16px;height:120px}
  .end-orb{width:min(52vw,190px);margin-bottom:18px}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}