/* ==========================================================================
   Nicolas Emmenegger — motion
   One idea only: content settles into place as you reach it. Nothing loops,
   nothing follows the cursor, nothing competes with the reading.
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--t-slow) var(--ease-out) var(--reveal-delay, 0ms),
    transform var(--t-slow) var(--ease-out) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

.reveal--left  { transform: translate3d(-22px, 0, 0); }
.reveal--right { transform: translate3d(22px, 0, 0); }
.reveal--still { transform: none; }

/* The hero sets itself on load rather than on scroll — it is already in view.
   Each element comes in a beat after the one above it, the way a player walks
   on before they play. */
.hero-inner > * {
  opacity: 0;
  transform: translateY(14px);
  animation: rise var(--t-slow) var(--ease-out) forwards;
}
.hero-inner > *:nth-child(1) { animation-delay: 120ms; }
.hero-inner > *:nth-child(2) { animation-delay: 240ms; }
.hero-inner > *:nth-child(3) { animation-delay: 360ms; }
.hero-inner > *:nth-child(4) { animation-delay: 480ms; }
.hero-inner > *:nth-child(5) { animation-delay: 600ms; }
.hero-inner > *:nth-child(6) { animation-delay: 720ms; }

@keyframes rise {
  to { opacity: 1; transform: none; }
}

/* Anyone who has asked their system for less motion gets none of it: every
   element is simply where it belongs, immediately. */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--left,
  .reveal--right {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero-inner > * {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .card:hover { transform: none; }
}