.hero-enter > * {
  opacity: 0;
  transform: translateY(0.5rem);
  animation: hero-enter var(--dur-long) var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}

.scroll-progress {
  position: fixed;
  z-index: 1000;
  inset: 0 auto auto 0;
  width: 0;
  height: 2px;
  background: var(--gradient-accent);
  box-shadow: 0 0 1.1rem var(--color-blue-glow);
}

.hero-enter > :nth-child(1),
.reveal-item:nth-child(1) {
  --i: 0;
}
.hero-enter > :nth-child(2),
.reveal-item:nth-child(2) {
  --i: 1;
}
.hero-enter > :nth-child(3),
.reveal-item:nth-child(3) {
  --i: 2;
}
.hero-enter > :nth-child(4),
.reveal-item:nth-child(4) {
  --i: 3;
}

@keyframes hero-enter {
  to {
    opacity: 1;
    transform: none;
  }
}

@media (hover: hover) and (pointer: fine) {
  .press-item:hover .press-item__title,
  .contact-card:hover strong,
  .service-row:hover h3 {
    color: var(--color-ink);
  }
}

@media (min-width: 40rem) {
  .reveal-item {
    opacity: 0;
    transform: translateY(0.5rem);
  }

  .reveal-item.is-visible {
    opacity: 1;
    transform: none;
    transition:
      opacity var(--dur-long) var(--ease-out),
      transform var(--dur-long) var(--ease-out);
    transition-delay: calc(var(--i, 0) * 60ms);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .hero-enter > *,
  .reveal-item {
    opacity: 1;
    transform: none;
  }
}