/* Page-wide reveal language — v13
   Typography, controls and surfaces float in on separate beats. `translate`
   is used instead of `transform` so existing hover, Hero and window motion
   continue to compose without being reset. */

.motion-enabled .reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.motion-enabled .motion-reveal {
  --motion-distance: 28px;
  opacity: 0;
  translate: 0 var(--motion-distance);
  filter: blur(3px);
  transition-property: opacity, translate, filter;
  transition-duration: .72s, .86s, .72s;
  transition-timing-function: ease, cubic-bezier(.16,.84,.44,1), ease;
  transition-delay: min(calc(var(--motion-order, 0) * var(--motion-step, 70ms)), 720ms);
  will-change: opacity, translate, filter;
}

.motion-enabled .motion-reveal:is(.step-showcase,.model-panel,.product-card) {
  --motion-distance: 42px;
}

.motion-enabled .motion-reveal:is(.news-product-demo,.countdown-info,.countdown span,.subscribe-button,.model-links>a,.cta-inner>*) {
  --motion-distance: 22px;
}

.motion-enabled .motion-group.is-motion-visible .motion-reveal {
  opacity: 1;
  translate: 0 0;
  filter: blur(0);
}

/* The two 02 cards already own the same 60px rise in news-motion.css. Their
   contents use this system, starting after each card begins to settle. */
.motion-enabled .news .motion-reveal {
  transition-delay: min(calc(160ms + var(--motion-order, 0) * var(--motion-step, 70ms)), 720ms);
}

/* Header is quicker and shallower so navigation is ready almost immediately. */
.motion-enabled .site-header .motion-reveal {
  --motion-distance: 12px;
  filter: blur(1.5px);
  transition-duration: .5s, .62s, .5s;
}

@media (prefers-reduced-motion: reduce) {
  .motion-enabled .motion-reveal,
  .motion-enabled .motion-group.is-motion-visible .motion-reveal {
    opacity: 1;
    translate: 0 0;
    filter: none;
    transition: none;
  }
}