:root {
  --motion-duration-hero: 540ms;
  --motion-duration-reveal: 460ms;
  --motion-duration-stagger: 440ms;
  --motion-distance-hero: 0.875rem;
  --motion-distance-reveal: 0.75rem;
}

[data-reveal] {
  opacity: 1;
  transform: none;
}

html[data-motion-ready="true"] [data-reveal][data-reveal-state="pending"] {
  opacity: 0;
  transform: translateY(var(--motion-distance-reveal));
}

html[data-motion-ready="true"] [data-reveal][data-reveal-state="visible"] {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--motion-duration-reveal) var(--ease-standard),
    transform var(--motion-duration-reveal) var(--ease-standard);
}

html[data-motion-ready="true"] [data-motion-hero-item] {
  animation: motion-hero-enter var(--motion-duration-hero) var(--ease-standard) both;
  animation-delay: var(--motion-delay, 0ms);
}

html[data-motion-ready="true"] [data-motion-hero-visual] {
  animation: motion-hero-visual-enter 580ms var(--ease-standard) both;
  animation-delay: 140ms;
}

html[data-motion-ready="true"]
  [data-reveal-state="visible"]
  [data-motion-stagger-item] {
  animation: motion-stagger-enter var(--motion-duration-stagger) var(--ease-standard) both;
  animation-delay: var(--motion-delay, 0ms);
}

html[data-motion-ready="true"]
  .precifica-human[data-reveal][data-reveal-state="pending"],
html[data-motion-ready="true"]
  .precifica-human[data-reveal][data-reveal-state="visible"] {
  opacity: 1;
  transform: none;
  transition: none;
}

html[data-motion-ready="true"]
  .precifica-human[data-reveal-state="pending"]
  .precifica-human__copy {
  opacity: 0;
  transform: translateY(0.75rem);
}

html[data-motion-ready="true"]
  .precifica-human[data-reveal-state="pending"]
  .precifica-human__visual {
  opacity: 0;
  transform: translateX(0.75rem);
}

html[data-motion-ready="true"]
  .precifica-human[data-reveal-state="visible"]
  .precifica-human__copy {
  animation: motion-human-copy-enter 500ms var(--ease-standard) both;
}

html[data-motion-ready="true"]
  .precifica-human[data-reveal-state="visible"]
  .precifica-human__visual {
  animation: motion-human-visual-enter 560ms var(--ease-standard) 70ms both;
}

.precifica-page .precifica-calculator__tab::after {
  opacity: 0;
  transform: scaleX(0.35);
  transform-origin: center;
  transition:
    opacity var(--transition-base) var(--ease-standard),
    transform var(--transition-base) var(--ease-standard),
    background-color var(--transition-base) var(--ease-standard);
}

.precifica-page .precifica-calculator__tab[aria-selected="true"]::after {
  opacity: 1;
  transform: scaleX(1);
}

.precifica-page .precifica-calculator__tab > span {
  transition:
    color var(--transition-fast) var(--ease-standard),
    transform var(--transition-base) var(--ease-standard);
}

.precifica-page .precifica-calculator__tab[aria-selected="true"] > span {
  transform: translateY(-0.0625rem);
}

@keyframes motion-hero-enter {
  from {
    opacity: 0;
    transform: translateY(var(--motion-distance-hero));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes motion-hero-visual-enter {
  from {
    opacity: 0;
    transform: translateY(0.625rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes motion-stagger-enter {
  from {
    opacity: 0;
    transform: translateY(0.625rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes motion-human-copy-enter {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes motion-human-visual-enter {
  from {
    opacity: 0;
    transform: translateX(0.75rem);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal][data-reveal-state="pending"],
  [data-reveal][data-reveal-state="visible"],
  [data-motion-hero-item],
  [data-motion-hero-visual],
  [data-motion-stagger-item],
  .precifica-human__copy,
  .precifica-human__visual {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  .precifica-page .precifica-calculator__tab::after,
  .precifica-page .precifica-calculator__tab > span {
    transform: none !important;
    transition: none !important;
  }
}