@keyframes rise-blur {
  from { opacity: 0; transform: translateY(2rem); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes grow-down {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(2.5rem); }
  to { opacity: 1; transform: none; }
}
@keyframes flip-up {
  from { opacity: 0; transform: perspective(900px) translateY(3rem) rotateX(22deg); }
  to { opacity: 1; transform: none; }
}
@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(4rem); }
  to { opacity: 1; transform: none; }
}
@keyframes wipe-in {
  from { opacity: 0; clip-path: inset(-1rem 100% -1rem -1rem); transform: translateX(-2rem); }
  to { opacity: 1; clip-path: inset(-1rem); transform: none; }
}
@keyframes stamp {
  from { opacity: 0; transform: scale(0.55) rotate(-10deg); }
  60% { opacity: 1; transform: scale(1.06) rotate(2deg); }
  to { opacity: 1; transform: none; }
}
@keyframes glow-move {
  from { --glow: 130%; }
  to { --glow: 10%; }
}
@keyframes hero-drift {
  from { background-position-y: 0%; }
  to { background-position-y: 85%; }
}

@supports (animation-timeline: view()) {
  .section__head,
  .site-footer__grid > * {
    animation-name: rise;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
    animation-timeline: view();
    animation-range: entry 0% entry 70%;
  }

  .pillar,
  .offer {
    animation-timing-function: ease-out;
    animation-fill-mode: both;
    animation-timeline: view();
    animation-range: entry calc(var(--i, 0) * 12%) entry calc(70% + var(--i, 0) * 12%);
  }
  .pillar { animation-name: flip-up; }
  .offer { animation-name: slide-in-right; }
  .pillar:nth-child(2),
  .offer:nth-child(2) { --i: 1; }
  .pillar:nth-child(3) { --i: 2; }
}