/* ═══ MICRO-INTERACTIONS — премиум feel ═════════════════════
   3 ключевые идеи из дизайн-аудита:
   1. Heart pulse при лайке / добавлении в избранное
   2. Gradient-card hover (Letterboxd-style золотая текстура)
   3. Active scale (.96) на главных CTA — tactile feedback тапа
   + базовые active-стейты и легкие touch улучшения. */


/* ── 1. HEART PULSE ──────────────────────────────────────
   При добавлении в избранное иконка ❤️ пульсирует один раз.
   Класс .liked-pulse добавляется в JS на 500мс при toggleFav.
   reduced-motion → не анимируем. */
@keyframes heartPulse {
  0%, 100% { transform: scale(1); }
  30%      { transform: scale(1.35); }
  50%      { transform: scale(.92); }
  70%      { transform: scale(1.12); }
}
.liked-pulse,
.fav-pulse,
.wl-pulse {
  animation: heartPulse 480ms cubic-bezier(.23,1,.32,1) 1;
  display: inline-block;
  transform-origin: center;
}
@media (prefers-reduced-motion: reduce){
  .liked-pulse, .fav-pulse, .wl-pulse { animation: none; }
}


/* ── 2. GRADIENT-CARD HOVER (Letterboxd-style) ───────────
   Только blog/shop/collections — у них чистый layout без inline
   absolute детей. У .mc (фильмов/сериалов) НЕ ставим — там сложная
   inline-разметка с position:absolute детьми, наш ::before / z-index
   ломал hit-testing onclick='openFilm()' на каких-то браузерах. */
.blog-card, .shop-card, .coll-card-curated {
  position: relative;
  isolation: isolate;  /* собственный stacking-context, не лезем глобально */
}
.blog-card::before, .shop-card::before, .coll-card-curated::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg,
    rgba(212,182,86,.08) 0%,
    rgba(212,182,86,.0) 45%);
  opacity: 0;
  transition: opacity 320ms cubic-bezier(.23,1,.32,1);
  border-radius: inherit;
  z-index: 0;  /* за контентом, но overlay для фона */
}
.blog-card:hover::before, .shop-card:hover::before,
.coll-card-curated:hover::before {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce){
  .blog-card::before, .shop-card::before, .coll-card-curated::before {
    transition: none;
  }
}


/* ── 3. ACTIVE SCALE на CTA (tactile feedback тапа) ─────
   При нажатии главных кнопок — мгновенное scale(.96).
   Pseudo-анимации НЕТ — нужен instant feedback под палец. */
.home-ai-btn:active,
.home-surprise-btn:active,
.shop-buy-btn:active, .shop-cart-btn:active,
.ai-submit:active,
.settings-btn:active,
.auth-submit:active,
.go-btn:active,
button.theme-btn:active,
.eq-empty-btn-primary:active,
.club-pick-btn:active,
.dm-send:active {
  transform: scale(.96);
  transition: transform 80ms ease;
}
/* «Удиви меня» — крупная пилюля, scale поменьше чтоб не «дёргалась» */
.home-surprise-btn:active { transform: scale(.97); }


/* ── 4. SMOOTH DISABLED state ────────────────────────────
   Раньше opacity .5 включался мгновенно — выглядело резко.
   Теперь плавный fade. */
.ai-submit, .home-ai-btn, .auth-submit, .go-btn, .settings-btn,
.shop-buy-btn, .shop-cart-btn, .home-surprise-btn,
.club-pick-btn, .dm-send {
  transition:
    opacity 150ms var(--p-ease, ease),
    transform 200ms var(--p-ease, cubic-bezier(.23,1,.32,1)),
    background 200ms var(--p-ease, ease),
    box-shadow 220ms var(--p-ease, ease);
}


/* ── 5. SHARE/SHEET menu — custom easing (было дефолтный 'ease') ── */
.share-menu-box {
  animation: slideUpSheet 320ms cubic-bezier(.23,1,.32,1) !important;
}


/* ── 7. VIEW TRANSITIONS API — карточка → детальная страница ──
   Chrome 111+, Safari 18+. На неподдерживающих браузерах ничего
   не происходит. openFilm() в api.js устанавливает
   viewTransitionName="film-card-${id}" на исходную карточку. */
::view-transition-old(root),
::view-transition-new(root){
  animation-duration: 320ms;
  animation-timing-function: cubic-bezier(.23,1,.32,1);
}
::view-transition-old(root){
  animation-name: vt-fade-out;
}
::view-transition-new(root){
  animation-name: vt-fade-in;
}
@keyframes vt-fade-out{
  from { opacity: 1; }
  to   { opacity: 0; transform: scale(.96); }
}
@keyframes vt-fade-in{
  from { opacity: 0; transform: scale(1.02); }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),
  ::view-transition-new(root){ animation: none; }
}


/* ── 9. KEYBOARD-FOCUS на главных интерактивных элементах ──
   Текущий :focus-visible глобальный есть, но добавим snappier
   transition на самих карточках. */
.mc:focus-visible, .blog-card:focus-visible,
.shop-card:focus-visible, .aig-card:focus-visible {
  outline: 2px solid var(--p-accent, var(--gold));
  outline-offset: 4px;
  transition: outline-offset 120ms ease;
}