/* Приветственная открытка в чертоге (14.10.2026).
   Слова Лираз 14.10: «когда человека добавляют в чат, пусть обозначится большая приветственная открытка … HOLYLAND
   приветствует нашего нового участника … и когда добавился»; «Куда человека добавляют, туда приходит открытка.
   Самое главное — она должна быть красивая, с анимацией, с сердечками… воздушные шарики летят… чтобы это было
   торжественно».
   Правила-опоры: анимация только transform и opacity в слое .wc-fly поверх карточки (раскладку ленты не дёргает);
   играет один раз, дальше покой; «меньше движения» — без полёта; значки только SVG и CSS; Chromium 99 — без :has,
   inset, dvh, color-mix. Глубокого синего в токенах чата нет, поэтому --wc-* заведены здесь, золото — токены чата. */
.msgs .msg.wc-row{align-self:center;width:100%;max-width:var(--bubble-read-w,560px);padding:0;background:none;border:0;border-radius:18px;box-sizing:border-box}
.wc-card{--wc-deep:#08112e;--wc-mid:#0f1f55;--wc-glow:#26479f;--wc-rose:#ff6f8f;--wc-h:300px;
  position:relative;overflow:hidden;box-sizing:border-box;width:100%;min-height:236px;padding:30px 20px 26px;border-radius:18px;text-align:center;
  color:var(--ink);background:radial-gradient(120% 95% at 50% 0%,var(--wc-glow) 0%,var(--wc-mid) 46%,var(--wc-deep) 100%);
  border:1px solid rgba(var(--gold-rgb),.6);box-shadow:0 10px 34px rgba(var(--shade-rgb),.45),0 0 0 1px rgba(var(--gold-rgb),.12) inset,0 0 38px rgba(var(--gold-rgb),.16);
  display:flex;flex-direction:column;align-items:center;justify-content:center;isolation:isolate}
.wc-bg{position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;pointer-events:none}
.wc-body{position:relative;z-index:2;max-width:100%}
.wc-eyebrow{font-size:calc(11.5px * var(--fs,1));font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);line-height:1.5}
.wc-name{margin:12px 0 8px;font-family:var(--disp,serif);font-size:calc(31px * var(--fs,1));line-height:1.18;font-weight:700;color:var(--gold);
  background:var(--gold-fill);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  overflow-wrap:anywhere;word-break:break-word;text-shadow:none}
.wc-card[dir=rtl] .wc-eyebrow{letter-spacing:.04em}
.wc-card[dir=rtl] .wc-name{font-family:var(--disp-he,serif)}
.wc-when{font-size:calc(13.5px * var(--fs,1));line-height:1.45;color:var(--ink-dim)}
.wc-hello{margin-top:14px;font-family:var(--disp,serif);font-size:calc(19px * var(--fs,1));line-height:1.3;font-weight:600;color:var(--ink);letter-spacing:.02em}
.wc-card[dir=rtl] .wc-hello{font-family:var(--disp-he,serif);letter-spacing:0}
.wc-rule{display:block;width:64px;height:2px;margin:14px auto 0;border-radius:2px;background:var(--gold-fill)}
/* слой полёта: поверх карточки, мышь не ловит, ничего не толкает */
.wc-fly{position:absolute;left:0;top:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:hidden}
.wc-fly .f{position:absolute;bottom:-90px;opacity:0;will-change:transform,opacity}
.wc-fly svg{display:block;width:100%;height:auto;overflow:visible}
.wc-fly .b{width:38px}.wc-fly .h{width:20px}
.wc-fly .b1{left:6%}.wc-fly .b2{left:24%;width:30px}.wc-fly .b3{left:46%;width:42px}.wc-fly .b4{left:68%;width:32px}.wc-fly .b5{left:86%}
.wc-fly .h1{left:14%}.wc-fly .h2{left:33%;width:15px}.wc-fly .h3{left:41%}.wc-fly .h4{left:58%;width:16px}.wc-fly .h5{left:76%}.wc-fly .h6{left:92%;width:14px}.wc-fly .h7{left:52%;width:24px}
.wc-fill-a{fill:var(--gold)}.wc-fill-b{fill:var(--gold2)}.wc-fill-c{fill:var(--teal,#D8B4FF)}.wc-fill-d{fill:var(--wc-rose)}.wc-fill-e{fill:var(--neon,#D14CFF)}
.wc-hi{fill:var(--brandtop,#fff);opacity:.38}.wc-str{fill:none;stroke:rgba(var(--shine-rgb),.55);stroke-width:1.2;stroke-linecap:round}
.wc-ray{fill:none;stroke:rgba(var(--gold-rgb),.14);stroke-width:1}.wc-star{fill:rgba(var(--gold-rgb),.5)}
.wc-shine{position:absolute;left:-40%;top:0;width:40%;height:100%;z-index:1;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent,rgba(var(--shine-rgb),.22),transparent);transform:translate3d(0,0,0) skewX(-14deg)}
@keyframes wc-rise{0%{opacity:0;transform:translate3d(0,0,0)}10%{opacity:1}
  50%{transform:translate3d(var(--wc-sway,10px),calc(var(--wc-h,300px) * -.55),0)}
  88%{opacity:1}100%{opacity:0;transform:translate3d(calc(var(--wc-sway,10px) * -.6),calc(var(--wc-h,300px) * -1 - 130px),0)}}
@keyframes wc-float{0%{opacity:0;transform:translate3d(0,0,0) scale(.5)}14%{opacity:1;transform:translate3d(0,calc(var(--wc-h,300px) * -.12),0) scale(1)}
  70%{opacity:.9}100%{opacity:0;transform:translate3d(var(--wc-sway,8px),calc(var(--wc-h,300px) * -.8),0) scale(1.15)}}
@keyframes wc-sweep{0%{opacity:0;transform:translate3d(0,0,0) skewX(-14deg)}15%{opacity:1}100%{opacity:0;transform:translate3d(380%,0,0) skewX(-14deg)}}
.wc-card[data-wc=playing] .wc-fly .b{animation:wc-rise 3.2s cubic-bezier(.3,.1,.4,1) both}
.wc-card[data-wc=playing] .wc-fly .h{animation:wc-float 2.6s ease-out both}
.wc-card[data-wc=playing] .wc-shine{animation:wc-sweep 1.5s ease-in-out .2s both}
.wc-card[data-wc=playing] .wc-fly .b1{animation-delay:0s;--wc-sway:12px}.wc-card[data-wc=playing] .wc-fly .b2{animation-delay:.35s;--wc-sway:-14px}
.wc-card[data-wc=playing] .wc-fly .b3{animation-delay:.1s;--wc-sway:16px}.wc-card[data-wc=playing] .wc-fly .b4{animation-delay:.5s;--wc-sway:-10px}
.wc-card[data-wc=playing] .wc-fly .b5{animation-delay:.25s;--wc-sway:-16px}
.wc-card[data-wc=playing] .wc-fly .h1{animation-delay:.3s}.wc-card[data-wc=playing] .wc-fly .h2{animation-delay:.6s;--wc-sway:-12px}
.wc-card[data-wc=playing] .wc-fly .h3{animation-delay:.9s}.wc-card[data-wc=playing] .wc-fly .h4{animation-delay:.45s;--wc-sway:14px}
.wc-card[data-wc=playing] .wc-fly .h5{animation-delay:1s;--wc-sway:-10px}.wc-card[data-wc=playing] .wc-fly .h6{animation-delay:.7s}
.wc-card[data-wc=playing] .wc-fly .h7{animation-delay:.15s;--wc-sway:6px}
.wc-card[data-wc=done] .wc-fly,.wc-card[data-wc=done] .wc-shine{display:none}
@media (prefers-reduced-motion:reduce){.wc-fly,.wc-shine{display:none}}