/* ==========================================================================
   App-preview marquee — embedded on the Features page between the stats and
   the "Everything you need to train with intent." section.
   Phones are isolated <iframe>s (app-ui/*.html) so their CSS never collides
   with perform.css. All selectors are prefixed .appshow* for the same reason.
   ========================================================================== */

.appshow {
  padding-block: clamp(2.25rem, 4.5vw, 3.5rem) clamp(1rem, 2.5vw, 2rem);
  overflow: hidden;
}

.appshow__head {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-bottom: clamp(1.2rem, 2.5vw, 1.8rem);
}

/* one button, centered below the gallery */
.appshow__foot {
  display: flex; justify-content: center;
  margin-top: clamp(1.4rem, 2.6vw, 2rem);
}

/* one button: toggle the whole gallery between light & dark */
.appshow__toggle {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.7rem 1.2rem; font: inherit; font-weight: 700; font-size: 0.92rem;
  color: #fff; background: var(--blue, #1f7ce8); cursor: pointer; border: 0;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  transition: transform 0.25s var(--ease, ease), filter 0.25s var(--ease, ease);
}
.appshow__toggle:hover { transform: translateY(-2px); filter: brightness(1.06); }
.appshow__toggle:active { transform: translateY(0); }
.appshow__toggle svg { width: 17px; height: 17px; display: block; }
.appshow__toggle .ico-sun { display: none; }
.appshow__toggle[data-mode="light"] .ico-moon { display: none; }
.appshow__toggle[data-mode="light"] .ico-sun { display: block; }

/* full-bleed scrolling viewport with soft edge fades */
.appshow__viewport {
  width: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.appshow__track {
  display: flex; gap: 18px; width: max-content; will-change: transform;
  animation: appshow-scroll 75s linear infinite;
}
/* pause on hover only on real pointer devices — on touchscreens a tap can
   "stick" :hover and freeze the marquee */
@media (hover: hover) {
  .appshow__viewport:hover .appshow__track { animation-play-state: paused; }
}

.appshow__phone {
  /* frame hugs the scaled 19.5:9 device (≈218×472 at this width) */
  flex: none; width: 234px; height: 488px; border: 0; background: transparent;
  pointer-events: none;            /* a display, not interactive */
}

/* content slides left → the gallery scrolls rightward through the screens;
   the track holds two identical copies, so -50% loops seamlessly. */
@keyframes appshow-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* The auto-scroll is this section's whole point, so keep it running even when
   the OS requests reduced motion. This re-asserts the animation over
   perform.css's global `* { animation-duration: 0.001ms !important }` reset —
   which is the usual reason the gallery looks frozen on phones that have
   "Reduce Motion" turned on. */
@media (prefers-reduced-motion: reduce) {
  .appshow__track {
    animation-name: appshow-scroll !important;
    animation-duration: 75s !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
    animation-play-state: running !important;
  }
}

@media (max-width: 620px) {
  .appshow__phone { width: 210px; height: 438px; }
  .appshow__track { gap: 14px; }
}