/* Подарки (static/gifts.js): окно «Вам подарок» с коробкой, которую надо открыть, и кнопка «Подарок» в меню */

/* ---------- кнопка в меню, пока подарок не открыт ---------- */
.gift-side {
  display: flex; align-items: center; gap: 10px; width: 100%; margin: auto 0 -8px; padding: 10px 12px;
  border: 0; border-radius: 14px; cursor: pointer; text-align: left; color: #ffffff;
  background:
    radial-gradient(120% 150% at 0 0, rgba(240, 81, 106, .5), transparent 70%),
    radial-gradient(120% 150% at 100% 100%, rgba(164, 44, 170, .45), transparent 70%), var(--surface-2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  transition: filter .15s ease, transform .1s ease;
}
.gift-side:hover { filter: brightness(1.12); }
.gift-side:active { transform: scale(.97); }
.gift-side + .side-account { margin-top: 0; }
.gift-side-ic { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--aura); }
.gift-side-ic svg { width: 18px; height: 18px; }
.gift-side-text { display: grid; gap: 1px; min-width: 0; }
.gift-side-text b { font-size: 14px; font-weight: 600; }
.gift-side-text small { font-size: 12px; color: rgba(255, 255, 255, .72); }
@media (prefers-reduced-motion: no-preference) {
  .gift-side-ic { animation: gift-nudge 3.6s ease-in-out infinite; }
}
@keyframes gift-nudge {
  0%, 80%, 100% { transform: none; }
  84% { transform: rotate(-12deg) scale(1.06); }
  88% { transform: rotate(9deg) scale(1.06); }
  92% { transform: rotate(-5deg); }
  96% { transform: rotate(2deg); }
}
@media (max-width: 1100px) {
  .gift-side { justify-content: center; padding: 8px 0; }
  .gift-side-text { display: none; }
}
@media (max-width: 700px) {
  .gift-side { flex: none; width: 34px; height: 34px; margin: 0; padding: 0; border-radius: 50%; background: var(--aura); box-shadow: none; }
  .gift-side-ic { width: 34px; height: 34px; background: none; }
}

/* ---------- окно ---------- */
.modal .card.gift-card { width: min(420px, 100%); overflow: hidden; }
.pay-card > .pay-close + .gift-stage { margin-top: -20px; }
.gift-stage {
  position: relative; display: grid; place-items: center; height: 230px; margin: -20px -20px 0; overflow: hidden;
  background:
    radial-gradient(70% 120% at 82% 0, rgba(164, 44, 170, .8), transparent 74%),
    radial-gradient(80% 130% at 18% 0, rgba(206, 66, 36, .9), transparent 76%), var(--surface);
}
.gift-stage::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .22; mix-blend-mode: overlay; pointer-events: none; }
.gift-confetti { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.gift-glow {
  position: absolute; width: 190px; height: 190px; border-radius: 50%; top: 50%; left: 50%; margin: -88px 0 0 -95px;
  background: radial-gradient(circle, rgba(255, 214, 170, .55), rgba(255, 140, 90, .18) 45%, transparent 70%);
  filter: blur(6px);
}

/* коробка: крышка с бантом и короб с лентой */
.gift-box {
  position: relative; z-index: 1; width: 128px; height: 132px; margin-top: 18px; padding: 0; border: 0; background: none; cursor: pointer;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .45));
}
.gift-box:focus-visible { outline: 2px solid #ffffff; outline-offset: 6px; border-radius: 16px; }
.gift-body {
  position: absolute; left: 10px; right: 10px; bottom: 0; height: 82px; border-radius: 10px;
  background:
    linear-gradient(90deg, transparent 42%, #ffe6c9 42%, #ffe6c9 58%, transparent 58%),
    linear-gradient(160deg, #f0516a 0%, #d9408f 100%);
  box-shadow: inset 0 -10px 18px rgba(0, 0, 0, .18), inset 0 6px 0 rgba(0, 0, 0, .12);
}
.gift-lid {
  position: absolute; left: 0; right: 0; top: 24px; height: 30px; border-radius: 9px; transform-origin: 20% 100%;
  background:
    linear-gradient(90deg, transparent 43%, #fff0de 43%, #fff0de 57%, transparent 57%),
    linear-gradient(170deg, #f98a3c 0%, #f0516a 100%);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .12), inset 0 3px 0 rgba(255, 255, 255, .22);
}
.gift-bow { position: absolute; left: 50%; bottom: 100%; width: 0; height: 0; }
.gift-bow::before, .gift-bow::after {
  content: ""; position: absolute; bottom: -4px; width: 30px; height: 22px; border: 6px solid #ffe6c9; border-radius: 50% 50% 40% 40%;
}
.gift-bow::before { right: 0; transform: rotate(-24deg); transform-origin: right bottom; }
.gift-bow::after { left: 0; transform: rotate(24deg); transform-origin: left bottom; }

.gift-prize {
  position: absolute; z-index: 2; inset: 0; display: grid; place-content: center; justify-items: center; gap: 2px; padding-top: 6px;
  color: #ffffff; text-align: center; opacity: 0; transform: scale(.6); pointer-events: none;
}
.gift-prize b { font-size: 68px; font-weight: 600; line-height: 1; letter-spacing: -.04em; text-shadow: 0 6px 30px rgba(0, 0, 0, .35); }
.gift-prize span { font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, .9); }

.gift-text { display: grid; justify-items: center; gap: 6px; text-align: center; padding-top: 4px; }
.gift-from {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-text); font-size: 12px; font-weight: 600;
}
.gift-text h2 { margin: 2px 0 0; font-size: 26px; font-weight: 500; line-height: 1.15; letter-spacing: -.025em; }
.gift-note { margin: 0; max-width: 340px; color: var(--muted); white-space: pre-line; overflow-wrap: anywhere; }
.gift-acts { display: grid; }
.gift-acts .pay-link { margin-top: 10px; }

/* движение: коробка покачивается и ждёт, при открытии трясётся, крышка улетает, внутри — подарок */
@media (prefers-reduced-motion: no-preference) {
  .gift-box { animation: gift-idle 2.8s ease-in-out infinite; }
  .gift-glow { animation: gift-glow 2.8s ease-in-out infinite; }
  .gift-box:hover { animation-duration: 1.2s; }
  .gift-card.opening .gift-box { animation: gift-shake .55s ease-in-out infinite; }
  .gift-lid { transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .5s ease .1s; }
  .gift-body { transition: transform .5s cubic-bezier(.4, 0, .2, 1) .08s, opacity .4s ease .12s; }
  .gift-prize { transition: opacity .35s ease .18s, transform .6s cubic-bezier(.34, 1.56, .64, 1) .18s; }
}
@keyframes gift-idle {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-6px) rotate(-1.5deg); }
}
@keyframes gift-glow {
  0%, 100% { opacity: .75; transform: scale(.94); }
  50% { opacity: 1; transform: scale(1.06); }
}
@keyframes gift-shake {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-7deg) translateY(-2px); }
  45% { transform: rotate(6deg); }
  70% { transform: rotate(-4deg) translateY(-1px); }
}
.gift-card.opened .gift-box { animation: none; cursor: default; pointer-events: none; }
.gift-card.opened .gift-lid { transform: translate(36px, -110px) rotate(32deg); opacity: 0; }
.gift-card.opened .gift-body { transform: translateY(40px) scale(.85); opacity: 0; }
.gift-card.opened .gift-prize { opacity: 1; transform: scale(1); }
.gift-card.opened .gift-glow { animation: none; opacity: 1; transform: scale(1.35); transition: transform .6s ease; }