/* SWACK v6.0.0 — Blueprint Preview 8
   Motion polish: one route transition only + cleaner workout hero metadata. */

/* Preview 3/5 used entrance animations every time a view was re-rendered.
   Preview 6 then added a second route animation on top. Disable the legacy
   page-level entrances so taps no longer make the whole screen "settle". */
.v6-home,
.v6-plan,
.v6-progress-page,
.v6-profile-page,
.bp5-food-page,
.athletic-hero.food-major,
.next-meal-feature,
.week-menu-grid,
.shopping-grid,
.recipe-tools,
#recipeResults {
  animation: none !important;
}
body.bp3-route-transition #app {
  animation: none !important;
}

/* Route roots must not transition transform/opacity after the navigation
   animation ends. This prevents the tiny second movement visible on iPhone. */
.v6-home,
.v6-plan,
.v6-progress-page,
.v6-profile-page,
.bp5-food-page {
  transition: none !important;
  will-change: auto;
}

/* A single restrained navigation animation. The scroll position is reset
   before render in JS, so the new page is already geometrically settled. */
body.bp8-page-moving #app > main,
body.bp8-page-moving #app > section {
  animation: bp8PageForward .20s cubic-bezier(.22,.82,.2,1) both !important;
}
body.bp8-page-moving[data-bp8-nav-dir="backward"] #app > main,
body.bp8-page-moving[data-bp8-nav-dir="backward"] #app > section {
  animation-name: bp8PageBack !important;
}
@keyframes bp8PageForward {
  from { opacity: .55; transform: translate3d(10px,0,0); }
  to   { opacity: 1; transform: translate3d(0,0,0); }
}
@keyframes bp8PageBack {
  from { opacity: .55; transform: translate3d(-10px,0,0); }
  to   { opacity: 1; transform: translate3d(0,0,0); }
}

/* Workout hero: three useful facts are enough. Do not repeat OVERKROPP/BEIN
   after it has already been communicated by the workout title. */
.v6-primary-card .v6-metrics {
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  gap: 12px !important;
}
.v6-primary-card .v6-metrics strong {
  overflow: visible !important;
  text-overflow: clip !important;
}

@media (prefers-reduced-motion: reduce) {
  body.bp8-page-moving #app > main,
  body.bp8-page-moving #app > section {
    animation: none !important;
  }
}