[data-smart-nav][data-sticky="true"] {
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  box-shadow:0 4px 12px -4px rgba(0,0,0,.12);
  transition:transform 200ms ease;
  will-change:transform;
}

[data-smart-nav][data-sticky="true"][data-size-ready="true"] {
  transition:
    transform 200ms ease,
    padding 160ms ease,
    font-size 160ms ease;
}

[data-smart-nav][data-sticky="true"][data-state="hidden"] {
  transform:translateY(-100%);
}

[data-smart-nav][data-sticky="true"][data-state="visible"] {
  transform:translateY(0);
}

[data-smart-nav][data-sticky="true"].nav--compact {
  font-size:16px;
  padding-top:7px;
  padding-bottom:9px;
}

@media (prefers-reduced-motion:reduce) {
  [data-smart-nav][data-sticky="true"],
  [data-smart-nav][data-sticky="true"][data-size-ready="true"] {
    transition:none;
  }
  [data-smart-nav][data-sticky="true"] .logo img {
    transition:none;
  }
}