/* Application orbit — stage, headline, orbit path and the full-bleed reveal backdrop. */
.ao { --ao-stage: #eaeaea; position: relative; isolation: isolate; width: 100%; }
/* grey backdrop that widens from "card with rounded corners" to full-bleed as the section scrolls in */
.ao__backdrop { position: absolute; inset: 0; z-index: 0; pointer-events: none; transform-origin: top; overflow: hidden; background: var(--ao-stage); }
.ao__content { position: relative; z-index: 1; isolation: isolate; min-height: 60vh; }
.ao__apps { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 100dvh; isolation: isolate; }
.ao__fade { position: absolute; inset: 0; z-index: 1; background: #000; opacity: 0; pointer-events: none; }
.ao__layer { position: relative; z-index: 2; }
.ao__stage { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; min-height: 100vh;
  overflow: clip; transform-origin: top; }
.ao__stage.is-filled { background: var(--ao-stage); }

.ao__text { position: relative; z-index: 50; display: flex; flex-direction: column; align-items: center; gap: 32px;
  width: 100%; max-width: 64rem; margin: 0 auto; pointer-events: none; }
.ao__title { text-align: center; }
.ao h2 { margin: 0; font: 400 4rem/1.05 'Inter', Arial, sans-serif; letter-spacing: -0.01em; color: #000; }
.ao__line2 { display: flex; justify-content: center; gap: 8px; }
.ao__words { position: relative; display: flex; flex-direction: column; align-items: flex-start; overflow: clip; min-height: 72px; }
.ao__word { position: absolute; white-space: nowrap; }
.ao__cta { pointer-events: auto; display: inline-flex; align-items: center; height: 37px; padding: 0 16px; border: 0; border-radius: 6px;
  background: #fff; color: #000; font: 400 14px/21px 'Inter', Arial, sans-serif; text-transform: capitalize; cursor: pointer; }

/* the orbit: an SVG ellipse the images travel along (GSAP MotionPath) */
.ao__orbit { position: absolute; top: 50%; left: 50%; transform: translate(-52%, -56%); width: min(75%, 1020px); aspect-ratio: 1020 / 572; }
.ao__orbit svg { display: block; width: 100%; height: 100%; pointer-events: none; user-select: none; }
.ao__item { position: absolute; top: 0; left: 0; width: 100px; height: 100px; will-change: transform; }
.ao__hover { width: 100%; height: 100%; transition: transform .3s ease-out; will-change: transform; }
.ao__img { width: 100%; height: 100%; overflow: clip; border-radius: 8px; }
.ao__img img { display: block; width: 100%; height: 100%; object-fit: cover; }

.ao__after { position: relative; z-index: 2; padding-bottom: 160px; background: var(--ao-stage); }


@media (max-width: 767px) {
  .ao h2 { font-size: 28px; line-height: 30px; }
  .ao__words { min-height: 30px; }
  .ao__stage { min-height: 90vh; }
  .ao__orbit { aspect-ratio: 3 / 5; transform: translate(-52%, calc(-56% + 40px)); }
  .ao__img { transform: scale(.6); }
}