/* The only three kinds of motion on the site: the film strip drifts, sections fade up once, device screens play back. Reduced motion stops all three. */
@keyframes strip-drift { to { transform: translateX(-50%); } } /* the track holds two copies, so half a track loops seamlessly */
.strip-track.is-looping { animation: strip-drift var(--strip-duration, 80s) linear infinite; } /* slow drift to the left, once the script has doubled the frames */
.film-strip:hover .strip-track, .film-strip.is-paused .strip-track { animation-play-state: paused; } /* stops on hover or touch */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); } /* waits below its place until seen (only when scripts run) */
.js .reveal.is-visible { opacity: 1; transform: none; } /* fades up once */
.js .reveal-late { transition-delay: 0.12s; } /* a second element follows the first */
.js .reveal.reveal-instant { transition: none; } /* after a menu jump: simply there, no fade */
@keyframes screen-scroll { /* a real page scrolls inside the device, pauses, and returns */
  0%, 14% { transform: translateY(0); } /* rest on the first screen */
  46%, 80% { transform: translateY(var(--scroll-end, -50%)); } /* glide down and hold */
  100% { transform: translateY(0); } /* back to the top */
}
.screen-scroll { animation: screen-scroll var(--playback-duration, 15s) ease-in-out infinite paused; will-change: transform; } /* waits until the device is on screen */
@keyframes app-screen { /* one app screen slides in, holds, slides out */
  0% { opacity: 0; transform: translateX(14%); } /* waiting off to the right */
  4%, 31% { opacity: 1; transform: none; } /* in place */
  35%, 100% { opacity: 0; transform: translateX(-10%); } /* gone to the left */
}
.app-sequence .app-screen { animation: app-screen 10.5s ease infinite paused both; } /* three screens share one 10.5 second loop */
.app-sequence .app-screen:nth-child(1) { animation-delay: -0.6s; } /* first screen already showing at rest */
.app-sequence .app-screen:nth-child(2) { animation-delay: -7.6s; } /* second screen follows */
.app-sequence .app-screen:nth-child(3) { animation-delay: -4.1s; } /* third screen last */
.is-playing .screen-scroll, .is-playing .app-screen { animation-play-state: running; } /* plays while on screen */
@media (prefers-reduced-motion: reduce) { /* visitors who asked for less motion */
  html { scroll-behavior: auto; } /* jump, no glide */
  .strip-track.is-looping { animation: none; } /* the band stands still */
  .film-strip { overflow-x: auto; } /* and can be swiped instead */
  .js .reveal { opacity: 1; transform: none; transition: none; } /* everything is simply there */
  .screen-scroll { animation: none; transform: translateY(var(--poster-offset, 0)); } /* a still of the most telling screen */
  .app-sequence .app-screen { animation: none; opacity: 0; } /* sequence off */
  .app-sequence .app-screen:first-child { opacity: 1; } /* only the first screen (Destinations on eSIMs5G) */
  .button:hover { transform: none; } /* no lift */
}