/* SeibFIT 3.5 — motion layer. No geometry or persisted-data changes. */
:root { --sf-motion-enter: 10px; --sf-motion-exit: -6px; }

/* Nav track is decorative and does not intercept a click. The nav does not move. */
.bottom-nav { isolation:isolate; }
.bottom-nav .nav-item { position:relative; z-index:1; }
.sf-nav-track {
  position:absolute; left:0; top:0; width:44px; height:46px;
  border:1px solid rgba(245,73,92,.26);
  border-radius:14px;
  background:linear-gradient(110deg,rgba(199,39,64,.20),rgba(87,20,33,.09));
  box-shadow:0 0 22px rgba(195,20,55,.12);
  opacity:0; pointer-events:none; z-index:0;
  transform:translate3d(0,0,0);
  transition:transform 200ms ease-out,width 200ms ease-out,height 200ms ease-out,opacity 200ms ease-out;
}
.sf-nav-track.sf-visible{opacity:1}

/* Avoid old card-by-card flickering when check-set re-renders the page. */
#content .card,#content .exercise-card,#content .empty,#content .profile-card,
#content .active-banner { animation:none; }

/* Fast fallback for browsers without document.startViewTransition. */
#content.sf-entering-forward {animation: sf-screen-forward 220ms ease-out both;}
#content.sf-entering-back {animation: sf-screen-back 220ms ease-out both;}
#content.sf-training-entrance .active-banner,
#content.sf-training-entrance .exercise-card:first-of-type {
  animation:sf-training-in 300ms ease-out both;
}
@keyframes sf-screen-forward{
  from{opacity:0;transform:translate3d(10px,0,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes sf-screen-back{
  from{opacity:0;transform:translate3d(-10px,0,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes sf-training-in{
  from{opacity:.56;transform:translate3d(0,8px,0) scale(.985)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}

/* Overlays: only compositor-friendly opacity/transform, no layout animation. */
#modalHost .modal-backdrop.sf-modal-opening {animation:sf-backdrop-in 180ms ease-out both}
#modalHost .sf-modal-opening .modal {animation:sf-modal-in 180ms ease-out both}
#modalHost .sf-modal-opening.sf-detail-modal .modal {animation:sf-detail-in 260ms ease-out both}
#modalHost .modal-backdrop.sf-modal-closing {animation:sf-backdrop-out 180ms ease-out both;pointer-events:none}
#modalHost .sf-modal-closing .modal {animation:sf-modal-out 180ms ease-out both;pointer-events:none}
#modalHost .sf-modal-closing.sf-detail-modal .modal {animation:sf-detail-out 200ms ease-out both}
@keyframes sf-backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes sf-backdrop-out{from{opacity:1}to{opacity:0}}
@keyframes sf-modal-in{from{opacity:0;transform:translate3d(0,8px,0) scale(.986)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes sf-modal-out{from{opacity:1;transform:translate3d(0,0,0) scale(1)}to{opacity:0;transform:translate3d(0,5px,0) scale(.99)}}
@keyframes sf-detail-in{from{opacity:0;transform:translate3d(0,12px,0) scale(.97)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes sf-detail-out{from{opacity:1;transform:translate3d(0,0,0) scale(1)}to{opacity:0;transform:translate3d(0,7px,0) scale(.98)}}

/* Settings accordion keeps its existing dimensions and rounded corners. */
.settings-accordion[open]:not(.sf-accordion-closing) .accordion-content{
  animation:sf-accordion-in 180ms ease-out both;
}
.settings-accordion.sf-accordion-closing .accordion-content{
  animation:sf-accordion-out 180ms ease-out both;
  pointer-events:none;
}
.settings-accordion.sf-accordion-closing>summary::after{transform:rotate(0deg)}
@keyframes sf-accordion-in{from{opacity:0;transform:translate3d(0,-5px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes sf-accordion-out{from{opacity:1;transform:translate3d(0,0,0)}to{opacity:0;transform:translate3d(0,-5px,0)}}

/* Do not animate wide blocks through the viewport on desktop. */
@media(min-width:960px) and (pointer:fine){
  :root{--sf-motion-enter:8px;--sf-motion-exit:-4px}
  @keyframes sf-screen-forward{from{opacity:0;transform:translate3d(8px,0,0)}to{opacity:1;transform:none}}
  @keyframes sf-screen-back{from{opacity:0;transform:translate3d(-8px,0,0)}to{opacity:1;transform:none}}
  @keyframes sf-view-new-forward{from{opacity:0;transform:translate3d(8px,0,0)}to{opacity:1;transform:none}}
  @keyframes sf-view-new-back{from{opacity:0;transform:translate3d(-8px,0,0)}to{opacity:1;transform:none}}
}
@media(prefers-reduced-motion:reduce){
  #content.sf-entering-forward,#content.sf-entering-back,
  #content.sf-training-entrance .active-banner,#content.sf-training-entrance .exercise-card:first-of-type,
  #modalHost .modal-backdrop,#modalHost .modal,
  .settings-accordion .accordion-content{animation:none!important;transition:none!important}
  .sf-nav-track{transition:none!important}
}
/* 800–959 px portrait tablets: keep the rest bar above the fixed bottom nav. */
@media(min-width:800px) and (max-width:959px) and (min-height:600px) and (orientation:portrait){
  .rest-bar{
    left:calc(18px + env(safe-area-inset-left,0px));
    right:calc(18px + env(safe-area-inset-right,0px));
    width:auto;max-width:none;margin:0;
    bottom:calc(98px + env(safe-area-inset-bottom,0px));
  }
  body.rest-active #content{padding-bottom:calc(155px + env(safe-area-inset-bottom,0px))!important}
}