/* Authoritative Studio facts reveal. Keeps the layout/hover system intact. */
html.metric-motion-ready .studio-metric {
  --studio-metric-stagger: 0ms;
  opacity: 0 !important;
  animation: none !important;
  transition: opacity 0.78s cubic-bezier(0.16, 1, 0.3, 1)
    var(--studio-metric-stagger) !important;
}

html.metric-motion-ready .studio-metric.is-metric-revealed {
  opacity: 1 !important;
}

/* Same reveal language as the Creative intelligence studio hero lines. */
html.metric-motion-ready .studio-metric__value {
  clip-path: inset(100% 0 0 0);
  opacity: 0;
  transform: translateY(72%) rotate(6deg);
  transform-origin: 0% 50% !important;
  will-change: clip-path, transform, opacity;
  animation: none !important;
}

/* Neutralize the previous per-character number animation without changing text. */
html.metric-motion-ready .studio-metric__value .studio-metric__char-clip,
html.metric-motion-ready .studio-metric__value .studio-metric__char-inner {
  display: inline !important;
  overflow: visible !important;
  clip-path: none !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

html.metric-motion-ready
  .studio-metric.is-metric-revealed
  .studio-metric__value {
  animation: heroTitleLineIn 1.08s cubic-bezier(0.16, 1, 0.3, 1)
    calc(var(--studio-metric-stagger) + 90ms) forwards !important;
}

html.metric-motion-ready .studio-metric__rule {
  opacity: 0 !important;
  transform: scaleX(0) !important;
  transform-origin: 0 50% !important;
  transition: none !important;
}

html.metric-motion-ready .studio-metric__copy {
  opacity: 0 !important;
  clip-path: inset(0 100% 0 0) !important;
  transform: translate3d(-18px, 0, 0) !important;
  will-change: clip-path, transform, opacity;
  transition: none !important;
}

html.metric-motion-ready
  .studio-metric.is-metric-revealed
  .studio-metric__rule {
  opacity: 1 !important;
  transform: scaleX(1) !important;
  transition:
    opacity 0.65s ease calc(var(--studio-metric-stagger) + 420ms),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1)
      calc(var(--studio-metric-stagger) + 420ms) !important;
}

html.metric-motion-ready
  .studio-metric.is-metric-revealed
  .studio-metric__copy {
  opacity: 1 !important;
  clip-path: inset(0 0 0 0) !important;
  transform: translate3d(0, 0, 0) !important;
  transition:
    opacity 0.65s ease calc(var(--studio-metric-stagger) + 520ms),
    clip-path 0.95s cubic-bezier(0.16, 1, 0.3, 1)
      calc(var(--studio-metric-stagger) + 520ms),
    transform 0.95s cubic-bezier(0.16, 1, 0.3, 1)
      calc(var(--studio-metric-stagger) + 520ms) !important;
}

@keyframes studioMetricHeroIn {
  from {
    clip-path: inset(100% 0 0 0);
    opacity: 0;
    transform: translate3d(0, 72%, 0) rotate(6deg);
  }

  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.metric-motion-ready .studio-metric,
  html.metric-motion-ready .studio-metric__value,
  html.metric-motion-ready .studio-metric__rule,
  html.metric-motion-ready .studio-metric__copy {
    clip-path: none !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}