.search {
    animation: shrink;
    animation-timeline: scroll();
    animation-range: 0 calc(var(--header-height) * 0.5);
}
@keyframes shrink {
    to { width: calc(100% - var(--button-size)); }
}

header {
      animation: shadow;
      animation-timeline: scroll();
      animation-range:
          var(--header-height)
          calc(var(--header-height) * 1.5);
}
@keyframes shadow {
    to { box-shadow: 0 5px 10px hsl(0 0% 0%); }
}

<a href="#">Back to top</a>

html:focus-within {
    scroll-behavior: smooth;
}

:root {
  --magic-ease: linear( 0, 0.0039, 0.0157, 0.0352...);
}
label { container-type: size; }
label::after {
  translate: calc(var(--active) * (100cqi - 100%)) -50%;
  transition: translate 1s var(--magic-ease);
}
:checked ~ label { --active: 1; }