/* Mobile case flow and compositor-safe finale. */

/* The finale orb starts at viewport size and only scales down. This avoids
   rasterizing the tiny wordmark dot at a very large scale in iOS WebKit. */
.finale-sticky {
  isolation: isolate;
}

.finale-orb {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: 100vmax;
  height: 100vmax;
  border-radius: 50%;
  background: var(--rust);
  contain: strict;
  backface-visibility: hidden;
  pointer-events: none;
  will-change: transform;
}

.finale.has-mobile-orb .end-logo .brand-dot {
  opacity: 0;
}

@media (max-width: 900px) and (pointer: coarse), (max-width: 760px) {
  /* A single study has no horizontal carousel motion. Keep it in document
     flow so dynamic browser toolbars cannot make a fixed svh offset overlap
     a two- or three-line description. */
  .home .cases {
    height: auto;
  }

  .home .cases-sticky {
    position: relative;
    top: auto;
    height: auto;
    min-height: 100svh;
    overflow: visible;
    padding: clamp(76px, 12svh, 104px) 0 clamp(58px, 9svh, 88px);
  }

  .home .cases-track {
    position: relative;
    top: auto;
    inset-inline-start: auto;
    display: block;
    margin-top: clamp(28px, 5svh, 48px);
    will-change: auto;
  }

  .home .case-card:only-child {
    width: 100%;
    margin-inline: 0;
    transform: none;
  }

  /* Keep the image edge-to-edge, but align every caption line with the
     20px gutter used by the section heading above it. */
  .home .case-card:only-child > small,
  .home .case-card:only-child > h3,
  .home .case-card:only-child > .case-summary {
    margin-inline: 20px;
  }

  .home .case-card figure {
    height: min(48svh, 480px);
    min-height: 260px;
  }

  .home .cases-counter {
    position: static;
    display: block;
    margin: 30px 20px 0;
    text-align: end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .finale-orb {
    display: none;
  }
}