/* Scroll scenes (scroll-scenes.js, story-roadmap.js). Every final state is the
   authored page: only the journey between states moves. */
@media (prefers-reduced-motion: no-preference) {
  /* A headline whose words land one after another, Two26-style. */
  .settle-ready .settle-word {
    display: inline-block;
    transform-origin: 50% 85%;
    transform: translateY(calc(var(--settle, 0) * 0.42em))
      rotate(calc(var(--settle, 0) * var(--tilt, 0deg))) scale(calc(1 + var(--settle, 0) * 0.07));
    opacity: calc(1 - var(--settle, 0) * 0.65);
    color: color-mix(in srgb, #2eb839 calc(var(--settle, 0) * 100%), currentColor);
  }

  /* Foton turns into place as the panel it lives in opens. */
  .scenes-ready .signup-foton {
    rotate: calc((1 - var(--panel, 1)) * -42deg);
  }
  .scenes-ready .automation-foton {
    transform-origin: 40% 90%;
    rotate: calc((1 - var(--panel, 1)) * -12deg);
  }

  /* When the route reaches a scene, the title's marker is drawn. Scrolling
     back above the arrival undoes it. */
  .roadmap-ready .story-card h3 em {
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: background-size 1000ms 120ms cubic-bezier(0.65, 0, 0.35, 1);
  }
  .roadmap-ready .story-card.is-reached h3 em {
    background-size: 100% 100%;
  }

  /* Step numbers spring in when reached; connectors draw toward the next. */
  .scenes-ready .beta-steps .step-number,
  .scenes-ready .automation-step-number {
    transition:
      scale 850ms var(--motion-pop),
      opacity 250ms ease;
  }
  .scenes-ready .beta-steps article:not(.is-reached) .step-number,
  .scenes-ready .automation-steps > li:not(.is-reached) .automation-step-number {
    scale: 0.2;
    opacity: 0;
  }
  .scenes-ready .beta-steps article:not(:last-child)::after {
    clip-path: inset(0 calc((1 - var(--line, 1)) * 100%) 0 0);
  }
  .scenes-ready .automation-steps > li:not(:last-child)::before {
    clip-path: inset(0 0 calc((1 - var(--line, 1)) * 100%) 0);
  }

  /* FAQ rows rise in a short cascade instead of as one block. */
  .motion-ready .faq-list.reveal {
    opacity: 1;
    transform: none;
  }
  .motion-ready .faq-list > details {
    opacity: 0;
    translate: 0 24px;
    transition:
      opacity 600ms ease,
      translate 850ms var(--motion-out);
  }
  .motion-ready .faq-list.is-visible > details {
    opacity: 1;
    translate: none;
  }
  .motion-ready .faq-list > details:nth-child(2) {
    transition-delay: 70ms;
  }
  .motion-ready .faq-list > details:nth-child(3) {
    transition-delay: 140ms;
  }
  .motion-ready .faq-list > details:nth-child(4) {
    transition-delay: 210ms;
  }
  .motion-ready .faq-list > details:nth-child(n + 5) {
    transition-delay: 280ms;
  }
  .motion-ready .faq-list.motion-instant > details {
    opacity: 1;
    translate: none;
    transition: none;
  }

  /* The footer's full stop lands like the photon in the intro. Relative
     offsets move the inline dot without changing the wordmark's shaping. */
  .footer.is-landed .brand-dot {
    position: relative;
    animation: foton-dot-land 1000ms 140ms var(--motion-pop) backwards;
  }
  .footer.is-landed .brand img {
    animation: foton-hop 900ms var(--motion-pop) backwards;
  }
  @media (hover: hover) and (pointer: fine) {
    .header .brand:hover .brand-dot {
      position: relative;
      animation: foton-dot-hop 620ms;
    }
  }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 600px) {
  .scenes-ready .beta-steps article:not(:last-child)::after {
    clip-path: inset(0 0 calc((1 - var(--line, 1)) * 100%) 0);
  }
}
@keyframes foton-dot-land {
  from {
    top: -1.4em;
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  to {
    top: 0;
    opacity: 1;
  }
}
@keyframes foton-hop {
  from {
    translate: 0 9px;
    rotate: -12deg;
  }
  to {
    translate: 0 0;
    rotate: 0deg;
  }
}
@keyframes foton-dot-hop {
  0% {
    top: 0;
    animation-timing-function: cubic-bezier(0.2, 0.6, 0.35, 1);
  }
  42% {
    top: -0.42em;
    animation-timing-function: cubic-bezier(0.55, 0, 0.75, 0.3);
  }
  100% {
    top: 0;
  }
}