/* PhMotion — общие анимации действий на сайте (см. ph-motion.js):
   экран «Готово» (круг с пружинкой, иконка, галочка, волна), тост, спиннер в кнопке,
   «взрыв» частиц у сердечка избранного, конфетти, тряска поля при ошибке.
   Стиль тот же, что у отправки вопроса продавцу на странице лота (.lq-done в lot.html). */

/* --- Экран «Готово» --- */
.phm-done {
  position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(8, 12, 24, .45); opacity: 0; transition: opacity .22s ease;
  -webkit-tap-highlight-color: transparent;
}
.phm-done.is-on { opacity: 1; }
.phm-done.is-out { opacity: 0; }
.phm-done-card {
  width: min(400px, 100%); box-sizing: border-box; padding: 32px 24px 28px; border-radius: 24px; text-align: center;
  background: var(--bg-elevated, #fff); color: var(--text-primary, #0f172a); box-shadow: 0 24px 60px rgba(13, 18, 32, .3);
  transform: translateY(16px) scale(.96); transition: transform .32s cubic-bezier(.2, .9, .3, 1.15);
}
.phm-done.is-on .phm-done-card { transform: none; }
.phm-done.is-out .phm-done-card { transform: translateY(10px) scale(.97); transition-duration: .2s; }
.phm-done-title { margin: 0; font-family: var(--font-display, inherit); font-size: 21px; font-weight: 800; letter-spacing: -0.02em; opacity: 0; transform: translateY(8px); }
.phm-done-text { margin: 6px auto 0; max-width: 340px; font-size: 14px; line-height: 1.45; color: var(--text-secondary, #475569); opacity: 0; transform: translateY(8px); }
.phm-done.is-on .phm-done-title { animation: phmUp .35s ease-out .5s forwards; }
.phm-done.is-on .phm-done-text { animation: phmUp .35s ease-out .6s forwards; }

/* Значок: круг + волна + глиф (самолётик / звезда / колокольчик / сердце) + галочка */
.phm-icon { position: relative; width: 84px; height: 84px; margin: 0 auto 18px; }
.phm-icon::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; transform: scale(0);
  background: linear-gradient(135deg, #3b82f6, var(--accent-solid, #1d4ed8)); box-shadow: 0 12px 30px rgba(37, 99, 235, .35);
}
.phm-icon--star::before { background: linear-gradient(135deg, #fbbf24, #f59e0b); box-shadow: 0 12px 30px rgba(245, 158, 11, .35); }
.phm-icon--heart::before { background: linear-gradient(135deg, #fb7185, #e11d48); box-shadow: 0 12px 30px rgba(225, 29, 72, .3); }
.phm-icon--party::before { background: linear-gradient(135deg, #34d399, #059669); box-shadow: 0 12px 30px rgba(5, 150, 105, .32); }
.is-on .phm-icon::before, .phm-icon.is-on::before { animation: phmCircle .45s cubic-bezier(.34, 1.56, .64, 1) forwards; }
.phm-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent-solid, #1d4ed8); opacity: 0; }
.phm-icon--star .phm-ring { border-color: #f59e0b; }
.phm-icon--heart .phm-ring { border-color: #e11d48; }
.phm-icon--party .phm-ring { border-color: #059669; }
.is-on .phm-ring { animation: phmRing .9s ease-out .75s forwards; }
.phm-glyph {
  position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; opacity: 0;
  fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.phm-check {
  position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 4;
  stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 34; stroke-dashoffset: 34;
}
/* check: галочка рисуется сразу; plane: самолётик улетает, затем галочка */
.is-on .phm-icon--check .phm-check { animation: phmCheck .4s ease-out .3s forwards; }
.is-on .phm-icon--party .phm-check { animation: phmCheck .4s ease-out .3s forwards; }
.is-on .phm-icon--plane .phm-glyph { animation: phmPlane .85s cubic-bezier(.45, 0, .75, .3) .15s forwards; }
.is-on .phm-icon--plane .phm-check { animation: phmCheck .38s ease-out .85s forwards; }
/* star / heart: глиф впрыгивает с поворотом и остаётся */
.is-on .phm-icon--star .phm-glyph, .is-on .phm-icon--heart .phm-glyph { fill: #fff; animation: phmGlyphIn .55s cubic-bezier(.34, 1.56, .64, 1) .2s forwards; }
/* bell: колокольчик появляется и качается */
.is-on .phm-icon--bell .phm-glyph { animation: phmBellIn .3s ease-out .15s forwards, phmBell .9s ease-in-out .45s; transform-origin: 50% 15%; }

/* --- Тост --- */
.phm-toast {
  position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 10040;
  display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); box-sizing: border-box;
  padding: 10px 18px 10px 12px; border-radius: 999px; pointer-events: none;
  background: var(--ph-on-background, #1c1917); color: var(--ph-background, #fff);
  font-size: 14px; font-weight: 500; line-height: 1.3; box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  opacity: 0; transform: translate(-50%, 18px) scale(.94);
  transition: opacity .2s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
.phm-toast.is-on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.phm-toast-ic { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .14); }
.phm-toast-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.phm-toast-ic--heart { background: #e11d48; color: #fff; }
.phm-toast-ic--heart svg { fill: #fff; stroke: #fff; stroke-width: 1.5; }
.phm-toast-ic--ok { background: #059669; color: #fff; }
.phm-toast-ic--bell { background: var(--accent-solid, #1d4ed8); color: #fff; }
.phm-toast.is-on .phm-toast-ic { animation: phmPop .5s cubic-bezier(.34, 1.56, .64, 1) .08s both; }
.phm-toast.is-on .phm-toast-ic--bell svg { animation: phmBell .9s ease-in-out .25s; transform-origin: 50% 15%; }
.phm-toast .phm-check-sm { stroke-dasharray: 20; stroke-dashoffset: 20; }
.phm-toast.is-on .phm-check-sm { animation: phmCheck .35s ease-out .25s forwards; }

/* --- Спиннер в кнопке --- */
.phm-busy { color: transparent !important; -webkit-text-fill-color: transparent !important; pointer-events: none; }
.phm-busy > * { visibility: hidden; }
.phm-busy::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border-radius: 50%; border: 2.5px solid var(--phm-spin-track, rgba(255, 255, 255, .35));
  border-top-color: var(--phm-spin, #fff); animation: phmSpin .7s linear infinite;
}

/* --- Частицы у сердечка --- */
.phm-particle {
  position: fixed; z-index: 10060; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  pointer-events: none; animation: phmBurst .6s cubic-bezier(.2, .7, .3, 1) forwards;
}
.phm-beat { animation: phmBeat .45s cubic-bezier(.34, 1.56, .64, 1); }

/* --- Конфетти --- */
.phm-confetti {
  position: fixed; top: -14px; z-index: 10070; width: 8px; height: 13px; border-radius: 2px; pointer-events: none;
  animation: phmFall var(--d, 2.4s) cubic-bezier(.25, .6, .4, 1) var(--delay, 0s) forwards;
}

.phm-shake { animation: phmShake .4s ease; }

@keyframes phmSpin { to { transform: rotate(360deg); } }
@keyframes phmCircle { to { transform: scale(1); } }
@keyframes phmRing { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.75); } }
@keyframes phmCheck { to { stroke-dashoffset: 0; } }
@keyframes phmUp { to { opacity: 1; transform: none; } }
@keyframes phmPlane {
  0% { opacity: 0; transform: translate(-4px, 4px) scale(.5); }
  25% { opacity: 1; transform: none; }
  40% { opacity: 1; transform: translate(-4px, 4px); }
  100% { opacity: 0; transform: translate(72px, -72px) rotate(6deg) scale(.65); }
}
@keyframes phmGlyphIn { from { opacity: 0; transform: scale(.2) rotate(-90deg); } to { opacity: 1; transform: none; } }
@keyframes phmBellIn { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes phmBell { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(18deg); } 35% { transform: rotate(-15deg); } 55% { transform: rotate(10deg); } 75% { transform: rotate(-6deg); } }
@keyframes phmPop { from { transform: scale(.3); } to { transform: scale(1); } }
@keyframes phmBurst { from { opacity: 1; transform: translate(0, 0) scale(1); } to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.4); } }
@keyframes phmBeat { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 65% { transform: scale(.92); } 100% { transform: scale(1); } }
@keyframes phmFall {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  100% { opacity: 0; transform: translate(var(--dx, 0), 105vh) rotate(var(--r, 540deg)); }
}
@keyframes phmShake { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

@media (prefers-reduced-motion: reduce) {
  .phm-done *, .phm-done-card, .phm-icon::before, .phm-toast, .phm-toast *, .phm-beat, .phm-shake {
    animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important;
  }
  .phm-particle, .phm-confetti { display: none; }
}