/* motion.css — shared motion layer (Emil Kowalski vocabulary).
   Tokens + press feedback + menu/tab transitions + scroll reveals.
   Brand-neutral: colors/layout stay owned by each page. */
:root{
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);      /* strong ease-out for UI */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* on-screen movement */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);   /* iOS-like drawer curve */
}

/* --- Feedback: every pressable presses (100–160ms, transform only) --- */
.btn, .a-tab, .cta-btn, .strava-connect-btn, .flavor, .lb-more-wrap .btn,
.gate-half, .entrance, .ig-post, .leave-link, .h-burger{
  transition-property: transform, background, color, border-color, box-shadow, opacity;
  transition-duration: 160ms;
  transition-timing-function: var(--ease-out);
}
.btn:active, .a-tab:active, .cta-btn:active, .strava-connect-btn:active,
.flavor:active, .ig-post:active, .h-burger:active{
  transform: scale(0.97);
}

/* --- Mobile menu: enters/exits like a surface, not a teleport --- */
.h-mobile-menu{
  display:flex; flex-direction:column;
  position:absolute; top:100%; left:0; right:0;
  background:var(--bg); border-bottom:1px solid var(--line);
  padding:8px 28px 18px; box-shadow:0 16px 30px -20px rgba(30,25,20,0.28);
  visibility:hidden; opacity:0; transform:translateY(-8px); pointer-events:none;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out),
              visibility 0s linear 200ms;
}
.h-mobile-menu.open{
  visibility:visible; opacity:1; transform:none; pointer-events:auto;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}

/* --- Analytics tabs: bridge the panel swap (state indication, 220ms) --- */
.a-panel.active{ animation: mo-panel 220ms var(--ease-out); }
@keyframes mo-panel{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* --- Scroll reveals (marketing tier; JS tags .mo-rv, adds .mo-in) --- */
/* hiding is instant (no transition on .mo-rv), only the reveal is animated */
.mo-rv{ opacity:0; transform:translateY(46px); will-change:opacity, transform; }
.mo-rv.mo-in{ opacity:1; transform:none;
  transition: opacity 760ms var(--ease-out), transform 860ms var(--ease-out); }

/* --- Hover polish only for real pointers --- */
@media (hover: hover) and (pointer: fine){
  .prod:hover{ transform:translateY(-3px); box-shadow:0 20px 40px -26px rgba(25,21,18,0.3); }
}
.prod{ transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out); }

/* --- Reduced motion: gentler, not zero --- */
@media (prefers-reduced-motion: reduce){
  .mo-rv{ transform:none; }
  .mo-rv.mo-in{ transition: opacity 240ms ease; }
  .h-mobile-menu{ transform:none; }
  .a-panel.active{ animation: mo-panel-fade 180ms ease; }
  .btn:active, .a-tab:active, .cta-btn:active, .strava-connect-btn:active,
  .flavor:active, .ig-post:active, .h-burger:active{ transform:none; }
  .prod:hover{ transform:none; }
}
@keyframes mo-panel-fade{ from{ opacity:0; } to{ opacity:1; } }