/* =============================================================
   ANIMATIONS PATCH
   Drop-in animation layer for Pocket Coach.
   Add to index.html AFTER all other stylesheets:
     <link rel="stylesheet" href="css/animations.css">
   Depends on: tokens.css, tabs.css, nav.css, base.css
   ============================================================= */

/* ── Keyframes ──────────────────────────────────────────────── */

/* Tab panels */
@keyframes _pc-tab-enter {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Nav active pill */
@keyframes _pc-nav-spring {
  0%   { transform: scaleX(0.55) scaleY(1.18); }
  52%  { transform: scaleX(1.09) scaleY(0.93); }
  72%  { transform: scaleX(0.97) scaleY(1.03); }
  100% { transform: scaleX(1)    scaleY(1); }
}

/* Set row entrance */
@keyframes _pc-row-enter {
  from { opacity: 0; transform: translateY(10px) scaleY(0.88); }
  to   { opacity: 1; transform: translateY(0)    scaleY(1); }
}

/* Set row exit (height collapse) */
@keyframes _pc-row-exit {
  0%   { opacity: 1; max-height: 80px; padding-top: 8px; padding-bottom: 8px; margin-bottom: 10px; }
  100% { opacity: 0; max-height: 0;    padding-top: 0;   padding-bottom: 0;   margin-bottom: 0; }
}

/* PR badge pop */
@keyframes _pc-pr-pop {
  0%   { transform: scale(0) rotate(-14deg); opacity: 0; }
  58%  { transform: scale(1.24) rotate(4deg); opacity: 1; }
  78%  { transform: scale(0.93) rotate(-1deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes _pc-pr-glow {
  0%,100% { box-shadow: 0 0 0 0   rgba(95,168,126,0); }
  50%     { box-shadow: 0 0 0 7px rgba(95,168,126,0.28); }
}

/* ── Tab content panels ─────────────────────────────────────── */

/* Replace the existing scale(0.9) with a gentler slide-up.
   The existing transition fires on display change — we layer
   a separate animation class that js-patch adds/removes. */
.tab-content.tab-anim-enter {
  animation: _pc-tab-enter 0.24s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* Keep existing .tab-content transition but improve the easing */
.tab-content {
  transition: opacity 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* ── Bottom nav active pill ─────────────────────────────────── */

.bn-item.active.nav-spring {
  animation: _pc-nav-spring 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── Set input rows ─────────────────────────────────────────── */

.set-input-row {
  transform-origin: top center;
}

.set-input-row.row-entering {
  animation: _pc-row-enter 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.set-input-row.row-exiting {
  animation: _pc-row-exit 0.22s ease-in both;
  overflow: hidden;
  pointer-events: none;
}

/* ── PR badge ───────────────────────────────────────────────── */

.pc-pr-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(95, 168, 126, 0.18);
  border: 1px solid rgba(95, 168, 126, 0.5);
  color: var(--green-90, #6fae8b);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-left: 8px;
  vertical-align: middle;
  animation: _pc-pr-pop 0.52s cubic-bezier(0.34, 1.56, 0.64, 1) both,
             _pc-pr-glow 1.1s ease-in-out 0.52s 2;
}