/* Motion and blue interaction indicators. Original design stays in site.css. */
.reading-progress {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  overflow: hidden;
  background: rgba(52, 150, 230, .15);
  pointer-events: none;
}

.site-header > .reading-progress {
  position: absolute;
  top: 100%;
}

.reading-progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left center;
}

.site-nav-link {
  position: relative;
}

.site-nav-link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 3px;
  height: 2px;
  border-radius: 1px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left center;
}

.site-nav-link:focus-visible::after {
  transform: scaleX(1);
}

@media (hover: hover) {
  .site-nav-link:hover::after { transform: scaleX(1); }
}

.roadmap-timeline.has-motion-progress .roadmap-quarter:not(:last-child)::after {
  content: "";
  position: absolute;
  left: -2px;
  top: 9px;
  bottom: -9px;
  width: 2px;
  background: var(--blue);
  transform: scaleY(var(--myrte-roadmap-progress, 0));
  transform-origin: center top;
  pointer-events: none;
}

.roadmap-timeline.has-motion-progress .roadmap-quarter::before {
  z-index: 1;
}

.faq-item.is-faq-closing .faq-question::after {
  transform: rotate(0);
}

@media (prefers-reduced-motion: no-preference) {
  .hero h1 {
    animation: myrte-intro 700ms cubic-bezier(.22, 1, .36, 1) both;
  }

  .hero-sub {
    animation: myrte-intro 700ms 90ms cubic-bezier(.22, 1, .36, 1) both;
  }

  .hero > .hero-cta {
    animation: myrte-intro 700ms 180ms cubic-bezier(.22, 1, .36, 1) both;
  }

  .btn {
    transition: opacity 200ms ease, transform 250ms ease,
      background 200ms ease, border-color 200ms ease, color 200ms ease;
  }

  .site-nav-link, .tech-pill {
    transition-duration: 250ms;
  }

  .site-nav-link::after {
    transition: transform 240ms cubic-bezier(.22, 1, .36, 1);
  }

  /* Independent translate composes with the existing hover scale. */
  .feature-row-image {
    translate: 0 var(--myrte-parallax-y, 0px);
  }

  .roadmap-quarter.is-motion-reached::before {
    animation: myrte-roadmap-dot 450ms cubic-bezier(.22, 1, .36, 1);
  }

  .pricing-card, .feature-row-image {
    transition: transform 350ms cubic-bezier(.22, 1, .36, 1);
  }

  .video-play-btn {
    transition: background 250ms ease, transform 300ms ease;
  }

  .faq-item[open] .faq-answer {
    animation: myrte-answer 300ms ease-out;
  }

  @media (hover: hover) and (pointer: fine) {
    .btn:not([aria-disabled="true"]):not(:disabled):hover {
      transform: translateY(-2px);
    }

    .btn:not([aria-disabled="true"]):not(:disabled):active {
      transform: translateY(0) scale(.98);
    }

    .pricing-card:hover {
      transform: translateY(-4px);
    }

    .feature-row-image:hover {
      transform: scale(1.012);
    }
  }
}

@keyframes myrte-intro {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

@keyframes myrte-answer {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

@keyframes myrte-roadmap-dot {
  from { opacity: .4; transform: scale(.7); }
  to { opacity: 1; transform: none; }
}

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

  .hero h1, .hero-sub, .hero > .hero-cta, .faq-answer {
    animation: none;
  }

  .btn, .site-nav-link, .site-nav-link::after, .tech-pill, .pricing-card, .feature-row-image,
  .video-play-btn, .faq-question, .faq-question::after {
    transition: none;
  }
}