html.motion-enabled [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(5px);
  transition:
    opacity .78s var(--ease),
    transform .78s var(--ease),
    filter .78s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform, filter;
}

html.motion-enabled [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

html.motion-enabled .page-hero [data-reveal]:not(.is-visible) {
  transform: translateY(18px);
}

html.motion-enabled .layer-detail {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .38s var(--ease), transform .38s var(--ease);
}

html.motion-enabled .layer-detail.is-active {
  opacity: 1;
  transform: translateY(0);
}

html.motion-enabled .motion-paused .hs-bar i,
html.motion-enabled .motion-paused .hs-mini-metric i,
html.motion-enabled .motion-paused .hs-progress-track i,
html.motion-enabled .motion-paused .hc-progress i,
html.motion-enabled .motion-paused .hc-overall-progress i {
  width: 0 !important;
  animation: none !important;
}

html.motion-enabled .motion-paused .hs-bar i::after {
  opacity: 0;
  animation: none !important;
}

html.motion-enabled .motion-visible .hs-pulse::before {
  animation: pulseSignal 1.8s infinite !important;
}

html.motion-enabled .motion-visible .hs-ring,
html.motion-enabled .motion-visible .hc-sleep-score,
html.motion-enabled .motion-visible .hc-progress-ring {
  animation: ringFloat 4s ease-in-out infinite !important;
}

html.motion-enabled .motion-visible .hs-bar i,
html.motion-enabled .motion-visible .hs-mini-metric i,
html.motion-enabled .motion-visible .hs-progress-track i {
  width: var(--w) !important;
  animation: barGrow 1.4s ease-out both !important;
}

html.motion-enabled .motion-visible .hs-bar i::after {
  opacity: 1;
  animation: shimmer 2.6s ease-in-out infinite !important;
}

html.motion-enabled .motion-visible .hc-progress i,
html.motion-enabled .motion-visible .hc-overall-progress i {
  width: var(--w) !important;
  animation: barGrow 1.4s ease-out both, shimmerBar 3s ease-in-out infinite !important;
}

html.motion-enabled .motion-visible .hc-flowline article::before {
  animation: hcScan 4s ease-in-out infinite !important;
}

html.motion-enabled .motion-visible .hc-scenario-grid article {
  animation: metricLift 4s ease-in-out infinite !important;
}

html.motion-enabled .motion-visible .hs-metric-strip article {
  animation: metricLift 4s ease-in-out infinite !important;
}

html.motion-enabled .motion-visible .hc-wave-bars i,
html.motion-enabled .motion-visible .hc-week-chart i {
  animation: hcBarPulse 3.2s ease-in-out infinite !important;
}

html.motion-enabled .card[data-reveal],
html.motion-enabled .outcome-card[data-reveal],
html.motion-enabled .hs-panel[data-reveal],
html.motion-enabled .hs-module-card[data-reveal],
html.motion-enabled .hs-dashboard-card[data-reveal],
html.motion-enabled .hs-system-panel[data-reveal],
html.motion-enabled .hc-card[data-reveal],
html.motion-enabled .hc-phone-card[data-reveal],
html.motion-enabled .feature-media[data-reveal] {
  transition-duration: .68s;
}

html.motion-enabled .card[data-reveal].is-visible,
html.motion-enabled .outcome-card[data-reveal].is-visible,
html.motion-enabled .hs-panel[data-reveal].is-visible,
html.motion-enabled .hs-module-card[data-reveal].is-visible,
html.motion-enabled .hs-dashboard-card[data-reveal].is-visible,
html.motion-enabled .hs-system-panel[data-reveal].is-visible,
html.motion-enabled .hc-card[data-reveal].is-visible,
html.motion-enabled .hc-phone-card[data-reveal].is-visible,
html.motion-enabled .feature-media[data-reveal].is-visible {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html.motion-enabled [data-reveal] {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  html.motion-enabled .motion-visible .hs-pulse::before,
  html.motion-enabled .motion-visible .hs-ring,
  html.motion-enabled .motion-visible .hs-bar i,
  html.motion-enabled .motion-visible .hs-bar i::after,
  html.motion-enabled .motion-visible .hs-mini-metric i,
  html.motion-enabled .motion-visible .hs-progress-track i,
  html.motion-enabled .motion-visible .hs-metric-strip article,
  html.motion-enabled .motion-visible .hc-flowline article::before,
  html.motion-enabled .motion-visible .hc-progress i,
  html.motion-enabled .motion-visible .hc-overall-progress i,
  html.motion-enabled .motion-visible .hc-scenario-grid article,
  html.motion-enabled .motion-visible .hc-wave-bars i,
  html.motion-enabled .motion-visible .hc-week-chart i,
  html.motion-enabled .motion-visible .hc-sleep-score,
  html.motion-enabled .motion-visible .hc-progress-ring {
    animation: none !important;
  }
}

@media (max-width: 720px) {
  html.motion-enabled [data-reveal] {
    transform: translateY(16px);
  }
}