/* Screenshot sequences and scrolls in a phone frame (frame itself: app-media.css).
   Loaded after app-media.css on the home pages. Classes only: the site's CSP blocks style attributes.

   SEQUENCE  A few screenshots that cross-fade one after another (3.2 s each, 0.5 s fade). Put the frames
   in order inside one .app-screen and give it the class for its frame count, 2 to 6:

     <div class="app-screen app-seq app-seq-4" role="img" aria-label="What the sequence shows">
       <img src="..." alt="" width="600" height="1177" loading="lazy"> ... four images ...
     </div>

   Mark the frame that tells the story best with data-still: that is the one shown when animations are off
   (reduced motion). The first frame shows until the animation starts.
   The keyframes below are for N frames in a cycle of N x 3.2 s; to add a 7-frame sequence, copy one and
   change the numbers: frame fully visible from fade/cycle to 1/N of the cycle, gone at 1/N + fade/cycle.

   SCROLL  A tall screenshot that scrolls slowly down and back inside the screen (keyframes: app-media.css).
   --end is how far it travels: -(image height - screen height) / image height.

   PHONE   Screenshots from the Android phone are 600 x 1177, so their frame is .app-phone--b.
*/

.app-phone.app-phone--b .app-screen { aspect-ratio: 600 / 1177; }

.app-seq img { opacity: 0; }
.app-seq img:first-child { opacity: 1; }

.app-seq-2 img { animation: app-seq-2 6.4s linear infinite; }
@keyframes app-seq-2 { 0% { opacity: 0 } 7.81%, 50.0% { opacity: 1 } 57.81%, 100% { opacity: 0 } }
.app-seq-3 img { animation: app-seq-3 9.6s linear infinite; }
@keyframes app-seq-3 { 0% { opacity: 0 } 5.21%, 33.33% { opacity: 1 } 38.54%, 100% { opacity: 0 } }
.app-seq-4 img { animation: app-seq-4 12.8s linear infinite; }
@keyframes app-seq-4 { 0% { opacity: 0 } 3.91%, 25.0% { opacity: 1 } 28.91%, 100% { opacity: 0 } }
.app-seq-5 img { animation: app-seq-5 16.0s linear infinite; }
@keyframes app-seq-5 { 0% { opacity: 0 } 3.12%, 20.0% { opacity: 1 } 23.12%, 100% { opacity: 0 } }
.app-seq-6 img { animation: app-seq-6 19.2s linear infinite; }
@keyframes app-seq-6 { 0% { opacity: 0 } 2.6%, 16.67% { opacity: 1 } 19.27%, 100% { opacity: 0 } }

.app-seq img:nth-child(2) { animation-delay: 3.2s; }
.app-seq img:nth-child(3) { animation-delay: 6.4s; }
.app-seq img:nth-child(4) { animation-delay: 9.6s; }
.app-seq img:nth-child(5) { animation-delay: 12.8s; }
.app-seq img:nth-child(6) { animation-delay: 16.0s; }

.app-s-form img { --end: -62.24%; animation-duration: 26s; }   /* form-scroll.webp, 600 x 3117 */
.app-s-ledger img { --end: -54.92%; animation-duration: 28s; }   /* ledger-scroll.webp, 600 x 2611 */

/* Reduced motion: every sequence stays on its first frame, every scroll stays at the top. */
@media (prefers-reduced-motion: reduce) {
  .app-seq img { animation: none !important; }
  .app-seq img:first-child { opacity: 0; }
  .app-seq img[data-still] { opacity: 1; }   /* each sequence marks the frame that tells the story best */
}