@keyframes float {
  0%,100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(0,-14px,0); }
}

@keyframes shimmer {
  0% { background-position: 180% 0,0 0; }
  100% { background-position: -40% 0,0 0; }
}

@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(22,199,154,.35); }
  70% { box-shadow: 0 0 0 14px rgba(22,199,154,0); }
  100% { box-shadow: 0 0 0 0 rgba(22,199,154,0); }
}

@keyframes slide-in-up {
  from {
    opacity: 0;
    transform: translate3d(0,28px,0);
  }
  to {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

@keyframes slide-in-side {
  from {
    opacity: 0;
    transform: translate3d(18px,0,0);
  }
  to {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

@keyframes parallax-drift {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-10px) scale(1.01); }
}

.anim-float { animation: float 7s ease-in-out infinite; }
.anim-pulse { animation: pulse-ring 2.4s ease-out infinite; }
.anim-slide-in { animation: slide-in-up .7s var(--ease, ease) both; }
.anim-slide-side { animation: slide-in-side .65s var(--ease, ease) both; }
.anim-parallax { animation: parallax-drift 10s ease-in-out infinite; }

.stagger-list > * {
  opacity: 0;
  transform: translate3d(0,18px,0);
}

.stagger-list.is-visible > * {
  opacity: 1;
  transform: translate3d(0,0,0);
  transition: opacity .5s ease, transform .5s ease;
}

.stagger-list.is-visible > *:nth-child(1) { transition-delay: .04s; }
.stagger-list.is-visible > *:nth-child(2) { transition-delay: .09s; }
.stagger-list.is-visible > *:nth-child(3) { transition-delay: .14s; }
.stagger-list.is-visible > *:nth-child(4) { transition-delay: .19s; }
.stagger-list.is-visible > *:nth-child(5) { transition-delay: .24s; }
.stagger-list.is-visible > *:nth-child(6) { transition-delay: .29s; }
.stagger-list.is-visible > *:nth-child(7) { transition-delay: .34s; }
.stagger-list.is-visible > *:nth-child(8) { transition-delay: .39s; }

.io-fade,
.io-lift,
.io-scale {
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity .55s ease, transform .55s ease;
}

.io-fade { transform: translateY(0); }
.io-lift { transform: translateY(22px); }
.io-scale { transform: scale(.96); }

.is-visible.io-fade,
.is-visible.io-lift,
.is-visible.io-scale {
  opacity: 1;
  transform: none;
}

@supports (animation-timeline: view()) {
  .scroll-reveal {
    animation: slide-in-up linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 38%;
  }

  .scroll-shimmer {
    animation: shimmer linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 100%;
  }
}