.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%); }
}

@ keyframes fade {
  to { opacity: 0; filter: blur(2rem); }
}
h2 {
  animation: fade;
  animation-timeline: view();
  animation-range: cover 40% cover 85%;
}

@ keyframes unclip {
  to { clip-path: ellipse(220% 200% at 50% 175%); }
}

.content {
  clip-path: ellipse(220% 200% at 50% 300%);
  animation: unclip both linear;
  animation-timeline: --article;
  animation-range: entry;
}

@ keyframes scale-down {
  0% { scale: 5; }
}
img {
  animation: scale-down;
  animation-timeline: --article; 
  animation-range: entry;
}