/* App screenshots in a phone frame, with the two animations used on atanomous.com.
   Linked from the home pages (the "How it works" steps); add <link rel="stylesheet" href="/assets/css/app-media.css"> wherever else it's needed.
   Markup and file list: docs/APP-MEDIA.md. Classes only (the site's CSP blocks inline style attributes). */

.app-phone {
  --app-frame: #FFFFFF;        /* frame color; set to the site's palette where used */
  position: relative;
  flex: none;
  box-sizing: border-box;
  width: 230px;
  padding: 9px;
  border-radius: 38px;
  background: var(--app-frame);
  box-shadow: 0 30px 60px -20px rgba(5, 10, 22, .55);
}
.app-phone--sm { width: 190px; }
.app-tilt-l { transform: rotate(-6deg); }
.app-tilt-r { transform: rotate(5deg); }

/* The screen: every screenshot is 600 x 1164. */
.app-screen {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  aspect-ratio: 600 / 1164;
  background: #E2DDD2;
}
.app-screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Cross-fade: three screenshots in one screen, 4 s each, 12 s loop.
   .app-late starts 2 s later, so two phones side by side don't change at the same moment. */
.app-themes img { opacity: 0; animation: app-theme 12s ease-in-out infinite; }
.app-themes img:nth-child(1) { opacity: 1; animation-name: app-theme1; }
.app-themes img:nth-child(2) { animation-delay: 4s; }
.app-themes img:nth-child(3) { animation-delay: 8s; }
.app-late img { animation-delay: -2s; }
.app-late img:nth-child(2) { animation-delay: 2s; }
.app-late img:nth-child(3) { animation-delay: 6s; }
@keyframes app-theme  { 0% { opacity: 0 } 5%, 33% { opacity: 1 } 38%, 100% { opacity: 0 } }
@keyframes app-theme1 { 0%, 33% { opacity: 1 } 38%, 95% { opacity: 0 } 100% { opacity: 1 } }

/* Slow scroll: a tall full-page screenshot scrolls down inside the screen and back.
   --end is how far it travels: -(image height - screen height) / image height. */
.app-scroll img {
  bottom: auto;
  height: auto;
  animation: app-scrollimg 16s ease-in-out infinite alternate;
}
.app-s-chore img { --end: -61.1%; }                          /* new-chore.webp */
.app-s-kid img { --end: -51.5%; }                            /* kid-profile.webp */
.app-s-lib img { --end: -81.8%; animation-duration: 40s; }   /* library.webp */
@keyframes app-scrollimg { 0%, 12% { transform: translateY(0) } 88%, 100% { transform: translateY(var(--end)) } }

/* Loop video / film: full width of its container. */
.app-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 24px; background: #0F1B33; }

/* Phones: two side by side need to shrink. */
@media (max-width: 767px) {
  .app-phone { width: 42vw; max-width: 200px; }
  .app-video { aspect-ratio: 9 / 16; }
}

/* Respect "reduce motion": show the first screen, still. */
@media (prefers-reduced-motion: reduce) {
  .app-themes img, .app-scroll img { animation: none !important; }
}