@media (prefers-reduced-motion: no-preference) {
  .reveal {
    animation: reveal-up .85s cubic-bezier(.2,.8,.2,1) both;
  }

  .floating-card {
    animation: float-card 5s ease-in-out infinite;
  }

  .category-card, .photo-card, .about-copy, .cta {
    animation: soft-in both;
    animation-timeline: view();
    animation-range: entry 5% cover 28%;
  }

  .site-header.is-scrolled {
    background: rgba(8,9,9,.86);
    transform: translateY(-2px);
  }
}

@keyframes reveal-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes float-card {
  0%, 100% { transform: translateY(0) rotate(.2deg); }
  50% { transform: translateY(-10px) rotate(-.3deg); }
}

@keyframes soft-in {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}