.hero-stage-tab,
.problem-card,
.cost-card,
.story-card,
.flow-card,
.journey-step,
.journey-media,
.adoption-step,
.final-conversion .button {
  transition: transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 260ms ease;
  will-change: transform;
}

.hero-stage-tab:hover { transform: translateY(-2px); }
:is(.problem-card, .cost-card, .story-card, .flow-card):hover { transform: translateY(-7px); }
.journey-step:hover { transform: translateX(0.35rem); }
.journey-step.is-active { transform: translateX(0.55rem); }
.final-conversion .button:hover { transform: translateY(-3px) scale(1.015); }

.motion-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.85em) rotateX(12deg);
  animation: commerce-word-in 720ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--word-index, 0) * 54ms + 90ms);
  transform-origin: left bottom;
}

.motion-ready [data-reveal] {
  opacity: 0;
  transform: translateY(2rem);
  transition: transform 760ms cubic-bezier(0.16, 1, 0.3, 1), opacity 560ms ease;
}

.motion-ready [data-reveal="left"] { transform: translateX(-2.5rem); }
.motion-ready [data-reveal="right"] { transform: translateX(2.5rem); }
.motion-ready [data-reveal="scale"] { transform: scale(0.94); }
.motion-ready [data-reveal].is-visible { opacity: 1; transform: translate(0) scale(1); }

.motion-ready [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: transform 650ms cubic-bezier(0.16, 1, 0.3, 1), opacity 500ms ease;
}

.motion-ready [data-reveal-group].is-visible > * { opacity: 1; transform: translateY(0); }
.motion-ready [data-reveal-group].is-visible > :nth-child(2) { transition-delay: 80ms; }
.motion-ready [data-reveal-group].is-visible > :nth-child(3) { transition-delay: 160ms; }
.motion-ready [data-reveal-group].is-visible > :nth-child(4) { transition-delay: 240ms; }

.journey-media.is-swapping { opacity: 0.28; transform: translateY(0.8rem) scale(0.975); }
.journey-media:not(.is-swapping) { opacity: 1; transform: translateY(0) scale(1); }

.hero-stage.is-swapping .stage-window-main .media-tint {
  opacity: 0.25;
  transform: perspective(1200px) translateY(0.7rem) scale(0.975);
}

.hero-stage:not(.is-swapping) .stage-window-main .media-tint {
  opacity: 1;
  transform: perspective(1200px) translateY(0) scale(1);
  transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1), opacity 240ms ease;
}

.adoption-step.is-active::before { animation: commerce-timeline-glow 1.8s ease-in-out infinite; }

.final-conversion::after {
  content: "";
  position: absolute;
  right: -5rem;
  bottom: -8rem;
  width: 18rem;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.26), transparent 68%);
  border-radius: 50%;
  opacity: 0.7;
  pointer-events: none;
  animation: commerce-orb-drift 8s ease-in-out infinite;
}

@keyframes commerce-word-in {
  to { opacity: 1; transform: translateY(0) rotateX(0); }
}

@keyframes commerce-timeline-glow {
  0%, 100% { opacity: 0.75; transform: translateX(-50%) scale(0.9); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.24); }
}

@keyframes commerce-orb-drift {
  0%, 100% { opacity: 0.55; transform: translate(0) scale(0.9); }
  50% { opacity: 0.82; transform: translate(-2rem, -1rem) scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .motion-word,
  .motion-ready [data-reveal],
  .motion-ready [data-reveal-group] > *,
  .journey-media,
  .hero-stage .stage-window-main .media-tint,
  .final-conversion::after {
    opacity: 1 !important;
    transform: none !important;
  }

  .adoption-step::before { opacity: 1 !important; transform: translateX(-50%) !important; }
}