/* 3580z amg-pw pd-motion: анімації станів, значення зняті з живого petsdeli.de 05.11 (docs/petsdeli-audit-2026-11-02/verify/3580z-skin/anim).
 * Лише під html body.amg-skin-pd, prefers-reduced-motion вимикає все. Закриття (клон на час анімації) веде assets/js/amg-pet-seg/pd-skin.js. */
@media (prefers-reduced-motion:no-preference){
  @keyframes amg-pd-in{from{opacity:0}to{opacity:1}}
  @keyframes amg-pd-out{from{opacity:1}to{opacity:0}}
  @keyframes amg-pd-up{from{transform:translateY(100%)}to{transform:none}}
  @keyframes amg-pd-down{from{transform:none}to{transform:translateY(100%)}}
  @keyframes amg-pd-pulse{0%,100%{opacity:1}50%{opacity:.5}}
  @keyframes amg-pd-toast{0%{opacity:0;transform:translate3d(3000px,0,0)}60%{opacity:1;transform:translate3d(-25px,0,0)}75%{transform:translate3d(10px,0,0)}90%{transform:translate3d(-5px,0,0)}100%{transform:none}}

  @keyframes amg-pd-zoom{from{opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:1}to{transform:none}}
  @keyframes amg-pd-paw{0%,100%{opacity:0}50%{opacity:1}}
  @keyframes amg-pd-toast-out{20%{opacity:1;transform:translate3d(-20px,0,0)}100%{opacity:0;transform:translate3d(2000px,0,0)}}

  /* шеврон селекта: rotate 150 мс */
  html body.amg-skin-pd .amg-pw .amg-pw-seg__chev,html body.amg-skin-pd .amg-pw .amg-pw-fpill__chev{transition:transform .15s cubic-bezier(.4,0,.2,1)}
  html body.amg-skin-pd .amg-pw .amg-pw-seg__sel[aria-expanded="true"] .amg-pw-seg__chev{transform:rotate(180deg)}
  /* список речення: opacity 150 мс; телефон: шторка знизу 295 мс за rAF (кінець кривої менший за піксель, тому .31s), тло 300 мс */
  html body.amg-skin-pd .amg-pw .amg-pw-seg__dd{animation:amg-pd-in .15s ease-in-out}
  html body.amg-skin-pd .amg-pw .amg-pw-seg__dd.is-leaving{animation:amg-pd-out .15s ease-in-out forwards;pointer-events:none}
  html body.amg-skin-pd .amg-pw .amg-pw-seg__dd.is-sheet{animation:amg-pd-up .31s cubic-bezier(.33,.4,.4,1)}
  html body.amg-skin-pd .amg-pw .amg-pw-seg__dd.is-sheet.is-leaving{animation:amg-pd-down .3s cubic-bezier(.4,0,1,1) forwards}
  html body.amg-skin-pd .amg-pw .amg-pw-seg__back{animation:amg-pd-in .3s cubic-bezier(.25,.1,.35,1)}
  html body.amg-skin-pd .amg-pw .amg-pw-seg__back.is-leaving{animation:amg-pd-out .3s cubic-bezier(.25,.1,.35,1) forwards;pointer-events:none}
  /* тумблери: bg + зсув 300 мс */
  html body.amg-skin-pd .amg-pw .amg-pw-seg__tog{transition:background-color .3s cubic-bezier(.4,0,.2,1)}
  html body.amg-skin-pd .amg-pw .amg-pw-seg__tog i{transition:transform .3s cubic-bezier(.4,0,.2,1)}
  html body.amg-skin-pd .amg-pw.amg-pq .amg-pq-tog i{transition:background-color .3s cubic-bezier(.4,0,.2,1)}
  html body.amg-skin-pd .amg-pw.amg-pq .amg-pq-tog i::after{transition:transform .3s cubic-bezier(.4,0,.2,1)}
  /* вкладка: підкреслення opacity 300 мс */
  html body.amg-skin-pd .amg-pw .amg-pw-needs__tab::after{transition:opacity .3s cubic-bezier(.4,0,.2,1)}
  /* кнопки: колір 700 мс */
  html body.amg-skin-pd .amg-pw :is(.amg-pw-btn,.amg-pw-seg__btn,.amg-pb__btn,.amg-pw-pd-sol__b,.amg-pw-pd-cat__more,.amg-pw-prof__edit),html body.amg-skin-pd .amg-pw.amg-pq .amg-pq-btn{transition:color .7s cubic-bezier(.4,0,.2,1),background-color .7s cubic-bezier(.4,0,.2,1),border-color .7s cubic-bezier(.4,0,.2,1)}
  /* шторка профілю: тло 300 мс; панель: ПК opacity 500 мс, телефон знизу */
  html body.amg-skin-pd .amg-pw.amg-pq .amg-pq-scrim{animation:amg-pd-in .3s cubic-bezier(.25,.1,.35,1)}
  html body.amg-skin-pd .amg-pw.amg-pq .amg-pq-scrim.is-leaving{animation:amg-pd-out .3s cubic-bezier(.25,.1,.35,1) forwards;pointer-events:none}
  html body.amg-skin-pd .amg-pw.amg-pq .amg-pq-sheet.is-leaving{pointer-events:none}
  /* тост: заїзд справа з відскоком, ПК */
  html body.amg-skin-pd .amg-pw.amg-pq .amg-pq-toast{animation:amg-pd-toast .5s cubic-bezier(.215,.61,.355,1)}
  html body.amg-skin-pd .amg-pw.amg-pq .amg-pq-toast.is-leaving{animation:amg-pd-toast-out .45s cubic-bezier(.4,0,1,1) forwards;pointer-events:none}
  html body.amg-skin-pd .amg-pw.amg-pq .amg-pq-toast.is-leaving .amg-pq-toast__bar{animation:none;transform:scaleX(0)}
  html body.amg-skin-pd .amg-pw.amg-pq .amg-pq-toast__i{animation:amg-pd-zoom .3s linear}
  /* модалка складу набору: тло 300 мс, панель стоїть, зміст 500 мс. Закриття без анімації: живий Pets Deli знімає її за один кадр (3580zf, verify/3580zf/pd/pd-probe2.json) */
  html body.amg-skin-pd .amg-pw.amg-pb-mw .amg-pb-scrim{animation:amg-pd-in .3s cubic-bezier(.25,.1,.35,1)}
  html body.amg-skin-pd .amg-pw.amg-pb-mw .amg-pb-m>*{animation:amg-pd-in .5s ease-out}
  /* завантаження після збереження профілю: лапки по черзі */
  html body.amg-skin-pd .amg-pw .amg-pd-paw i{opacity:0;animation:amg-pd-paw 1.5s infinite}
  html body.amg-skin-pd .amg-pw .amg-pd-paw i:nth-child(2){animation-delay:.2s}
  html body.amg-skin-pd .amg-pw .amg-pd-paw i:nth-child(3){animation-delay:.4s}
  /* поява відповіді: лише коли покупець щойно заповнив речення (класи ставить pd-skin.js), не при завантаженні і не на першому кліку */
  html.amg-pd-reveal body.amg-skin-pd .amg-pw .amg-pw-seg__picks{animation:amg-pd-in .3s cubic-bezier(.25,.1,.35,1) .5s backwards}
  html body.amg-skin-pd .amg-pw amgv-cards.amg-pd-fresh{animation:amg-pd-in .5s ease-out}
  /* скелет на час завантаження рейки */
  html body.amg-skin-pd .amg-pw :is(.amg-pw-seg__cards,.amg-pw-needs__cards):empty{border-radius:8px;background:#f5f5f5;animation:amg-pd-pulse 2s cubic-bezier(.4,0,.6,1) infinite}
}
/* смуга тоста = таймер у pet-quick.js, тому поза reduced-motion. 3580zf2: стартує після появи .5s, як у Pets Deli */
html body.amg-skin-pd .amg-pw.amg-pq .amg-pq-toast__bar{animation-duration:5s;animation-delay:.5s}
@media (prefers-reduced-motion:no-preference) and (min-width:1024px){
  html body.amg-skin-pd .amg-pw.amg-pq .amg-pq-sheet{animation:amg-pd-in .5s cubic-bezier(.04,.62,.23,.98)}
  html body.amg-skin-pd .amg-pw.amg-pq .amg-pq-sheet.is-leaving{animation:amg-pd-out .5s cubic-bezier(.04,.62,.23,.98) forwards}
}
@media (prefers-reduced-motion:no-preference) and (max-width:1023px){
  html body.amg-skin-pd .amg-pw.amg-pq .amg-pq-sheet{animation:amg-pd-up .31s cubic-bezier(.33,.4,.4,1)}
  html body.amg-skin-pd .amg-pw.amg-pq .amg-pq-sheet.is-leaving{animation:amg-pd-down .3s cubic-bezier(.4,0,1,1) forwards}
}