/* ═══════════════════════════════════════════════
   ANIMATIONS & KEYFRAMES
   Maincoon Stellar
═══════════════════════════════════════════════ */

/* ── Базовые ── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; transform: translateY(8px); }
}

@keyframes slideInDown {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.93); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Инициализация приложения ── */
@keyframes appReveal {
  from { opacity: 0; transform: scale(0.985); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Логотип — мерцание звезды ── */
@keyframes starPulse {
  0%, 100% { filter: drop-shadow(0 0 4px var(--cyan)) drop-shadow(0 0 10px rgba(63,210,255,0.4)); }
  50%       { filter: drop-shadow(0 0 8px var(--cyan)) drop-shadow(0 0 20px rgba(63,210,255,0.7)); }
}

/* ── Пульсация активного элемента ── */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 8px var(--cyan-glow); }
  50%       { box-shadow: 0 0 20px var(--cyan-glow), 0 0 40px var(--cyan-glow); }
}

/* ── Shimmer для прогресс-бара ── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ── Вращение ── */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Floating (парение) ── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

/* ── Удаление карточки ── */
@keyframes slideOutLeft {
  from { opacity: 1; transform: translateX(0) scaleX(1); max-height: 80px; }
  to   { opacity: 0; transform: translateX(-20px) scaleX(0.9); max-height: 0; padding: 0; margin: 0; }
}

/* ── Смена таба — вход ── */
@keyframes tabPanelIn {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Shooting star ── */
@keyframes shootingStar {
  0%   { opacity: 1; transform: translateX(0) translateY(0) scaleX(1); }
  100% { opacity: 0; transform: translateX(200px) translateY(80px) scaleX(3); }
}

/* ── Классы ── */
.anim-fade-in   { animation: fadeIn 0.3s ease-out; }
.anim-scale-in  { animation: scaleIn 0.3s var(--t-spring); }
.anim-slide-up  { animation: slideInUp 0.3s ease-out; }
.anim-tab-in    { animation: tabPanelIn 0.25s ease-out; }

/* Удаление карточки из сайдбара */
.pet-card-removing {
  animation: slideOutLeft 0.28s ease-in forwards;
  pointer-events: none;
  overflow: hidden;
}

/* App entry */
#app {
  animation: appReveal 0.5s ease-out both;
}

/* Logo SVG pulse */
.logo-icon svg {
  animation: starPulse 3s ease-in-out infinite;
}

/* Selected pet card glows */
.pet-card.selected {
  animation: glowPulse 2.5s ease-in-out infinite;
}

/* Progress bar shimmer */
.standard-bar-fill {
  background-size: 200% auto !important;
  animation: shimmer 2.5s linear infinite;
}